ER: Fix needed for conflicts scss-lint.yml and .stylelint.json
- Dominant language
- JavaScript
- Stars
- 363
- Forks
- 872
- Avg merge
- 2d 21h
- Merged PRs (30d)
- 18
Description
### Emergent Requirement - Problem
- The `lint-scss.yml` action [returned an error](https://github.com/hackforla/website/actions/runs/5604562110/workflow?pr=4945) when PR #4945 (fixes #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
- #4945
### Date discovered
7/19/23
### Did you have to do something temporarily
- [ ] YES
- [x] 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
- [x] Make a new issue
- [x] 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](https://github.com/hackforla/website/blob/gh-pages/.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](https://github.com/hackforla/website/blob/gh-pages/_sass/components/_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](https://sass-lang.com/documentation/cli/migrator/) can be used to fix the issue with "map" and will satisfy `lint.scss.yml` as can be seen in [this log](https://github.com/t-will-gillis/website/actions/runs/5625287510/job/15243792017?pr=277).
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](https://github.com/t-will-gillis/website/actions/runs/9040646801/job/24845068982) run after Sass Migrator
# Additional comments below
-See comments below
Contributor guide
Assessment
This issue has not been assessed yet.