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:

[averdin2]

The Stylelint plugin I was looking into seems to not work for me. May need some help to see if this is still a viable option to get linting on unused class selectors. Otherwise, I think we don't lint for this. The only other tools I have found are ones that remove unused class selectors, which I don't think we want to do.

[averdin2]

The GitHub action appears to work properly for forked repo pull requests on the main repo.

[Sihemgourou]

@averdin2
Please add update

1. Progress
2. Blockers
3. Availability
4. ETA

[github-actions]

@averdin2 Please add update

1. Progress
2. Blockers
3. Availability
4. ETA

[averdin2]

Progress: I have been done with the bulk of this work for some time now. I was looking to add a specific style rule that is not included in stylelint's rules, but I am thinking that it might just be best to not include that rule, as it could add complications to making changes to new rules in the future.

Blockers: I need to speak with Akib about the progress I have made on this issue, and we need to come up with a way to implement this into the repo's GItHub Actions.

Availability: I am now fairly available this week. I will reach out to Akib to schedule a time to discuss this issue.

ETA: As soon as I discuss this issue and my progress with Akib, I can move forward with the implementation.

[averdin2]

Progress: I have implemented the GitHub action on my own website repo and everything works well. The last thing I need to do is connect the GitHub action to Hack for LA's website repo and make a PR for the new files I made to make this work. I most likely need to consult @Aveline-art in implementing GitHub actions on the Hack for LA website repo.

Blockers: None.

Availability: I think I am going to bring this up in the July 15th meeting and see if there is time to either get this done then, otherwise I will coordinate any discussions needed.

ETA: This week

[averdin2]

Progress: Made plan for review. I still need to make some changes before I can open up the PR again.
Blockers: None, I am just working on this a bit slowly.
Availability: I attend most meetings and am responsive on Slack if there are any questions regarding this issue.
ETA: I should make my changes by this weekend and then open up the PR.

[github-actions]

@averdin2

Please add update using this template (even if you have a pull request)

1. Progress: "What is the current status of your project? What have you completed and what is left to do?"
2. Blockers: "Difficulties or errors encountered."
3. Availability: "How much time will you have this week to work on this issue?"
4. ETA: "When do you expect this issue to be completed?"
5. Pictures: "Add any pictures of the visual changes made to the site so far."

If you need help, be sure to either: 1) ask for help at a Tuesday or Sunday meeting, 2) put a "Status: Help Wanted" label on your issue and pull request, or 3) put up a request for assistance on the #hfla-site channel.

_{You are receiving this comment because your last comment was before Tuesday, August 10, 2021 at 12:10 AM.}

---

Note: This comment was created as part of a GitHub Action during its trial phase. If you find this GitHub Action to be disruptive/unhelpful, or if you believe there might be a bug, please leave a comment on this issue. All feedback will be used to further improve it. Thank you for your time.

[github-actions]

@averdin2

Please add update using this template (even if you have a pull request)

1. Progress: "What is the current status of your project? What have you completed and what is left to do?"
2. Blockers: "Difficulties or errors encountered."
3. Availability: "How much time will you have this week to work on this issue?"
4. ETA: "When do you expect this issue to be completed?"
5. Pictures: "Add any pictures of the visual changes made to the site so far."

If you need help, be sure to either: 1) ask for help at your next meeting, 2) put a "Status: Help Wanted" label on your issue and pull request, or 3) put up a request for assistance on the #hfla-site channel.

_{You are receiving this comment because your last comment was before Tuesday, August 17, 2021 at 12:02 AM PST.}

[github-actions]

@averdin2

Please add update using this template (even if you have a pull request)

1. Progress: "What is the current status of your project? What have you completed and what is left to do?"
2. Blockers: "Difficulties or errors encountered."
3. Availability: "How much time will you have this week to work on this issue?"
4. ETA: "When do you expect this issue to be completed?"
5. Pictures: "Add any pictures of the visual changes made to the site so far."

If you need help, be sure to either: 1) ask for help at your next meeting, 2) put a "Status: Help Wanted" label on your issue and pull request, or 3) put up a request for assistance on the #hfla-site channel.

_{You are receiving this comment because your last comment was before Tuesday, August 24, 2021 at 12:03 AM PST.}

[averdin2]

Update: Just waiting on a review for this PR. I also am planning on adding one more commit tomorrow.

[github-actions]

@averdin2

Please add update using the below template (even if you have a pull request). Afterwards, remove the 'To Update !' label and add the 'Status: Updated' label.

1. Progress: "What is the current status of your project? What have you completed and what is left to do?"
2. Blockers: "Difficulties or errors encountered."
3. Availability: "How much time will you have this week to work on this issue?"
4. ETA: "When do you expect this issue to be completed?"
5. Pictures: "Add any pictures of the visual changes made to the site so far."

If you need help, be sure to either: 1) ask for help at your next meeting, 2) put a "Status: Help Wanted" label on your issue and pull request, or 3) put up a request for assistance on the #hfla-site channel.

_{You are receiving this comment because your last comment was before Tuesday, September 7, 2021 at 12:02 AM PST.}

[github-actions]

@averdin2

Please add update using the below template (even if you have a pull request). Afterwards, remove the 'To Update !' label and add the 'Status: Updated' label.

1. Progress: "What is the current status of your project? What have you completed and what is left to do?"
2. Blockers: "Difficulties or errors encountered."
3. Availability: "How much time will you have this week to work on this issue?"
4. ETA: "When do you expect this issue to be completed?"
5. Pictures: "Add any pictures of the visual changes made to the site so far."

If you need help, be sure to either: 1) ask for help at your next meeting, 2) put a "Status: Help Wanted" label on your issue and pull request, or 3) put up a request for assistance on the #hfla-site channel.

_{You are receiving this comment because your last comment was before Tuesday, September 14, 2021 at 12:02 AM PST.}