postcss-html
Advanced tools
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.
PostCSS syntax for parsing HTML (and HTML-like)
First thing's first, install the module:
npm install postcss-syntax 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:
See: postcss-syntax
PostCSS can be temporarily turned off by using special comments in your HTML. For example:
<html>
<body>
<!-- postcss-disable -->
<a style="color: red;"></a>
<!-- postcss-enable -->
The main use case of this plugin is to apply PostCSS transformations to <style> tags and <div style="*"> property in HTML (and HTML-like).
FAQs
PostCSS syntax for parsing HTML (and HTML-like)
The npm package postcss-html receives a total of 527,137 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
GitHub removed 27 malicious pull requests attempting to inject harmful code across multiple open source repositories, in another round of low-effort attacks.
Security News
RubyGems.org has added a new "maintainer" role that allows for publishing new versions of gems. This new permission type is aimed at improving security for gem owners and the service overall.
Security News
Node.js will be enforcing stricter semver-major PR policies a month before major releases to enhance stability and ensure reliable release candidates.