<p align="center"><img src="https://raw.githubusercontent.com/Phillip9587/nx-stylelint/main/banner.svg" alt="nx-stylelint Banner"/></p> <div align="center">

nx-stylelint

Nx plugin to use Stylelint in your Nx workspace.

</div> <hr/>

🚀 Features

nx-stylelint provides a set of power-ups for Nx to lint your projects with Stylelint.

• Plugin: Provides a experimental plugin to infer your stylelint target when a configuration file exists.
• Executor: Provides an executor to lint your styles with Stylelint.
• Generators: Helping you to configure your projects.
• Configuration: Per Project configuration of Stylelint extending a workspace configuration.
• Only Affected: Uses Nx to support linting only affected projects.
• Cache: Uses Nx to cache already linted projects.

📦 Installation

using npm

npm i -D nx-stylelint

using yarn

yarn add -D nx-stylelint

using pnpm

pnpm add -D nx-stylelint

🛠️ Configuring Stylelint for a project

To add a stylelint configuration to a project you just have to run the nx-stylelint:configuration generator.

nx g nx-stylelint:configuration --project <projectName>

The generator adds a .stylelintrc.json at the project root which extends the root .stylelintrc.json and adds a stylelint target to the project.

At the first run the generator installs all required dependencies and creates a .stylelintrc.json file at the workspace root. It also configures the namedInputs for the stylelint targets.

Using the Experimental Plugin

Read the official NX docs to understand Infered Tasks: https://nx.dev/concepts/inferred-tasks

Adding the plugin is currently not supported by the generators.

To add the plugin add the following to your nx.json:

{
  "plugins": [
    {
      "plugin": "nx-stylelint/plugin",
      "options": {
        "targetName": "stylelint",
        "extensions": ["css"]
      }
    }
  ]
}

targetDefaults can be configured e.g. --allow-empty-input:

"targetDefaults": {
    "stylelint": {
        "options": {
            "args": ["--allow-empty-input"]
        }
    }
}

You don't need a stylelint target in your project.json files anymore. If you want to configure options for a single project provide the target and add the stylelint CLI arguments as documented at https://stylelint.io/user-guide/cli#options.

"targets": {
    "stylelint": {
        "options": {
            "args": [
                "--report-descriptionless-disables"
            ]
        }
    }
}

Examples

Run nx-stylelint for a project

nx stylelint {{projectName}}

Run nx-stylelint for all projects

nx run-many --target=stylelint

Run nx-stylelint for affected projects

nx affected --target=stylelint

📖 Documentation

nx-stylelint:configuration generator

Add stylelint configuration to a project.

Usage

Add configuration to a project:

nx g nx-stylelint:configuration --project projectName

Options

| Option | Value | Description | | ------------ | --------------------------------------------------------------- | ------------------------------------------------------------------------------------- | | formatter | compact | json | string | tap | unix | verbose | Stylelint Output formatter (https://stylelint.io/user-guide/usage/options#formatter). | | project | string | The name of the project. | | scss | boolean | Add SCSS Language support. | | skipFormat | boolean | Skip formatting files. |

nx-stylelint:lint executor

Run stylelint on a project.

Target Options can be configured in project.json or when the executor is invoked.

See: https://nx.dev/configuration/projectjson#targets

Options

| Option | Value | Default | Description | | ------------------------------- | ---------- | -------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | allowEmptyInput | boolean | true | The executor exits without throwing an error when 'lintFilePatterns' match no files. | | cache | boolean | false | Store the results of processed files so that Stylelint only operates on the changed ones. | | cacheLocation | string | | Path to a file or directory for the cache location. | | configFile | string | | Path to a stylelint configuration file. | | fix | boolean | false | Fixes linting errors (may overwrite linted files). | | force | boolean | false | Succeeds even if there were linting errors. | | formatter | string | string | Specify the formatter to format your results (Stylelint Docs). compact | github | json | string | tap | unix | verbose or a npm package (e.g. stylelint-formatter-pretty) or a path to a local formatter (e.g. tools/stylelint-formatter.js) | | ignoreDisables | boolean | false | Ignore stylelint-disable comments.