CSS Locals Loader

A webpack plugin to extract more local information out of the css, to expose via css modules. Currently it can expose height:auto, width:auto along with transition timeouts. Why would you need this? Well, browsers don't transition to (hiehgt|width)auto, and so you have to either handle it yourself but this should let other libraries be written on top, that take care of that for you.

Installation

 $ npm install css-locals-loader --save-dev
 

Configuration

Need to add css-locals before your css-loader in the webpack config.

//webpack.config.js
 
"use strict";
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var path = require('path'), join = path.join.bind(path, __dirname);
var config = {
    //optional array of plugins
    cssLocals:[]
    module: {
        loaders: [
            {
                test: /\.css$/,
                loader: ExtractTextPlugin.extract('style-loader', 'css-locals!css?modules&importLoaders=1&localIdentName=[hash:base64:5]_[name]__[local]')
            },
            {
                test: /\.less$/,
                loader: ExtractTextPlugin.extract('style-loader', 'css-locals!css?modules&importLoaders=1&localIdentName=[hash:base64:5]_[name]__[local]!less')
            }]
 
    },
    plugins: [new ExtractTextPlugin('style.css', {allChunks: true})]
};
 
module.exports = config;
 
 

Usage

Once you have webpack all straightened out, in your client side JS.

var fadeIn = require('./less/fadeIn.less');
//fadeIn now has @enterTimeout.
{
  "enter": "1234_fadeIn_enter",
  "@enterTimeout": 4000
}
 

Plugin API

To add your own locals munger the api is

//yourplugin.js
//locals -> are the current locals, you can/should modify this.
module.exports = function yourLocals(locals){
  
   return function(css, result){
    //this gets executed by postcss, see its documentation for more info 
    ...
   }
}

Plugin API Usage

To activate the plugin add it to the cssLocals property on your webpack config.

//webpack.config.js
var ExtractTextPlugin = require('extract-text-webpack-plugin');
module.exports = {
    ...
    //optional array of plugins. If defined, you need to add the default plugin back in if your want to use it.
    cssLocals:[require('./your-plugin'), 'css-locals-transition']
    module: {
        loaders: [
            {
                test: /\.css$/,
                loader: ExtractTextPlugin.extract('style-loader', 'css-locals!css?modules&importLoaders=1&localIdentName=[hash:base64:5]_[name]__[local]')
            },
            {
                test: /\.less$/,
                loader: ExtractTextPlugin.extract('style-loader', 'css-locals!css?modules&importLoaders=1&localIdentName=[hash:base64:5]_[name]__[local]!less')
            }]
 
    },
    plugins: [new ExtractTextPlugin('style.css', {allChunks: true})]
 
}