feat: inject css on demand

BREAKING CHANGE: option injectCss is now turned on by default

Author: 3cp

spec/bundler.spec.js

@@ -9,8 +9,9 @@ function mockTrace(unit) {
   const moduleId = unit.moduleId;
   const shim = unit.shim;
 
-  if (unit.moduleId === 'ext:css') {
+  if (unit.moduleId === 'ext:css' || unit.path.endsWith('.css')) {
     // don't mock ext:css trace
+    // don't mock css file
     return trace(unit);
   }
 
@@ -758,18 +759,18 @@ test('Bundler traces files, split bundles, continuously update bundles in watch
   .then(t.end);
 });
 
-test('Bundler supports inject css', t => {
+test('Bundler supports inject css by default', t => {
   const fakeFs = {
     'node_modules/dumber-module-loader/dist/index.js': 'dumber-module-loader',
     'node_modules/dumber/package.json':  JSON.stringify({name: 'dumber', main: './dist/index'}),
     'node_modules/dumber/dist/inject-css.js': '',
   };
   const bundler = createBundler(fakeFs, {
-    injectCss: true
   });
 
   Promise.resolve()
-  .then(() => bundler.capture({path: 'src/app.js', contents: '', moduleId: 'app'}))
+  .then(() => bundler.capture({path: 'src/app.js', contents: 'c.css', moduleId: 'app'}))
+  .then(() => bundler.capture({path: 'src/c.css', contents: 'lorem', moduleId: 'c.css'}))
   .then(() => bundler.resolve())
   .then(() => bundler.bundle())
   .then(
@@ -779,7 +780,8 @@ test('Bundler supports inject css', t => {
           files: [
             {contents: 'dumber-module-loader;'},
             {contents: 'define.switchToUserSpace();'},
-            {path: 'src/app.js', contents: "define('app',[],1);", sourceMap: undefined},
+            {path: 'src/app.js', contents: "define('app',[\"c.css\"],1);", sourceMap: undefined},
+            {path: 'src/c.css', contents: "define('text!c.css',function(){return \"lorem\";});", sourceMap: undefined},
             {path: '__stub__/ext-css.js', contents: "define('ext:css',['dumber/dist/inject-css'],function(m){return m;});", sourceMap: undefined},
             {contents: 'define.switchToPackageSpace();'},
             {path: 'node_modules/dumber/dist/inject-css.js', contents: "define('dumber/dist/inject-css',[],1);", sourceMap: undefined},
@@ -798,6 +800,44 @@ test('Bundler supports inject css', t => {
   .then(t.end);
 });
 
+test('Bundler can optionally turn off inject css', t => {
+  const fakeFs = {
+    'node_modules/dumber-module-loader/dist/index.js': 'dumber-module-loader',
+    'node_modules/dumber/package.json':  JSON.stringify({name: 'dumber', main: './dist/index'}),
+    'node_modules/dumber/dist/inject-css.js': '',
+  };
+  const bundler = createBundler(fakeFs, {
+    injectCss: false
+  });
+
+  Promise.resolve()
+  .then(() => bundler.capture({path: 'src/app.js', contents: 'c.css', moduleId: 'app'}))
+  .then(() => bundler.capture({path: 'src/c.css', contents: 'lorem', moduleId: 'c.css'}))
+  .then(() => bundler.resolve())
+  .then(() => bundler.bundle())
+  .then(
+    bundleMap => {
+      t.deepEqual(bundleMap, {
+        'entry-bundle': {
+          files: [
+            {contents: 'dumber-module-loader;'},
+            {contents: 'define.switchToUserSpace();'},
+            {path: 'src/app.js', contents: "define('app',[\"c.css\"],1);", sourceMap: undefined},
+            {path: 'src/c.css', contents: "define('text!c.css',function(){return \"lorem\";});", sourceMap: undefined}
+          ],
+          config: {
+            baseUrl: '/dist',
+            bundles: {},
+            paths: {}
+          }
+        }
+      })
+    },
+    err => t.fail(err.stack)
+  )
+  .then(t.end);
+});
+
 test('Bundler traces files with paths mapping', t => {
   const fakeFs = {
     'node_modules/dumber-module-loader/dist/index.js': 'dumber-module-loader',

src/index.js

@@ -40,8 +40,12 @@ export default class Bundler {
       this._cache = cache;
     }
 
-    // turn on injection of css (inject onto html head)
-    if (opts.injectCss || opts.injectCSS) this._injectCss = true;
+    if (opts.hasOwnProperty('injectCss') && !opts.injectCss) {
+      this._injectCss = false;
+    } else {
+      // by default turn on injection of css (inject onto html head)
+      this._injectCss = true;
+    }
 
     let _paths = {};
     if (opts.paths) {
@@ -150,8 +154,6 @@ export default class Bundler {
 
     // mark todo. beware we didn't check whether the id is in _moduleId_done.
     // they will be checked during resolve phase.
-
-    // console.log('_capture ' + tracedUnit.moduleId + ' deps ' + tracedUnit.deps);
     tracedUnit.deps.forEach(d => this._moduleIds_todo.add(d));
 
     const bundle = this.bundleOf(tracedUnit);
@@ -173,7 +175,6 @@ export default class Bundler {
     this._dependencies.forEach(pkg => {
       p = p.then(() => this.packageReaderFor(pkg)).then(reader => {
         if (!pkg.lazyMain) {
-          // console.log('to readMain for ' + pkg.name);
           return reader.readMain()
           .then(unit => this.capture(unit))
           .then(tracedUnit => {
@@ -243,8 +244,7 @@ export default class Bundler {
 
   resolve() {
     let todo = [];
-    return this._supportInjectCssIfNeeded()
-    .then(() => this._resolvePrependsAndAppends())
+    return this._resolvePrependsAndAppends()
     .then(() => this._resolveExplicitDepsIfNeeded())
     .then(() => {
       const consults = [];
@@ -253,6 +253,9 @@ export default class Bundler {
 
       rawTodo.forEach(id => {
         const parsedId = parse(mapId(id, this._paths));
+        if (!parsedId.prefix && parsedId.ext === '.css' && !this._isInjectCssTurnedOn) {
+          consults.push(this._supportInjectCssIfNeeded());
+        }
         const possibleIds = nodejsIds(parsedId.bareId);
         if (possibleIds.some(id => this._moduleId_done.has(id))) return;
 

src/package-locators/default.js

@@ -39,7 +39,7 @@ export default function (packageConfig, mock) {
       },
       err => {
         if (filePath === 'package.json' || filePath === './package.json') {
-          warn('No package.json found at ' + relativePath);
+          warn('No package.json found at ' + name + '/' + relativePath);
           const mock = `{"name":${JSON.stringify(name)},"main":"index"}`;
           info('Fall back to ' + mock);
           return {