Webster Stylelint

Temple & Webster's stylelint rules, configuration, and tooling for the Webster framework and design system.

Installation

Install stylelint and @tpw/stylelint-config:

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

For design system rules, also install the tokens package:

npm install --save-dev @tpw/webster-tokens

Usage

Webster Stylelint provides multiple configurations that can be extended:

Basic Configuration

For general CSS/SCSS styling rules:

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

or explicitly:

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

Design System Configuration

For enforcing Webster Design System token usage (requires @tpw/webster-tokens):

"stylelint": {
  "extends": ["@tpw/stylelint-config/design-system"]
}

Prettier Integration

For formatting SCSS files with Prettier:

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

Running Stylelint

Add a linting script to your package.json:

"scripts": {
  "stylelint": "stylelint 'src/**/*.scss'"
}

Then run:

npm run stylelint

Configuration Details

Base Configuration

The base configuration provides general SCSS/CSS best practices and style guidelines:

• Enforces consistent formatting
• Prevents common CSS mistakes
• Ensures CSS best practices
• Orders properties alphabetically

Design System Configuration

The design system configuration extends the base config and adds:

• Enforcement of Webster Design System tokens
• Prevents use of raw color values
• Enforces usage of spacing tokens
• Ensures consistent typography
• Validates custom properties against the Webster token system

Note: Design system rules require the @tpw/webster-tokens package. If not installed, these rules will be disabled.

Prettier Configuration

The Prettier integration adds:

• Formatting via the stylelint-prettier plugin
• Reports Prettier format violations as stylelint rule violations
• Autofixes format issues with stylelint --fix

Package Structure

The package follows modern Stylelint plugin structure:

stylelint-config/
├── configs/          # Configuration presets
│   ├── base.js       # Base styling rules
│   ├── design-system.js # Design system enforcement
│   └── prettier.js   # Prettier integration
├── lib/
│   └── rules/        # All rules in a single directory
│       ├── content-no-strings/  # Base rule
│       ├── coverage/            # Design system rule
│       └── ...                  # Other rules
├── index.js          # Main entry point
└── package.json      # Package metadata

This structure follows the standard pattern used by official Stylelint plugins and makes it easy to find and maintain rules.