Skip to content
Transform inline CSS in HTML
JavaScript HTML
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
src
test
.editorconfig
.gitignore
.rollup.js
.tape.js
.travis.yml
CHANGELOG.md
CONTRIBUTING.md
INSTALL.md
LICENSE.md
README.md
package.json

README.md

pHTML CSS pHTML

NPM Version Build Status Support Chat

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: {}
})
You can’t perform that action at this time.