The Salesforce Lightning Design System shareable config for stylelint
npm install stylelint-config-sldsThe Salesforce Lightning Design System shareable config for stylelint.
Use it as is or as a foundation for your own config.
``scss
.slds-with-number-1-in-it {
width: 100%;
}
.slds-foo {
width: 5em;
.slds-bar {
margin: 0;
border: 0;
}
.slds-baz {
background: 0;
}
}
@media (min-width: 30em) {
.slds-container {
.slds-child {
margin: 0;
border: 0;
}
}
}
`
View examples of valid and invalid SCSS syntax in the __tests__/__fixtures__ folder.
To see the rules that this config uses, please read the config itself.
`bash`
npm install stylelint stylelint-config-slds --save-dev
`json`
{
"extends": "stylelint-config-slds"
}
There are multiple ways to configure stylelint that may work better for you.
1. From the CLI:
1. npm install -g stylelint
1.
1. As an npm script:
1. In ’s scripts section, add "lint-scss": "stylelint ./*/.scss"
1. Run
1. As a Gulp plugin: follow these instructions
Simply add a "rules" key to your config, then add your overrides and additions there.
For example, to change the indentation to tabs, turn off the number-leading-zero rule, change the property-no-unknown rule to use its ignoreAtRules option and add the unit-whitelist rule:
`json``
{
"extends": "stylelint-config-standard",
"rules": {
"indentation": "tab",
"number-leading-zero": null,
"property-no-unknown": [ true, {
"ignoreProperties": [
"composes"
]
}],
"unit-whitelist": ["em", "rem", "s"]
}
}