How can I declare two different configurations to .stylelint

Question

I use Stylelint on my project to check styles. I'm using a plugin that should only run on one folder. And the main configuration that is done for the whole project. .stylelint file:

{
    "extends": "stylelint-config-standard",
    "plugins": [
        "stylelint-scss",
        "stylelint-no-px"
     ],
    "rules": {
        ...
    }
}

and run command: "stylelint": "stylelint \"src/**/*.scss\"". But i have to use "stylelint-no-px" pluggin only on src/app folder

There was an idea to create two launch commands for different folders(src/app and whole src), but in this case app folder would be checked twice.

Is there any way to create two different configs that could inherit from each other? For example, the first one is called only on src/app folder, and the second without a plugin is called on src/ folder and excludes src/app folder.

Answer 1

You can use the overrides configuration property to modify a Stylelint config for a specified set of files.

For example, to additionally run the stylelint-no-px plugin on the *.scss files in the src/app directory:

{
    "extends": "stylelint-config-standard",
    "plugins": [
        "stylelint-scss",
        "stylelint-no-px"
     ],
    "rules": {
        ... // don't include meowtec/no-px here
    },
    "overrides": [
    {
      "files": ["src/app/*.scss", "src/app/**/*.scss"],
      "rules": {
        "meowtec/no-px": true
      }
    }
  ]
}

You can then continue to run Stylelint only once using the following command:

stylelint "src/**/*.scss"