Package Exports

postcss-syntax
postcss-syntax/get-syntax
postcss-syntax/syntax

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (postcss-syntax) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

PostCSS Syntax

postcss-syntax can automatically switch the required PostCSS syntax by file extensions

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 = require('postcss');
const syntax = require('postcss-syntax')({
    processors: [
        {
            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: 'styled',
        },
        {
            // custom file extension
            test: /\.postcss$/i,
            lang: 'scss'
        },
        {
            // custom syntax engine
            test: /\.customcss$/i,
            lang: 'custom'
        },
    ],
    css: postcss,
    sass: require('postcss-sass'),
    scss: require('postcss-scss'),
    less: require('postcss-less'),
    sugarss: require('sugarss'),
    // custom syntax engine
    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
});