pHTML CSS

pHTML CSS lets you transform inline CSS in HTML.

<style>p { margin-block: 0; }</style>

<p style="margin-block: 0;"></p>

<!-- becomes (when processed with postcss-preset-env) -->

<style>p { margin-left: 0; margin-right: 0; }</style>

<p style="margin-left: 0; margin-right: 0;"></p>

Usage

Transform HTML files directly from the command line:

npx phtml source.html output.html -p @phtml/css

Node

Add pHTML CSS to your project:

npm install @phtml/css --save-dev

Use pHTML CSS to process your HTML:

const phtmlCss = require('@phtml/css');

phtmlCss.process(YOUR_HTML /*, processOptions, pluginOptions */);

Or use it as a pHTML plugin:

const phtml = require('phtml');
const phtmlCss = require('@phtml/css');

phtml([
  phtmlCss(/* pluginOptions */)
]).process(YOUR_HTML /*, processOptions */);

pHTML CSS runs in all Node environments, with special instructions for:

| Node | CLI | Eleventy | Gulp | Grunt | | --- | --- | --- | --- | --- |

Options

plugins

The plugins option defines the plugins applied to PostCSS.

phtmlCss({
  plugins: require('postcss-preset-env')({
    stage: 0
  })
})

processOptions

The processOptions option defines the process options provided to PostCSS. By default, these options enable sourcemaps. You can disable them by passing in an empty object.

phtmlCss({
  processOptions: {}
})