Stylelint for all the SCSS files #196
Conversation
src/app/components/home/layout.scss
Outdated
| @@ -151,14 +151,14 @@ $sidebar-width: 190px; | |||
| box-sizing: border-box; | |||
| height: 100vh; | |||
| max-width: $sidebar-width !important; | |||
| // don't alphabetize for some reason | |||
There was a problem hiding this comment.
I'll need to check this manually 🙆♂
src/app/components/home/buttons.scss
Outdated
|
|
||
| background: $gray-15; | ||
| border: 1px solid $gray-30; // don't alphabetize this one |
| @@ -34,7 +34,9 @@ | |||
| "electron:local": "npm run build:prod && electron .", | |||
| "electron:linux": "npm run build:prod && electron-builder build --linux", | |||
| "electron:windows": "npm run build:prod && electron-builder build --windows", | |||
| "electron:mac": "npm run build:prod && electron-builder build --mac" | |||
| "electron:mac": "npm run build:prod && electron-builder build --mac", | |||
| "lint:scss": "stylelint \"./src/**/*.scss\"", | |||
There was a problem hiding this comment.
Maybe we should include this in one of the building commands above? 🤔
There was a problem hiding this comment.
Would be good to automate the lint sometime, but I don't think it would be a good idea during the build.
I see the lint as a general house-cleaning procedure to keep our SCSS organized (more-readable / easier to search through). It's not important for the built app.
The biggest problem is that since the lint alphabetizes things, some properties might override the behavior of others above, resulting in an incorrect display of some elements. I'd rather have the build come out as-close to the dev environment as possible 😅
There was a problem hiding this comment.
To be clear, I meant lint:scss just to display the warnings (I assume that's what it does), rather than the lint:scss:fix version to actually change the code! 👍
That way you're more likely to notice, oh, I should change that, rather than remembering to run the linter! 😅
Stylelint is awesome for keeping all the CSS properties alphabetized for easier reference 👍
Now you can run
npm run lint:scss:fixto fix all the SCSS 🚀There are some😅do not alphabetizecomments in the code I'll need to double-check and make sure nothing broke visuallyupdate: all works fine ✅