Use a separate css file for imports

buildutils/src/build.ts

@@ -102,14 +102,30 @@ export namespace Build {
 
     const themeConfig: webpack.Configuration[] = [];
 
+    // Get the CSS imports.
+    // We must import the application CSS first.
+    // The order of the rest does not matter.
+    // We explicitly ignore themes so they can be loaded dynamically.
+    const cssImports: Array<string> = [];
+    let appCSS = '';
+
     packageNames.forEach(name => {
       const packageDataPath = require.resolve(path.join(name, 'package.json'));
       const packageDir = path.dirname(packageDataPath);
-      const packageData = utils.readJSONFile(packageDataPath);
-      const extension = normalizeExtension(packageData);
+      const data = utils.readJSONFile(packageDataPath);
+      const extension = normalizeExtension(data);
 
       const { schemaDir, themePath } = extension;
 
+      // Handle styles.
+      if (data.style) {
+        if (data.name === '@jupyterlab/application-extension') {
+          appCSS = name + '/' + data.style;
+        } else if (!data.jupyterlab.themePath) {
+          cssImports.push(name + '/' + data.style);
+        }
+      }
+
       // Handle schemas.
       if (schemaDir) {
         const schemas = glob.sync(
@@ -122,7 +138,7 @@ export namespace Build {
           try {
             const oldPackagePath = path.join(destination, 'package.json.orig');
             const oldPackageData = utils.readJSONFile(oldPackagePath);
-            if (oldPackageData.version === packageData.version) {
+            if (oldPackageData.version === data.version) {
               fs.removeSync(destination);
             }
           } catch (e) {
@@ -146,6 +162,15 @@ export namespace Build {
         );
       }
 
+      // Template the CSS index file.
+      let cssContents = '/* This is a generated file of CSS imports */';
+      cssContents += `\n@import url('~${appCSS}')`;
+      cssImports.forEach(cssImport => {
+        cssContents += `\n@import url('~${cssImport}')`;
+      });
+      const indexCSSPath = path.join(output, 'imports.css');
+      fs.writeFileSync(indexCSSPath, cssContents, { encoding: 'utf8' });
+
       if (!themePath) {
         return;
       }

dev_mode/imports.css

@@ -0,0 +1,34 @@
+/* This is a generated file of CSS imports */
+@import url('~@jupyterlab/application-extension/style/index.css') @import
+  url('~@jupyterlab/javascript-extension/style/index.css') @import
+  url('~@jupyterlab/json-extension/style/index.css') @import
+  url('~@jupyterlab/pdf-extension/style/index.css') @import
+  url('~@jupyterlab/vega5-extension/style/index.css') @import
+  url('~@jupyterlab/apputils-extension/style/index.css') @import
+  url('~@jupyterlab/codemirror-extension/style/index.css') @import
+  url('~@jupyterlab/completer-extension/style/index.css') @import
+  url('~@jupyterlab/console-extension/style/index.css') @import
+  url('~@jupyterlab/csvviewer-extension/style/index.css') @import
+  url('~@jupyterlab/docmanager-extension/style/index.css') @import
+  url('~@jupyterlab/documentsearch-extension/style/index.css') @import
+  url('~@jupyterlab/extensionmanager-extension/style/index.css') @import
+  url('~@jupyterlab/faq-extension/style/index.css') @import
+  url('~@jupyterlab/filebrowser-extension/style/index.css') @import
+  url('~@jupyterlab/fileeditor-extension/style/index.css') @import
+  url('~@jupyterlab/help-extension/style/index.css') @import
+  url('~@jupyterlab/htmlviewer-extension/style/index.css') @import
+  url('~@jupyterlab/imageviewer-extension/style/index.css') @import
+  url('~@jupyterlab/inspector-extension/style/index.css') @import
+  url('~@jupyterlab/launcher-extension/style/index.css') @import
+  url('~@jupyterlab/mainmenu-extension/style/index.css') @import
+  url('~@jupyterlab/markdownviewer-extension/style/index.css') @import
+  url('~@jupyterlab/mathjax2-extension/style/index.css') @import
+  url('~@jupyterlab/notebook-extension/style/index.css') @import
+  url('~@jupyterlab/rendermime-extension/style/index.css') @import
+  url('~@jupyterlab/running-extension/style/index.css') @import
+  url('~@jupyterlab/settingeditor-extension/style/index.css') @import
+  url('~@jupyterlab/statusbar-extension/style/index.css') @import
+  url('~@jupyterlab/tabmanager-extension/style/index.css') @import
+  url('~@jupyterlab/terminal-extension/style/index.css') @import
+  url('~@jupyterlab/tooltip-extension/style/index.css') @import
+  url('~@jupyterlab/vdom-extension/style/index.css');

dev_mode/index.js

@@ -64,15 +64,6 @@ function main() {
 
   var register = [];
 
-  // Handle the CSS imports.
-  // We must import the application CSS first.
-  // This must be done synchronously so it is available when the theme manager
-  // loads the theme CSS.
-  require('{{jupyterlab_app_css}}');
-  {{#each jupyterlab_css_imports}}
-  require('{{this}}');
-  {{/each}}
-
   // Handle the registered mime extensions.
   var mimeExtensions = [];
   var extension;

dev_mode/webpack.config.js

@@ -20,23 +20,14 @@ var extensions = jlab.extensions;
 var mimeExtensions = jlab.mimeExtensions;
 var packageNames = Object.keys(mimeExtensions).concat(Object.keys(extensions));
 
-// Get the CSS imports.
-// We must import the application CSS first.
-// The order of the rest does not matter.
-// We explicitly ignore themes so they can be loaded dynamically.
-var cssImports = [];
-var appCSS = '';
-packageNames.forEach(function(packageName) {
-  var data = require(packageName + '/package.json');
-  if (data.style) {
-    if (data.name === '@jupyterlab/application-extension') {
-      appCSS = packageName + '/' + data.style;
-    } else if (!data.jupyterlab.themePath) {
-      cssImports.push(packageName + '/' + data.style);
-    }
-  }
-});
+// Ensure a clear build directory.
+var buildDir = path.resolve(jlab.buildDir);
+if (fs.existsSync(buildDir)) {
+  fs.removeSync(buildDir);
+}
+fs.ensureDirSync(buildDir);
 
+// Build the assets
 var extraConfig = Build.ensureAssets({
   packageNames: packageNames,
   output: jlab.outputDir
@@ -47,24 +38,13 @@ var source = fs.readFileSync('index.js').toString();
 var template = Handlebars.compile(source);
 var data = {
   jupyterlab_extensions: extensions,
-  jupyterlab_mime_extensions: mimeExtensions,
-  jupyterlab_app_css: appCSS,
-  jupyterlab_css_imports: cssImports
+  jupyterlab_mime_extensions: mimeExtensions
 };
 var result = template(data);
 
-// Ensure a clear build directory.
-var buildDir = path.resolve(jlab.buildDir);
-if (fs.existsSync(buildDir)) {
-  fs.removeSync(buildDir);
-}
-fs.ensureDirSync(buildDir);
-
 fs.writeFileSync(path.join(buildDir, 'index.out.js'), result);
 fs.copySync('./package.json', path.join(buildDir, 'package.json'));
 
-process.exit(0);
-
 // Set up variables for watch mode.
 var localLinked = {};
 var ignoreCache = Object.create(null);
@@ -152,7 +132,11 @@ module.exports = [
   {
     mode: 'development',
     entry: {
-      main: ['whatwg-fetch', path.resolve(buildDir, 'index.out.js')]
+      main: [
+        'whatwg-fetch',
+        path.resolve(jlab.outputDir, 'imports.css'),
+        path.resolve(buildDir, 'index.out.js')
+      ]
     },
     output: {
       path: path.resolve(buildDir),