Skip to content

Commit

Permalink
feat: add linter executor
Browse files Browse the repository at this point in the history
  • Loading branch information
@mcfdez
mcfdez committed Apr 11, 2024
1 parent 11050b2 commit f6d095e
Show file tree
Hide file tree
Showing 5 changed files with 197 additions and 49 deletions.
188 changes: 187 additions & 1 deletion README.md
View file
Original file line number Diff line number Diff line change
@@ -1 +1,187 @@
# nx-biome
<p align="center"><img src="https://raw.githubusercontent.com/Phillip9587/nx-stylelint/main/banner.svg" alt="nx-stylelint Banner"/></p>

<div align="center">

# nx-biome

**[Nx](https://nx.dev) plugin to use [Biome](https://biomejs.dev/) toolchain in your Nx workspace.**

[![Nx peer dependency version](https://img.shields.io/npm/dependency-version/nx-stylelint/@nx/devkit?label=Nx&logo=nx&style=flat-square)](https://nx.dev)
[![Stylelint peer dependency version](https://img.shields.io/npm/dependency-version/nx-stylelint/peer/stylelint?label=Stylelint&logo=stylelint&style=flat-square)](https://stylelint.io)
[![CI](https://img.shields.io/github/actions/workflow/status/Phillip9587/nx-stylelint/ci.yml?branch=main&label=CI&style=flat-square&logo=github)](https://github.com/Phillip9587/nx-stylelint/actions/workflows/ci.yml)
[![LICENSE](https://img.shields.io/github/license/phillip9587/nx-stylelint?style=flat-square)](https://github.com/phillip9587/nx-stylelint/blob/main/LICENSE)
[![npm version](https://img.shields.io/npm/v/nx-stylelint?style=flat-square&logo=npm)](https://www.npmjs.com/package/nx-stylelint)
[![npm](https://img.shields.io/npm/dt/nx-stylelint?style=flat-square&logo=npm)](https://www.npmjs.com/package/nx-stylelint)

</div>

<hr/>

# 🚀 Features

nx-stylelint provides a set of power-ups for [Nx](https://nx.dev) to lint your projects with [Stylelint](https://stylelint.io).

- **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](https://npmjs.com)**

```shell
npm i -D @gitopslovers/nx-biome
```

# 🛠️ Configuring Biome for a project

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

```shell
nx g @gitopslovers/nx-biome:configuration --project <projectName>
```

The generator adds a `biome.json` configuration file at the project root which extends the root `biome.json` and adds a `biome-lint` target to the project.

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

# Examples

Run biome-lint for a project

```shell
nx biome-lint {{projectName}}
```

Run biome-lint for all projects

```shell
nx run-many --target=biome-lint
```

Run biome-lint for affected projects

```shell
nx affected --target=biome-lint
```

# 📖 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` \| `github` \| `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](https://stylelint.io/user-guide/usage/options#formatter)). `compact` \| `github` \| `json` \| `string` \| `tap` \| `unix` \| `verbose` or a npm package (e.g. [`stylelint-formatter-pretty`](https://www.npmjs.com/package/stylelint-formatter-pretty)) or a path to a local formatter (e.g. `tools/stylelint-formatter.js`) |
| `ignoreDisables` | `boolean` | `false` | Ignore `stylelint-disable` comments. |
| `ignorePath` | `string` | | A path to a file containing patterns describing files to ignore. The path can be absolute or relative to `process.cwd()`. By default, Stylelint looks for `.stylelintignore` in `process.cwd()`. |
| `lintFilePatterns` | `string[]` | | One or more files/dirs/globs to pass directly to Stylelint's lint() method. |
| `maxWarnings` | `number` | | Number of warnings to trigger a nonzero exit code. |
| `outputFile` | `string` | | File to write the report to. |
| `quiet` | `boolean` | `false` | Only register problems for rules with an "error"-level severity (ignore "warning"-level). |
| `reportDescriptionlessDisables` | `boolean` | `false` | Report `stylelint-disable` comments without a description. |
| `reportInvalidScopeDisables` | `boolean` | `false` | Report `stylelint-disable` comments that don't match rules that are specified in the configuration object. |
| `reportNeedlessDisables` | `boolean` | `false` | Report `stylelint-disable` comments that don't actually match any lints that need to be disabled. |
| `silent` | `boolean` | `false` | Hide output text. |

# Custom Formatters

nx-stylelint supports custom stylelint formatters. You can either install them with your package manager or write your own formatter.

For a guide on writing custom formatters see: https://stylelint.io/developer-guide/formatters

For a list of installable formatters take a look at:

- https://github.com/stylelint/awesome-stylelint#formatters
- https://www.npmjs.com/search?q=stylelint-formatter

## Usage

To use a custom formatter you have to configure the `formatter` option of your `stylelint` target. Target Options can be configured in the `project.json` file of your project or when invoking it (https://nx.dev/configuration/projectjson#targets).

You can provide a path to your custom formatter:

```json
{
"projectType": "library",
"sourceRoot": "libs/styles/src",
"targets": {
"stylelint": {
"executor": "nx-stylelint:lint",
"outputs": ["{options.outputFile}"],
"options": {
"lintFilePatterns": ["libs/styles/**/*.css"],
"formatter": "tools/my-own-stylelint-formatter.js"
}
}
}
}
```

Or the name of your installed formatter package e.g. [`stylelint-formatter-pretty`](https://www.npmjs.com/package/stylelint-formatter-pretty). Scoped packages are also supported:

```json
{
"projectType": "library",
"sourceRoot": "libs/styles/src",
"targets": {
"stylelint": {
"executor": "nx-stylelint:lint",
"outputs": ["{options.outputFile}"],
"options": {
"lintFilePatterns": ["libs/styles/**/*.css"],
"formatter": "stylelint-formatter-pretty"
}
}
}
}
```

# Compatibility with Nx and Stylelint

**nx-stylelint** depends on **Nx** and **Stylelint**. This table provides the compatibility matrix between versions of **nx-stylelint**, **Nx** and **Stylelint**.

| nx-stylelint Version | Nx Version | Stylelint Version |
| -------------------- | ---------------------- | ---------------------- |
| `^17.1.0` | `^17.0.0 \|\| ^18.0.0` | `^15.0.0 \|\| ^16.0.0` |
| `^17.0.0` | `^17.0.0 \|\| ^18.0.0` | `^15.0.0` |
| `^16.0.0` | `^16.0.0` | `^15.0.0` |
| `^15.0.0` | `^15.0.0` | `^15.0.0` |
| `^14.0.0` | `^14.0.0` | `^14.10.0` |
| `^13.0.0` | `>=12.0.0` | `^14.0.0` |
| `^12.0.0` | `>=12.0.0` | `^13.0.0` |
| `^11.0.0` | `^11.0.0` | `^13.0.0` |
8 changes: 4 additions & 4 deletions plugin/executors.json
View file
Original file line number Diff line number Diff line change
@@ -1,9 +1,9 @@
{
"executors": {
"compiler": {
"implementation": "./src/executors/compiler/executor",
"schema": "./src/executors/compiler/schema.json",
"description": "Compile Sass files to CSS"
"biome-lint": {
"implementation": "./src/executors/lint/executor",
"schema": "./src/executors/lint/schema.json",
"description": "Lint files using Biome"
}
}
}
9 changes: 0 additions & 9 deletions plugin/src/executors/compiler/schema.d.ts
View file

This file was deleted.

21 changes: 0 additions & 21 deletions plugin/src/executors/compiler/schema.json
View file

This file was deleted.

20 changes: 6 additions & 14 deletions plugin/src/executors/compiler/executor.ts → plugin/src/executors/lint/executor.ts
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import { exec } from 'child_process';
import { CompileExecutorSchema } from './schema';
import { LintExecutorSchema } from './schema';

/**
* Execute a command and return a promise
Expand Down Expand Up @@ -32,22 +32,14 @@ export function execPromise(cmd: string): Promise<string> {
}

/**
* Run the compile executor
* Run the lint executor
*
* @param options The options for the compile executor
* @param options The options for the lint executor
*/
export default async function runExecutor(options: CompileExecutorSchema) {
let sassCommand = `sass ${options.main} ${options.outputPath}/styles.css`;
export default async function runExecutor(options: LintExecutorSchema) {
const lintCommand = `biome lint ${options.lintFilePatterns}`;

if (!options.sourceMap) {
sassCommand += ' --no-source-map';
}

if (options.watch) {
sassCommand += ' --watch';
}

await execPromise(sassCommand);
await execPromise(lintCommand);

return {
success: true,
Expand Down

0 comments on commit f6d095e

Please sign in to comment.