You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

100 lines
2.3 KiB

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