Skip to content

0.3.0 (7 Jul, 2025)
Compare
Choose a tag to compare
@sf-nithappu sf-nithappu released this 07 Jul 07:03
· 45 commits to develop since this release
0.3.0
378a70b
This commit was created on github.com and signed with GitHub’s verified signature.
GPG key ID: B5690EEEBB952194
Verified
Learn about vigilant mode.

  • NEW: Use the no-slds-namespace-for-custom-hooks rule
    Identify custom styling hooks that use the --slds or --sds namespace. To differentiate between custom styling hooks and SLDS styling hooks, create the identified custom styling hooks in your namespace.
    For more information, see SLDS Linter Rules.

  • NEW: The no-sldshook-fallback-for-lwctoken rule
    Reports instances where --slds styling hooks are provided as fallback values for --lwc tokens. To fix these instances, remove the --slds styling hooks that are used as fallback values.
    For more information, see SLDS Linter Rules.

  • NEW: The enforce-component-hook-naming rule
    Reports --slds-c component-level styling hooks that use the deprecated < > naming convention. Keep in mind that component-level styling hooks are only available in SLDS 1.
    For more information, see SLDS Linter Rules in the SLDS Linter Developer Guide and Styling Hooks on the SLDS 2 website.

  • NEW: The no-hardcoded-values-slds2 rule
    Reports instances of hard-coded values that specify the font weight. The rule recommends suitable styling hooks as replacements for the hard-coded values.

    Example — Anti-Pattern:
    Here, 700 is the hard-coded value that specifies the font weight.

    .THIS .example-1 {
font-weight: 700;
}

    Recommended Pattern:
    Use the --slds-g-font-weight-7 styling hook to specify the font weight. Retain 700 as the fallback value.

    .THIS .example-1 {
font-weight: var(--slds-g-font-weight-7, 700);
}

  • NEW: Targeted CSS Property Validation
    For each Stylelint rule, you can now define the CSS properties that you want the rule to validate. In the .stylelintrc.yml configuration file, use the propertyTargets option to define the required CSS properties for each rule.
    This is an optional configuration to list specific CSS properties. By default, all CSS properties are validated.

    Example:
    For the no-hardcoded-values-slds2 rule, the propertyTargets option is set to validate two CSS properties: color and background-color.

    // .stylelintrc.yml
slds/no-hardcoded-values-slds2:
- true
- severity: warning
- propertyTargets:
    - color
    - background-color

  • FIX: Updated Stylelint Rules to Avoid Reporting Valid Fallback Values

    Each rule no longer reports these fallback values:

    • enforce-sds-to-slds-hooks: --sds styling hooks
    • lwc-token-to-slds-hook: --lwc tokens
    • no-deprecated-token-slds1: t() or token() functions
    • no-slds-var-without-fallback: SLDS styling hooks
    • no-unsupported-hooks-slds2: Deprecated SLDS styling hooks, such as --sds-g-color-border-1

    Example:
    These examples show fallback values that were earlier reported as issues. With this fix, these values are valid and no longer reported by SLDS Linter.

    /* Previously, using --sds-g-color-border-1 as fallback value was reported */
.THIS .container {
border-color: var(--slds-g-color-border-1, var(--sds-g-color-border-1));
}

/* Previously, using --lwc-colorBackgroundAlt as fallback value was reported */
.THIS .container {
background-color: var(--slds-g-color-surface-container-1, var(--lwc-colorBackgroundAlt));
}

/* Previously, using t(fontSize3) as fallback value was reported */
.THIS .container {
font-size: var(--slds-g-font-size-base, t(fontSize3));
}

  • FIX: Improved Detection for Hardcoded box-shadow Values

    The no-hardcoded-value-slds2 rule correctly identifies the complete hard-coded value specified for the box-shadow property as a single value rather than multiple, separate values.
    If the hard-coded value has a matching styling hook, use the recommendation to update your code.

    Example — Anti-Pattern:
    In this example, 0 0 1.5px 0 #00000017, 0 1.4px 1.5px 0 #00000017, 0 -1px 1px 0 #00000009 is the hard-coded value specified for the box-shadow property.
    Before this fix, the rule reported individual parts of the value, such as #00000017, 1.4px, as an issue.

    .shadow-multi-down-1 {
box-shadow: 0 0 1.5px 0 #00000017, 0 1.4px 1.5px 0 #00000017, 0 -1px 1px 0 #00000009;
}

    Recommended Pattern:
    Replace the hard-coded value with the suggested --slds-g-shadow-1 styling hook.

    .shadow-multi-down-1 {
box-shadow: var(--slds-g-shadow-1);
}

  • FIX: Improved Detection for no-slds-class-overrides Rule

    Previously, the no-slds-class-overrides rule reported instances of SLDS classes in any location within a selector.
    The rule now correctly reports only instances where SLDS classes are specified at the end of the selector.

    Example:

    This example uses the SLDS class .slds-box_small in the middle of the selector.
    Before this fix, this location of a class in the middle was identified as an issue.

    /* Before: .slds-box_small is reported as SLDS class override (FALSE positive) */
.THIS .slds-box_small .box-title {
color: var(--slds-g-color-palette-blue-10);
}

    This example uses the SLDS class .slds-box_border at the end of the selector.
    After this fix, only locations of a class at the end of a selector are correctly identified as issues.

    /* Now: .slds-box_border will be reported as SLDS class override */
.THIS .slds-box_small .slds-box_border:hover {
border-color: var(--slds-g-color-palette-hot-orange-40);
}
Assets 3
Loading