npmpackage.info

Gathering detailed insights and metrics for postcss-html

postcss-html

PostCSS syntax for parsing HTML (and HTML-like)

1.8.0

MIT

JavaScript

79.72 kB

524,060,674 3.9

Installations

npm install postcss-html

Developer Guide

BETA

Typescript

Yes

Module System

CommonJS

Min. Node Version

^12 || >=14

Node Version

20.18.1

NPM Version

10.8.2 Score

97.5

Supply Chain

100

Quality

82.6

Maintenance

100

Vulnerability

100

License

Pull Requests

Open

10

Total

123

Closed

20

Merged

93

Issues

Open

3

Total

17

Closed

14

Releases

v1.8.0

Updated on Jan 14, 2025

v1.7.0

Updated on May 08, 2024

v1.6.0

Updated on Jan 12, 2024

v1.5.0

Updated on Jul 07, 2022

v1.4.1

Updated on Apr 15, 2022

v1.4.0

Updated on Apr 15, 2022

View All 13 releases

Languages

JavaScript

Vue

HTML

Svelte

Astro

JavaScript (72.39%)

Vue (23.98%)

HTML (1.54%)

Svelte (1.29%)

Astro (0.8%)

Developer

ota-meshi

Download Statistics

Total Downloads

524,060,674

Last Day

257,900

Last Week

1,339,398

Last Month

5,955,524

Last Year

68,661,109

GitHub Statistics

MIT License

31 Stars

218 Commits

4 Forks

3 Watchers

11 Branches

5 Contributors

Updated on Mar 16, 2025

Bundle Size

196.15 kB

Minified

79.72 kB

Minified + Gzipped

Bundlephobia

Maintainers

View All 5 Contributors

Package Meta Information

Latest Version

1.8.0

Package Id

postcss-html@1.8.0

Unpacked Size

27.26 kB

Size

9.07 kB

File Count

NPM Version

10.8.2

Node Version

20.18.1

Published on

Jan 14, 2025

Total Downloads

Cumulative downloads

Total Downloads

524,060,674

Last Day

60.3%

257,900

Compared to previous day

Last Week

2.4%

1,339,398

Compared to previous week

Last Month

-8.2%

5,955,524

Compared to previous month

Last Year

-8.9%

68,661,109

Compared to previous year

Weekly Downloads

Monthly Downloads

Yearly Downloads

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.

10

Dangerous-Workflow

Determines if the project's GitHub Action workflows avoid dangerous patterns.

10

Binary-Artifacts

Determines if the project has generated executable (binary) artifacts in the source repository.

10

Vulnerabilities

Determines if the project has open, known unfixed vulnerabilities.

10

License

Determines if the project has defined a license.

10

Packaging

Determines if the project is published as a package that others can easily download, install, easily update, and uninstall.

1

Code-Review

Determines if the project requires human code review before pull requests (aka merge requests) are merged.

0

Maintained

Determines if the project is "actively maintained".

0

Pinned-Dependencies

Determines if the project has declared and pinned the dependencies of its build process.

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:34
Warn: npmCommand not pinned by hash: .github/workflows/NodeCI.yml:19
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

0

Token-Permissions

Determines if the project's workflows follow the principle of least privilege.

0

CII-Best-Practices

Determines if the project has an OpenSSF (formerly CII) Best Practices Badge.

0

Security-Policy

Determines if the project has published a security policy.

0

Fuzzing

Determines if the project uses fuzzing.

0

Branch-Protection

Determines if the default and release branches are protected with GitHub's branch protection settings.

0

SAST

Determines if the project uses static code analysis.

Score

3.9

/10

Last Scanned on 2025-04-28

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

Other packages similar to postcss-html

Other packages similar to postcss-html

postcss-html

Installations

Developer Guide

Yes

CommonJS

^12 || >=14

20.18.1

10.8.2

Score

Pull Requests

10

123

20

93

Issues

3

17

14

Releases

Languages

Developer

Download Statistics

GitHub Statistics

Bundle Size

196.15 kB

79.72 kB

Maintainers

Package Meta Information

Total Downloads

524,060,674

Weekly Downloads

Monthly Downloads

Yearly Downloads

Dependencies

Dev Dependencies

PostCSS HTML Syntax

Getting Started

Use Cases

Advanced Use Cases

Options

Turning PostCSS off from within your HTML

Linting with Stylelint

10

10

10

10

10

1

0

0

0

0

0

0

0

0

3.9

/10