CSS modules in browser extensions

​

When CSS modules are a good fit

• You need local class scoping without adopting a full CSS-in-JS stack.
• You share components across popup/options/new-tab surfaces.
• You want predictable style ownership in larger extension codebases.

​

Template examples

​

content-css-modules

npx extension@latest create my-extension --template=content-css-modules

pnpx extension@latest create my-extension --template=content-css-modules

yarn dlx extension@latest create my-extension --template=content-css-modules

bunx extension@latest create my-extension --template=content-css-modules

deno run -A npm:extension@latest create my-extension --template=content-css-modules

​

Usage with an existing extension

• *.module.css
• *.module.scss
• *.module.sass
• *.module.less

- myComponentCss.css
+ myComponentCss.module.css

​

Usage example

import styles from "./styles/myComponent.module.css";

const button = document.createElement("button");
button.className = styles.primary;
button.innerText = "Click here";
document.body.appendChild(button);

​

How it works

• Default import style maps (import styles from "./x.module.css")
• Rspack generates scoped class names through its CSS module pipeline
• Module class exports work directly in JS/TS/TSX files

​

Content script note

import {primary} from "./styles/myComponent.module.css";

const button = document.createElement("button");
button.className = primary;

​

React/Preact example usage

import styles from "./styles/myComponent.module.css";

export default function NewTabPage() {
  return <button className={styles.primary}>Click here</button>;
}

​

Vue example usage

<template>
  <button :class="$style.primary">Click here</button>
</template>

<style module>
@import "./styles/myComponent.module.css";
</style>

​

Svelte example usage

<script>
  import styles from "./styles/myComponent.module.css";
</script>

<button class={styles.primary}>Click here</button>

​

Best practices

• Keep module styles close to components (Component.module.css) for easier ownership.
• Use :global(...) sparingly and only for intentional global overrides.
• Prefer module styles for extension pages and framework components where class mapping is explicit.

​

Next steps

• Learn more about Sass and Sass modules.
• Learn more about Less and Less modules.

​

Video walkthrough