Docs
Blog
Docs
Blog

LESS / LESS Modules

LESS is a CSS pre-processor that extends the capabilities of CSS with features like variables, mixins, and nested rules.

Extension.js offers built-in support for LESS, making it easy to use modern CSS tooling in your extension.

Starter LESS Template

Extension.js includes a New Tab LESS template, which provides a starting point for building an extension with LESS.

LESS Extension Template

Try it yourself

npm
pnpm
yarn
npx extension@latest create my-extension --template=new-less

Usage With an Existing Extension

You can add LESS support to an existing Extension.js project. Simply install the necessary dependencies and start using LESS in your extension.

Installation

Install the required dependencies:

npm
pnpm
yarn
npx install -D less

Example Usage in an HTML File

To include LESS in an HTML file, compile your LESS files into CSS and add them to your HTML file:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>New Extension</title>
    <!-- Include the compiled CSS file -->
    <link rel="stylesheet" href="./css/globals.css" media="screen" />
  </head>
  <body>
    <!-- Use your LESS-based styles -->
    <h1 class="text-4xl font-bold">Hello, Extension.</h1>
  </body>
</html>

Example Usage in a JavaScript File

./newTabApp.js

import "./css/globals.css";

console.log("Hello, Extension");

Example Usage in a content_script File

./content_script.js

import("./css/globals.css").then(() => {
  console.log("Styles loaded!");
});

LESS Modules

LESS Modules work similarly to CSS Modules, allowing you to scope class names locally by default, preventing global style conflicts.

Starter LESS Module Template

Extension.js includes a New Tab LESS Module template. This template allows you to take full advantage of LESS Modules to scope your styles locally.

LESS Module Extension Template

Try it yourself

npm
pnpm
yarn
npx extension@latest create my-extension --template=new-less-modules

Using LESS Modules in an Existing Extension

To enable LESS Modules, rename your .less files to include .module.less. This will activate automatic local scoping of class names.

- myStyles.less
+ myStyles.module.less

Example Usage

After renaming your LESS file, you can import it into your scripts:

import styles from "./styles/myStyles.module.less";

const element = document.createElement("h1");
element.className = styles.primary;
element.innerText = "Hello, Extension!";
document.body.appendChild(element);

React/Preact Example Usage

To use LESS Modules in React or Preact, import your LESS module and apply styles as you would in any React component:

import styles from "./styles/myStyles.module.less";

export default function MyComponent() {
  return <h1 className={styles.primary}>Hello, Extension!</h1>;
}

Vue Example Usage

In Vue, you can also use LESS and LESS Modules by importing the LESS file directly or in a <style> block:

<template>
  <h1 :class="$style.primary">Hello, Extension!</h1>
</template>

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

<style lang="less" module>
@import "./styles/myStyles.module.less";
</style>

Svelte Example Usage

In Svelte, you can import LESS files and use them within the component like this:

<script>
  import styles from './styles/myStyles.module.less';
</script>

<h1 class={styles.primary}>Hello, Extension!</h1>

<style lang="less" module>
  @import './styles/myStyles.module.less';
</style>

Next Steps

  • Configure PostCSS in your extension.
  • Set up Stylelint to lint your stylesheets.