- Notifications
You must be signed in to change notification settings - Fork7
Automatically switch PostCSS syntax based on file extensions
License
NotificationsYou must be signed in to change notification settings
gucong3000/postcss-syntax
Folders and files
| Name | Name | Last commit message | Last commit date | |
|---|---|---|---|---|
Repository files navigation
postcss-syntax can automatically switch the requiredPostCSS syntax by file extension/source
First thing's first, install the module:
npm install postcss-syntax --save-devIf 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
If you want support HTML (and HTML-like)/Markdown/CSS-in-JS file format, you need to install these module:
- CSS-in-JS:postcss-jsx
- HTML (and HTML-like):postcss-html
- Markdown:postcss-markdown
constpostcss=require('postcss');constsyntax=require('postcss-syntax')({rules:[{test:/\.(?:[sx]?html?|[sx]ht|vue|ux|php)$/i,extract:'html',},{test:/\.(?:markdown|md)$/i,extract:'markdown',},{test:/\.(?:[cm]?[jt]sx?|es\d*|pac)$/i,extract:'jsx',},{// custom language for file extensiontest:/\.postcss$/i,lang:'scss'},{// custom language for file extensiontest:/\.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:'./node_modules/postcss-less',// custom parser for SugarSSsugarss:require('sugarss'),// custom parser for custom languagecustom:require('postcss-custom-syntax'),});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});
About
Automatically switch PostCSS syntax based on file extensions
Topics
Resources
License
Stars
Watchers
Forks
Packages0
No packages published