# Setup a monorepo

To lint a monorepo solution (multiple projects per repository), Stylelint must be setuped to lint the files at the root of the solution (the monorepo workspace) and the files of every project of the monorepo. Execute the following steps to setup Stylelint for a monorepo solution.

Open a terminal at the root of the solution workspace (the root of the repository) and install the following packages:

pnpm add -D @workleap/stylelint-configs stylelint prettier

yarn add -D @workleap/stylelint-configs stylelint prettier

npm install -D @workleap/stylelint-configs stylelint prettier

First, create a configuration file named .stylelintrc.json at the root of the solution workspace:

workspace
├── packages
├──── app
├────── src
├──────── ...
├────── package.json
├── package.json
├── .stylelintrc.json

Then, open the newly created file and extend the default configuration with the shared configurations provided by @workleap/stylelint-configs:

{
    "$schema": "https://json.schemastore.org/stylelintrc",
    "extends": "@workleap/stylelint-configs"
}

Stylelint can be configured to ignore certain files and directories while linting by specifying one or more glob patterns.

To do so, first, create an .stylelintignore file at the root of the solution workspace:

workspace
├── packages
├──── app
├────── src
├──────── ...
├────── package.json
├── package.json
├── .stylelintrc.json
├── .stylelintignore

Then, open the newly created file and paste the following ignore rules:

**/dist/*
node_modules
storybook-static
!.storybook

Since we choose to stick with ESLint for JavaScript and JSON stylistic rules, a .prettierignore file must be added at the root of the solution workspace to ignore everything but CSS files.

To do so, first, create a .prettierignore file at the root of the solution workspace:

workspace
├── packages
├──── app
├────── src
├──────── ...
├────── package.json
├── package.json
├── .stylelintrc.json
├── .stylelintignore
├── .prettierignore

Then, open the newly created file and paste the following ignore rules:

*
!**/*.css

Prettier offers built-in rules for configuring the indentation style of a codebase. However, there's a catch: when VS Code auto-formatting feature is enabled, it might conflict with the configured indentation rules if they are set differently.

To guarantee a consistent indentation, we recommend using EditorConfig on the consumer side. With EditorConfig, the indent style can be configured in a single file and be applied consistently across various formatting tools, including ESlint and VS Code.

First, create a .editorconfig file at the root of the solution workspace:

workspace
├── packages
├──── app
├────── src
├──────── ...
├────── package.json
├── package.json
├── .stylelintrc.json
├── .stylelintignore
├── .editorconfig

Then, open the newly created file and paste the following configuration:

root = true

[*]
charset = utf-8
end_of_line = lf
trim_trailing_whitespace = true
insert_final_newline = true
indent_style = space
indent_size = 4

[*.md]
trim_trailing_whitespace = false

At times, especially when running the CI build, it's useful to lint the entire solution using a single command. To do so, add the following script to your solution's workspace package.json file:

workspace
├── packages
├──── app
├────── src
├──────── ...
├────── package.json
├── package.json    <------- (this one!)
├── .stylelintrc.json
├── .stylelintignore
├── .editorconfig

{
    "lint:stylelint:": "stylelint \"**/*.css\" --cache --cache-location node_modules/.cache/stylelint"
}

The script definition may vary depending on your needs and your application configuration. For example, you might want to specify additional file extensions such as "**/*.{css,scss,sass}".

Open a terminal at the root of the project (packages/app for this example) and install the following package:

pnpm add -D @workleap/stylelint-configs

yarn add -D @workleap/stylelint-configs

npm install -D @workleap/stylelint-configs

First, create a configuration file named .stylelintrc.json at the root of the project:

workspace
├── packages
├──── app
├────── src
├──────── ...
├────── package.json
├────── .stylelintrc.json
├── package.json
├── .stylelintrc.json
├── .stylelintignore
├── .editorconfig

Then, open the newly created file and extend the default configuration with the shared configurations provided by @workleap/stylelint-configs:

{
    "$schema": "https://json.schemastore.org/stylelintrc",
    "extends": "@workleap/stylelint-configs"
}

New projects shouldn't have to customize the default configurations offered by @workleap/stylelint-configs. However, if you are in the process of migrating an existing project to use this library or encountering a challenging situation, refer to the custom configuration page to understand how to override or extend the default configurations. Remember, no locked in ❤️✌️.

To test your new setup, open a CSS file, type invalid code (e.g. color: #fff), then save. Open a terminal at the root of the solution and execute the CLI script added earlier:

pnpm lint:stylelint

yarn lint:stylelint

npm run lint:stylelint

The terminal should output a linting error.