@wistia/stylelint-config

Wistia's Stylelint rules and configurations for CSS, SCSS, and styled-components.

Installation

Install stylelint and @wistia/stylelint-config:

With Yarn

yarn add --dev stylelint @wistia/stylelint-config

With npm

npm install stylelint @wistia/stylelint-config --save-dev

Usage

Wistia's stylelint rules come bundled in @wistia/stylelint-config. To enable these rules, add a stylelint property in your package.json. See the stylelint configuration docs for more details.

Default Configuration (CSS)

{
  "stylelint": {
    "extends": ["@wistia/stylelint-config"]
  }
}

SCSS Configuration

{
  "stylelint": {
    "extends": ["@wistia/stylelint-config/scss"]
  }
}

Styled Components Configuration

{
  "stylelint": {
    "extends": ["@wistia/stylelint-config/styled-components"]
  }
}

Now you can run stylelint by adding the following linting scripts to your package.json. See the stylelint CLI docs for more details.

{
  "scripts": {
    "lint:css": "stylelint 'src/**/*.css'",
    "lint:scss": "stylelint 'src/**/*.scss'",
    "lint:js": "stylelint 'src/**/*.{js,jsx,ts,tsx}'"
  }
}

Run it:

With Yarn

yarn run lint:css
yarn run lint:scss
yarn run lint:js

With npm

npm run lint:css
npm run lint:scss
npm run lint:js

Available Configurations

This package provides three different configurations:

• Default (@wistia/stylelint-config): Standard CSS rules with comprehensive linting for regular CSS files
• SCSS (@wistia/stylelint-config/scss): Extended configuration with SCSS-specific rules using stylelint-scss plugin
• Styled Components (@wistia/stylelint-config/styled-components): Configuration optimized for CSS-in-JS with styled-components

Auto-fixing

All configurations support auto-fixing where possible. Add the --fix flag to automatically fix linting errors:

stylelint --fix 'src/**/*.{css,scss}'

Node.js Support

This package requires Node.js >= 18.12.0.

Development

This repo is maintained by Wistia Engineering and is published to NPM for ease of distribution across Wistia projects.