stylelint-config-material

stylelint-config-material is a shareable stylelint config for Material Components Web (MDC Web).

Installation

npm install --save-dev stylelint-config-material

Usage

Extend this config within your stylelint configuration object, and add your rules if needed.

Example usage with JSON config:

{
  "extends": "stylelint-config-material",
  "ignoreFiles": [
    "node_modules/**/*",
    "dist/**/*"
  ],
  "rules": {
    "string-quotes": "single"
  }
}

Example usage with YAML config:

extends: stylelint-config-material
ignoreFiles:
  - node_modules/**/*
  - dist/**/*
rules:
  string-quotes: single

Using custom BEM prefix

Below are example rules for using custom component prefix. Replace "mdc" with your own abbreviation.

In JSON config:

{
  "rules": {
    "custom-media-pattern": "^mdc?-.+",
    "custom-property-pattern": "^mdc?-.+",
    "selector-class-pattern": ["^mdc?-.+", {
      "resolveNestedSelectors": true
    }],
    "selector-id-pattern": "^mdc?-.+",
    "plugin/selector-bem-pattern": {
      "componentSelectors": "^\\.mdc?-{componentName}(?:__[a-z]+(?:-[a-z]+)*)*(?:--[a-z]+(?:-[a-z]+)*)*(?:\\[.+\\])*$"
    },
    "scss/dollar-variable-pattern": ["^_?mdc-.+", {
      "ignore": "local"
    }],
    "scss/at-function-pattern": "^mdc-.+",
    "scss/at-mixin-pattern": "^mdc-.+"
  }
}

In YAML config:

rules:
  custom-media-pattern: ^mdc?-.+
  custom-property-pattern: ^mdc?-.+
  selector-class-pattern:
    - ^mdc?-.+
    - resolveNestedSelectors: true
  selector-id-pattern: ^mdc?-.+
  plugin/selector-bem-pattern:
    componentSelectors: ^\.mdc?-{componentName}(?:__[a-z]+(?:-[a-z]+)*)*(?:--[a-z]+(?:-[a-z]+)*)*(?:\[.+\])*$
  scss/dollar-variable-pattern:
    - ^_?mdc-.+
    - ignore: local
  scss/at-function-pattern: ^mdc-.+
  scss/at-mixin-pattern: ^mdc-.+