Big update!Introducing GitHub Bot Commands. Learn more
Socket
Log inDemoInstall

postcss-modules-scope

Package Overview
Dependencies
1
Maintainers
4
Versions
23
Issues
File Explorer

Advanced tools

postcss-modules-scope

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

    3.0.0latest
    Github

Version published
Maintainers
4
Weekly downloads
15,163,754
decreased by-18.36%

Weekly downloads

Changelog

Source

3.0.0 - 2020-10-13

Fixes

  • compatibility with plugins other plugins
  • handle animation short name
  • perf

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

What is postcss-modules-scope?

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

Is postcss-modules-scope popular?

The npm package postcss-modules-scope receives a total of 12,035,451 weekly downloads. As such, postcss-modules-scope popularity was classified as popular.

Is postcss-modules-scope well maintained?

We found that postcss-modules-scope demonstrated a not healthy version release cadence and project activity because the last version was released a year ago.It has 4 open source maintainers collaborating on the project.

Last updated on 13 Oct 2020

Did you know?

Socket installs a Github app to automatically flag issues on every pull request and report the health of your dependencies. Find out what is inside your node modules and prevent malicious activity before you update the dependencies.

Install Socket
Socket[email protected]

Product

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc