1.8.0 • Published 6 months ago

postcss-html v1.8.0

Weekly downloads
2,136,294
License
MIT
Repository
github
Last release
6 months ago

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"
-        }
-    ]
}
@hovey/stylelint-config-basic@frog-res/stylelint-config-vue-scssstylelint-common-config@clevercanyon/utilities-dev-npm@infinitebrahmanuniverse/nolb-postcss-h@longwoo/stylelint-config-standard@wfly/config-lint@cmsk/stylelint-config@redco/stylelint-config-hdred@everything-registry/sub-chunk-2460@ucstu/fast-nuxt-app@sacc/stylelint-config@beardeddudes-dev/postcss-config@trpl/stylelint-config-defaultfejn-stylelint-configvscode-lintvue-ellipsis-tooltip@ditojs/build@draymond37/code-style@cocoy/esp-config@cssc-ment/configs@condorhero/stylelint-config-css@condorhero/stylelint-config-vue@culur/stylelint-config@cyansalt/stylelint-config@cyansalt/stylelint-config-preset@convidera-team/stylelint-config-vue-convidera@denaro-config/stylelint-less@denaro-config/stylelint-scss@democrance/stylelint-config@cqfe/stylelint-config@pospal/prettier-config@pospal/stylelint-config@postanu/stylelint-config@rubixibuc/build-scripts@voltix/stylelint-configk100-linterluoshendfeuk-frontenddfeuk-frontend-manual@handsomewolf/scss-tools@chaos1ee/stylelint-config-vue@panmenghan/starter-uistylelint-config-zc93serega-nuxt-3stylelint-config-coinspacestylelint-config-coralloystylelint-config-crispstylelint-config-customstylelint-config-evionicastylelint-config-jazstylelint-config-mrtnvhstylelint-config-kerorostylelint-config-kswedbergstylelint-config-longingstylelint-config-longyingstylelint-config-muhqstylelint-config-myselfstylelint-stylusstylelint-config-akrcstylelint-config-bodstylelint-config-wyxstylelint-config-ygxystylelint-config-wikimediastylelint-config-vue-lintstylelint-config-silverwindstylelint-config-sissstylelint-config-smartstylelint-config-test121stylelint-config-taqustylelint-config-smartsstylelint-config-speedstylelint-config-standard-onestylelint-config-svelte-robolearystylelint-config-rchlss-config@aplus-frontend/stylelint-config@anthony-ju/stylelint-config@argo-design/argo-lint@atomspace/stylelint@aurorafe/stylelint-config-base@agro-expo/rules@agro-tech/rules@alexlit/config-stylelint@baberat/stylelint-config-beita@beardedtim/koa-renderer@beardeddudes/postcss-config@bfehub/stylelint-config-basic@blueking/bkmonitor-lint@blueking/bkui-lint@bn-digital/postcss-config@btrl/stylelint-config@captive/stylelint-config@byvue/lint-check@bushuai/stylelint-config@brightspace-ui/stylelint-config@brownsugar/stylelint-config@brownsugar/stylelint-config-scss@cedric-ruiu/stylelint-config@citruslime/config
1.8.0

6 months ago

1.7.0

1 year ago

1.6.0

1 year ago

1.5.0

3 years ago

1.4.1

3 years ago

1.4.0

3 years ago

1.3.1

3 years ago

1.3.0

4 years ago

1.2.0

4 years ago

1.1.1

4 years ago

1.1.0

4 years ago

1.0.2

4 years ago

1.0.1

4 years ago

1.0.0

4 years ago

1.0.0-alpha.4

4 years ago

1.0.0-alpha.3

4 years ago

1.0.0-alpha.2

4 years ago

0.36.0

7 years ago

0.34.0

7 years ago

0.33.0

7 years ago

0.32.0

7 years ago

0.31.0

7 years ago

0.30.0

7 years ago

0.28.0

7 years ago

0.27.0

7 years ago

0.26.0

7 years ago

0.25.0

7 years ago

0.24.0

7 years ago

0.23.7

7 years ago

0.23.6

7 years ago

0.23.5

7 years ago

0.23.4

7 years ago

0.23.3

7 years ago

0.23.2

7 years ago

0.23.1

7 years ago

0.23.0

7 years ago

0.22.0

7 years ago

0.21.0

7 years ago

0.20.1

7 years ago

0.20.0

7 years ago

0.19.0

7 years ago

0.18.0

7 years ago

0.17.0

7 years ago

0.16.0

7 years ago

0.15.0

7 years ago

0.14.0

7 years ago

0.13.0

7 years ago

0.12.0

8 years ago

0.11.0

8 years ago

0.10.0

8 years ago

0.9.0

8 years ago

0.8.0

8 years ago

0.7.0

8 years ago

0.6.0

8 years ago

0.5.0

8 years ago

0.4.0

8 years ago

0.3.0

8 years ago

0.2.0

8 years ago

0.1.0

8 years ago