Package Exports

postcss-html
postcss-html/lib/html-parser
postcss-html/lib/stringify

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (postcss-html) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

PostCSS HTML Syntax

PostCSS Syntax for parsing HTML

Getting Started

First thing's first, install the module:

npm install postcss-html --save-dev

If you want support SCSS/SASS/LESS/SugarSS syntax in HTML, you need to install the corresponding module.

SCSS: PostCSS-SCSS
SASS: PostCSS-SASS
LESS: PostCSS-LESS
SugarSS: SugarSS

Use Cases

Style Transformations

The main use case of this plugin is to apply PostCSS transformations directly to HTML source code. For example, if you ship a theme written in style tag in HTML and need Autoprefixer to add the appropriate vendor prefixes to it; or you need to lint style source in HTML with a plugin such as Stylelint.

var syntax = require('postcss-html');
postcss(plugins).process(html, { syntax: syntax }).then(function (result) {
    result.content // HTML with transformations
});

custom Syntax for styles

Using map object configuration

var syntax = require('postcss-html');
postcss(plugins).process(html, {
    syntax: syntax({
        css: require('postcss'),
        less: require('postcss-less'),
        scss: require('postcss-scss'),
    })
}).then(function (result) {
    result.content // HTML with transformations
});

Using callback function configuration

var syntax = require('postcss-html');
postcss(plugins).process(html, {
    syntax: syntax((opts, lang) => {
        if (lang) {
            // `lang`: language of style tag in html.
            // style tag in HTML file
            if (lang === 'less') {
                // `<style type="text/less">`
                return require('postcss-scss')
            }
        } else if(opts.from) {
            // `opts`: See http://api.postcss.org/global.html#processOptions
            if (/\.less$/.test(opts.from)) {
                // `*.less` file
                return require('postcss-less')
            }
        }
    })
}).then(function (result) {
    result.content // HTML with transformations
});