Adds Stylelint

[marcelorisse]

Fixes #22

Changes

• Added linting with stylelint
• Lint runs in precommit script

Screenshot/GIF

Checks

• Passes linting
• Consistent look across browsers

[jh3y]

Hey @marcelorisse 👋

This is brilliant! Thank you for contributing 👍
Do we need to add stylelint-scss as a plugin? Or does the extension handle that for us?
Are there any rules/config you think we should set?
I'm surprised there are no source changes 😅

[marcelorisse]

Hello @jh3y!

This is brilliant! Thank you for contributing 👍

No problem, I'm glad I can help 🙂

Do we need to add stylelint-scss as a plugin? Or does the extension handle that for us?

No need for that, I've added stylelint's command to lint-staged so it'll run on staged files.

Are there any rules/config you think we should set?

I've used stylelint-config-recommended-scss as it's recommended by stylelint documentation:
If you use language extensions, for example @if and @extends, you can use a community config like stylelint-config-recommended-scss instead. (https://stylelint.io/#extend-a-shared-configuration). I'd say it's enough for now.

I'm surprised there are no source changes 😅

There are few errors when you run yarn stylelint "src/**/*.scss" --syntax scss but I wasn't sure if I should fix them. I can do it if you think it's a good idea.

[jh3y]

Hey @marcelorisse 👋

Do we need to add stylelint-scss as a plugin? Or does the extension handle that for us?

No need for that, I've added stylelint's command to lint-staged so it'll run on staged files.

I'm referring to stylelint-scss, the stylelint plugin 👍 I noticed that was being used in stylelint-config-recommended-scss and wondered if by using the extension, we don't need to declare it as a plugin 🤔

{
  "extends": "stylelint-config-recommended-scss",
  "plugins": [ "stylelint-scss" ]
}

However, now you mention that. It would be great to expose the linting command as an npm script inside package.json.

  "lint:whirls": "stylelint "src/**/*.scss" --syntax scss"

That way a user can manually lint from within the editor, CLI, etc. without the need to commit. Taking it a step further using react-app-rewired could allow for lint on save. I'm not sure of the benefit here though and it's certainly down to what users prefer.

As for errors. If we opt to fix them, it might be better to do that in another commit/PR 👍

[marcelorisse]

Hey @marcelorisse 👋

Do we need to add stylelint-scss as a plugin? Or does the extension handle that for us?

No need for that, I've added stylelint's command to lint-staged so it'll run on staged files.

I'm referring to stylelint-scss, the stylelint plugin 👍 I noticed that was being used in stylelint-config-recommended-scss and wondered if by using the extension, we don't need to declare it as a plugin 🤔

{
  "extends": "stylelint-config-recommended-scss",
  "plugins": [ "stylelint-scss" ]
}

stylelint-config-recommended-scss already declares this plugin: https://github.com/kristerkari/stylelint-config-recommended-scss/blob/master/index.js#L5

However, now you mention that. It would be great to expose the linting command as an npm script inside package.json.

  "lint:whirls": "stylelint "src/**/*.scss" --syntax scss"

That way a user can manually lint from within the editor, CLI, etc. without the need to commit. Taking it a step further using react-app-rewired could allow for lint on save. I'm not sure of the benefit here though and it's certainly down to what users prefer.

Good idea, I can add it :)

As for errors. If we opt to fix them, it might be better to do that in another commit/PR 👍

Sounds good, should be done after merging this PR though and would be good to have an issue for that.

[jh3y]

Sounds great to me 👍

That small update to package.json and LGTM 💪

[jh3y]

Love it 🎉 This is great.

Thanks @marcelorisse for the contribution!