- Notifications
You must be signed in to change notification settings - Fork5
Coobaha/postcss-variables-loader
Folders and files
| Name | Name | Last commit message | Last commit date | |
|---|---|---|---|---|
Repository files navigation
Allows you to share variables between CSS and JS with Webpack and HMR.
This loader transforms special CSS files to JS modules.
- Shared variables between CSS and JS
- HMR friendly, CSS changes are applied on the fly.
To be more JS friendly loader will:
- strip
pxpart from CSS px numbers - convert dashes-case to camelCase
- check for runtime config mutations and access of missing keys (only in dev or es6 mode)
/* variables.config.css */@custom-media --small-device (max-width:480px)):root {--primary-color: blue;--gutter:30px;}
/* component.css */@import'colors.config.css'.component {color:var(--primary-color);margin:0var(--gutter);}@media (--small-device) {/* styles for small viewport */}
// component.jsimportvariablesfrom'colors.config.css';console.log(variables);/* variables = { primaryColor: 'blue'; gutter: 30; smallDevice: '(max-width: 480px)' }*/component.style.color=variables.primaryColor;functionadd5ToGutter(){return5+variables.gutter;}
yarn add --dev postcss-variables-loader
npm install --save-dev postcss-variables-loader
NB: You need to process CSS somehow (egpostcss)and imports inside css (eg viapostcss-import)
Recommended webpack configuration:webpack.config.js with babel-loader
rules: [ { test: /\.config.css$/, loader: 'babel-loader!postcss-variables-loader' }, // dont forget to exclude *.config.css from other css loaders { test: /\.css$/, exclude: /\.config.css$/, loader: 'css-loader!postcss-loader' }]ifproduction.env.NODE_ENV === 'development' it will try to wrap config insideProxy in runtime.It is used to guard from accidental mutations or accessing missing keys.If you dont want this behaviour: passes5=1:
loader: 'postcss-variables-loader?es5=1'
About
Share variables between CSS and JS with Webpack + HMR
Topics
Resources
Uh oh!
There was an error while loading.Please reload this page.
Stars
Watchers
Forks
Packages0
No packages published
Uh oh!
There was an error while loading.Please reload this page.
Contributors2
Uh oh!
There was an error while loading.Please reload this page.