stylelint-config-material-kit v1.0.0

stylelint-config-material-kit

Shareable stylelint config for Material Kit.

Installation

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

Usage

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

Example usage with JSON config:

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

Example usage with YAML config:

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

Using custom BEM prefix

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

In JSON config:

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

In YAML config:

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