blesscss / bless-webpack-plugin

Plugin for webpack that runs bless over all (generated) css files.

Installation

Install the plugin with npm:

$ npm install --save-dev bless-webpack-plugin

Usage

var blessPlugin = require('bless-webpack-plugin');

{
	plugins : [
		blessPlugin();
	]
}

API

blessPlugin([blessOptions[, pattern]])

• blessOptions is an options object for bless. It will be passed directly to it.
• pattern a regular expression to find assets that should be transformed with bless. Default: /\.css$/.

bless-webpack-plugin's Issues

Plugin fails when no CSS files exist

When no CSS files exist in a bundle, the callback is never called. This leads to webpack finishing silently without any output. Everything works well once we have at least one bundle that contains some css.

A possible fix (see the finished variable):

var bless = require('bless');
var RawSource = require('webpack/lib/RawSource');
var _ = require('lodash');

module.exports = function(options, pattern) {
    pattern = pattern || /\.css$/;
    options = options || {};

    return {
        apply: function(compiler) {
            compiler.plugin("this-compilation", function(compilation) {
                compilation.plugin("optimize-assets", function(assets, callback) {
                    var pending = 0;
                    var finished = false;

                    function done(err) {
                        pending--;
                        if (err && pending >= 0) {
                            pending = 0;
                            callback(err);
                            finished = true;
                        } else if (pending === 0) {
                            callback();
                            finished = true;
                        }
                    }

                    Object.keys(assets)
                        .filter(pattern.test.bind(pattern))
                        .forEach(function(name) {
                            pending++;
                            new bless.Parser({ output: name, options : options })
                                .parse(assets[name].source(), function(err, files) {
                                    if (err) {
                                        done(err);
                                        return;
                                    }
                                    delete assets[name];
                                    files.forEach(function(file) {
                                        assets[file.filename] = new RawSource(file.content);
                                    });
                                    done();
                                });
                        });

                    if (!finished) {
                        callback();
                    }
                });
            });
        }
    };
};

There is no @import in css file

I use the plugin like this:

var blessPlugin = require('bless-webpack-plugin');
plugins: [
...,
blessPlugin()
]

it can be splited to multiple, but the entry css do not include @import

css source map not work

I use bless plugin with

loader: ExtractTextPlugin.extract('style', 'css?sourceMap!postcss')
...
new ExtractTextPlugin('styles/[name].[contenthash].css'),
blessPlugin({ imports: true })

the source map stop working.

Bless v4.0.0-alpha.0 is out

We just pushed v4.0.0-alpha.0 to npm today! Please let us know how it works for you so we can be confident about getting the actual release out. Also, the Bless project has a new home at https://github.com/BlessCSS/bless. Since it is now in a github organization we'd also like to extend the invitation to transfer this repo there and add you as a member of the organization. The goal being to consolidate and document bless and it's usage with different build tools. Our main focus will be towards Gulp, Grunt, Webpack, and possibly Browserify. If you have any questions feel free to reach out in our issue log or hit us up on gitter at https://gitter.im/BlessCSS/bless

Example use please

Hi, can you give a more in detailed example of using this plugin please?