clean up css handling and add css for hub extension

buildutils/src/build.ts

@@ -106,7 +106,7 @@ export namespace Build {
     // 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 cssImports: Array<string> = [];
     let appCSS = '';
 
     packageNames.forEach(name => {
@@ -125,6 +125,7 @@ export namespace Build {
           cssImports.push(name + '/' + data.style);
         }
       }
+      cssImports = cssImports.sort((a, b) => a.localeCompare(b));
 
       // Handle schemas.
       if (schemaDir) {
@@ -164,9 +165,9 @@ export namespace Build {
 
       // Template the CSS index file.
       let cssContents = '/* This is a generated file of CSS imports */';
-      cssContents += `\n@import url('~${appCSS}')`;
+      cssContents += `\n@import url('~${appCSS}');`;
       cssImports.forEach(cssImport => {
-        cssContents += `\n@import url('~${cssImport}')`;
+        cssContents += `\n@import url('~${cssImport}');`;
       });
       const indexCSSPath = path.join(output, 'imports.css');
       fs.writeFileSync(indexCSSPath, cssContents, { encoding: 'utf8' });

dev_mode/imports.css

@@ -1,34 +1,35 @@
 /* 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');
+@import url('~@jupyterlab/application-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/hub-extension/style/index.css');
+@import url('~@jupyterlab/imageviewer-extension/style/index.css');
+@import url('~@jupyterlab/inspector-extension/style/index.css');
+@import url('~@jupyterlab/javascript-extension/style/index.css');
+@import url('~@jupyterlab/json-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/pdf-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');
+@import url('~@jupyterlab/vega5-extension/style/index.css');

dev_mode/index.js

@@ -12,6 +12,9 @@ import {
 // eslint-disable-next-line no-undef
 __webpack_public_path__ = PageConfig.getOption('fullStaticUrl') + '/';
 
+// This must be after the public path is set.
+// This cannot be extracted because the public path is dynamic.
+require('./imports.css');
 
 /**
  * The main entry point for the application.

dev_mode/webpack.config.js

@@ -44,6 +44,10 @@ var result = template(data);
 
 fs.writeFileSync(path.join(buildDir, 'index.out.js'), result);
 fs.copySync('./package.json', path.join(buildDir, 'package.json'));
+fs.copySync(
+  path.join(jlab.outputDir, 'imports.css'),
+  path.join(buildDir, 'imports.css')
+);
 
 // Set up variables for watch mode.
 var localLinked = {};
@@ -132,11 +136,7 @@ module.exports = [
   {
     mode: 'development',
     entry: {
-      main: [
-        'whatwg-fetch',
-        path.resolve(jlab.outputDir, 'imports.css'),
-        path.resolve(buildDir, 'index.out.js')
-      ]
+      main: ['whatwg-fetch', path.resolve(buildDir, 'index.out.js')]
     },
     output: {
       path: path.resolve(buildDir),

packages/application/style/index.css

@@ -3,9 +3,10 @@
 | Distributed under the terms of the Modified BSD License.
 |----------------------------------------------------------------------------*/
 
-@import url('./base.css');
-
 @import url('~font-awesome/css/font-awesome.min.css');
+/* Phosphor needs to be imported before local styles */
 @import url('~@phosphor/widgets/style/index.css');
 @import url('~@jupyterlab/apputils/style/index.css');
 @import url('~@jupyterlab/docregistry/style/index.css');
+
+@import url('./base.css');

packages/hub-extension/package.json

@@ -17,7 +17,11 @@
     "schema/*.json",
     "style/**/*.{css,eot,gif,html,jpg,json,png,svg,woff2,ttf}"
   ],
+  "sideEffects": [
+    "style/**/*"
+  ],
   "main": "lib/index.js",
+  "style": "style/index.css",
   "types": "lib/index.d.ts",
   "directories": {
     "lib": "lib/"

packages/hub-extension/style/index.css

@@ -0,0 +1,9 @@
+/*-----------------------------------------------------------------------------
+| Copyright (c) 2014-2017, Jupyter Development Team.
+|
+| Distributed under the terms of the Modified BSD License.
+|----------------------------------------------------------------------------*/
+
+@import url('~@jupyterlab/application/style/index.css');
+@import url('~@jupyterlab/apputils/style/index.css');
+@import url('~@jupyterlab/mainmenu/style/index.css');

packages/notebook-extension/style/index.css

@@ -3,4 +3,4 @@
 | Distributed under the terms of the Modified BSD License.
 |----------------------------------------------------------------------------*/
 
-@import url('~@jupyterlab/notebook/styles/index.css');
+@import url('~@jupyterlab/notebook/style/index.css');

packages/rendermime-extension/style/index.css

@@ -3,4 +3,4 @@
 | Distributed under the terms of the Modified BSD License.
 |----------------------------------------------------------------------------*/
 
-@import url('~@jupyterlab/rendermime/styles/index.css');
+@import url('~@jupyterlab/rendermime/style/index.css');