npmpackage.info

The total size of the npm registry is estimated to be over 4 terabytes. This includes all the packages, versions, and metadata stored in the registry.

postcss-modules-scope

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

3.2.0

ISC

JavaScript

14.14 kB

3,983,974,011

Total Downloads

Cumulative downloads

Total Downloads

3,983,974,011

Last day

2.9%

3,479,888

Compared to previous day

Last week

5.8%

17,992,144

Compared to previous week

Last month

-1.2%

74,517,029

Compared to previous month

Last year

-7.7%

896,980,424

Compared to previous year

Weekly Downloads

Monthly Downloads

Yearly Downloads

Versions

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.

10

License

Determines if the project has defined a license.

10

Binary-Artifacts

Determines if the project has generated executable (binary) artifacts in the source repository.

2

Code-Review

Determines if the project requires human code review before pull requests (aka merge requests) are merged.

0

Maintained

Determines if the project is "actively maintained".

0

CII-Best-Practices

Determines if the project has an OpenSSF (formerly CII) Best Practices Badge.

0

Branch-Protection

Determines if the default and release branches are protected with GitHub's branch protection settings.

0

Security-Policy

Determines if the project has published a security policy.

0

Fuzzing

Determines if the project uses fuzzing.

0

SAST

Determines if the project uses static code analysis.

0

Vulnerabilities

Determines if the project has open, known unfixed vulnerabilities.

Score

2

/10

Last Scanned on 2024-09-09

The Open Source Security Foundation is a cross-industry collaboration to improve the security of open source software (OSS). The Scorecard provides security health metrics for open source projects.

Learn More

postcss-modules-scope

Total Downloads

3,983,974,011

Weekly Downloads

Monthly Downloads

Yearly Downloads

Dependencies

Peer Dependencies

Dev Dependencies

CSS Modules: Scope Locals & Extend

Composition

Local-by-default & reuse across files

Building

Development

License

With thanks

10

10

2

0

0

0

0

0

0

0

2

/10

Other packages similar to postcss-modules-scope