LINTING.md

Linting

There are separate installations based on whether you use stylelint v13 or stylelint v14

Stylelint 13

For linting styles with stylelint 13, use @linaria/stylelint.

Installation

Install stylelint and optionally your favorite config (such as stylelint-config-recommended) in your project:

yarn add --dev stylelint stylelint-config-recommended @linaria/stylelint

Configuring stylelint

All you need to do is to set your config to extend from @linaria/stylelint.

Here's the example .stylelintrc configuration file:

{
  "extends": [
    "stylelint-config-recommended",
    "@linaria/stylelint"
  ]
}

Please refer to the official stylelint documentation for more info about configuration.

The preprocessor will use the options from the configuration file for processing your files.

Stylelint 14

For linting styles with stylelint 14, use @linaria/stylelint-config-standard-linaria.

Installation

Install stylelint and @linaria/stylelint-config-standard-linaria

yarn add --dev stylelint @linaria/stylelint-config-standard-linaria

Configuring stylelint

For the standard configuration you can extend from @linaria/stylelint-config-standard-linaria.

Here's an example .stylelintrc configuration file:

{
  "extends": [
    "@linaria/stylelint-config-standard-linaria"
  ]
}

@linaria/stylelint-config-standard-linaria extends stylelint-config-standard which extends stylelint-config-recommended so you do NOT need to add those separately. It also sets the customSyntax as @linaria/postcss-linaria and adds a few rules.

Alternatively, to just use the custom syntax you can add @linaria/postcss-linaria Here's an example .stylelintrc configuration file:

{
  "customSyntax": "@linaria/postcss-linaria"
}

Please refer to the official stylelint documentation for more info about configuration.

Why did the configuration change between Stylelint v13 and v14?

Stylelint 14 encourages the use of a custom syntax instead of a processor. @linaria/stylelint-config-standard-linaria sets the custom syntax to @linaria/postcss-linaria, a custom syntax for linaria, whereas @linaria/stylelint uses a processor. The custom syntax has the benefit of being able to support stylelint --fix whereas the processor cannot.

Usage

Linting your files

Add the following to your package.json scripts:

"lint:css": "stylelint src/**/*.js"

Now, you can run yarn lint:css to lint the CSS in your JS files with stylelint.

For more information refer to stylelint documentation.

Editor Setup

In order to make the vscode-stylelint extension work with this syntax correctly, you must configure it to validate the files you use linaria in by specifying an array of language identifiers.

You can do this by following these instructions.

For example:

{
  "stylelint.validate": ["typescriptreact"]
}