Package Exports

postcss-html
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 (and HTML-like)

Getting Started

First thing's first, install the module:

npm install postcss-html --save-dev

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

SCSS: postcss-scss
SASS: postcss-sass
LESS: postcss-less
SugarSS: sugarss
Stylus: postcss-styl

Use Cases

const postcss = require('postcss');
const syntax = require('postcss-html')({
    // syntax for parse scss (non-required options)
    scss: require('postcss-scss'),
    // syntax for parse less (non-required options)
    less: require('postcss-less'),
    // syntax for parse css blocks (non-required options)
    css: require('postcss-safe-parser'),
});
postcss(plugins).process(source, { syntax: syntax }).then(function (result) {
    // An alias for the result.css property. Use it with syntaxes that generate non-CSS output.
    result.content
});

If you want support SCSS/SASS/LESS/SugarSS syntax, you need to install these module:

SCSS: postcss-scss
SASS: postcss-sass
LESS: postcss-less
SugarSS: sugarss
Stylus: postcss-styl

Advanced Use Cases

Options

const options = {
    rules: [
        {
            // custom language
            test: /^postcss$/i,
            lang: 'scss'
        },
        {
            // custom language
            test: /^customcss$/i,
            lang: 'custom'
        },
    ],

    // custom parser for CSS (using `postcss-safe-parser`)
    css: 'postcss-safe-parser',
    // custom parser for SASS (PostCSS-compatible syntax.)
    sass: require('postcss-sass'),
    // custom parser for SCSS (by module name)
    scss: 'postcss-scss',
    // custom parser for LESS (by module path)
    less: require.resolve('./node_modules/postcss-less'),
    // custom parser for SugarSS
    sugarss: require('sugarss'),
    // custom parser for custom language
    custom: require('postcss-custom-syntax'),
}
const syntax = require('postcss-html')(options);

Turning PostCSS off from within your HTML

PostCSS can be temporarily turned off by using special comments in your HTML. For example:

<html>
<body>
<!-- postcss-disable -->
<a style="color: red;"></a>
<!-- postcss-enable -->

Linting with Stylelint

The main use case of this plugin is to apply linting with Stylelint to <style> tags and <div style="*"> property in HTML (and HTML-like).

You can use it by configuring your stylelint config as follows:

{
    "overrides": [
        {
            "files": ["*.html", "**/*.html"],
            "customSyntax": "postcss-html"
        }
    ]
}

You can use it more easily if you use an already configured sharable config.

{
+    "extends": [
+        "stylelint-config-html",
         // If you are using Vue.
+        "stylelint-config-recommended-vue"
+    ],
-    "overrides": [
-        {
-            "files": ["*.html", "**/*.html"],
-            "customSyntax": "postcss-html"
-        }
-    ]
}