Skip to main content

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:

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.