{"id":13851518,"url":"https://github.com/csstree/stylelint-validator","last_synced_at":"2025-04-05T05:09:10.781Z","repository":{"id":45573892,"uuid":"68412606","full_name":"csstree/stylelint-validator","owner":"csstree","description":"Stylelint plugin to validate CSS syntax","archived":false,"fork":false,"pushed_at":"2024-02-09T12:00:23.000Z","size":591,"stargazers_count":93,"open_issues_count":12,"forks_count":11,"subscribers_count":7,"default_branch":"master","last_synced_at":"2024-10-30T08:18:21.659Z","etag":null,"topics":["css","csstree","less","lint","plugin","stylelint","stylelint-plugin","syntax","syntax-checker","validator","w3c"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/csstree.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2016-09-16T20:28:53.000Z","updated_at":"2024-08-21T08:50:24.000Z","dependencies_parsed_at":"2024-01-18T10:23:48.728Z","dependency_job_id":"b0c22c80-32f1-4795-9d2f-2c541fbe3207","html_url":"https://github.com/csstree/stylelint-validator","commit_stats":{"total_commits":115,"total_committers":4,"mean_commits":28.75,"dds":0.04347826086956519,"last_synced_commit":"c7fac4f85704fd740526f31ae6122c7d1edc7adb"},"previous_names":[],"tags_count":23,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/csstree%2Fstylelint-validator","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/csstree%2Fstylelint-validator/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/csstree%2Fstylelint-validator/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/csstree%2Fstylelint-validator/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/csstree","download_url":"https://codeload.github.com/csstree/stylelint-validator/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247093287,"owners_count":20882387,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["css","csstree","less","lint","plugin","stylelint","stylelint-plugin","syntax","syntax-checker","validator","w3c"],"created_at":"2024-08-04T22:00:34.797Z","updated_at":"2025-04-05T05:09:10.759Z","avatar_url":"https://github.com/csstree.png","language":"JavaScript","readme":"[![NPM version](https://img.shields.io/npm/v/stylelint-csstree-validator.svg)](https://www.npmjs.com/package/stylelint-csstree-validator)\n[![Build Status](https://github.com/csstree/stylelint-validator/actions/workflows/build.yml/badge.svg)](https://github.com/csstree/stylelint-validator/actions/workflows/build.yml)\n[![Coverage Status](https://coveralls.io/repos/github/csstree/stylelint-validator/badge.svg?branch=master)](https://coveralls.io/github/csstree/stylelint-validator?branch=master)\n\n# stylelint-csstree-validator\n\nA [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.\n\n\u003e ⚠️ 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.\n\n## Install\n\n```\n$ npm install --save-dev stylelint-csstree-validator\n```\n\n## Usage\n\nSetup plugin in [stylelint config](http://stylelint.io/user-guide/configuration/):\n\n```json\n{\n  \"plugins\": [\n    \"stylelint-csstree-validator\"\n  ],\n  \"rules\": {\n    \"csstree/validator\": true\n  }\n}\n```\n\n### Options\n\n- [syntaxExtensions](#syntaxextensions)\n- [atrules](#atrules)\n- [properties](#properties)\n- [types](#types)\n- [ignore](#ignore) (deprecated)\n- [ignoreAtrules](#ignoreatrules)\n- [ignoreProperties](#ignoreproperties)\n- [ignoreValue](#ignorevalue)\n\n#### syntaxExtensions\n\nType: `Array\u003c'sass' | 'less'\u003e` or `false`  \nDefault: `false`\n\nSince 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.\n\nBy 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:\n\n- `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\n- `less` – declaration values with Sass syntax will be ignored as well as `@plugin` at-rule introduced by Less\n\nUsing both syntax extensions is also possible:\n\n```json\n{\n  \"plugins\": [\n    \"stylelint-csstree-validator\"\n  ],\n  \"rules\": {\n    \"csstree/validator\": {\n      \"syntaxExtensions\": [\"sass\", \"less\"]\n    }\n  }\n}\n```\n\n#### atrules\n\nType: `Object`, `false` or `null`  \nDefault: `null`\n\nUsing `false` value for the option disables at-rule validation.\n\nOtherwise 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.\n\nThe 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):\n\n```json\n{\n  \"plugins\": [\n    \"stylelint-csstree-validator\"\n  ],\n  \"rules\": {\n    \"csstree/validator\": {\n      \"atrules\": {\n        \"example\": {\n          \"prelude\": \"\u003ccustom-ident\u003e\",\n          \"descriptors\": {\n            \"foo\": \"\u003cnumber\u003e\",\n            \"bar\": \"\u003ccolor\u003e\"\n          }\n        }\n      }\n    }\n  }\n}\n```\n\n#### properties\n\nType: `Object` or `null`  \nDefault: `null`\n\nAn 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.\n\nThe following example extends `width` and defines `size` properties:\n\n```json\n{\n  \"plugins\": [\n    \"stylelint-csstree-validator\"\n  ],\n  \"rules\": {\n    \"csstree/validator\": {\n      \"properties\": {\n        \"width\": \"| new-keyword | custom-function(\u003clength\u003e, \u003cpercentage\u003e)\",\n        \"size\": \"\u003clength-percentage\u003e\"\n      }\n    }\n  }\n}\n```\n\nUsing `\u003cany-value\u003e` for a property definition is an alternative for `ignoreProperties` option.\n\n```json\n{\n  \"plugins\": [\n    \"stylelint-csstree-validator\"\n  ],\n  \"rules\": {\n    \"csstree/validator\": {\n      \"properties\": {\n        \"my-custom-property\": \"\u003cany-value\u003e\"\n      }\n    }\n  }\n}\n```\n\n#### types\n\nType: `Object` or `null`  \nDefault: `null`\n\nAn 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.\n\nThe following example defines a new functional type `my-fn()` and extends `color` type:\n\n```json\n{\n  \"plugins\": [\n    \"stylelint-csstree-validator\"\n  ],\n  \"rules\": {\n    \"csstree/validator\": {\n      \"properties\": {\n        \"some-property\": \"\u003cmy-fn()\u003e\"\n      },\n      \"types\": {\n        \"color\": \"| darken(\u003ccolor\u003e, [ \u003cpercentage\u003e | \u003cnumber [0, 1]\u003e ])\",\n        \"my-fn()\": \"my-fn( \u003clength-percentage\u003e )\"\n      }\n    }\n  }\n}\n```\n\n#### ignore\n\nWorks the same as [`ignoreProperties`](#ignoreproperties) but **deprecated**, use `ignoreProperties` instead.\n\n#### ignoreAtrules\n\nType: `Array\u003cstring|RegExp\u003e` or `false`  \nDefault: `false`\n\nDefines 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.\n\n```json\n{\n  \"plugins\": [\n    \"stylelint-csstree-validator\"\n  ],\n  \"rules\": {\n    \"csstree/validator\": {\n      \"ignoreAtrules\": [\"custom-at-rule\", \"-webkit-keyframes\"]\n    }\n  }\n}\n```\n\n#### ignoreProperties\n\nType: `Array\u003cstring|RegExp\u003e` or `false`  \nDefault: `false`\n\nDefines 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.\n\n```json\n{\n  \"plugins\": [\n    \"stylelint-csstree-validator\"\n  ],\n  \"rules\": {\n    \"csstree/validator\": {\n      \"ignoreProperties\": [\"composes\", \"mask\", \"-webkit-mask\"]\n    }\n  }\n}\n```\n\nIn 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.\n\n#### ignoreValue\n\nType: `RegExp` or `false`  \nDefault: `false`\n\nDefines a pattern for values that should be ignored by the validator.\n\n```json\n{\n  \"plugins\": [\n    \"stylelint-csstree-validator\"\n  ],\n  \"rules\": {\n    \"csstree/validator\": {\n      \"ignoreValue\": \"^pattern$\"\n    }\n  }\n}\n```\n\nFor 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.\n\n## RegExp patterns\n\nIn some cases a more general match patterns are needed instead of exact name matching. In such cases a RegExp pattern can be used. \n\nSince 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.\n\nTo have a full control over a RegExp pattern, a regular RegExp instance or its stringified version (i.e. `\"/pattern/flags?\"`) can be used.\n\n- `\"foo|bar\"` transforms into `/^(foo|bar)$/i`\n- `\"/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)\n- `/foo|bar/` used as is (note: with no `i` flag a matching will be case-sensitive which makes no sense in CSS)\n\n## License\n\nMIT\n","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcsstree%2Fstylelint-validator","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcsstree%2Fstylelint-validator","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcsstree%2Fstylelint-validator/lists"}