coobaha / postcss-variables-loader

Share variables between CSS and JS with Webpack + HMR

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

• MIT : http://opensource.org/licenses/MIT

postcss-variables-loader's Issues

Migration to postcss-preset-env maybe?

Hi! It looks like your loader is a little bit outdated now because it depends on postcss-cssnext which was deprecated some time ago. Do you consider migration to postcss-preset-env? Usage of deprecated cssnext causes some problems like an error from browserslist (if you use query like ''not dead", it says that this is an unknown query).

Load custom media query definitions

It'd be really useful if this would also load custom media query definitions (postcss plugin).

Such as @custom-media --small (width <= 768px); -- it would be great to be able to get this whole media query string ((width <= 768px)) from CSS to JS to reuse in a window.matchMedia() call.

Compiled code isn't valid ES5

I'm not sure if this is intended, and I'm supposed to work around it myself, or if it's a bug.

My project builds with Webpack and Babel, and I'm using the env plugin for Babel, which is configured to target IE11 among others.

But part of postcss-variables-loader is coming out like this:

if (typeof Proxy !== 'undefined') {
    config = new Proxy(config, {
        get(target, key) {
            if (key !== '__esModule' && !target[key]) {
                console.error(`No variable found, check variable key: ["${key.toString()}"]`);
            }
    
            return target[key];
        },
        
        set(target, key) {
            throw new Error('Config variables are immutable ' + key);
        }
    });
}

IE11 is choking on the bare "get" and "set" functions in here, since no keys are specified.

I guess this file isn't being transformed. I haven't explicitly told Babel to ignore node_modules, but I'm not sure what its default behaviour is.

If this is expected and something I have to work around, might you be able to point me in the right direction?

Error: Cannot find module

Hey, I'm trying to use this module via the inline loader syntax with webpack but it's saying Error: Cannot find module. Are there any loaders / plugins that need to be used in conjunction with this to make it work? Or maybe you could link to another repo where this package is being used so I can see how all the configs and everything hookup?

Thanks for building this project, I'm looking forward to using it soon!

Deprecation warning for parseQuery

Hi! I see a warning in logs while using the loader: parseQuery() will be replaced with getOptions() in the next major version of loader-utils.\n at Object.parseQuery (/Users/khrystynaskvarok/workspace/sting/hob-webshop-platform/frontend/node_modules/postcss-variables-loader/node_modules/loader-utils/index.js:78:3)\n at Object.exports.default (/Users/khrystynaskvarok/workspace/sting/hob-webshop-platform/frontend/node_modules/postcss-variables-loader/lib/index.js:14:39)

Here is explained why this warning is thrown here. Could you please tell if you plan to update the code? :)

kebab-case or camelCase

Maybe it would be better to get vars in camelCase in JS imports insteed of default css kebab-case?

Unnecessary check of pixels?

lib/utils.js, string 75
result[key] = value.endsWith('px') ? parseInt(value, 10) : value;

You would get next transform:
String: '4px 4px' -> Number: 4
Btw why did you add this check?