Stylelint#

Keep stylesheet quality consistent across extension surfaces and catch CSS issues early. Stylelint runs through scripts or CI, not through the Extension.js dev/build pipeline.

When Stylelint is a good fit#

• You maintain shared CSS/Sass/Less across multiple extension surfaces.
• You want style-quality checks before pull requests merge.
• You need consistent stylesheet conventions in team workflows.

Stylelint capabilities#

Template examples#

Stylelint config template#

Preconfigured setup for style linting.

npx extension@latest create my-extension --template=new-config-stylelint

Repository: examples/new-config-stylelint

Usage with an existing extension#

Install Stylelint dependencies:

npm install -D stylelint stylelint-config-standard-scss

Stylelint configuration#

Create a Stylelint config file at the project root (for example .stylelintrc.json):

{
  "extends": "stylelint-config-standard-scss",
  "rules": {
    "color-no-invalid-hex": true,
    "block-no-empty": true
  }
}

Run Stylelint#

npm run lint:styles

If you do not have a script yet:

npm stylelint '**/*.{css,scss,sass,less}'

Integrating Stylelint with Prettier#

You can integrate Stylelint with Prettier to automatically format and lint your styles. To do this, install the following dependencies:

npm install -D stylelint-prettier prettier

Then, update your .stylelintrc.json file to include Prettier:

{
  "extends": [
    "stylelint-config-standard-scss",
    "stylelint-prettier/recommended"
  ]
}

This keeps style formatting and linting concerns aligned.

Best practices#

• Keep a dedicated lint:styles command and run it in CI.
• Use one shared config across extension packages in monorepos.
• Pair Stylelint and Prettier so style formatting stays deterministic.

Detection notes#

Extension.js can detect Stylelint config files for diagnostics/reporting, but it does not inject Stylelint into the build pipeline.

Next steps#

• Learn how to integrate Prettier into your formatting workflow.
• Configure PostCSS for stylesheet transforms.