Permalink
Switch branches/tags
Nothing to show
Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
52 lines (45 sloc) 1.88 KB

Stylelint Config

Setup

  1. Install both Stylelint and the Smoothie Config
    npm i --save-dev stylelint @smoothie-css/stylelint-config
  2. Load the configuration object in your preferred format and add the following to the top of your file:
    {
      "extends": [
        "@smoothie-css/stylelint-config"
      ],
      ...
    }
  3. Run the following command to lint your CSS with the Stylelint config:
    stylelint '**/*.css'
    You could also set this as an npm script within your project's package.json:
    "scripts": {
      "lint:css": "stylelint '**/*.css'"
    }
    in this example, running via npm run lint:css

Mixing Syntax

If you're using different syntax to write styles in your project, you may have to separate out your configs.

For example, let's say you're using vanilla CSS and Styled Components (CSS-in-JS library):

  1. Create a new .stylelint directory in your project, with two JSON config files (one for each):

    .stylelint
      ├── css.json
      └── styled-components.json
    
  2. Follow the previous setup steps to extend Smoothie's config in both files.

    Note: For the majority of CSS-in-JS libraries that use tagged template literals, you'll need to make use of stylelint-processor-styled-components.

  3. Set-up a script for each tool, with one that runs both:

    "scripts": {
        "lint:css": "stylelint '**/*.css' --config .stylelint/css.json",
        "lint:styled-components": "stylelint '**/*.js' --config .stylelint/styled-components.json",
        "lint": "npm run lint:css && npm run lint:styled-components"
    }