| 1 | # CSS Modules: Scope Locals & Extend
|
|---|
| 2 |
|
|---|
| 3 | [](https://travis-ci.org/css-modules/postcss-modules-scope)
|
|---|
| 4 |
|
|---|
| 5 | Transforms:
|
|---|
| 6 |
|
|---|
| 7 | ```css
|
|---|
| 8 | :local(.continueButton) {
|
|---|
| 9 | color: green;
|
|---|
| 10 | }
|
|---|
| 11 | ```
|
|---|
| 12 |
|
|---|
| 13 | into:
|
|---|
| 14 |
|
|---|
| 15 | ```css
|
|---|
| 16 | :export {
|
|---|
| 17 | continueButton: __buttons_continueButton_djd347adcxz9;
|
|---|
| 18 | }
|
|---|
| 19 | .__buttons_continueButton_djd347adcxz9 {
|
|---|
| 20 | color: green;
|
|---|
| 21 | }
|
|---|
| 22 | ```
|
|---|
| 23 |
|
|---|
| 24 | so it doesn't pollute CSS global scope and can be simply used in JS like so:
|
|---|
| 25 |
|
|---|
| 26 | ```js
|
|---|
| 27 | import styles from "./buttons.css";
|
|---|
| 28 | elem.innerHTML = `<button class="${styles.continueButton}">Continue</button>`;
|
|---|
| 29 | ```
|
|---|
| 30 |
|
|---|
| 31 | ## Composition
|
|---|
| 32 |
|
|---|
| 33 | Since we're exporting class names, there's no reason to export only one. This can give us some really useful reuse of styles:
|
|---|
| 34 |
|
|---|
| 35 | ```css
|
|---|
| 36 | .globalButtonStyle {
|
|---|
| 37 | background: white;
|
|---|
| 38 | border: 1px solid;
|
|---|
| 39 | border-radius: 0.25rem;
|
|---|
| 40 | }
|
|---|
| 41 | .globalButtonStyle:hover {
|
|---|
| 42 | box-shadow: 0 0 4px -2px;
|
|---|
| 43 | }
|
|---|
| 44 | :local(.continueButton) {
|
|---|
| 45 | compose-with: globalButtonStyle;
|
|---|
| 46 | color: green;
|
|---|
| 47 | }
|
|---|
| 48 | ```
|
|---|
| 49 |
|
|---|
| 50 | becomes:
|
|---|
| 51 |
|
|---|
| 52 | ```
|
|---|
| 53 | .globalButtonStyle {
|
|---|
| 54 | background: white;
|
|---|
| 55 | border: 1px solid;
|
|---|
| 56 | border-radius: 0.25rem;
|
|---|
| 57 | }
|
|---|
| 58 | .globalButtonStyle:hover {
|
|---|
| 59 | box-shadow: 0 0 4px -2px;
|
|---|
| 60 | }
|
|---|
| 61 | :local(.continueButton) {
|
|---|
| 62 | compose-with: globalButtonStyle;
|
|---|
| 63 | color: green;
|
|---|
| 64 | }
|
|---|
| 65 | ```
|
|---|
| 66 |
|
|---|
| 67 | **Note:** you can also use `composes` as a shorthand for `compose-with`
|
|---|
| 68 |
|
|---|
| 69 | ## Local-by-default & reuse across files
|
|---|
| 70 |
|
|---|
| 71 | You're looking for [CSS Modules](https://github.com/css-modules/css-modules). It uses this plugin as well as a few others, and it's amazing.
|
|---|
| 72 |
|
|---|
| 73 | ## Building
|
|---|
| 74 |
|
|---|
| 75 | ```
|
|---|
| 76 | npm install
|
|---|
| 77 | npm test
|
|---|
| 78 | ```
|
|---|
| 79 |
|
|---|
| 80 | - Status: [](https://travis-ci.org/css-modules/postcss-modules-scope)
|
|---|
| 81 | - Lines: [](https://coveralls.io/r/css-modules/postcss-modules-scope?branch=master)
|
|---|
| 82 | - Statements: [](http://codecov.io/github/css-modules/postcss-modules-scope?branch=master)
|
|---|
| 83 |
|
|---|
| 84 | ## Development
|
|---|
| 85 |
|
|---|
| 86 | - `npm test:watch` will watch `src` and `test` for changes and run the tests
|
|---|
| 87 |
|
|---|
| 88 | ## License
|
|---|
| 89 |
|
|---|
| 90 | ISC
|
|---|
| 91 |
|
|---|
| 92 | ## With thanks
|
|---|
| 93 |
|
|---|
| 94 | - Mark Dalgleish
|
|---|
| 95 | - Tobias Koppers
|
|---|
| 96 | - Guy Bedford
|
|---|
| 97 |
|
|---|
| 98 | ---
|
|---|
| 99 |
|
|---|
| 100 | Glen Maddern, 2015.
|
|---|
