CSS Modules ™️

A plugin for authoring CSS Modules ™️, that is a modest implementation of the specification. See the plugin's README for complete usage information.

This is NOT to be confused with CSS Module Scripts, which Greenwood already supports.

Installation

You can use your favorite JavaScript package manager to install this package.

# npm
npm i -D @greenwood/plugin-css-modules

# yarn
yarn add @greenwood/plugin-css-modules --dev

Then add this plugin to your greenwood.config.js.

import { greenwoodPluginCssModules } from "@greenwood/plugin-css-modules";

export default {
  // ...

  plugins: [greenwoodPluginCssModules()],
};

Usage

Now you can create a CSS file that ends in .module.css:

/* header.module.css */
.container {
  display: flex;
  justify-content: space-between;
}

.navBarMenu {
  border: 1px solid #020202;
}

.navBarMenuItem {
  & a {
    text-decoration: none;
    color: #020202;
  }
}

@media screen and (min-width: 768px) {
  .container {
    padding: 10px 20px;
  }
}

And reference that in your (Light DOM) HTML based Web Component:

// header.js
import styles from "./header.module.css";

export default class Header extends HTMLElement {
  connectedCallback() {
    this.innerHTML = `
      <header class="${styles.container}">
        <ul class="${styles.navBarMenu}">
          <li class="${styles.navBarMenuItem}">
            <a href="/about/" title="Documentation">About</a>
          </li>
          <li class="${styles.navBarMenuItem}">
            <a href="/contact/" title="Guides">Contact</a>
          </li>
        </ul>
      </header>
    `;
  }
}

customElements.define("app-header", Header);

From there, Greenwood will scope your CSS class names by prefixing them with the filename and a hash of the contents, inline that into a <style> tag in the HTML, and then strip the reference to the module.css file from your JavaScript file.

Edit on GitHub

Introduction

Pages

Resources

Plugins

Content As Data

Reference