Nutritious Potato Munchies

    css-locals-loader

    1.0.9 • Public • Published

    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})]
     
    }

    Install

    npm i css-locals-loader

    DownloadsWeekly Downloads

    8

    Version

    1.0.9

    License

    MIT

    Last publish

    Collaborators

    • speajus