Gathering detailed insights and metrics for postcss-html
Gathering detailed insights and metrics for postcss-html
Gathering detailed insights and metrics for postcss-html
Gathering detailed insights and metrics for postcss-html
PostCSS syntax for parsing HTML (and HTML-like)
npm install postcss-html
Typescript
Module System
Min. Node Version
Node Version
NPM Version
97.5
Supply Chain
100
Quality
81.9
Maintenance
100
Vulnerability
100
License
JavaScript (72.39%)
Vue (23.98%)
HTML (1.54%)
Svelte (1.29%)
Astro (0.8%)
Total Downloads
528,800,316
Last Day
60,288
Last Week
1,376,982
Last Month
6,079,040
Last Year
68,985,734
MIT License
32 Stars
218 Commits
4 Forks
3 Watchers
11 Branches
5 Contributors
Updated on Jun 26, 2025
Minified
Minified + Gzipped
Latest Version
1.8.0
Package Id
postcss-html@1.8.0
Unpacked Size
27.26 kB
Size
9.07 kB
File Count
19
NPM Version
10.8.2
Node Version
20.18.1
Published on
Jan 14, 2025
Cumulative downloads
Total Downloads
Last Day
-12.3%
60,288
Compared to previous day
Last Week
-11.1%
1,376,982
Compared to previous week
Last Month
-0.6%
6,079,040
Compared to previous month
Last Year
-7%
68,985,734
Compared to previous year
4
25
PostCSS syntax for parsing HTML (and HTML-like)
First thing's first, install the module:
1npm install postcss-html --save-dev
If you want support SCSS/SASS/LESS/SugarSS syntax, you need to install the corresponding module.
1const postcss = require('postcss'); 2const syntax = require('postcss-html')({ 3 // syntax for parse scss (non-required options) 4 scss: require('postcss-scss'), 5 // syntax for parse less (non-required options) 6 less: require('postcss-less'), 7 // syntax for parse css blocks (non-required options) 8 css: require('postcss-safe-parser'), 9}); 10postcss(plugins).process(source, { syntax: syntax }).then(function (result) { 11 // An alias for the result.css property. Use it with syntaxes that generate non-CSS output. 12 result.content 13});
If you want support SCSS/SASS/LESS/SugarSS syntax, you need to install these module:
1const options = { 2 rules: [ 3 { 4 // custom language 5 test: /^postcss$/i, 6 lang: 'scss' 7 }, 8 { 9 // custom language 10 test: /^customcss$/i, 11 lang: 'custom' 12 }, 13 ], 14 15 // custom parser for CSS (using `postcss-safe-parser`) 16 css: 'postcss-safe-parser', 17 // custom parser for SASS (PostCSS-compatible syntax.) 18 sass: require('postcss-sass'), 19 // custom parser for SCSS (by module name) 20 scss: 'postcss-scss', 21 // custom parser for LESS (by module path) 22 less: require.resolve('./node_modules/postcss-less'), 23 // custom parser for SugarSS 24 sugarss: require('sugarss'), 25 // custom parser for custom language 26 custom: require('postcss-custom-syntax'), 27} 28const syntax = require('postcss-html')(options);
PostCSS can be temporarily turned off by using special comments in your HTML. For example:
1<html> 2<body> 3<!-- postcss-ignore --> 4<a style="color: red;" description="style is not parsed."></a> 5 6<a style="color: red;" description="style is parsed."></a>
1<html> 2<body> 3<!-- postcss-disable --> 4<a style="color: red;" description="style is not parsed."></a> 5<a style="color: red;" description="style is not parsed."></a> 6<!-- postcss-enable --> 7 8<a style="color: red;" description="style is parsed."></a>
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:
1{ 2 "overrides": [ 3 { 4 "files": ["*.html", "**/*.html"], 5 "customSyntax": "postcss-html" 6 } 7 ] 8}
You can use it more easily if you use an already configured sharable config.
1{ 2+ "extends": [ 3+ "stylelint-config-html", 4 // If you are using Vue. 5+ "stylelint-config-recommended-vue" 6+ ], 7- "overrides": [ 8- { 9- "files": ["*.html", "**/*.html"], 10- "customSyntax": "postcss-html" 11- } 12- ] 13}
No vulnerabilities found.
Reason
no dangerous workflow patterns detected
Reason
no binaries found in the repo
Reason
license file detected
Details
Reason
0 existing vulnerabilities detected
Reason
packaging workflow detected
Details
Reason
Found 2/20 approved changesets -- score normalized to 1
Reason
0 commit(s) and 0 issue activity found in the last 90 days -- score normalized to 0
Reason
no effort to earn an OpenSSF best practices badge detected
Reason
dependency not pinned by hash detected -- score normalized to 0
Details
Reason
security policy file not detected
Details
Reason
detected GitHub workflow tokens with excessive permissions
Details
Reason
project is not fuzzed
Details
Reason
branch protection not enabled on development/release branches
Details
Reason
SAST tool is not run on all commits -- score normalized to 0
Details
Score
Last Scanned on 2025-06-23
The Open Source Security Foundation is a cross-industry collaboration to improve the security of open source software (OSS). The Scorecard provides security health metrics for open source projects.
Learn More