Installations
npm install posthtml-postcssDeveloper Guide
Typescript
No
Module System
ESM
Min. Node Version
>=18
Node Version
20.10.0
NPM Version
10.2.4
Score
72.1
Supply Chain
97
Quality
83
Maintenance
100
Vulnerability
100
License
Releases
Contributors
Unable to fetch Contributors
Languages
JavaScript (100%)
Love this project? Help keep it running — sponsor us today! 🚀
Developer
posthtml
Download Statistics
Total Downloads
271,553
Last Day
430
Last Week
2,667
Last Month
9,743
Last Year
40,928
GitHub Statistics
MIT License
50 Stars
189 Commits
15 Forks
6 Watchers
7 Branches
16 Contributors
Updated on Jan 24, 2025
Maintainers
Package Meta Information
Latest Version
1.0.3
Package Id
posthtml-postcss@1.0.3
Unpacked Size
6.62 kB
Size
2.82 kB
File Count
4
NPM Version
10.2.4
Node Version
20.10.0
Published on
Dec 16, 2024
Total Downloads
Cumulative downloads
Total Downloads
271,553
Last Day
-9.3%
430
Compared to previous day
Last Week
9.1%
2,667
Compared to previous week
Last Month
113.4%
9,743
Compared to previous month
Last Year
-16.9%
40,928
Compared to previous year
Daily Downloads
Weekly Downloads
Monthly Downloads
Yearly Downloads
Dependencies
2
Install
1npm i -D posthtml-postcss
Usage
1import {dirname} from 'node:path' 2import {readFileSync} from 'node:fs' 3import {fileURLToPath} from 'node:url' 4 5import posthtml from 'posthtml' 6import postcss from 'posthtml-postcss' 7 8const postcssPlugins = [] 9const postcssOptions = {} 10const filterType = /^text\/css$/ 11 12const __filename = fileURLToPath(import.meta.url) 13const __dirname = dirname(__filename) 14 15const filePath = `${__dirname}/index.html` 16const html = readFileSync(filePath, 'utf8') 17 18posthtml([ 19 postcss(postcssPlugins, postcssOptions, filterType) 20]) 21 .process(html, {from: filePath}) 22 .then((result) => console.log(result.html))
If you don't pass any arguments to posthtml-postcss, it will try to use your project's PostCSS configuration (see postcss-load-config).
Notice that we're setting the option from when calling process. posthtml-postcss forwards this to PostCSS, which is useful for syntax error messages. (postcss-cli and gulp-posthtml are setting from automatically.)
Example
1import posthtml from 'posthtml' 2import postcss from 'posthtml-postcss' 3import autoprefixer from 'autoprefixer' 4 5const postcssPlugins = [ 6 autoprefixer({ browsers: ['last 2 versions'] }) 7] 8const postcssOptions = {} 9const filterType = /^text\/css$/ 10 11const html = ` 12 <style>div { display: flex; }</style> 13 <div style="display: flex;">Text</div> 14` 15 16posthtml([ 17 postcss(postcssPlugins, postcssOptions, filterType) 18]) 19 .process(html) 20 .then(result => console.log(result.html))
Output:
1<style> 2 div { display: -webkit-flex;display: -ms-flexbox;display: flex; } 3</style> 4<div style="display: -webkit-flex;display: -ms-flexbox;display: flex;"> 5 Text 6</div>
No vulnerabilities found.
Reason
14 commit(s) and 0 issue activity found in the last 90 days -- score normalized to 10
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
4 existing vulnerabilities detected
Details
- Warn: Project is vulnerable to: GHSA-3xgq-45jj-v275
- Warn: Project is vulnerable to: GHSA-67mh-4wv8-2f99
- Warn: Project is vulnerable to: GHSA-vg6x-rcgg-rjx6
- Warn: Project is vulnerable to: GHSA-9crc-q9x8-hgqq
Reason
dependency not pinned by hash detected -- score normalized to 3
Details
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/nodejs.yml:20: update your workflow using https://app.stepsecurity.io/secureworkflow/posthtml/posthtml-postcss/nodejs.yml/master?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/nodejs.yml:22: update your workflow using https://app.stepsecurity.io/secureworkflow/posthtml/posthtml-postcss/nodejs.yml/master?enable=pin
- Info: 0 out of 2 GitHub-owned GitHubAction dependencies pinned
- Info: 1 out of 1 npmCommand dependencies pinned
Reason
Found 0/7 approved changesets -- score normalized to 0
Reason
detected GitHub workflow tokens with excessive permissions
Details
- Warn: no topLevel permission defined: .github/workflows/nodejs.yml:1
- Info: no jobLevel write permissions found
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
4.2
/10
Last Scanned on 2025-02-10
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 MoreOther packages similar to posthtml-postcss
posthtml-postcss-merge-longhand
Merge longhand inline CSS properties into shorthand with PostCSS.
posthtml-base-url
PostHTML plugin for prepending a base string to attribute values.
posthtml-postcss-modules
CSS Modules in html
posthtml-postcss-treeshaker
A `posthtml` plugin to treeshake class and id styling in `style` tag on html page using `postcss`