postcss-require

Load JavaScript values into your CSS. Integrates with webpack.

Usage

npm install --save postcss-require

Simple usage:

// foo.js
module.exports = {
  color: 'green'
}

/* foo.css */
~foo: "./foo.js";

.body {
  color: ~foo.color;
}

import constants from 'postcss-require';
import postcss from 'webpack-config-postcss';
import partial from 'webpack-partial';

// webpack.config.babel.js
export default partial({
  // ...
}, postcss(webpack) {
  return [constants()];
});

Advanced usage with webpack gives you access to webpack resolves, loaders and more:

// foo.js
export default {
  color: 'green'
}

/* foo.css */
~foo: "~/some-module/foo";

.body {
  color: ~foo.color;
}

import constants from 'postcss-require';
import postcss from 'webpack-config-postcss';
import partial from 'webpack-partial';

// webpack.config.babel.js
export default partial({
  // ...
},  postcss(webpack) {
  return [
    constants({
      require: (request, _, done) => {
        webpack.loadModule(request, (err, source) => {
          if (err) {
            done(err);
          } else {
            let result = null;
            try {
              result = this.exec(source, request);
              // interop for ES6 modules
              if (result.__esModule && result.default) {
                result = result.default;
              }
            } catch (e) {
              done(e);
              return;
            }
            // Don't need to call `this.addDependency` since the
            // `loadModule` function takes care of it.
            done(null, result);
          }
        });
      },
    })
  ]
})

TODO:

• More tests n stuff