PostCSS HTML Syntax

PostCSS Syntax for parsing HTML

vue component compatible

First thing's first, install the module:

npm install postcss-html --save-dev

If you want support SCSS/SASS/LESS/SugarSS syntaxh, you need to install the corresponding module.

• SCSS: PostCSS-SCSS
• SASS: PostCSS-SASS
• LESS: PostCSS-LESS
• SugarSS: SugarSS

var syntax = require('postcss-html');
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
});

The main use case of this plugin is to apply PostCSS transformations directly to HTML source code. For example, if you ship a theme written in style tag in HTML and need Autoprefixer to add the appropriate vendor prefixes to it; or you need to lint style source in HTML with a plugin such as Stylelint.

When passing a non-HTML file, this plugin will infer the syntax by file extension, and fallback by standard CSS syntax.

var syntax = require('postcss-html');
postcss(plugins).process(html, {
	syntax: syntax((opts, lang) => {
		if ('stylus' === lang) {
			// Custom syntax by attribute of <style> tag
			return require('postcss-stylus')
		} else if (/\.styl$/.test(opts.from)) {
			// Custom syntax by file extension
			return require('postcss-stylus')
		}
	})
}).then(function (result) {
	result.content
});