ER: stylelint linter failing after upgrade

[roslynwythe]

Emergent Requirement - Problem

The GitHub Pull Request check "Lint SCSS" is failing.

Issue you discovered this emergent requirement in

• many issues including Refactored Slack image with svg icon in "Getting Started" Page #5900

Date discovered

Did you have to do something temporarily

• YES
• NO

Who was involved

@jaasonw

What happens if this is not addressed

The GitHub Pull Request check "Lint SCSS" will continue to fail. Merging is not blocked but the failure creates confusion and developers don't have the benefit of the SCSS linter output.

Resources

• Implement SCSS lint #1441
• Fix Style linting issues #2495
• CSS Linter (stylelint): https://stylelint.io/
• GitHub action (Super-Linter): https://github.com/marketplace/actions/super-linter
• Stylelint configuration
• Stylelint Migration Guide 14.0

Recommended Action Items

• Make a new issue
• Let a Team Lead know

Potential solutions [draft]

As stated by @jaasonw in his comment #5900 (comment), the stylelint configuration file (see resources above) must be updated as described in Stylelint Migration Guide 14.0

[t-will-gillis]

Hi Roslyn-

FYI I had created a previous ER #5048 a few months ago for this issue. I did a lot of exploration with this and I had found the folllowing (see the previous ER also):

• as you note, the failure is occurring because the Superlinter is not recognizing the scss anymore with Stylelint 14, which is the main customSyntax error (line 79) that keeps popping up.

Current linter error

• yes to adding the line regarding "extends": ["stylelint-config-standard-scss"] (I had used "stylelint-config-recommended-scss", but same result)
• After adding the lines above, I had run into a heap of issues. I found adding the "extends" line took care of the customSyntax error, i.e. that the Superlinter was recognizing the scss again, however in place of the one error there were 22 new syntax errors. (Here is a workflow run) Errors that seem to be cropping up because our code is using old syntax like "map-get()" (line 77) whereas the updated syntax is "map.get()".

After adding "extends" line

• Some of these new syntax errors can be automatically addressed by using the Sass Migrator, which refactors the Sass to match the latest syntax,
• However once the Sass Migrator is run, I found that there are still errors, and that Docker either will not load the website at all, or the website runs on Docker with no styling at all.

I realize this is not very helpful...

[roslynwythe]

Closing as not planned because it was a duplicate; I discovered an existing ER #5048 for the same issue.