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 #102.