Rules

SLDS Linter rules validate your code against a series of SLDS 2 best practices and, where possible, provide suggestions for you to improve your code. Each rule has a different severity level.
The options are listed here:

  • Error - The code won’t work and causes issues. Fix the errors.
  • Warning - The code works, but it can be deprecated. We recommend addressing it.

Identifies instances that use the double-dash (--) syntax for block-element-modifier (BEM) in classes. Replace these instances with the single underscore (_) syntax.

Error

Existing code:

Recommended code:

The -- syntax is replaced with the _ syntax.

Identifies Salesforce Design System (SDS) styling hooks that must be replaced with the suggested SLDS 2 styling hooks.

Warning

Existing code:

Recommended code:

The --sds-g-color-brand-base-100 styling hook is replaced with the --slds-g-color-brand-base-100 SLDS 2 styling hook.

Identifies instances where the CSS classes or component attributes for the modal close button must be changed to follow the modal component blueprint.

  • Remove classes that contain the slds-button_icon-inverse attribute within the close button.
  • Change the variant value for the lightning-button-icon attribute from bare-inverse to bare.
  • Change the variant value for the lightning-icon attribute from bare-inverse to bare.

For more information, see the Modal close button is not visible with the new white background topic.

Error

Existing code:

Recommended code:

To fix the issues, these changes are made.

  • The variant attribute value for the lightning-button-icon attribute is changed from bare-inverse to bare.
  • The slds-button–icon-inverse class is removed.

Identifies classes that aren’t available in SLDS 2. Update these classes to a class that’s supported in SLDS 2.

Error

Existing code:

The slds-icon_left class is deprecated in SLDS 2 and must be updated to a class that is supported in SLDS 2.

Identifies static or hard-coded values that must be replaced with SLDS 2 styling hooks. Include the SLDS 2 styling hook and retain the hard-coded value as the fallback value.

Warning

Existing code:

Recommended code:

The --slds-g-sizing-9 styling hook is included.

Indicates that the !important tag must be used only if it’s necessary. The tag functions by overriding all other attributes.

Warning

Existing code:

Recommended code:

The !important tag is removed.

Identifies existing class names that must be replaced with new custom CSS classes, instead of overriding SLDS selectors.

Warning

Existing code:

Recommended code:

Overriding the .slds-box_border class isn’t supported. So a new my-app-box_border CSS class is created to replace it.

Identifies SLDS styling hooks that are reserved only for internal Salesforce use. You must remove these styling hooks.

Warning

Existing code:

Recommended code:

The --_slds-deprecated-var styling hook is meant for internal Salesforce use and is removed.

Identifies styling hooks that aren’t present in SLDS 2. They must be replaced with ‌styling hooks that have a similar effect, or they must be removed.

Warning

Existing code:

Recommended code:

The –-slds-c-card-body-spacing-block-end styling hook is removed because it doesn’t have a suitable SLDS 2 replacement.

Existing code:

Recommended code:

The --slds-g-color-border-base-2: #dddbda, --slds-g-color-border-base-3: #c9c7c5, and --slds-g-color-border-base-2 styling hooks are removed because they don’t have suitable SLDS 2 replacements.

Identifies SLDS styling hooks that are specified without fallback values and recommends suitable fallback values based on the SLDS metadata.
Each var() function’s arguments must contain a styling hook and a hard-coded value or branded design token as a fallback value. The fallback value is used in environments in which styling hooks aren’t supported.

Error

Existing code:

Recommended code:

The --slds-g-link-color-focus, --slds-g-color-brand-base-20, and --slds-c-card-spacing-block styling hooks are used with hard-coded values as fallback values.

Identifies annotations that must be removed from the code.

Warning

Existing code:

Recommended code:

The @sldsValidatorAllow annotation is removed.