Big update!Announcing Socket for GitHub 1.0. Learn more
Socket
BlogLoveFAQ
Install
Log in

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

Version published
Maintainers
4
Weekly downloads
16,991,947
decreased by-3.81%

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 14,206,041 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
Socket

Product

Subscribe to our newsletter

Get open source security insights delivered straight into your inbox. Be the first to learn about new features and product updates.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc