No description, website, or topics provided.
Switch branches/tags
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Failed to load latest commit information.


Extracts all CSS Module @values from a list of css files into an object.

This allows you to feed them, for example, to postcss-custom-properties in webpack.config.js


npm install modules-values-extract --save-dev

Depends on postcss as a peer dependency.


In your webpack.config.js:

const fs = require('fs');
const path = require('path');
const extractValues = require('modules-values-extract');

// get all *.css files in current directory:
const cssFiles = fs.readdirSync(__dirname)
  .filter((file) => file.match(/\.css/i))
  .map((file) => path.resolve(__dirname, file));

let config;
let myVariables;

module.exports = extractValues({
 files: cssFiles,
 /* optional list of plugin functions to use in processing, for example: */
 /* eslint-disable global-require */
 plugins: [require('postcss-calc'), require('precss')],
 /* eslint-enable global-require */
}).then((variables) => {
  myVariables = variables;
  return config;

config = {
  // ... various webpack config

  postcss: () => {
    return [
      /* eslint-disable global-require */
        features: {
          customProperties: {
            variables: myVariables,
      /* eslint-enable global-require */

Note that the above module.exports in wepback.config.js is actually a Promise that resolves to the config object, not the config object itself.

This requires webpack-dev-server 2.x or 1.16.3+.

It is also probably not supported by the babel webpack-alias plugin.

Example Project