Socket
Socket
Sign inDemoInstall

postcss-modules-scope

Package Overview
Dependencies
7
Maintainers
4
Versions
27
Alerts
File Explorer

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

    postcss-modules-scope

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


Version published
Weekly downloads
18M
increased by2.63%
Maintainers
4
Install size
219 kB
Created
Weekly downloads
 

Package description

What is postcss-modules-scope?

The postcss-modules-scope npm package is a PostCSS plugin that helps in locally scoping CSS by automatically renaming classes and other identifiers to be unique. This ensures that styles do not conflict across different parts of an application. It is commonly used in modular CSS architecture.

What are postcss-modules-scope's main functionalities?

Local Scoping of CSS Classes

This feature automatically renames CSS classes to include a unique identifier, preventing class name collisions.

/* Input CSS */
.className {
  color: red;
}

/* Output CSS after processing with postcss-modules-scope */
._className_1a2b3c {
  color: red;
}

Renaming of Animation Names

This feature renames animation names with a unique identifier to avoid conflicts with other animations in the global scope.

/* Input CSS */
@keyframes myAnimation {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* Output CSS after processing with postcss-modules-scope */
@keyframes myAnimation_1a2b3c {
  from { opacity: 0; }
  to { opacity: 1; }
}

Other packages similar to postcss-modules-scope

Readme

Source

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.

Keywords

FAQs

Last updated on 03 Apr 2024

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc