Implement SCSS lint

[akibrhast]

Overview

We need to implement a linter for our SCSS code such that code is more maintainable and standardized over time.

Action Items

• Create a list of possible bare minimum SCSS linter settings that we can turn on, get an output of running those SCSS linter setting on our current codebase and comment on this issue the esLint settings and the output from running it.
• Implement a github action that runs the SCSS linter on the files changed of the pull request if that file has a .scss extension

Resources/Instructions

_{As you are working on this issue, update this section with the resources and instructions that you come across and use when to implement this functionality.}
CSS Linter (stylelint): https://stylelint.io/
GitHub action (Super-Linter): https://github.com/marketplace/actions/super-linter
How to Setup Article with Video: https://dev.to/n3wt0n/the-easiest-way-to-lint-any-code-github-super-linter-deep-dive-53eo

[averdin2]

So far, I am looking at using this GitHub Action. There seems to be a known issue with using Forks with this GitHub Action, so I need to look into it a little more.

As far as the linter itself, Stylelint seems like the way to go.

As far as the rules we should implement, no-duplicate-selectors, selector-pseudo-class-no-unknown, selector-pseudo-element-no-unknown, and selector-type-no-unknown seem to be the minimum rules we are looking for. Here is a link for the list of Stylelint rules. You can find the ones I mentioned in that link.

I still need to determine if these rules are adequate, and how to implement them with GitHub Actions.

[averdin2]

ETA: I probably won't have another update for this until Thursday.
Progress Plan: I am planning on implementing this GitHub Action in my own repo, and I also want to attend the GitHub actions talk during the Engineering COP meeting on Wednesday to get some more knowledge on using GitHub actions.

[averdin2]

I set up a GitHub action on my own repo. For the actual GitHub action, I went with Super-Linter. In my initial research, I didn't find this GitHub action, but I think it is way better than the previous one I found as it was made by GitHub. I am also still sticking with Stylelint as this is the leading linter for CSS.

I was able to get the GitHub action to trigger for good linting and bad linting for pull requests given our specific needs. One complication I have run into is that Stylelint does not have a default rule for checking unused CSS classes (one of the major points of why we want to lint). I found a potential plugin that I could use, but I need to do some more research on this topic.

Below I have added a screenshot of my current YMAL file to configure my current iteration of the linting. I made some notes on the image where changes for the final version would need to be made.

Image of linter.yml

[averdin2]

I am making a comment for some action items I still need to do.

Action Items

• Set up SCSS in my personal repo and test linter
• Test linting GitHub action check with forked PRs
• Figure out any other potential CSS linting rules wanted
• See if plugin will work for linting unused CSS classes
• Research how to use above plugin with GitHub Actions
• Research other ways to lint unused CSS classes
• Implement changes into website repo

[averdin2]

@sanchece here is that other ES Lint issue if you wanted to look into this a bit (#1442). Again, I was thinking of implementing this with Super-Linter. I think it should actually not take too long once I figure out if the CSS linter will work.

[qiqicodes]

@averdin2 Can you let us know your progress in regards to this issue? Thank you =]

Progress:
Blockers: