Writing custom syntaxes

Custom syntaxes are PostCSS syntaxes written by the community to support other styling languages and CSS-in-JS libraries using the customSyntax option.

To write one, familiarize yourself with PostCSS's how to write custom syntax guide.

Existing syntaxes that you can use for reference include:

• postcss-scss
• postcss-less
• postcss-html
• postcss-lit

The latter two use Document nodes, introduced in PostCSS 8.3 to support files with multiple roots.

After publishing your custom syntax, we recommend creating a shared-config that:

• extends the standard config
• bundles your custom syntax
• turns off any incompatible built-in rules

All within an overrides for the supported file extensions.

For example, if you're creating a custom syntax for a language called "foo" (which uses the file extension .foo), we recommend creating a shared-config called "stylelint-config-standard-foo" with the following content:

module.exports = {
  overrides: [
    {
      files: ["*.foo", "**/*.foo"],
      customSyntax: require("postcss-foo"),
      extends: ["stylelint-config-standard"],
      rules: {
        "at-rule-no-unknown": null
        // ..
      }
    }
  ]
};

We recommended requiring the custom syntax until PostCSS@7 is no longer in circulation.