Package Exports

stylelint-postcss-map

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (stylelint-postcss-map) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

stylelint-postcss-map

This Stylelint plugin checks for the use of postcss-map variables in your css. It's a fork of stylelint-declaration-use-variable.

Installation

npm install stylelint-postcss-map

Compatible with Stylelint v3+

Usage

Add stylelint-postcss-map to plugins and rules array as demonstrated in the examples below.

Single CSS Property

//.stylelintrc
{
  "plugins": [
    "stylelint-postcss-map"
  ],
  "rules": [
    "plugin/stylelint-postcss-map": "color"
  ]
}

Note that your primary option must be passed in as a nested array for multiple CSS properties.

Multiple CSS Properties

//.stylelintrc
{
  "plugins": [
    "stylelint-postcss-map"
  ],
  "rules": [
    "plugin/stylelint-postcss-map": [["color", "width"]]
  ]
}

Additionally you can also configure exceptions for listed CSS properties in your rule configuration. Say for example, you don't wish to require the use of a variable for width values of 100% or 100vw.

Single CSS Property with Exception.

//.stylelintrc
{
  "plugins": [
    "stylelint-postcss-map"
  ],
  "rules": [
    "plugin/stylelint-postcss-map": [
      "width",
      {
        "width":["100%", "100vw"]
      }
    ]
  ]
}

You are not required to provide exception values for all listed CSS properties. In the example below only color and width have exceptions while z-index always requires a postcss-map variable.

Multiple CSS Properties with Exceptions

//.stylelintrc
{
  "plugins": [
    "stylelint-postcss-map"
  ],
  "rules": [
    "plugin/stylelint-postcss-map": [
      ["color", "width", "z-index"],
      {
        "color": ["transparent"],
        "width": ["100%", "100vw"]
      }
    ]
  ]
}

Default Exceptions

CSS values color() and calc() are default value exceptions. If a line starts with either values the plugin will see it as valid.

.foo {
  background-color: color( red a(90%));
  width: calc(2px + 2px);
}