PostCSS Syntax
postcss-syntax can automatically switch the required PostCSS syntax by file extension/source
Getting Started
First thing's first, install the module:
npm install postcss-syntax --save-dev
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
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
Use Cases
const postcss = ;const syntax = rules: test: /\.$/i extract: 'html' test: /\.$/i extract: 'markdown' test: /\.$/i extract: 'jsx' // custom language for file extension test: /\.postcss$/i lang: 'scss' // custom language for file extension test: /\.customcss$/i lang: 'custom' // custom parser for CSS (using `postcss-safe-parser`) css: 'postcss-safe-parser' // custom parser for SASS (PostCSS-compatible syntax.) 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 SugarSS sugarss: // custom parser for custom language custom: ;;