Custom syntaxes are PostCSS syntaxes written by the community to support other styling languages, e.g. SCSS, and containers, e.g. HTML, using the customSyntax
option.
To write one, familiarize yourself with PostCSS's how to write custom syntax guide. You can use one of the existing custom syntaxes from Awesome Stylelint for reference.
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.