postcss-syntax can automatically switch the required PostCSS syntax by file extension/source
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:
If you want support HTML (and HTML-like)/Markdown/CSS-in-JS file format, you need to install these module:
const postcss = require('postcss'); const syntax = require('postcss-syntax')({ rules: [ { test: /\.(?:[sx]?html?|[sx]ht|vue|ux|php)$/i, extract: 'html', }, { test: /\.(?:markdown|md)$/i, extract: 'markdown', }, { test: /\.(?:m?[jt]sx?|es\d*|pac)$/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: 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 SugarSS sugarss: require('sugarss'), // custom parser for custom language custom: 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 });