#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

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

yarn dlx 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

yarn add -D stylelint stylelint-config-standard-scss

pnpm add -D stylelint stylelint-config-standard-scss

bun add -D stylelint stylelint-config-standard-scss

deno add -D npm:stylelint npm: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

pnpm lint:styles

yarn lint:styles

If you do not have a script yet:

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

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

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

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

deno stylelint npm:'**/*.{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

yarn add -D stylelint-prettier prettier

pnpm add -D stylelint-prettier prettier

bun add -D stylelint-prettier prettier

deno add -D npm:stylelint-prettier npm: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.