CSS Modules#

CSS Modules allow for locally scoped class names and animation names by default, helping to prevent naming collisions in your extension's styling.

Extension.js offers built-in support for CSS Modules, including support for Sass modules (*.module.sass, *.module.scss).

Starter CSS Module Template#

Extension.js includes a New Tab CSS Module template that provides a great starting point for using CSS Modules in your extension. This is the simplest way to integrate CSS Modules into your project.

Try it yourself#

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

Usage With An Existing Extension#

Extension.js offers zero-config support for CSS Modules. To use CSS Modules in your existing extension, rename your CSS file with the .module.css suffix. This automatically enables CSS Modules for that file.

- myComponentCss.css
+ myComponentCss.module.css

Usage Example#

After renaming your CSS file, import and use it in your component:

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

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

This approach ensures that the primary class is scoped locally to your component, preventing any global style collisions.

React/Preact Example Usage#

For React or Preact, you can import and use the CSS Module in the component like this:

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

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

Vue Example Usage#

In Vue, you can import CSS Modules and use scoped styles like this:

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

<script>
import styles from "./styles/myComponent.module.css";
export default {
  data() {
    return { styles };
  },
};
</script>

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

Svelte Example Usage#

In Svelte, you can import and use CSS Modules as follows:

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

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

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

Next Steps#

• Learn more about Sass Modules.