npmpackage.info

Gathering detailed insights and metrics for postcss-modules-local-by-default

postcss-modules-local-by-default

PostCSS plugin for css modules to local-scope classes and ids

4.2.0

MIT

JavaScript

25.71 kB

4,749,727,025 3.9

Installations

npm install postcss-modules-local-by-default

Developer Guide

BETA

Typescript

No

Module System

CommonJS

Min. Node Version

^10 || ^12 || >= 14

Node Version

22.11.0

NPM Version

9.6.0 Pull Requests

Open

0

Total

73

Closed

30

Merged

43

Issues

Open

1

Total

14

Closed

13

Releases

v4.2.0

Updated on Dec 11, 2024

v4.1.0

Updated on Nov 11, 2024

v4.0.5

Updated on Apr 03, 2024

v4.0.4

Updated on Jan 17, 2024

v4.0.3

Updated on May 23, 2023

v4.0.2

Updated on May 22, 2023

View All 24 releases

Languages

JavaScript

JavaScript (100%)

Developer

css-modules

Download Statistics

Total Downloads

4,749,727,025

Last Day

910,403

Last Week

19,426,157

Last Month

84,854,879

Last Year

942,518,837

GitHub Statistics

MIT License

27 Stars

194 Commits

14 Forks

4 Watchers

1 Branches

24 Contributors

Updated on Mar 18, 2025

Maintainers

View All 24 Contributors

Package Meta Information

Latest Version

4.2.0

Package Id

postcss-modules-local-by-default@4.2.0

Unpacked Size

25.71 kB

Size

7.18 kB

File Count

NPM Version

9.6.0

Node Version

22.11.0

Published on

Dec 11, 2024

Total Downloads

Cumulative downloads

Total Downloads

4,749,727,025

Last Day

-14.7%

910,403

Compared to previous day

Last Week

-9.8%

19,426,157

Compared to previous week

Last Month

2.2%

84,854,879

Compared to previous month

Last Year

-0.2%

942,518,837

Compared to previous year

Weekly Downloads

Monthly Downloads

Yearly Downloads

CSS Modules: Local by Default

Transformation examples:

Selectors (mode local, by default)::

1.foo { ... } /* => */ :local(.foo) { ... }
2
3.foo .bar { ... } /* => */ :local(.foo) :local(.bar) { ... }
4
5/* Shorthand global selector */
6
7:global .foo .bar { ... } /* => */ .foo .bar { ... }
8
9.foo :global .bar { ... } /* => */ :local(.foo) .bar { ... }
10
11/* Targeted global selector */
12
13:global(.foo) .bar { ... } /* => */ .foo :local(.bar) { ... }
14
15.foo:global(.bar) { ... } /* => */ :local(.foo).bar { ... }
16
17.foo :global(.bar) .baz { ... } /* => */ :local(.foo) .bar :local(.baz) { ... }
18
19.foo:global(.bar) .baz { ... } /* => */ :local(.foo).bar :local(.baz) { ... }

Declarations (mode local, by default):

1.foo {
2  animation-name: fadeInOut, global(moveLeft300px), local(bounce);
3}
4
5.bar {
6  animation: rotate 1s, global(spin) 3s, local(fly) 6s;
7}
8
9/* => */ 
10
11:local(.foo) {
12  animation-name: :local(fadeInOut), moveLeft300px, :local(bounce);
13}
14
15:local(.bar) {
16  animation: :local(rotate) 1s, spin 3s, :local(fly) 6s;
17}

Pure Mode

In pure mode, all selectors must contain at least one local class or id selector

To ignore this rule for a specific selector, add the a /* cssmodules-pure-ignore */ comment in front of the selector:

1/* cssmodules-pure-ignore */
2:global(#modal-backdrop) {
3  ...;
4}

or by adding a /* cssmodules-pure-no-check */ comment at the top of a file to disable this check for the whole file:

1/* cssmodules-pure-no-check */
2
3:global(#modal-backdrop) {
4  ...;
5}
6
7:global(#my-id) {
8  ...;
9}

Building

1$ npm install
2$ npm test

Build:
Lines:
Statements:

Development

1$ yarn test:watch

License

MIT

With thanks

Mark Dalgleish, 2015.

No vulnerabilities found.

10

Dangerous-Workflow

Determines if the project's GitHub Action workflows avoid dangerous patterns.

10

Binary-Artifacts

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

10

Token-Permissions

Determines if the project's workflows follow the principle of least privilege.

10

License

Determines if the project has defined a license.

3

Vulnerabilities

Determines if the project has open, known unfixed vulnerabilities.

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

Pinned-Dependencies

Determines if the project has declared and pinned the dependencies of its build process.

0

CII-Best-Practices

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

0

Security-Policy

Determines if the project has published a security policy.

0

Fuzzing

Determines if the project uses fuzzing.

0

Branch-Protection

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

0

SAST

Determines if the project uses static code analysis.

Score

3.9

/10

Last Scanned on 2025-06-30

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

Other packages similar to postcss-modules-local-by-default

Other packages similar to postcss-modules-local-by-default

postcss-modules-local-by-default

Installations

Developer Guide

No

CommonJS

^10 || ^12 || >= 14

22.11.0

9.6.0

Pull Requests

0

73

30

43

Issues

1

14

13

Releases

Languages

Developer

css-modules

Download Statistics

GitHub Statistics

Maintainers

Package Meta Information

Total Downloads

4,749,727,025

Weekly Downloads

Monthly Downloads

Yearly Downloads

Dependencies

Peer Dependencies

Dev Dependencies

CSS Modules: Local by Default

Pure Mode

Building

Development

License

With thanks

10

10

10

10

3

2

0

0

0

0

0

0

0

3.9

/10