# stylelint-csstree-validator > Stylelint plugin to validate CSS syntax Latest version **4.0.0** (published 2026-03-09) · MIT license · 0 weekly downloads ## Install ```sh npm install stylelint-csstree-validator pnpm add stylelint-csstree-validator yarn add stylelint-csstree-validator bun add stylelint-csstree-validator ``` ## Health **Score 50/100 (C)** — status: stable. Positive: esm support; no vulnerabilities. Warnings: low downloads; no types. ## Facts | | | |---|---| | Version | 4.0.0 | | Published | 2026-03-09 | | First published | 2016-09-16 | | Weekly downloads | 0 | | License | MIT | | TypeScript types | none | | Module format | ESM + CommonJS | | Node | >=18.0.0 | | Dependencies | 1 | | Unpacked size | 55.7 KB | | Known vulnerabilities | 0 | | Install scripts | no | | Author | Roman Dvornov | | Maintainers | lahmatiy | | Keywords | stylelint-plugin, stylelint, csstree, css, validator, syntax | ## Links - npm: https://www.npmjs.com/package/stylelint-csstree-validator - Repository: https://github.com/csstree/stylelint-validator - Homepage: https://github.com/csstree/stylelint-validator#readme - Issues: https://github.com/csstree/stylelint-validator/issues - npm.io page: https://npm.io/package/stylelint-csstree-validator ## Dependencies (1) - [css-tree](https://npm.io/package/css-tree.md) ^3.2.1 ## Alternatives - [style-dictionary](https://npm.io/package/style-dictionary.md) — 2.0M weekly downloads - [postcss-merge-idents](https://npm.io/package/postcss-merge-idents.md) — 1.7M weekly downloads - [@fontsource/noto-sans](https://npm.io/package/@fontsource/noto-sans.md) — 93.0K weekly downloads - [uglifycss](https://npm.io/package/uglifycss.md) — 71.6K weekly downloads - [mat4-interpolate](https://npm.io/package/mat4-interpolate.md) — 23.3K weekly downloads ## Recent versions - 4.0.0 (latest) — 2026-03-09 - 3.1.0 — 2026-03-06 - 3.0.0 — 2023-06-13 - 2.1.0 — 2023-01-30 - 2.0.0 — 2021-12-14 - 1.9.0 — 2020-10-27 - 1.8.0 — 2020-01-24 - 1.7.0 — 2019-11-25 - 1.6.1 — 2019-10-07 - 1.6.0 — 2019-10-07 - 1.5.2 — 2019-07-11 - 1.5.1 — 2019-07-11 - 1.5.0 — 2019-07-11 - 1.4.1 — 2019-07-05 - 1.4.0 — 2019-07-03 - … 13 more at https://npm.io/package/stylelint-csstree-validator/versions ## README [![NPM version](https://img.shields.io/npm/v/stylelint-csstree-validator.svg)](https://www.npmjs.com/package/stylelint-csstree-validator) [![Build Status](https://github.com/csstree/stylelint-validator/actions/workflows/build.yml/badge.svg)](https://github.com/csstree/stylelint-validator/actions/workflows/build.yml) [![Coverage Status](https://coveralls.io/repos/github/csstree/stylelint-validator/badge.svg?branch=master)](https://coveralls.io/github/csstree/stylelint-validator?branch=master) # stylelint-csstree-validator A [stylelint](http://stylelint.io/) plugin based on [csstree](https://github.com/csstree/csstree) to examinate CSS syntax. It examinates at-rules and declaration values to match W3C specs and browsers extensions. It might be extended in future to validate other parts of CSS. > ⚠️ Warning ⚠️: The plugin is designed to validate CSS syntax only. However `stylelint` may be configured to use for other syntaxes like Less or Sass. In this case, the plugin avoids examination of expressions containing non-standard syntax, but you need specify which preprocessor is used with the [`syntaxExtensions`](#syntaxextensions) option. ## Install ``` $ npm install --save-dev stylelint-csstree-validator ``` ## Usage Setup plugin in [stylelint config](http://stylelint.io/user-guide/configuration/): ```json { "plugins": [ "stylelint-csstree-validator" ], "rules": { "csstree/validator": true } } ``` ### Options - [syntaxExtensions](#syntaxextensions) - [atrules](#atrules) - [properties](#properties) - [types](#types) - [ignore](#ignore) (deprecated) - [ignoreAtrules](#ignoreatrules) - [ignoreProperties](#ignoreproperties) - [ignoreValue](#ignorevalue) #### syntaxExtensions Type: `Array<'sass' | 'less'>` or `false` Default: `false` Since the plugin focuses on CSS syntax validation it warns on a syntax which is introducing by preprocessors like Less or Sass. The `syntaxExtensions` option allows to specify that some preprocessor's syntaxes are used for styles so the plugin may avoid warnings when met such a syntax. By default the plugin exams styles as pure CSS. To specify that a preprocessor's syntax is used, you must specify an array with the names of these extensions. Currently supported: - `sass` – declaration values with Sass syntax will be ignored as well as custom at-rules introduced by Saas (e.g. `@if`, `@else`, `@mixin` etc). For now Sass at-rules are allowed with any prelude, but it might be replaced for real syntax definitions in future releases - `less` – declaration values with Sass syntax will be ignored as well as `@plugin` at-rule introduced by Less Using both syntax extensions is also possible: ```json { "plugins": [ "stylelint-csstree-validator" ], "rules": { "csstree/validator": { "syntaxExtensions": ["sass", "less"] } } } ``` #### atrules Type: `Object`, `false` or `null` Default: `null` Using `false` value for the option disables at-rule validation. Otherwise the option is using for extending or altering at-rules syntax dictionary. An atrule definition consists of `prelude` and `descriptors`, both are optional. A `prelude` is a single expression that comes after at-rule name. A `descriptors` is a dictionary like [`properties`](#properties) option but for a specific at-rule. [CSS Value Definition Syntax](https://github.com/csstree/csstree/blob/master/docs/definition-syntax.md) is used to define value's syntax. If a definition starts with `|` it is adding to existing definition value if any. See [CSS syntax reference](https://csstree.github.io/docs/syntax/) for default definitions. The following example defines new atrule `@example` with a prelude and two descriptors (a descriptor is the same as a declaration but with no `!important` allowed): ```json { "plugins": [ "stylelint-csstree-validator" ], "rules": { "csstree/validator": { "atrules": { "example": { "prelude": "", "descriptors": { "foo": "", "bar": "" } } } } } } ``` #### properties Type: `Object` or `null` Default: `null` An option for extending or altering properties syntax dictionary. [CSS Value Definition Syntax](https://github.com/csstree/csstree/blob/master/docs/definition-syntax.md) is used to define value's syntax. If a definition starts with `|` it is adding to existing definition value if any. See [CSS syntax reference](https://csstree.github.io/docs/syntax/) for default definitions. The following example extends `width` and defines `size` properties: ```json { "plugins": [ "stylelint-csstree-validator" ], "rules": { "csstree/validator": { "properties": { "width": "| new-keyword | custom-function(, )", "size": "" } } } } ``` Using `` for a property definition is an alternative for `ignoreProperties` option. ```json { "plugins": [ "stylelint-csstree-validator" ], "rules": { "csstree/validator": { "properties": { "my-custom-property": "" } } } } ``` #### types Type: `Object` or `null` Default: `null` An option for extending or altering types syntax dictionary. Types are something like a preset which allow reuse a definition across other definitions. [CSS Value Definition Syntax](https://github.com/csstree/csstree/blob/master/docs/definition-syntax.md) is used to define value's syntax. If a definition starts with `|` it is adding to existing definition value if any. See [CSS syntax reference](https://csstree.github.io/docs/syntax/) for default definitions. The following example defines a new functional type `my-fn()` and extends `color` type: ```json { "plugins": [ "stylelint-csstree-validator" ], "rules": { "csstree/validator": { "properties": { "some-property": "" }, "types": { "color": "| darken(, [ | ])", "my-fn()": "my-fn( )" } } } } ``` #### ignore Works the same as [`ignoreProperties`](#ignoreproperties) but **deprecated**, use `ignoreProperties` instead. #### ignoreAtrules Type: `Array` or `false` Default: `false` Defines a list of at-rules names that should be ignored by the plugin. Ignorance for an at-rule means no validation for its name, prelude or descriptors. The names provided are used for full case-insensitive matching, i.e. a vendor prefix is mandatory and prefixed names should be provided as well if you need to ignore them. You can use [RegExp patterns](#regexp-patterns) in the list as well. ```json { "plugins": [ "stylelint-csstree-validator" ], "rules": { "csstree/validator": { "ignoreAtrules": ["custom-at-rule", "-webkit-keyframes"] } } } ``` #### ignoreProperties Type: `Array` or `false` Default: `false` Defines a list of property names that should be ignored by the plugin. The names provided are used for full case-insensitive matching, i.e. a vendor prefix is mandatory and prefixed names should be provided as well if you need to ignore them. ```json { "plugins": [ "stylelint-csstree-validator" ], "rules": { "csstree/validator": { "ignoreProperties": ["composes", "mask", "-webkit-mask"] } } } ``` In this example, plugin will not test declarations with a property name `composes`, `mask` or `-webkit-mask`, i.e. no warnings for these declarations would be raised. You can use [RegExp patterns](#regexp-patterns) in the list as well. #### ignoreValue Type: `RegExp` or `false` Default: `false` Defines a pattern for values that should be ignored by the validator. ```json { "plugins": [ "stylelint-csstree-validator" ], "rules": { "csstree/validator": { "ignoreValue": "^pattern$" } } } ``` For this example, the plugin will not report warnings for values which is matched the given pattern. However, warnings will still be reported for unknown properties. ## RegExp patterns In some cases a more general match patterns are needed instead of exact name matching. In such cases a RegExp pattern can be used. Since CSS names are an indentifiers which can't contain a special characters used for RegExp's, a distinguishing between a CSS name and RegExp is a trivial problem. When the plugin encounters a string in a ignore pattern list containing any character other than `a-z`, `A-Z`, `0-9` or `-`, it produces a RegExp using the construction `new RegExp('^(' + pattern + ')$', 'i')`. In other words, the pattern should be fully matched case-insensitive. To have a full control over a RegExp pattern, a regular RegExp instance or its stringified version (i.e. `"/pattern/flags?"`) can be used. - `"foo|bar"` transforms into `/^(foo|bar)$/i` - `"/foo|bar/i"` transforms into `/foo|bar/i` (note: it's not the same as previous RegExp, since not requires a full match with a name) - `/foo|bar/` used as is (note: with no `i` flag a matching will be case-sensitive which makes no sense in CSS) ## License MIT --- _Source: https://npm.io/package/stylelint-csstree-validator · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._