The Salesforce Lightning Design System shareable config for stylelint

Downloads in past


321.0.82 years ago7 years agoMinified + gzip package size for stylelint-config-slds in KB


stylelint-config-slds NPM version Build Status Greenkeeper badge
The Salesforce Lightning Design System shareable config for stylelint.
Use it as is or as a foundation for your own config.


.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.
View examples
To see the rules that this config uses, please read the config itself


npm install stylelint stylelint-config-slds --save-dev


  1. Create a .stylelintrc file at the root of your project:

  "extends": "stylelint-config-slds"

There are multiple ways to configure stylelint that may work better for you.

  1. Run stylelint

  1. From the CLI:
1. npm install -g stylelint 1. stylelint ./**/*.scss
  1. As an npm script:
1. In package.json’s scripts section, add "lint-scss": "stylelint ./**/*.scss" 1. Run npm run lint-scss
  1. As a Gulp plugin: follow these instructions

Extending the config

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:
  "extends": "stylelint-config-standard",
  "rules": {
    "indentation": "tab",
    "number-leading-zero": null,
    "property-no-unknown": [ true, {
      "ignoreProperties": [
    "unit-whitelist": ["em", "rem", "s"]