ER: Fix needed for conflicts scss-lint.yml and .stylelint.json

[t-will-gillis]

Emergent Requirement - Problem

• The lint-scss.yml action returned an error when PR Updated scss to only target h2 on privacy policy page #4945 (fixes Change h2 margin on Privacy Policy Page #4864) was opened. Note that the error message does not refer to code that was changed, but rather that the linter does not recognize scss syntax. We need to implement a fix so that github/super-linter v5.0.0 recognizes and lints scss.

Additional Details

• This error has also occurred on PRs for other SCSS files since github/super-linter was updated to v5.0.0 last week, thus the error is likely related to the updated version.
• The error logs refer to "CssSyntaxError" and "...you should use the 'customSyntax' option when linting something other than CSS"
• Below, the "Proposed Solutions (draft)" details the code for implementing 'customSyntax' in the .stylelint.json

Log screenshot for Lint SCSS action

See lines 76-79:

Issue you discovered this emergent requirement in

• Updated scss to only target h2 on privacy policy page #4945

Date discovered

7/19/23

Did you have to do something temporarily

• YES
• NO

Who was involved

@t-will-gillis @ronaldpaek @angelenelm

What happens if this is not addressed

An error will be raised every time lint-scss.yml runs on an scss file. Furthermore, when the linter raises errors inappropriately it is not functioning as a check on the scss code.

Resources

Recommended Action Items

• Make a new issue
• Discuss with team
• Let a Team Lead know

Potential solutions [draft]

• Recommended starting point- Caution: the following is not a complete solution yet.:

  • In .stylelintrc.json insert at line 2, before and at same level as "rules:"

   "extends": ["stylelint-config-recommended-scss"],
   "customSyntax": "postcss-scss",
  

  • Possible that this line should be:

   "extends": "stylelint-config-sass-guidelines",
  

  or

  "extends" : "stylelint-config-standard-scss",  
  

  • Remove the line "no-extra-semicolons": true. This prop is deprecated.
  • Remove the comma from the line immediately above.

• Doing the above and running the linter on _privacy-policy.scss will result in successfully implementing scss syntax in the linter, but will also cause an error on line 30 saying that "map-get" should be replaced with "map.get". The Sass Migrator can be used to fix the issue with "map" and will satisfy lint.scss.yml as can be seen in this log.

Log screenshot for Lint SCSS after the above edits (with "map-get")

• UPDATE 8/22/23: Conclusions after testing the above recommendations:
• The potential edits shown above for .stylelintrc.json do successfully address the "CssSyntaxError" and the note that "...you should use the 'customSyntax'
• However, these edits lead stylelint to raise other errors (such as with map-get).
• The new errors themselves can be addressed using the Sass Migrator: sass-migrator --migrate-deps module main.scss. As shown includes options for tracing the modules/ dependencies throughout the entire codebase. The Migrator will trace and refactor all scss files on the website, using more recent syntax such as:

map-get  ----> map.get 
@includes ----> @use
@media #{xxx} ----> @media #{layout. xxx}
etc.

• It appears that over 50 files (!) are refactored by Migrator
• At this point, when Docker is run from here, it appears that none of the css/scss styles are used, that is additional refactoring is still required:

Post Sass Migrator

• CONCLUSION: I think that all of the above could be done and this could be fixed, but we may want to discuss whether this is worth the time and energy to 'fix' a problem (i.e. with the linter telling us incorrectly that there are errors ) that is not currently effecting the website.

• Updating the Sass/scss syntax might be a worthwhile endeavor but it appears that this will be a major project.

• Recent log run after Sass Migrator

Additional comments below

-See comments below

[t-will-gillis]

8/22/23: A new update added to the description above.

[github-actions]

Hi @roslynwythe, thank you for taking up this issue! Hfla appreciates you :)

Do let fellow developers know about your:-
i. Availability: (When are you available to work on the issue/answer questions other programmers might have about your issue?)
ii. ETA: (When do you expect this issue to be completed?)

You're awesome!

P.S. - You may not take up another issue until this issue gets merged (or closed). Thanks again :)