6

I have been trying to use SLDS in LWC. However, I am noticing these issues recently. The same style classes were working before without any issues.

Does anything worng with my VS code or is really these classes are deprecated?

I am trying this https://www.lightningdesignsystem.com/components/lookups/

enter image description here

5
  • Check if you have installed Slds validator extension. Aug 16, 2020 at 16:41
  • yes, installed.
    – Ajay
    Aug 16, 2020 at 17:45
  • 4
    Yes, these are deprecated as far as I know. For example, looking at this latest release notes (lightningdesignsystem.com/release-notes), I see the following Deprecated slds-form_compound for slds-form-element_compound. I always wondered if there was an easy way or tool to check if my components were using the deprecated SLDS CSS class and I learned that this is built into Salesforce DX. It comes with the VS Code environment when you install the "Salesforce Extensions for VS Code" package. marketplace.visualstudio.com/… Aug 16, 2020 at 18:19
  • 2
    @AnudeepGopagoni Consider posting your comment as an answer. :)
    – Raul
    Aug 16, 2020 at 19:25
  • Posted per your recommendation @Raul. Thank you Aug 17, 2020 at 7:31

2 Answers 2

2

The classes are indeed deprecated. For example, if we search for Form Element in the latest Lightning Design System documentation (Summer'20 (SLDS 2.12.2)), we see the usage as follows

<div class="slds-form-element"></div>

Note: Deprecated slds-form_compound for slds-form-element_compound

enter image description here

Salesforce Extensions for VS Code has the ability to identify deprecated classes. I recommend looking at the latest release documentation to ensure if the SLDS classes used in your components are in parity with the SLDS documentation.

1
  • yes, VS Code is giving updated tags for the deprecated ones.
    – Ajay
    Aug 21, 2020 at 1:21
0

When referencing one of these tags that I wanted ignored in my JS code... I broke the text string up to prevent the validator from seeing it...

return 'slds-p-around_medium';

becomes:

return 'slds' + '-p-around_medium';

Viola! The validator cannot "see" the class and ignores it.

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .