stylelint on create-react-app @import-normalize throw error

Question

I followed this doc to add CSS reset to my app.
https://create-react-app.dev/docs/adding-css-reset/#indexcss

But it showed this message:

"stylelint": {
"extends": "stylelint-config-recommended",
"rules": {
  "at-rule-no-unknown": null
}

How to fix this problem?it is annoying...

Kea

I just turned off "CSS at rule" in a WebStorm settings, under inspections > css. – Coit

Answer 1

To fix this warning you just need to add this line to.vscode/settings.json inside your project (you can create this file if it doesn't already exist):

{
  "css.lint.unknownAtRules": "ignore"
}

Source: https://create-react-app.dev/docs/adding-css-reset/#indexcss

Ecliptic

Answer 2

For VS Code -

To make the VS Code recognise this custom CSS directive, you can provide custom data for VS Code's CSS Language Service as mentioned here - https://github.com/Microsoft/vscode-css-languageservice/blob/master/docs/customData.md.

Create a CSS custom data set file with the following info. Place it at location .vscode/custom.css-data.json relative to the project root.

{
  "version": 1.1,
  "properties": [],
  "atDirectives": [
    {
      "name": "@import-normalize",
      "description": "bring in normalize.css styles"
    }
  ],
  "pseudoClasses": [],
  "pseudoElements": []
}

Now, if you don't have already, create a .vscode\settings.json file relative to project root. Add a field with key "css.customData" and value as the path to custom data set. For example,

{
  "css.customData": ["./.vscode/custom.css-data.json"]
}

Now, you will no longer get "Unknown at rule" warning. When you hover over "@import-normalize", you will see the description you set for it in custom.css-data.json

Shashaban

Answer 3

@import-normalize is a non-standard at-rule. From the rule's documentation:

This rule considers at-rules defined in the CSS Specifications, up to and including Editor's Drafts, to be known.

However, the rule has an ignoreAtRules secondary option for exactly this use case, where you can list the non-standard imports you are using.

For example, in your package.json:

{
  "stylelint": {
    "extends": "stylelint-config-recommended",
    "rules": {
      "at-rule-no-unknown": [true, {
        "ignoreAtRules": ["import-normalise"]
      }]
    }
  }
}

Or within your .stylelintrc file:

{
  "extends": "stylelint-config-recommended",
  "rules": {
    "at-rule-no-unknown": [true, {
      "ignoreAtRules": ["import-normalise"]
    }
  }
}

Exculpate

Does stylelint really come with CRA? – Winged

I tried this method with CRA (create-react-app). It did not work. – Shashaban