- Notifications
You must be signed in to change notification settings - Fork4
PostCSS syntax for parsing HTML (and HTML-like)
License
NotificationsYou must be signed in to change notification settings
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
Stars
Watchers
Forks
Packages0
No packages published