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. By default, all rules validate all CSS properties unless otherwise specified. 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.

This table lists all supported rules, their severity levels, and whether they are enabled by default.

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:

1slds-avatar--medium

Recommended code:

1slds-avatar_medium

The -- syntax is replaced with the _ syntax.

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:

1<lightning-button-icon
2        title={labels.closeButton} icon-name="utility:close"
3        onclick={closeAction}
4        class="slds-button slds-button_icon slds-modal__close slds-button--icon-inverse" variant="bare-inverse" size="large">
5</lightning-button-icon>

Recommended code:

1<lightning-button-icon
2        title={labels.closeButton} icon-name="utility:close"
3        onclick={closeAction}
4        class="slds-button slds-button_icon slds-modal__close" variant="bare" size="large">
5</lightning-button-icon>

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:

1<span class="slds-icon_left">
2</span>

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

Identifies --slds-c component-level styling hooks that use a deprecated naming convention. To align with the prescribed styling hooks naming convention, replace with styling hooks that SLDS Linter recommends.

Error

Existing code:

1// Before
2:root
3{
4   --slds-c-breadcrumbs-spacing-inlineend: 16px
5}

Recommended code:

1// After
2:root
3{
4   --slds-c-breadcrumbs-spacing-inline-end: 16px
5}

The --slds-c-breadcrumbs-spacing-inlineend styling hook is replaced with the --slds-c-breadcrumbs-spacing-inline-end styling hook.

Existing code:

1// Before
2:root{
3   --slds-c-accordion-heading-color:#03234d;
4   --slds-c-accordion-heading-font-lineheight: 1.25;
5}

Recommended code:

1// After
2:root{
3   --slds-c-accordion-heading-text-color:#03234d;
4   --slds-c-accordion-heading-font-line-height: 1.25;
5}

The --slds-c-accordion-heading-color and --slds-c-accordion-heading-font-lineheight styling hooks are replaced with the --slds-c-accordion-heading-text-color and --slds-c-accordion-heading-font-line-height styling hooks.

Identifies deprecated --lwc tokens in your code and recommends suitable --slds styling hooks. Replace the --lwc token with the recommended --slds styling hook and retain the --lwc token as the fallback value.

If the rule identifies a deprecated --lwc token but no replacement is recommended for it, refer to the Global Styling Hooks Index and find the most suitable styling hook replacement.

Error

Existing Code:

1.example
2{
3 padding: var(--lwc-cardBodyPadding);
4}

Recommended Code:

1.example
2{
3 padding: var(--slds-g-spacing-4, var(--lwc-cardBodyPadding));
4}

The --lwc-cardBodyPadding token is replaced with the --slds-g-spacing-4 styling hook. The --lwc token is mentioned as the fallback value.

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

Warning

Existing code:

1.slds-expandable-section .sldc-section__content
2{
3 background-color: var(--sds-g-color-brand-base-100, rgb(255, 255, 255));
4}

Recommended code:

1.slds-expandable-section .sldc-section__content
2{
3 background-color: var(--slds-g-color-brand-base-100, rgb(255, 255, 255));
4}

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

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. This rule validates only these CSS properties.

• color
• fill
• background
• background-color
• stroke
• border*-color
• outline*
• border*
• margin*
• padding*
• width
• height
• max-height
• min-height
• line-height
• max-width
• min-width
• top
• right
• left
• bottom
• box-shadow
• font
• font-weight

Warning

Existing code:

1.THIS .site-tos-container
2{
3    height: 32px;
4}

Recommended code:

1.THIS .site-tos-container
2{
3    height: var(--slds-g-sizing-9, 32px);
4}

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

Identifies existing class names that must be replaced with new custom CSS classes, instead of overriding SLDS selectors. This rule only reports classes located at the end of an SLDS selector.

Warning

Here, the .slds-box_border SLDS class is located at the end of the selector. Only such instances are identified as an issue.

1// Now .slds-box_border will be reported as SLDS class override
2.THIS .slds-box_small .slds-box_border:hover
3{
4   .border-color: var(--slds-g-color-palette-hot-orange-40)
5}

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

Existing code:

1.slds-box_border
2{
3    visibility: hidden;
4}

Recommended code:

1.my-app-box_border{
2    visibility: hidden;
3}

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

Warning

Existing code:

1.example {
2    --_slds-deprecated-var: #fff;
3    border: var(--slds-g-sizing-border-1, 1px) solid;
4}

Recommended code:

1.example {
2    border: var(--slds-g-sizing-border-1, 1px) solid;
3}

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:

1.playground-editor-prompt-container {
2    height: calc(100% - 60px); /* minus the height of the header */
3    --slds-c-card-body-spacing-block-end: 0;
4}

Recommended code:

1.playground-editor-prompt-container {
2    height: calc(100% - 60px); /* minus the height of the header */
3}

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

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:

1.example {
2  color: var(--slds-g-link-color-focus);
3  background-color: var(--slds-g-color-brand-base-20);
4  margin: var(--slds-c-card-spacing-block);
5}

Recommended code:

1.example {
2  color: var(--slds-g-link-color-focus, #014486);
3  background-color: var(--slds-g-color-brand-base-20, #0176d3);
4  margin: var(--slds-c-card-spacing-block, 1rem);
5}

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:

1/* @sldsValidatorAllow */
2.THIS--mailapp.forceDockingPanel .slds-docked-composer__body {
3    flex-shrink: 1;
4}

The @sldsValidatorAllow annotation must be removed.

Identifies custom styling hooks that use the --slds or --sds namespaces, which are reserved for SLDS styling hooks. To differentiate them from SLDS styling hooks, create the identified custom styling hooks within your own namespace.

Warning

Existing code:

1/*  Custom token --slds-color-999 using reserved namespace --slds will be flagged as violation */
2.THIS .container
3{
4--slds-color-999: #999
5}

Recommended code:

1.THIS .container
2{
3--myapp-color-999: #999
4}

The --slds-color-999 custom styling hook is replaced with --myapp-color-999.

Identifies instances where --slds styling hooks are provided as fallback values for --lwc tokens. Replace the --lwc token with a suitable --slds styling hook and retain the --lwc token as the fallback value.

Warning

Existing code:

1/* Using --slds-g-color-border-1 as fallback value for --lwc-color-background-1 is not supported. */
2
3.example
4{
5color: var(--lwc-color-background-1, var(--slds-g-color-border-1));
6}

Recommended code:

1.example
2{
3color: var(--slds-g-color-border-1, var(--lwc-color-background-1));
4}

The --lwc-color-background-1 token is replaced with the --slds-g-color-border-1 styling hook. The --lwc token is mentioned as the fallback value.

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

Warning

Existing code:

1.test-cls2 {
2color: red !important;
3}

Recommended code:

1.test-cls2 {
2color: red;
3}

The !important tag is removed.

j

Get Started

Work With SLDS Linter

Reference

Commands

Rules

Get Support

Release Notes