Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/webdenim/stylelint-config-material
Shareable stylelint config based on MDC Web's stylelint rules
https://github.com/webdenim/stylelint-config-material
material material-components material-design mdc mdc-web scss stylelint stylelint-config web
Last synced: 2 months ago
JSON representation
Shareable stylelint config based on MDC Web's stylelint rules
- Host: GitHub
- URL: https://github.com/webdenim/stylelint-config-material
- Owner: webdenim
- License: mit
- Created: 2017-11-08T14:09:12.000Z (about 7 years ago)
- Default Branch: master
- Last Pushed: 2023-01-03T15:16:19.000Z (about 2 years ago)
- Last Synced: 2024-04-26T21:21:22.526Z (9 months ago)
- Topics: material, material-components, material-design, mdc, mdc-web, scss, stylelint, stylelint-config, web
- Language: JavaScript
- Homepage: https://www.npmjs.com/package/stylelint-config-material
- Size: 1.89 MB
- Stars: 2
- Watchers: 4
- Forks: 1
- Open Issues: 18
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
- awesome-material-components - webdenim/stylelint-config-material - Stylelint config for Material Components Web. (Material Components Web (MDC Web) / MDC Web Resources)
README
# stylelint-config-material
[stylelint-config-material](https://github.com/webdenim/stylelint-config-material) is a shareable stylelint config for [Material Components Web (**MDC Web**)](https://github.com/material-components/material-components-web).
## Installation
```bash
npm install --save-dev stylelint-config-material
```
## Usage
Extend this config within your [stylelint configuration object](http://stylelint.io/user-guide/configuration/#extends),
and add your [rules](https://stylelint.io/user-guide/rules) if needed.
### Example usage with JSON config:
```json
{
"extends": "stylelint-config-material",
"ignoreFiles": [
"node_modules/**/*",
"dist/**/*"
],
"rules": {
"string-quotes": "single"
}
}
```
### Example usage with YAML config:
```yaml
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:
```json
{
"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:
```yaml
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-.+
```