@equisoft/stylelint-config-styled-components

This is Equisoft's stylelint config for use in projects that rely on styled-components.

Because this package comes with its own stylelint dependency, your project only needs this package. It doesn't need to have stylelint as a dependency.

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 @equisoft/stylelint-config-styled-components

Then create a .stylelintrc file that uses Equisoft's configuration:

{
  "extends": ["@equisoft/stylelint-config-styled-components"]
}

Finally create a script in your package.json to easily run stylelint:

{
  "scripts": {
    "stylelint": "stylelint 'src/**/*.{css,scss}'",
    "stylelint:ci": "yarn stylelint"
  }
}

Now you can use yarn stylelint to validate the code style of your CSS files!

Continuous Integration

We strongly suggest that you enforce code style checks on your CI. For example, on CircleCI you can add a configuration similar to this one to your .circleci/config.yml:

orbs:
  eq: equisoft/build-tools@latest

jobs:
  stylelint:
    executor: node
    steps:
      - eq/with-yarn-cache
      - run:
          name: Stylelint
          command: yarn stylelint:ci

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.