Bundling with systemjs-builder doens't include the css file content

[eberlitz]

Hi,

After updating plugin-css from 0.1.23 to 0.1.32, when I build the application throught the systemjs-builder the bundles doens't include the content from my css files and I don't know why.

Here is how I'm bundling using a node script:

var jspm = require('jspm');
var Builder = require('systemjs-builder');
jspm.setPackagePath('.');

var builder = new Builder('./client', './client/config.js');

builder.config({
    separateCSS: false,
    buildCSS: true
});

var bundleOpts = {
    sourceMaps: false,
    minify: true,
    mangle: true,
    runtime: false,
    normalize: true
};

builder.bundle('lib/main', './dist/bundle-main.js', bundleOpts);

builder.bundle('lib/feat1.ts - lib/main', './dist/bundle-feat1.js', bundleOpts);
// builder.bundle('lib/feat2.ts - lib/main', './dist/bundle-feat2.js', bundleOpts);

My css SystemJS config related:

    System.config({
        map: {
            "css": "github:systemjs/plugin-css@0.1.32"
        },
        packages: {
            "app": {
                "meta": {
                    "*.css": { "loader": "css" }
                }
            }
        }
    });

The resulting bundles:

bundle-main.js:

System.registerDynamic("lib/site.css", [], !1, function(a, b, c) {
    var d = System.get("@@global-helpers").prepareGlobal(c.id, null, null);
    return function(a) {}(this), d()
}), System.register("lib/main.ts", ["lib/site.css"], function(a, b) {
    "use strict";
    b && b.id;
    return {
        setters: [function(a) {}],
        execute: function() {
            alert("ok")
        }
    }
});

bundle-feat1.js:

System.registerDynamic("lib/feat1.css", [], !1, function(a, b, c) {
        var d = System.get("@@global-helpers").prepareGlobal(c.id, null, null);
        return function(a) {}(this), d()
    }), System.register("lib/feat1.ts", ["lib/feat1.css"], function(a, b) {
        "use strict";
        b && b.id;
        return {
            setters: [function(a) {}],
            execute: function() {}
        }
    }),
    function(a) {
        if ("undefined" != typeof document) {
            var b = document,
                c = "appendChild",
                d = b.createElement("style");
            d.type = "text/css", b.getElementsByTagName("head")[0][c](d), d[c](b.createTextNode(a))
        }
    }("body,html{margin:0;padding:0;height:100%;width:100%;background-color:#20b2aa}body{background-color:red}\n/*# sourceMappingURL=__.css.map */");

As seen, the css from the main bundle got strangely concatenated into the feat1 bundle. This broke my current application as I lazy load bundles by features.

Any clues? Don't know whats happening here.

[eberlitz]

Seen the following issue #102, I did the changes bellow:

var jspm = require('jspm');
var Builder = require('systemjs-builder');
jspm.setPackagePath('.');

var bundleOpts = {
    sourceMaps: false,
    minify: true,
    mangle: true,
    runtime: false,
    normalize: true
};

function getBuilder(){
    var builder = new Builder('./client', './client/config.js');
    builder.config({
        separateCSS: false,
        buildCSS: true
    });
    return builder;
}

getBuilder().bundle('lib/main', './dist/bundle-main.js', bundleOpts);
getBuilder().bundle('lib/feat1.ts - lib/main.ts', './dist/bundle-feat1.js', bundleOpts);

Now the generated files are OK!

bundle-main.js:

System.registerDynamic("lib/site.css", [], !1, function(a, b, c) {
        var d = System.get("@@global-helpers").prepareGlobal(c.id, null, null);
        return function(a) {}(this), d()
    }), System.register("lib/main.ts", ["lib/site.css"], function(a, b) {
        "use strict";
        b && b.id;
        return {
            setters: [function(a) {}],
            execute: function() {
                alert("ok")
            }
        }
    }),
    function(a) {
        if ("undefined" != typeof document) {
            var b = document,
                c = "appendChild",
                d = b.createElement("style");
            d.type = "text/css", b.getElementsByTagName("head")[0][c](d), d[c](b.createTextNode(a))
        }
    }("body,html{margin:0;padding:0;height:100%;width:100%;background-color:#20b2aa}\n/*# sourceMappingURL=__.css.map */");

bundle-feat1.js:

System.registerDynamic("lib/feat1.css", [], !1, function(a, b, c) {
        var d = System.get("@@global-helpers").prepareGlobal(c.id, null, null);
        return function(a) {}(this), d()
    }), System.register("lib/feat1.ts", ["lib/feat1.css"], function(a, b) {
        "use strict";
        b && b.id;
        return {
            setters: [function(a) {}],
            execute: function() {}
        }
    }),
    function(a) {
        if ("undefined" != typeof document) {
            var b = document,
                c = "appendChild",
                d = b.createElement("style");
            d.type = "text/css", b.getElementsByTagName("head")[0][c](d), d[c](b.createTextNode(a))
        }
    }("body{background-color:red}\n/*# sourceMappingURL=__.css.map */");

I think this 2 issues are related.

[sinasalek]

I also have the same problem, i reverted to 0.1.25 for now till it is fixed

[guybedford]

Yes there are issues with parallel bundle commands interfering with CSS output unfortunately. This is being tracked in https://github.com/systemjs/plugin-css/issues/102.