1.0.5 • Published 5 years ago
stylelint-config-material v1.0.5
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-.+