postcss-html
Advanced tools
Package description
The postcss-html npm package is a tool that allows PostCSS to be used with HTML, including HTML-like syntaxes such as XML, XHTML, and HTML with inline styles. It enables developers to process styles within `<style>` tags or inline `style` attributes using PostCSS plugins.
Processing inline styles
This feature allows processing of inline styles within HTML. The code sample demonstrates how to use postcss-html to process a string containing HTML with a `<style>` tag.
const postcssHtml = require('postcss-html');
const result = postcssHtml.process('<style>h1 { color: red; }</style>', { /* options */ }).then(result => {
console.log(result.html);
});Processing styles in HTML-like files
This feature processes styles within HTML-like files. The code sample shows how to read an HTML file, process it with postcss-html, and then write the processed HTML to a new file.
const postcssHtml = require('postcss-html');
const fs = require('fs');
fs.readFile('index.html', (err, html) => {
if (err) throw err;
postcssHtml.process(html, { /* options */ }).then(result => {
fs.writeFile('index-processed.html', result.html, (err) => {
if (err) throw err;
console.log('The file has been saved!');
});
});
});The postcss-scss package is a syntax for PostCSS that allows you to work with SCSS (Sassy CSS) directly, without converting it to CSS first. It is similar to postcss-html in that it extends PostCSS's capabilities to non-standard CSS syntaxes, but it focuses on SCSS rather than HTML.
postcss-jsx is an npm package that enables PostCSS to parse and transform CSS within JSX files. It is similar to postcss-html as it extends PostCSS to handle CSS within a different context (JSX instead of HTML), allowing for linting and other transformations within JavaScript frameworks like React.
stylelint is a powerful, modern linter that helps you avoid errors and enforce conventions in your styles. It is similar to postcss-html in that it can be used to lint styles within HTML files, but it is primarily a standalone tool rather than a PostCSS plugin.
Readme
PostCSS syntax for parsing HTML (and HTML-like)
First thing's first, install the module:
npm install postcss-html --save-dev
If you want support SCSS/SASS/LESS/SugarSS syntax, you need to install the corresponding module.
const postcss = require('postcss');
const syntax = require('postcss-html')({
// syntax for parse scss (non-required options)
scss: require('postcss-scss'),
// syntax for parse less (non-required options)
less: require('postcss-less'),
// syntax for parse css blocks (non-required options)
css: require('postcss-safe-parser'),
});
postcss(plugins).process(source, { syntax: syntax }).then(function (result) {
// An alias for the result.css property. Use it with syntaxes that generate non-CSS output.
result.content
});
If you want support SCSS/SASS/LESS/SugarSS syntax, you need to install these module:
const options = {
rules: [
{
// custom language
test: /^postcss$/i,
lang: 'scss'
},
{
// custom language
test: /^customcss$/i,
lang: 'custom'
},
],
// custom parser for CSS (using `postcss-safe-parser`)
css: 'postcss-safe-parser',
// custom parser for SASS (PostCSS-compatible syntax.)
sass: require('postcss-sass'),
// custom parser for SCSS (by module name)
scss: 'postcss-scss',
// custom parser for LESS (by module path)
less: require.resolve('./node_modules/postcss-less'),
// custom parser for SugarSS
sugarss: require('sugarss'),
// custom parser for custom language
custom: require('postcss-custom-syntax'),
}
const syntax = require('postcss-html')(options);
PostCSS can be temporarily turned off by using special comments in your HTML. For example:
<html>
<body>
<!-- postcss-ignore -->
<a style="color: red;" description="style is not parsed."></a>
<a style="color: red;" description="style is parsed."></a>
<html>
<body>
<!-- postcss-disable -->
<a style="color: red;" description="style is not parsed."></a>
<a style="color: red;" description="style is not parsed."></a>
<!-- postcss-enable -->
<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:
{
"overrides": [
{
"files": ["*.html", "**/*.html"],
"customSyntax": "postcss-html"
}
]
}
You can use it more easily if you use an already configured sharable config.
{
+ "extends": [
+ "stylelint-config-html",
// If you are using Vue.
+ "stylelint-config-recommended-vue"
+ ],
- "overrides": [
- {
- "files": ["*.html", "**/*.html"],
- "customSyntax": "postcss-html"
- }
- ]
}
FAQs
PostCSS syntax for parsing HTML (and HTML-like)
The npm package postcss-html receives a total of 1,384,531 weekly downloads. As such, postcss-html popularity was classified as popular.
We found that postcss-html demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 4 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
At Node Congress, Socket CEO Feross Aboukhadijeh uncovers the darker aspects of open source, where applications that rely heavily on third-party dependencies can be exploited in supply chain attacks.
Research
Security News
The Socket Research team found this npm package includes code for collecting sensitive developer information, including your operating system username, Git username, and Git email.
Security News
OpenJS is warning of social engineering takeovers targeting open source projects after receiving a credible attempt on the foundation.