Coobaha / Postcss Variables Loader
Share variables between CSS and JS with Webpack + HMR
Stars: β 18
Programming Languages
javascript
184084 projects - #8 most used programming language
Projects that are alternatives of or similar to Postcss Variables Loader
React Ssr Setup
React Starter Project with Webpack 4, Babel 7, TypeScript, CSS Modules, Server Side Rendering, i18n and some more niceties
Stars: β 678 (+3666.67%)
Mutual labels: webpack, hmr, postcss
Angular Hmr
π₯ Angular Hot Module Replacement for Hot Module Reloading
Stars: β 490 (+2622.22%)
Mutual labels: webpack, hmr
React Mobx Typescript Boilerplate
A bare minimum frontend boilerplate with React 16.7, Typescript 3.2 and Webpack 4
Stars: β 378 (+2000%)
Mutual labels: webpack, postcss
Electron React Boilerplate
A Foundation for Scalable Cross-Platform Apps
Stars: β 18,727 (+103938.89%)
Mutual labels: webpack, hmr
Pwa
An opinionated progressive web app boilerplate
Stars: β 353 (+1861.11%)
Mutual labels: webpack, postcss
Naomi
Sublime Text enhanced syntax highlighting for JavaScript ES6/ES7/ES2015/ES2016/ES2017+, Babel, FlowType, React JSX, Styled Components, HTML5, SCSS3, PHP 7, phpDoc, PHPUnit, MQL4. Basic: Git config files.
Stars: β 544 (+2922.22%)
Mutual labels: webpack, postcss
React Redux Boilerplate
Awesome React Redux Workflow Boilerplate with Webpack 4
Stars: β 307 (+1605.56%)
Mutual labels: webpack, postcss
Poi
β‘A zero-config bundler for JavaScript applications.
Stars: β 5,291 (+29294.44%)
Mutual labels: webpack, postcss
React Webpack Typescript Starter
Minimal starter with hot module replacement (HMR) for rapid development.
Stars: β 632 (+3411.11%)
Mutual labels: webpack, hmr
Universal
Seed project for Angular Universal apps featuring Server-Side Rendering (SSR), Webpack, CLI scaffolding, dev/prod modes, AoT compilation, HMR, SCSS compilation, lazy loading, config, cache, i18n, SEO, and TSLint/codelyzer
Stars: β 669 (+3616.67%)
Mutual labels: webpack, hmr
Webpack Hot Server Middleware
π₯ Hot reload webpack bundles on the server
Stars: β 319 (+1672.22%)
Mutual labels: webpack, hmr
Electron React Webpack Boilerplate
Minimal Electron, React, PostCSS and Webpack boilerplate to help you get started with building your next app.
Stars: β 312 (+1633.33%)
Mutual labels: webpack, postcss
Nuxt Purgecss
Drop superfluous CSS! A neat PurgeCSS wrapper for Nuxt.js
Stars: β 356 (+1877.78%)
Mutual labels: webpack, postcss
Kratos Boilerplate
π₯ A simple boilerplate for creating statics PWA using Webpack, Pug, PostCSS and CSS Modules
Stars: β 308 (+1611.11%)
Mutual labels: webpack, postcss
Angularwebpackvisualstudio
Template for ASP.NET Core, Angular with Webpack and Visual Studio
Stars: β 497 (+2661.11%)
Mutual labels: webpack, hmr
React Dynamic Route Loading Es6
Auto chunking and dynamic loading of routes with React Router and Webpack 2
Stars: β 297 (+1550%)
Mutual labels: webpack, hmr
Support
JS.coach is a manually curated list of packages related to React, Webpack, Babel and PostCSS
Stars: β 305 (+1594.44%)
Mutual labels: webpack, postcss
Hugo Theme Hello Friend
Pretty basic theme for Hugo that covers all of the essentials. All you have to do is start typing!
Stars: β 586 (+3155.56%)
Mutual labels: webpack, postcss
Universal React Base
[OUTDATED] Super basic example to get you started with Universal (π¦) React/Redux (+ API requests). Lightweight and straightforward.
Stars: β 6 (-66.67%)
Mutual labels: webpack, postcss
postcss-variables-loader
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
px
part 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)
Usage
/* 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: 0 var(--gutter);
}
@media (--small-device) {
/* styles for small viewport */
}
// component.js
import variables from 'colors.config.css';
console.log(variables);
/*
variables = {
primaryColor: 'blue';
gutter: 30;
smallDevice: '(max-width: 480px)'
}
*/
component.style.color = variables.primaryColor;
function add5ToGutter() {
return 5 + variables.gutter;
}
Install
yarn add --dev postcss-variables-loader
npm install --save-dev postcss-variables-loader
NB: You need to process CSS somehow (eg postcss) and imports inside css (eg via postcss-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'
}
]
Options
if production.env.NODE_ENV === 'development'
it will try to wrap config inside Proxy
in runtime.
It is used to guard from accidental mutations or accessing missing keys.
If you dont want this behaviour: pass es5=1
:
loader: 'postcss-variables-loader?es5=1'
License
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].