@equisoft/stylelint-config
This is Equisoft's stylelint config. This can be used with projects that rely on styled-components as stylelint now supports css-in-js syntax.
Versioning
The versioning of this project respects semver. That means your project's package.json can caret (^
) import it.
Installation
Install the libraries in your project:
yarn add --dev stylelint stylelint-order @equisoft/stylelint-config postcss postcss-styled-syntax
Then create a .stylelintrc file that uses Equisoft's configuration:
{
"extends": ["@equisoft/stylelint-config"]
}
Finally create a script in your package.json to easily run stylelint:
{
"scripts": {
"stylelint": "stylelint --config .stylelintrc --custom-formatter @equisoft/stylelint-config/formatter 'src/**/*.{css,scss,js,jsx,ts,tsx}'",
"stylelint:ci": "yarn stylelint"
}
}
Now you can use yarn stylelint
to validate the code style of your files!
Continuous Integration
We strongly suggest that you enforce code style checks on your CI. For example, on Github Actions you can add a configuration similar to this one to your workflow:
stylelint:
name: Stylelint
runs-on: ubuntu-latest
steps:
- name: Checkout
uses: actions/checkout@v3
- name: Setup asdf-vm
uses: equisoft-actions/with-asdf-vm@v1
- name: Install NPM dependencies
uses: equisoft-actions/yarn-install@v1
- name: Run Stylelint
uses: equisoft-actions/yarn-stylelint@v1
Migrating an existing codebase
Stylelint supports exclusion of globs in .stylelintignore. One way to gradually migrate a legacy code base to this configuration is to exclude all source files and add conforming files one at a time. To achieve this, add this key to your ".stylelintignore" file:
src/**/*.scss
!src/contacts/**/*.scss
Note how an entry prefixed by !
is added to re-include some source files.
For more information on this technique, you can read the stylelint documentation.