@stinkstudios/stylelint-config-react-app NPM

@stinkstudios/stylelint-config-react-app

Extends

Plugins

Installation

yarn add @stinkstudios/stylelint-config-react-app

Has a peer dependency of stylelint@^9.10.1. If you haven't added stylelint to your project then

yarn add stylelint@^9.10.1

Usage

If you've installed @stinkstudios/stylelint-config-react-app locally within your project, just set your stylelint config to:

{
  "extends": "@stinkstudios/stylelint-config-react-app"
}

Extending the config

Simply add a "rules" key to your config, then add your overrides and additions there.

For example, to change the at-rule-no-unknown rule to use its ignoreAtRules option, change the indentation to tabs, turn off the number-leading-zero rule,and add the unit-whitelist rule:

{
  "extends": "@stinkstudios/stylelint-config-react-app",
  "rules": {
    "at-rule-no-unknown": [
      true,
      {
        "ignoreAtRules": ["extends", "ignores"]
      }
    ],
    "indentation": "tab",
    "number-leading-zero": null,
    "unit-whitelist": ["em", "rem", "s"]
  }
}

stylelint-no-unsupported-browser-features

As this preset uses stylelint-no-unsupported-browser-features you will getting warnings for unsupported css features to ignore these you can add to your stylelint config rules.

"plugin/no-unsupported-browser-features": [
  true,
  {
    "severity": "warning",
    "ignore": [
      "calc",
      "css-animation",
      "flexbox",
      "transforms2d",
      "viewport-units"
    ]
  }
]

Visual Studio Code Setup

To have Visual Studio Code format your .css files use the below extensions and settings.

It will also autofix order/properties-order errors

Extensions

Settings

{
  "css.validate": false,
  "less.validate": false,
  "scss.validate": false
  "[css]": {
    "editor.formatOnSave": true
  },
  "prettier.stylelintIntegration": true
}