- Notifications
You must be signed in to change notification settings - Fork4
PostCSS syntax for parsing HTML (and HTML-like)
License
ota-meshi/postcss-html
Folders and files
| Name | Name | Last commit message | Last commit date | |
|---|---|---|---|---|
Repository files navigation
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.
- SCSS:postcss-scss
- SASS:postcss-sass
- LESS:postcss-less
- SugarSS:sugarss
- Stylus:postcss-styl
constpostcss=require('postcss');constsyntax=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:
- SCSS:postcss-scss
- SASS:postcss-sass
- LESS:postcss-less
- SugarSS:sugarss
- Stylus:postcss-styl
constoptions={rules:[{// custom languagetest:/^postcss$/i,lang:'scss'},{// custom languagetest:/^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 SugarSSsugarss:require('sugarss'),// custom parser for custom languagecustom:require('postcss-custom-syntax'),}constsyntax=require('postcss-html')(options);
PostCSS can be temporarily turned off by using special comments in your HTML. For example:
<html><body><!-- postcss-ignore --><astyle="color: red;"description="style is not parsed."></a><astyle="color: red;"description="style is parsed."></a>
<html><body><!-- postcss-disable --><astyle="color: red;"description="style is not parsed."></a><astyle="color: red;"description="style is not parsed."></a><!-- postcss-enable --><astyle="color: red;"description="style is parsed."></a>
The main use case of this plugin is to apply linting withStylelint to<style> tags and<div> property in HTML (and HTML-like).
You can use it by configuring yourstylelint 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"- }- ]}About
PostCSS syntax for parsing HTML (and HTML-like)
Resources
License
Uh oh!
There was an error while loading.Please reload this page.
Stars
Watchers
Forks
Packages0
Uh oh!
There was an error while loading.Please reload this page.
Contributors6
Uh oh!
There was an error while loading.Please reload this page.