3.2.1 • Published 8 months ago

postcss-modules-scope v3.2.1

Weekly downloads
11,987,452
License
ISC
Repository
github
Last release
8 months ago

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
  • Status: Build Status
  • Lines: Coverage Status
  • Statements: codecov.io

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.

css-loaderpostcss-modulescomponennenttvuedragdropuploadimagescloud-archive-s3bb-chat@fundefund/funde_cksxyj_taro_cligql_din_mod@l1nyanm1ng/react-picture-viewer@olivervorasai/slidercbmis-ai-toolboxasterjscogoportutils@infinitebrahmanuniverse/nolb-postcss-m@saaspe/componentsexpand-react-bridgesklif-ui-kitsklif-api@everything-registry/sub-chunk-2461@cositehq/typed-css-modulesp149-tabletest-popupssklif-uilapture-ui-complaptureuidrpdwn-mntaman-baca-masyarakattape-babel-css-modulestagged-css-modulesta-css-loaderwinx-form-winxvusion-css-loadervue-button-test1webdesa-laravel-final-releasewebpack_component_fundwescheme-jsteapackage-tatespoorman297stories-fsstories-react-bdsticky-scroll-catchtestapatestujsk_custom_ckeditor5svelte-component-libthemre-sienna-accessibilityvue-compmentvision-css-loadervite-css-modulesvs-tree-plus@digitalrakesh/jsui@dimcheify/dimui@drblmthw/testujsk_custom_ckeditor5@ct-note/table@ct-note/warning@ct-note/image@ct-note/inline-code@ct-note/list@ct-note/marker@ct-note/paragraph@ct-note/quote@ct-note/simple-image@ct-note/checklist@ct-note/code@ct-note/delimiter@ct-note/embed@ct-note/header@dallonf/css-modules-require-hook@dallonf/tape-babel-css-modules@d-bigfish/cli@dinert/component@demonarchy/babel-plugin-react-css-modules@demoflow/nested-list@demching113/css-modules-loader-core@dr.pogodin/babel-plugin-react-css-modules@dr.pogodin/css-modules-require-hook@cameron-martin/css-modules-loader-core@blkmarketco/components-library@beldore/react-otp-input@percent/percent-api-hooks@rune-ts/servergenerator-bootstrap-boilerplate-templatejdseal-cliitemjsjest-css-modules-processorjesusdemojulien-easy-modaljson-categorizejetbolt-reactkafirchain-tetrisk0ng_d1nosaur_quenak0ng_d1nosaur_quenbk0ng_d1nosaur_quenck0ng_d1nosaur_quendk0ng_d1nosaur_quenek0ng_d1nosaur_quenfk0ng_d1nosaur_quengk0ng_d1nosaur_quenhk0ng_d1nosaur_quenik0ng_d1nosaur_quenjk0ng_d1nosaur_quenk
3.2.1

8 months ago

3.1.2

1 year ago

3.2.0

1 year ago

3.1.1

1 year ago

3.1.0

2 years ago

3.0.0

5 years ago

3.0.0-rc.2

5 years ago

3.0.0-rc.1

5 years ago

3.0.0-rc.0

5 years ago

2.2.0

5 years ago

2.1.1

6 years ago

2.1.0

6 years ago

2.0.1

7 years ago

2.0.0

7 years ago

1.1.0

8 years ago

1.0.2

9 years ago

1.0.1

9 years ago

1.0.0

10 years ago

1.0.0-beta2

10 years ago

1.0.0-beta1

10 years ago

0.0.8

10 years ago

0.0.7

10 years ago

0.0.6

10 years ago

0.0.5

10 years ago

0.0.4

10 years ago

0.0.3

10 years ago

0.0.2

10 years ago

0.0.1

10 years ago