Gathering detailed insights and metrics for postcss-html
Gathering detailed insights and metrics for postcss-html
Installations
npm install postcss-htmlDeveloper
Developer Guide
BETA
Module System
CommonJS
Min. Node Version
^12 || >=14
Typescript Support
Yes
Node Version
18.20.2
NPM Version
10.5.0
Statistics
28 Stars
212 Commits
3 Forks
4 Watching
11 Branches
4 Contributors
Updated on 21 Nov 2024
Languages
JavaScript (72.36%)
Vue (24%)
HTML (1.54%)
Svelte (1.29%)
Astro (0.8%)
Total Downloads
Cumulative downloads
Total Downloads
493,803,194
Last day
-4.8%
267,975
Compared to previous day
Last week
0.7%
1,416,302
Compared to previous week
Last month
10.1%
5,943,899
Compared to previous month
Last year
-17.3%
69,558,744
Compared to previous year
Daily Downloads
Weekly Downloads
Monthly Downloads
Yearly Downloads
Dependencies
4
Dev Dependencies
26
@ota-meshi/eslint-pluginautoprefixerchaicodecoveslinteslint-config-prettiereslint-plugin-eslint-commentseslint-plugin-json-schema-validatoreslint-plugin-jsonceslint-plugin-neslint-plugin-nodeeslint-plugin-node-dependencieseslint-plugin-prettiereslint-plugin-regexpeslint-plugin-vueeslint-plugin-ymlmochamocha-chai-jest-snapshotnycpostcss-lesspostcss-scsspostcss-stylprettierstylelintstylelint-config-standardsugarss
Versions
PostCSS HTML Syntax
PostCSS syntax for parsing HTML (and HTML-like)
Getting Started
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.
- SCSS: postcss-scss
- SASS: postcss-sass
- LESS: postcss-less
- SugarSS: sugarss
- Stylus: postcss-styl
Use Cases
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:
- SCSS: postcss-scss
- SASS: postcss-sass
- LESS: postcss-less
- SugarSS: sugarss
- Stylus: postcss-styl
Advanced Use Cases
Options
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);
Turning PostCSS off from within your HTML
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>
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:
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
- Info: project has a license file: LICENSE:0
- Info: FSF or OSI recognized license: MIT License: LICENSE:0
Reason
0 existing vulnerabilities detected
Reason
packaging workflow detected
Details
- Info: Project packages its releases by way of GitHub Actions.: .github/workflows/NpmPublish.yml:7
Reason
Found 1/18 approved changesets -- score normalized to 0
Reason
0 commit(s) and 0 issue activity found in the last 90 days -- score normalized to 0
Reason
detected GitHub workflow tokens with excessive permissions
Details
- Info: topLevel 'contents' permission set to 'read': .github/workflows/GHPages.yml:10
- Warn: no topLevel permission defined: .github/workflows/NodeCI.yml:1
- Warn: no topLevel permission defined: .github/workflows/NpmPublish.yml:1
- Warn: no topLevel permission defined: .github/workflows/format.yml:1
- Info: no jobLevel write permissions found
Reason
dependency not pinned by hash detected -- score normalized to 0
Details
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/GHPages.yml:27: update your workflow using https://app.stepsecurity.io/secureworkflow/ota-meshi/postcss-html/GHPages.yml/master?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/GHPages.yml:28: update your workflow using https://app.stepsecurity.io/secureworkflow/ota-meshi/postcss-html/GHPages.yml/master?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/GHPages.yml:36: update your workflow using https://app.stepsecurity.io/secureworkflow/ota-meshi/postcss-html/GHPages.yml/master?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/GHPages.yml:38: update your workflow using https://app.stepsecurity.io/secureworkflow/ota-meshi/postcss-html/GHPages.yml/master?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/GHPages.yml:43: update your workflow using https://app.stepsecurity.io/secureworkflow/ota-meshi/postcss-html/GHPages.yml/master?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/NodeCI.yml:13: update your workflow using https://app.stepsecurity.io/secureworkflow/ota-meshi/postcss-html/NodeCI.yml/master?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/NodeCI.yml:14: update your workflow using https://app.stepsecurity.io/secureworkflow/ota-meshi/postcss-html/NodeCI.yml/master?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/NodeCI.yml:27: update your workflow using https://app.stepsecurity.io/secureworkflow/ota-meshi/postcss-html/NodeCI.yml/master?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/NodeCI.yml:29: update your workflow using https://app.stepsecurity.io/secureworkflow/ota-meshi/postcss-html/NodeCI.yml/master?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/NpmPublish.yml:12: update your workflow using https://app.stepsecurity.io/secureworkflow/ota-meshi/postcss-html/NpmPublish.yml/master?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/NpmPublish.yml:14: update your workflow using https://app.stepsecurity.io/secureworkflow/ota-meshi/postcss-html/NpmPublish.yml/master?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/format.yml:12: update your workflow using https://app.stepsecurity.io/secureworkflow/ota-meshi/postcss-html/format.yml/master?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/format.yml:14: update your workflow using https://app.stepsecurity.io/secureworkflow/ota-meshi/postcss-html/format.yml/master?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/stale.yml:16: update your workflow using https://app.stepsecurity.io/secureworkflow/ota-meshi/postcss-html/stale.yml/master?enable=pin
- Warn: npmCommand not pinned by hash: .github/workflows/GHPages.yml:31
- Warn: npmCommand not pinned by hash: .github/workflows/GHPages.yml:33
- Warn: npmCommand not pinned by hash: .github/workflows/NodeCI.yml:19
- Warn: npmCommand not pinned by hash: .github/workflows/NodeCI.yml:34
- Warn: npmCommand not pinned by hash: .github/workflows/NpmPublish.yml:19
- Warn: npmCommand not pinned by hash: .github/workflows/format.yml:17
- Info: 0 out of 14 GitHub-owned GitHubAction dependencies pinned
- Info: 0 out of 6 npmCommand dependencies pinned
Reason
no effort to earn an OpenSSF best practices badge detected
Reason
security policy file not detected
Details
- Warn: no security policy file detected
- Warn: no security file to analyze
- Warn: no security file to analyze
- Warn: no security file to analyze
Reason
project is not fuzzed
Details
- Warn: no fuzzer integrations found
Reason
branch protection not enabled on development/release branches
Details
- Warn: branch protection not enabled for branch 'master'
Reason
SAST tool is not run on all commits -- score normalized to 0
Details
- Warn: 0 commits out of 24 are checked with a SAST tool
Score
3.8
/10
Last Scanned on 2024-11-18
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