Stylelint Plugin - SLDS

A [Stylelint] plugin to help teams identify antipatterns and deprecated practices in LWC stylesheets. Plugin is an implementation of many of the rules found in SLDS Architecture Update (released April 2024).

• Stylelint Plugin - SLDS
  • Installation
    • Configuration
    • Run
  • Rules
    • No LWC Custom Properties
    • No SDS Custom Properties
    • No SLDS Class Overrides

Installation

npm i --save-dev stylelint @mvogelgesang/stylelint-plugin-slds

Configuration

Add a .stylelintrc.json file to your project root directory.

Update with the following:

  {
    "plugins": ["@mvogelgesang/stylelint-plugin-slds"],
    "rules": {
      "stylelint-plugin-slds/no-lwc-custom-properties":true, 
      "stylelint-plugin-slds/no-sds-custom-properties": true,
      "stylelint-plugin-slds/no-slds-class-overrides": true
    }
  }

Run

Update package.json to include a new stylelint command. This can also be chained with other linting checks.

{
   "scripts": {
    "stylelint": "stylelint -c .stylelintrc.json ./force-app/default/main/lwc/**/*.css"
  },
}

Rules

No LWC Custom Properties

https://help.salesforce.com/s/articleView?id=001622574&type=1

No SDS Custom Properties

https://help.salesforce.com/s/articleView?id=001622574&type=1

No SLDS Class Overrides

https://developer.salesforce.com/docs/platform/lwc/guide/create-components-css-antipatterns.html#anti-pattern-overriding-slds-classes