https://github.com/jspears/css-locals-loader

A Webpack loader for extracting locals to be imported via css modules.
https://github.com/jspears/css-locals-loader

Last synced: 19 days ago
JSON representation

A Webpack loader for extracting locals to be imported via css modules.

• Host: GitHub
• URL: https://github.com/jspears/css-locals-loader
• Owner: jspears
• Created: 2016-01-25T19:44:12.000Z (almost 9 years ago)
• Default Branch: master
• Last Pushed: 2016-01-29T21:03:32.000Z (almost 9 years ago)
• Last Synced: 2024-10-27T20:20:56.178Z (24 days ago)
• Language: JavaScript
• Size: 50.8 KB
• Stars: 0
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: Readme.md

Awesome Lists containing this project

README

        
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.

```js

//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.

```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.

```js

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

}

```