@bonesofspring/stylelint-react

Shared Stylelint config for React projects with Linaria CSS-in-JS.

Note: This package is primarily intended for personal use by Revy Ross. It is published for convenience but may not suit all projects.

Table of Contents

• Features
• Requirements
• Installation
• Quick Start
• Configuration
• Editor Setup
• Config Details
• License

Features

• Linaria support — Uses @linaria/postcss-linaria for CSS-in-JS syntax
• Standard rules — Extends stylelint-config-standard (modern CSS conventions)
• Property order — Extends stylelint-config-idiomatic-order (idiomatic-css declaration order)
• Custom overrides — Disabled rules for Linaria compatibility (:global, etc.)

Requirements

• Stylelint ^17.4.0
• Node.js >= 20.0.0
• Linaria (for CSS-in-JS projects)

Installation

# yarn
yarn add -D @bonesofspring/stylelint-react stylelint

# npm
npm install -D @bonesofspring/stylelint-react stylelint

# pnpm
pnpm add -D @bonesofspring/stylelint-react stylelint

Quick Start

// stylelint.config.js
module.exports = {
  extends: ['@bonesofspring/stylelint-react'],
}

Configuration

Basic

// stylelint.config.js
module.exports = {
  extends: ['@bonesofspring/stylelint-react'],
}

With custom rules

// stylelint.config.js
module.exports = {
  extends: ['@bonesofspring/stylelint-react'],
  rules: {
    'selector-max-id': 1,
  },
}

Non-Linaria projects

This config uses @linaria/postcss-linaria as customSyntax. For plain CSS/SCSS projects, override it:

// stylelint.config.js
module.exports = {
  extends: ['@bonesofspring/stylelint-react'],
  customSyntax: 'postcss-scss', // or undefined for plain CSS
}

Editor Setup

Fix on save

VS Code / Cursor — install Stylelint extension and add to settings.json:

{
  "editor.codeActionsOnSave": {
    "source.fixAll.stylelint": "explicit"
  }
}

WebStorm — Settings → Languages & Frameworks → Style Sheets → Stylelint → enable Run Stylelint --fix on save.

Config Details

Extended configs

| Config | Description | |--------|-------------| | stylelint-config-standard | Standard rules (extends recommended, modern CSS conventions) | | stylelint-config-idiomatic-order | Property order per idiomatic-css |

Custom syntax

• @linaria/postcss-linaria — Parses Linaria CSS-in-JS (e.g. css`...` template literals)

Rules

| Rule | Value | Notes | |------|-------|-------| | no-duplicate-selectors | true | Disallow duplicate selectors | | no-empty-source | null | Disabled (Linaria may produce empty sources) | | selector-class-pattern | null | Disabled (Linaria class names) | | function-linear-gradient-no-nonstandard-direction | null | Disabled | | declaration-block-no-redundant-longhand-properties | [true, { ignoreShorthands: ['grid-template', 'inset'] }] | Allow grid-template/inset shorthand | | media-query-no-invalid | null | Disabled | | media-feature-range-notation | null | Disabled | | comment-empty-line-before | null | Disabled | | font-family-name-quotes | null | Disabled | | font-family-no-missing-generic-family-keyword | null | Disabled | | selector-pseudo-class-no-unknown | [true, { ignorePseudoClasses: ['global'] }] | Allow :global for Linaria |

License

MIT