CSS Modules: Scope Locals & Extend

Transforms:

:local(.continueButton) {
  color: green;
}

into:

:export {
  continueButton: __buttons_continueButton_djd347adcxz9;
}
.__buttons_continueButton_djd347adcxz9 {
  color: green;
}

so it doesn't pollute CSS global scope and can be simply used in JS like so:

import styles from "./buttons.css";
elem.innerHTML = `<button class="${styles.continueButton}">Continue</button>`;

Composition

Since we're exporting class names, there's no reason to export only one. This can give us some really useful reuse of styles:

.globalButtonStyle {
  background: white;
  border: 1px solid;
  border-radius: 0.25rem;
}
.globalButtonStyle:hover {
  box-shadow: 0 0 4px -2px;
}
:local(.continueButton) {
  compose-with: globalButtonStyle;
  color: green;
}

becomes:

.globalButtonStyle {
  background: white;
  border: 1px solid;
  border-radius: 0.25rem;
}
.globalButtonStyle:hover {
  box-shadow: 0 0 4px -2px;
}
:local(.continueButton) {
  compose-with: globalButtonStyle;
  color: green;
}

Note: you can also use composes as a shorthand for compose-with

Local-by-default & reuse across files

You're looking for CSS Modules. It uses this plugin as well as a few others, and it's amazing.

Building

npm install
npm test

• Status:
• Lines:
• Statements:

Development

• npm test:watch will watch src and test for changes and run the tests

License

ISC

With thanks

• Mark Dalgleish
• Tobias Koppers
• Guy Bedford

Glen Maddern, 2015.

Change Log

All notable changes to this project will be documented in this file. This project adheres to Semantic Versioning.

3.2.1

Chore

• update postcss-selector-parser

3.2.0 - 2024-04-03

Features

• supports multiple composes, i.e. .class { composes: a b, global(c), d e from "./path/file.css" }

3.1.2 - 2024-04-03

Fixes

• export a root and limit from the @scope at-rule

3.1.1 - 2024-01-18

Fixes

• handle @scope at-rule
• fix CSS nesting logic

3.1.0 - 2023-12-21

Fixes

• scoped class attribute

Features

• pass a node to the generateExportEntry option

3.0.0 - 2020-10-13

Fixes

• compatibility with plugins other plugins
• handle animation short name
• perf

3.0.0-rc.2 - 2020-10-11

BREAKING CHANGE

• minimum supported postcss version is ^8.1.0

Fixes

• minimum supported Node.js version is ^10 || ^12 || >= 14
• compatibility with PostCSS 8

3.0.0-rc.1 - 2020-09-22

BREAKING CHANGE

• do not handle invalid syntax

3.0.0-rc.0 - 2020-09-21

BREAKING CHANGE

• minimum supported Node.js version is >= 10.13.0 || >= 12.13.0 || >= 14
• minimum supported postcss version is ^8.0.3
• postcss was moved to peerDependencies, you need to install postcss in your project before use the plugin

2.2.0 - 2020-03-19

• added the exportGlobals option to export global classes and ids

2.1.1 - 2019-03-05

Fixed

• add additional space after the escape sequence (#17)

[2.1.0] - 2019-03-05

Fixed

• handles properly selector with escaping characters (like: .\31 a2b3c { color: red })

Feature

• generateExportEntry option (allow to setup key and value for :export {} rule)