ÿØÿà JFIF ÿá Exif MM * ÿÛ C
Server IP : 199.250.214.225 / Your IP : 3.137.169.129 Web Server : Apache System : Linux vps64074.inmotionhosting.com 3.10.0-1160.105.1.vz7.214.3 #1 SMP Tue Jan 9 19:45:01 MSK 2024 x86_64 User : nicngo5 ( 1001) PHP Version : 7.4.33 Disable Function : exec,passthru,shell_exec,system MySQL : OFF | cURL : ON | WGET : ON | Perl : ON | Python : ON | Sudo : ON | Pkexec : OFF Directory : /home/nicngo5/funds.upgrade.nicn.gov.ng/funds-upgraded/node_modules/postcss-modules-scope/ |
Upload File : |
# CSS Modules: Scope Locals & Extend [![Build Status](https://travis-ci.org/css-modules/postcss-modules-scope.svg?branch=master)](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 ``` - Status: [![Build Status](https://travis-ci.org/css-modules/postcss-modules-scope.svg?branch=master)](https://travis-ci.org/css-modules/postcss-modules-scope) - 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) - 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) ## 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.