Stylelint for browser extension CSS

Keep stylesheet quality consistent across extension surfaces and catch CSS issues early. Stylelint runs through scripts or continuous integration (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

Capability	What it gives you
CSS quality checks	Catch invalid patterns and enforce style conventions
Preprocessor support	Lint CSS, Sass, and Less in one workflow
Script and CI integration	Run style checks before merge and release
Formatter alignment	Combine with Prettier to reduce style-tool conflicts

Template examples

Stylelint configuration template

Preconfigured setup for style linting.

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

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

yarn dlx extension@latest create my-extension --template=newtab-config-stylelint

bunx extension@latest create my-extension --template=newtab-config-stylelint

deno run -A npm:extension@latest create my-extension --template=newtab-config-stylelint

Repository: examples/newtab-config-stylelint

Usage with an existing extension

Install Stylelint dependencies:

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

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

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

bun run lint:styles

deno task lint:styles

If you do not have a script yet:

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

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

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

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

deno run -A npm:stylelint '**/*.{css,scss,sass,less}'

Integration with Prettier

Integrate Stylelint with Prettier to format and lint your styles together. Install the following dependencies:

npm install -D stylelint-prettier prettier

pnpm add -D stylelint-prettier prettier

yarn 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 configuration across extension packages in monorepos.
Pair Stylelint and Prettier so style formatting stays deterministic.

Detection notes

Extension.js does not read Stylelint configuration and does not inject Stylelint into the build pipeline. Run Stylelint yourself through your own scripts.

Next steps

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

Introduction

Browser extension fundamentals

Getting started

Commands reference

Features

Browsers

Languages and frameworks

Integrations

Workflows

Machine contracts

Publish to the stores

Debugging

Implementation guide

Community

Stylelint for browser extension CSS

When Stylelint is a good fit

Stylelint capabilities

Template examples

Stylelint configuration template

Usage with an existing extension

Stylelint configuration

Run Stylelint

Integration with Prettier

Best practices

Detection notes

Next steps

Video walkthrough

​When Stylelint is a good fit

​Stylelint capabilities

​Template examples

​Stylelint configuration template

​Usage with an existing extension

​Stylelint configuration

​Run Stylelint

​Integration with Prettier

​Best practices

​Detection notes

​Next steps

​Video walkthrough

When Stylelint is a good fit

Stylelint capabilities

Template examples

Stylelint configuration template

Usage with an existing extension

Stylelint configuration

Run Stylelint

Integration with Prettier

Best practices

Detection notes

Next steps

Video walkthrough