Diffusion Open Access Compliance Check Tool (OACCT) (issn4frontend) Browse

postcss-modules-scope
49c99f97fe9aissn4frontend

postcss-modules-scope

CHANGELOG.md
LICENSE
README.md
package.json
src/

README.md

CSS Modules: Scope Locals & Extend

![Build Status](https://travis-ci.org/css-modules/postcss-modules-scope)

Transforms:

css
:local(.continueButton) {
  color: green;
}

into:

css
: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:

js
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:

css
.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

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.

rOACCT/node_modules/postcss-modules-scope49c99f97fe9aissn4frontend