Release Notes for SLDS Linter

Here are the new and changed features in recent updates of SLDS Linter.

FIX: The no-unsupported-hooks-slds2 rule now reports all types of deprecated styling hooks. The rule identifies global, shared, and kinetics styling hooks.

This example uses a deprecated component styling hook. Before this fix, we identified only these instances.

.div-modal-cls
 {
 --slds-c-breadcrumbs-spacing-inline-start: 1rem;
 }

This example uses deprecated global styling hooks. After this fix, we also identify these instances.

/* Global hooks */

.global-example
{
  --slds-g-color-border-base-2: #dddbda;
  --slds-g-color-border-base-3: #c9c7c5;
  border: 1px solid var(--slds-g-color-border-base-2);
}

• NEW: SLDS Linter now identifies styling hooks that don’t have a fallback value provided.
  The new rule slds/no-slds-var-without-fallback captures the variables that contain these styling hooks and recommends the fallback value to be used.
  Adding a fallback is important for your code to work properly in multiple environments, like SLDS 2 and SLDS 1. For more information, see the SLDS Linter Rules topic.

• FIX: The no-hardcoded-values-slds2 rule now identifies only instances in which a hard-coded value is used in the code. If the hard-coded value is used as a fallback value along with an SLDS 2 styling hook, it isn’t captured as an issue in the SLDS Linter report.

  Examples 

  In this example, a hard-coded value is used as a standalone value in the code. This instance is captured as an issue.

  .THIS .site-tos-container
  {
    height: 32px;
  }

  In this example, a hard-coded value is used as a fallback value along with the --slds-g-sizing-9 styling hook. This instance isn’t captured as an issue.

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

• NEW: SLDS Linter now validates components and styling hooks based on the new @salesforce-ux/sds-metadata package. This package consolidates design system metadata in a single location so you can easily access and integrate the latest metadata and improve consistency and performance.

• CHANGE: The no-hardcoded-values-slds2 rule is enhanced to support the conversion between px and rem units of measurement. For each px or rem value present in your code, SLDS Linter now converts the value from one unit to the other and suggests SLDS 2 styling hooks that work for both values.

j

No Results

Search Tips:

• Please consider misspellings
• Try different search keywords

Get Started

Work With SLDS Linter

Reference

Get Support

Release Notes