athea

Repositories Projects Packages

postcss-modules-scope (3.2.1)

Published 2026-02-24 14:03:08 +00:00 by atheaadmin

Installation

Setup this registry in your project .npmrc file:

registry=

To install the package using npm, run the following command:

npm install postcss-modules-scope@3.2.1

or add it to the package.json file:

"postcss-modules-scope": "3.2.1"

For more information on the npm registry, see the documentation.

About this package

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.

Dependencies

Dependencies

ID	Version
postcss-selector-parser	^7.0.0

Development Dependencies

ID	Version
coveralls	^3.1.0
eslint	^7.9.0
eslint-config-prettier	^6.12.0
husky	^4.3.0
jest	^26.4.2
lint-staged	^10.4.0
postcss	^8.3.0
prettier	^2.1.2

Peer Dependencies

ID	Version
postcss	^8.1.0

Keywords

css-modules postcss plugin

Details

npm

2026-02-24 14:03:08 +00:00

1

Glen Maddern

Project Site

ISC

latest

5.5 KiB

Assets (1)

postcss-modules-scope-3.2.1.tgz 5.5 KiB

Versions (1) View all

3.2.1 2026-02-24