postcss-modules-scope
A CSS Modules transform to extract export statements from local-scope classes
Last updated 4 months ago by evilebottnawi .
ISC · Repository · Bugs · Original npm · Tarball · package.json
$ cnpm install postcss-modules-scope 
SYNC missed versions from official npm registry.

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

Build Status

  • Lines: Coverage Status
  • Statements: codecov.io

Development

  • npm autotest will watch src and test for changes and run the tests, and transpile the ES6 to ES5 on success

License

ISC

With thanks

  • Mark Dalgleish
  • Tobias Koppers
  • Guy Bedford

Glen Maddern, 2015.

Current Tags

  • 1.0.0-beta1                                ...           beta (5 years ago)
  • 2.2.0                                ...           latest (4 months ago)

19 Versions

  • 2.2.0                                ...           4 months ago
  • 2.1.1                                ...           8 months ago
  • 2.1.0                                ...           a year ago
  • 2.0.1                                ...           2 years ago
  • 2.0.0                                ...           2 years ago
  • 1.1.0                                ...           3 years ago
  • 1.0.2                                ...           4 years ago
  • 1.0.1                                ...           4 years ago
  • 1.0.0                                ...           5 years ago
  • 1.0.0-beta2                                ...           5 years ago
  • 1.0.0-beta1                                ...           5 years ago
  • 0.0.8                                ...           5 years ago
  • 0.0.7                                ...           5 years ago
  • 0.0.6                                ...           5 years ago
  • 0.0.5                                ...           5 years ago
  • 0.0.4                                ...           5 years ago
  • 0.0.3                                ...           5 years ago
  • 0.0.2                                ...           5 years ago
  • 0.0.1                                ...           5 years ago
Downloads
Today 12,804
This Week 78,383
This Month 378,448
Last Day 33,212
Last Week 185,573
Last Month 747,405
Dependencies (2)
Dev Dependencies (7)
Dependents (118)

Copyright 2014 - 2017 © taobao.org |