postcss-modules-scope

A CSS Modules transform to extract export statements from local-scope classes

ISC 28 个版本
安装
npm install postcss-modules-scope
yarn add postcss-modules-scope
pnpm add postcss-modules-scope
bun add postcss-modules-scope
README

CSS Modules: Scope Locals & Extend

Build Status

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: Build Status
  • Lines: Coverage Status
  • Statements: codecov.io

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.

版本列表
3.2.1 2024-11-11
3.2.0 2024-04-03
3.1.2 2024-04-03
3.1.1 2024-01-18
3.1.0 2023-12-21
3.0.0-rc.2 2020-10-11
3.0.0-rc.1 2020-09-22
3.0.0-rc.0 2020-09-21
3.0.0 2020-10-13
2.2.0 2020-03-19
2.1.1 2019-11-28
2.1.0 2019-03-05
2.0.1 2018-11-27
2.0.0 2018-11-23
1.1.0 2017-05-21
1.0.2 2016-07-20
1.0.1 2016-05-12
1.0.0 2015-10-21
1.0.0-beta2 2015-09-19
1.0.0-beta1 2015-08-15
0.0.8 2015-06-29
0.0.7 2015-06-18
0.0.6 2015-06-08
0.0.5 2015-06-07
0.0.4 2015-06-04
0.0.3 2015-05-28
0.0.2 2015-05-28
0.0.1 2015-05-28