stylelint-config-slds

The Salesforce Lightning Design System shareable config for stylelint.

Use it as is or as a foundation for your own config.

Example

.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.

Installation

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

Usage

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.

2. Run stylelint

1. From the CLI:
2. npm install -g stylelint
3. stylelint ./**/*.scss
4. As an npm script:
5. In package.json’s scripts section, add "lint-scss": "stylelint ./**/*.scss"
6. Run npm run lint-scss
7. 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": [
        "composes"
      ]
    }],
    "unit-whitelist": ["em", "rem", "s"]
  }
}