diff options
Diffstat (limited to 'node_modules/postcss-modules-scope/README.md')
-rw-r--r-- | node_modules/postcss-modules-scope/README.md | 100 |
1 files changed, 0 insertions, 100 deletions
diff --git a/node_modules/postcss-modules-scope/README.md b/node_modules/postcss-modules-scope/README.md deleted file mode 100644 index 7abe23b..0000000 --- a/node_modules/postcss-modules-scope/README.md +++ /dev/null @@ -1,100 +0,0 @@ -# CSS Modules: Scope Locals & Extend - -[](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](https://github.com/css-modules/css-modules). It uses this plugin as well as a few others, and it's amazing. - -## Building - -``` -npm install -npm test -``` - -[](https://travis-ci.org/css-modules/postcss-modules-scope) - -* Lines: [](https://coveralls.io/r/css-modules/postcss-modules-scope?branch=master) -* Statements: [](http://codecov.io/github/css-modules/postcss-modules-scope?branch=master) - -## 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. |