postcss-modules-scope

v3.2.0

A CSS Modules transform to extract export statements from local-scope classes For more information about how to use this package see README

Latest version published 21 days ago

License: ISC

NPM

GitHub

Package Health Score

83 / 100

security
No known security issues
popularity
Influential project
maintenance
Healthy
community
Limited

Explore Similar Packages

Security

No known security issues

All security vulnerabilities belong to production dependencies of direct and indirect packages.

Security and license risk for significant versions

All Versions

Version				Vulnerabilities	License Risk
3.1.2	\|	04/2024		0 C 0 H 0 M 0 L	0 H 0 M 0 L
3.2.0	\|	04/2024		0 C 0 H 0 M 0 L	0 H 0 M 0 L
3.0.0	\|	10/2020	Popular	0 C 0 H 0 M 0 L	0 H 0 M 0 L
2.2.0	\|	03/2020		0 C 0 H 0 M 0 L	0 H 0 M 0 L
1.1.0	\|	05/2017		0 C 0 H 0 M 0 L	0 H 0 M 0 L

License

ISC

Security Policy

Is your project affected by vulnerabilities?

Scan your projects for vulnerabilities. Fix quickly with automated fixes. Get started with Snyk for free.

Get started free

Popularity

Influential project

Weekly Downloads (14,856,221)

GitHub Stars: 23
Forks: 15
Contributors: 20

Direct Usage Popularity

The npm package postcss-modules-scope receives a total of 14,856,221 downloads a week. As such, we scored postcss-modules-scope popularity level to be Influential project.

Based on project statistics from the GitHub repository for the npm package postcss-modules-scope, we found that it has been starred 23 times.

Downloads are calculated as moving averages for a period of the last 12 months, excluding weekends and known missing data points.

Community

Limited

Readme.md: Yes
Contributing.md: No
Code of Conduct: No
Contributors: 20
Funding: No

With more than 10 contributors for the postcss-modules-scope repository, this is possibly a sign for a growing and inviting community.

We found a way for you to contribute to the project! Looks like postcss-modules-scope is missing a Code of Conduct.

Embed Package Health Score Badge

Maintenance

Healthy

Commit Frequency

Open Issues: 0
Open PR: 16
Last Release: 21 days ago
Last Commit: 21 days ago

Further analysis of the maintenance status of postcss-modules-scope based on released npm versions cadence, the repository activity, and other data points determined that its maintenance is Healthy.

We found that postcss-modules-scope demonstrates a positive version release cadence with at least one new version released in the past 3 months.

As a healthy sign for on-going project maintenance, we found that the GitHub repository had at least 1 pull request or issue interacted with by the community.

Keep your project healthy

Check your package.json

Ensure all the packages you're using are healthy and well-maintained

Snyk Vulnerability Scanner

Get health score & security insights directly in your IDE

Package

Node.js Compatibility: ^10 || ^12 || >= 14

Age: 9 years
Dependencies: 1 Direct
Versions: 28
Install Size: 15 kB
Dist-tags: 3
# of Files: 4
Maintainers: 4
TS Typings: Yes

postcss-modules-scope has more than a single and default latest tag published for the npm package. This means, there may be other tags available for this package, such as next to indicate future releases, or stable to indicate stable releases.

Not sure how to use postcss-modules-scope?

To help you get started, we've collected the most common ways that postcss-modules-scope is being used within popular public projects.

css-modules / css-modules-require-hook / src / extractor.js View on Github

: generateScopedName;
  } else {
    // small fallback
    scopedName = (local, filename) => Scope.generateScopedName(local, relative(context, filename));
  }

  const plugins = (use || [
    ...prepend,
    Values,
    mode
      ? new LocalByDefault({mode})
      : LocalByDefault,
    createImportedName
      ? new ExtractImports({createImportedName})
      : ExtractImports,
    new Scope({generateScopedName: scopedName}),
    ...append,
  ]).concat(new Parser({fetch})); // no pushing in order to avoid the possible mutations

  return postcss(plugins);
}

View more ways to use postcss-modules-scope

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.

postcss-modules-scope dependencies

postcss-selector-parser

postcss-modules-scope development dependencies

coveralls eslint eslint-config-prettier husky jest lint-staged postcss prettier

FAQs

What is postcss-modules-scope?

A CSS Modules transform to extract export statements from local-scope classes. Visit Snyk Advisor to see a full health score report for postcss-modules-scope, including popularity, security, maintenance & community analysis.

Is postcss-modules-scope popular?

The npm package postcss-modules-scope receives a total of 14,856,221 weekly downloads. As such, postcss-modules-scope popularity was classified as an influential project. Visit the popularity section on Snyk Advisor to see the full health analysis.

Is postcss-modules-scope well maintained?

We found that postcss-modules-scope demonstrated a healthy version release cadence and project activity. It has a community of 20 open source contributors collaborating on the project. See the full package health analysis to learn more about the package maintenance status.

Is postcss-modules-scope safe to use?

The npm package postcss-modules-scope was scanned for known vulnerabilities and missing license, and no issues were found. Thus the package was deemed as safe to use. See the full health analysis review.

Last updated on 24 April-2024, at 01:06 (UTC).

Build a secure application checklist

Select a recommended open source package

Minimize your risk by selecting secure & well maintained open source packages

DONE

Scan your app for vulnerabilities

Scan your application to find vulnerabilities in your: source code, open source dependencies, containers and configuration files

SCAN NOW

Fix identified vulnerabilities

Easily fix your code by leveraging automatically generated PRs

AUTO FIX

Monitor for new issues

New vulnerabilities are discovered every day. Get notified if your application is affected

MONITOR APP

Package Health Score

Explore Similar Packages

Security and license risk for significant versions

Is your project affected by vulnerabilities?

Weekly Downloads (14,856,221)

Direct Usage Popularity

Embed Package Health Score Badge

Commit Frequency

Keep your project healthy

Check your package.json

Snyk Vulnerability Scanner

Not sure how to use postcss-modules-scope?

CSS Modules: Scope Locals & Extend

Composition

Local-by-default & reuse across files

Building

Development

License

With thanks

postcss-modules-scope dependencies

postcss-modules-scope development dependencies

FAQs

What is postcss-modules-scope?

Is postcss-modules-scope popular?

Is postcss-modules-scope well maintained?

Is postcss-modules-scope safe to use?

Build a secure application checklist

Select a recommended open source package

Scan your app for vulnerabilities

Source Code

Open Source

Container

Config

Fix identified vulnerabilities

Monitor for new issues