No description, website, or topics provided.
Switch branches/tags
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
.eslintrc
.gitattributes
.gitignore
LICENSE
README.md
index.js
package.json

README.md

modules-values-extract

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

Installation

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

Depends on postcss as a peer dependency.

Usage

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 */
      require('postcss-cssnext')({
        features: {
          customProperties: {
            variables: myVariables,
          },
        },
      }),
      require('postcss-modules-values'),
      /* 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

https://github.com/alexhisen/mobx-forms-demo