The linter supports current and future CSS syntax. This includes all standard CSS but also special features that use standard CSS syntactic structures, e.g. special at-rules, special properties, and special functions. Some CSS-like language extensions -- features that use non-standard syntactic structures -- are, as such, supported; however, since there are infinite processing possibilities, the linter cannot support everything.
You can run the linter before or after your CSS processors. Depending on which processors you use, each approach has caveats:
In both cases you can either turn off the incompatible linter rule, or stop using the incompatible plugin/processor. You could also approach plugin/processor authors and request alternate formatting options that will make their plugin/processor compatible with stylelint.
stylelint will automatically infer the syntax from the:
type
or lang
attribute on <style>
tags in HTML (and HTML-like)You can force a specific syntax, though. Both the CLI and the Node.js API expose a syntax
option.
syntax
flag like so: stylelint ... --syntax scss
.syntax
option like so: stylelint.lint({ syntax: "sugarss", ... })
.stylelint can also accept a custom PostCSS-compatible syntax when using the CLI or Node.js API. For custom syntaxes, use the custom-syntax
and customSyntax
options, respectively.
custom-syntax
flag like so: stylelint ... --custom-syntax custom-syntax-module
or stylelint ... --custom-syntax ./path/to/custom-syntax-module
.customSyntax
option like so: stylelint.lint({ customSyntax: path.join(process.cwd(), './path/to/custom-syntax-module') , ... })
.If you‘re using the linter as a PostCSS Plugin, you should use the special postcss-syntax
directly with PostCSS’s syntax
option like so:
var postcss = require("postcss") var syntax = require("postcss-syntax") postcss([ require("stylelint"), require("reporter") ]) .process(css, { from: "lib/app.css", syntax: syntax }) })