Wondering what’s next for npm?Check out our public roadmap! »

    stylelint-csstree-validator

    1.9.0 • Public • Published

    NPM version Build Status

    stylelint-csstree-validator

    CSS syntax validator based on csstree as plugin for stylelint. Currently it's only checking declaration values to match W3C specs and browsers extensions. It would be extended in future to validate other parts of CSS.

    Validator is designed to check CSS syntax only. However PostCSS (that used by stylelint as backend) may parse other syntaxes like Less or Sass and can be used for these syntaxes too. In this case validator is limited to check declaration that doesn't contain any CSS extension (e.g. variables).

    Install

    $ npm install --save-dev stylelint-csstree-validator
    

    Usage

    Setup plugin in your stylelint config:

    {
      "plugins": [
        "stylelint-csstree-validator"
      ],
      "rules": {
        "csstree/validator": true
      }
    }

    Options

    properties

    Type: Object or null
    Default: null

    Overrides or/and extends property definition dictionary. CSS Value Definition Syntax is used to define value's syntax. If definition starts with | it added to existing definition if any. See CSS syntax reference for default definitions.

    In the following example we extend width property and defines size:

    {
      "plugins": [
        "stylelint-csstree-validator"
      ],
      "rules": {
        "csstree/validator": {
          "properties": {
            "width": "| new-keyword | custom-function(<length>, <percentage>)",
            "size": "<length-percentage>"
          }
        }
      }
    }

    Using property definitions with the syntax <any-value> is an alternative for ignore option.

    {
      "plugins": [
        "stylelint-csstree-validator"
      ],
      "rules": {
        "csstree/validator": {
          "properties": {
            "my-custom-property": "<any-value>"
          }
        }
      }
    }

    types

    Type: Object or null
    Default: null

    Overrides or/and extends type definition dictionary. CSS Value Definition Syntax is used to define value's syntax. If definition starts with | it added to existing definition if any. See CSS syntax reference for default definitions.

    In the following example we define new functional type my-fn() and extend color type:

    {
      "plugins": [
        "stylelint-csstree-validator"
      ],
      "rules": {
        "csstree/validator": {
          "properties": {
            "some-property": "<my-fn()>"
          },
          "types": {
            "color": "| darken(<color>, [ <percentage> | <number [0, 1]> ])",
            "my-fn()": "my-fn( <length-percentage> )"
          }
        }
      }
    }

    ignore

    Type: Array or false
    Default: false

    Defines a list of property names that should be ignored by the validator.

    {
      "plugins": [
        "stylelint-csstree-validator"
      ],
      "rules": {
        "csstree/validator": {
          "ignore": ["composes", "foo", "bar"]
        }
      }
    }

    In this example, plugin would not test declaration with property name composes, foo or bar. As a result, no warnings for these declarations.

    ignoreValue

    Type: RegExp
    Default: false

    Defines a pattern for values that should be ignored by the validator.

    {
      "plugins": [
        "stylelint-csstree-validator"
      ],
      "rules": {
        "csstree/validator": {
          "ignoreValue": "^pattern$"
        }
      }
    }

    In this example, the plugin will not report warnings for values that match the given pattern. Warnings will still be reported for properties.

    License

    MIT

    Install

    npm i stylelint-csstree-validator

    DownloadsWeekly Downloads

    24,661

    Version

    1.9.0

    License

    MIT

    Unpacked Size

    18.9 kB

    Total Files

    11

    Last publish

    Collaborators

    • avatar