Novelty Promotes Magicians

    postcss-html

    1.5.0 • Public • Published

    PostCSS HTML Syntax

    NPM license NPM version NPM downloads NPM downloads NPM downloads Build Status

    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.

    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:

    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-ignore -->
    <a style="color: red;" description="style is not parsed."></a>
    
    <a style="color: red;" description="style is parsed."></a>
    <html>
    <body>
    <!-- postcss-disable -->
    <a style="color: red;" description="style is not parsed."></a>
    <a style="color: red;" description="style is not parsed."></a>
    <!-- postcss-enable -->
    
    <a style="color: red;" description="style is parsed."></a>

    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"
    -        }
    -    ]
    }

    Install

    npm i postcss-html

    DownloadsWeekly Downloads

    1,670,035

    Version

    1.5.0

    License

    MIT

    Unpacked Size

    27.7 kB

    Total Files

    18

    Last publish

    Collaborators

    • jeddy3
    • ai
    • gucong
    • ota-meshi