Gathering detailed insights and metrics for posthtml
Gathering detailed insights and metrics for posthtml
PostHTML is a tool to transform HTML/XML with JS plugins
Installations
npm install posthtmlDeveloper
Developer Guide
BETA
Module System
CommonJS
Min. Node Version
>=12.0.0
Typescript Support
Yes
Node Version
16.14.0
NPM Version
8.3.1
Statistics
2,940 Stars
629 Commits
116 Forks
50 Watching
15 Branches
57 Contributors
Updated on 25 Nov 2024
Languages
JavaScript (91.8%)
HTML (7.57%)
Shell (0.62%)
Total Downloads
Cumulative downloads
Total Downloads
178,631,126
Last day
6.6%
153,450
Compared to previous day
Last week
8.6%
849,929
Compared to previous week
Last month
20.6%
3,445,560
Compared to previous month
Last year
2%
35,287,043
Compared to previous year
Daily Downloads
Weekly Downloads
Monthly Downloads
Yearly Downloads
Versions
PostHTML 
PostHTML is a tool for transforming HTML/XML with JS plugins. PostHTML itself is very small. It includes only a HTML parser, a HTML node tree API and a node tree stringifier.
All HTML transformations are made by plugins. And these plugins are just small plain JS functions, which receive a HTML node tree, transform it, and return a modified tree.
For more detailed information about PostHTML in general take a look at the docs.
Dependencies
| Name | Status | Description |
|---|---|---|
| posthtml-parser |  | Parser HTML/XML to PostHTMLTree |
| posthtml-render |  | Render PostHTMLTree to HTML/XML |
Create to your project
1npm init posthtml
Install
1npm i -D posthtml
Usage
API
Sync
1import posthtml from 'posthtml' 2 3const html = ` 4 <component> 5 <title>Super Title</title> 6 <text>Awesome Text</text> 7 </component> 8` 9 10const result = posthtml() 11 .use(require('posthtml-custom-elements')()) 12 .process(html, { sync: true }) 13 .html 14 15console.log(result)
1<div class="component"> 2 <div class="title">Super Title</div> 3 <div class="text">Awesome Text</div> 4</div>
:warning: Async Plugins can't be used in sync mode and will throw an Error. It's recommended to use PostHTML asynchronously whenever possible.
Async
1import posthtml from 'posthtml' 2 3const html = ` 4 <html> 5 <body> 6 <p class="wow">OMG</p> 7 </body> 8 </html> 9` 10 11posthtml( 12 [ 13 require('posthtml-to-svg-tags')(), 14 require('posthtml-extend-attrs')({ 15 attrsTree: { 16 '.wow' : { 17 id: 'wow_id', 18 fill: '#4A83B4', 19 'fill-rule': 'evenodd', 20 'font-family': 'Verdana' 21 } 22 } 23 }) 24 ]) 25 .process(html/*, options */) 26 .then((result) => console.log(result.html))
1<svg xmlns="http://www.w3.org/2000/svg"> 2 <text 3 class="wow" 4 id="wow_id" 5 fill="#4A83B4" 6 fill-rule="evenodd" font-family="Verdana"> 7 OMG 8 </text> 9</svg>
Directives
1import posthtml from 'posthtml' 2 3const php = ` 4 <component> 5 <title><?php echo $title; ?></title> 6 <text><?php echo $article; ?></text> 7 </component> 8` 9 10const result = posthtml() 11 .use(require('posthtml-custom-elements')()) 12 .process(html, { 13 directives: [ 14 { name: '?php', start: '<', end: '>' } 15 ] 16 }) 17 .html 18 19console.log(result)
1<div class="component"> 2 <div class="title"><?php echo $title; ?></div> 3 <div class="text"><?php echo $article; ?></div> 4</div>
CLI
1npm i posthtml-cli
1"scripts": { 2 "posthtml": "posthtml -o output.html -i input.html -c config.json" 3}
1npm run posthtml
Gulp
1npm i -D gulp-posthtml
1import tap from 'gulp-tap' 2import posthtml from 'gulp-posthtml' 3import { task, src, dest } from 'gulp' 4 5task('html', () => { 6 let path 7 8 const plugins = [ require('posthtml-include')({ root: `${path}` }) ] 9 const options = {} 10 11 src('src/**/*.html') 12 .pipe(tap((file) => path = file.path)) 13 .pipe(posthtml(plugins, options)) 14 .pipe(dest('build/')) 15})
Check project-stub for an example with Gulp
Grunt
1npm i -D grunt-posthtml
1posthtml: { 2 options: { 3 use: [ 4 require('posthtml-doctype')({ doctype: 'HTML 5' }), 5 require('posthtml-include')({ root: './', encoding: 'utf-8' }) 6 ] 7 }, 8 build: { 9 files: [ 10 { 11 dot: true, 12 cwd: 'html/', 13 src: ['*.html'], 14 dest: 'tmp/', 15 expand: true, 16 } 17 ] 18 } 19}
Webpack
1npm i -D html-loader posthtml-loader
v1.x
webpack.config.js
1const config = { 2 module: { 3 loaders: [ 4 { 5 test: /\.html$/, 6 loader: 'html!posthtml' 7 } 8 ] 9 }, 10 posthtml: (ctx) => ({ 11 parser: require('posthtml-pug'), 12 plugins: [ 13 require('posthtml-bem')() 14 ] 15 }) 16} 17 18export default config
v2.x
webpack.config.js
1import { LoaderOptionsPlugin } from 'webpack' 2 3const config = { 4 module: { 5 rules: [ 6 { 7 test: /\.html$/, 8 use: [ 9 { 10 loader: 'html-loader', 11 options: { minimize: true } 12 }, 13 { 14 loader: 'posthtml-loader' 15 } 16 ] 17 } 18 ] 19 }, 20 plugins: [ 21 new LoaderOptionsPlugin({ 22 options: { 23 posthtml(ctx) { 24 return { 25 parser: require('posthtml-pug'), 26 plugins: [ 27 require('posthtml-bem')() 28 ] 29 } 30 } 31 } 32 }) 33 ] 34} 35 36export default config
Rollup
1$ npm i rollup-plugin-posthtml -D 2# or 3$ npm i rollup-plugin-posthtml-template -D
1import { join } from 'path'; 2 3import posthtml from 'rollup-plugin-posthtml-template'; 4// or 5// import posthtml from 'rollup-plugin-posthtml'; 6 7import sugarml from 'posthtml-sugarml'; // npm i posthtml-sugarml -D 8import include from 'posthtml-include'; // npm i posthtml-include -D 9 10export default { 11 entry: join(__dirname, 'main.js'), 12 dest: join(__dirname, 'bundle.js'), 13 format: 'iife', 14 plugins: [ 15 posthtml({ 16 parser: sugarml(), 17 plugins: [include()], 18 template: true // only rollup-plugin-posthtml-template 19 }) 20 ] 21};
Parser
1import pug from 'posthtml-pug' 2 3posthtml().process(html, { parser: pug(options) }).then((result) => result.html)
| Name | Status | Description |
|---|---|---|
| posthtml-pug |  | Pug Parser |
| sugarml |  | SugarML Parser |
Plugins
In case you want to develop your own plugin, we recommend using posthtml-plugin-starter to get started.
Maintainers
Ivan Demidov |
Ivan Voischev |
Contributors
Backers
Thank you to all our backers! 🙏 [Become a backer]
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
dependency not pinned by hash detected -- score normalized to 4
Details
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/nodejs.yml:23: update your workflow using https://app.stepsecurity.io/secureworkflow/posthtml/posthtml/nodejs.yml/master?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/nodejs.yml:26: update your workflow using https://app.stepsecurity.io/secureworkflow/posthtml/posthtml/nodejs.yml/master?enable=pin
- Warn: third-party GitHubAction not pinned by hash: .github/workflows/nodejs.yml:37: update your workflow using https://app.stepsecurity.io/secureworkflow/posthtml/posthtml/nodejs.yml/master?enable=pin
- Info: 0 out of 2 GitHub-owned GitHubAction dependencies pinned
- Info: 0 out of 1 third-party GitHubAction dependencies pinned
- Info: 1 out of 1 npmCommand dependencies pinned
Reason
Found 3/11 approved changesets -- score normalized to 2
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
- 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
SAST tool is not run on all commits -- score normalized to 0
Details
- Warn: 0 commits out of 26 are checked with a SAST tool
Reason
11 existing vulnerabilities detected
Details
- Warn: Project is vulnerable to: GHSA-grv7-fg5c-xmjg
- Warn: Project is vulnerable to: GHSA-3xgq-45jj-v275
- Warn: Project is vulnerable to: GHSA-4q6p-r6v2-jvc5
- Warn: Project is vulnerable to: GHSA-9c47-m6qq-7p4h
- Warn: Project is vulnerable to: GHSA-p6mc-m468-83gw
- Warn: Project is vulnerable to: GHSA-952p-6rrq-rcjv
- Warn: Project is vulnerable to: GHSA-f8q6-p94x-37v3
- Warn: Project is vulnerable to: GHSA-xvch-5gv4-984h
- Warn: Project is vulnerable to: GHSA-c2qf-rxjj-qqgw
- Warn: Project is vulnerable to: GHSA-mxhp-79qh-mcx6
- Warn: Project is vulnerable to: GHSA-j8xg-fqg3-53r7
Score
3.2
/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