Make a separate bundle for the styling

Author: martinRenou

.eslintignore

@@ -24,4 +24,4 @@ coverage
 .history/
 .vscode/
 
-ui-tests/playwright-report
+ui-tests/playwright-report

.gitignore

@@ -30,13 +30,12 @@ config.rst
 package-lock.json
 
 share/jupyter/voila/templates/base/static/*voila.js
-share/jupyter/voila/templates/base/static/*.[woff|woff2|eot|svg]
-
-share/jupyter/voila/templates/classic/static/labvariables.css
-share/jupyter/voila/templates/classic/static/materialcolors.css
-
-share/jupyter/voila/templates/reveal/static/labvariables.css
-share/jupyter/voila/templates/reveal/static/materialcolors.css
+share/jupyter/voila/templates/base/static/*voila-style.js
+share/jupyter/voila/templates/base/static/*.woff
+share/jupyter/voila/templates/base/static/*.woff2
+share/jupyter/voila/templates/base/static/*.eot
+share/jupyter/voila/templates/base/static/*.svg
+share/jupyter/voila/templates/base/static/*.ttf
 
 lib
 

hatch_build.py

@@ -12,8 +12,6 @@
 
 // Inspired by: https://github.com/jupyterlab/jupyterlab/blob/master/dev_mode/index.js
 
-import './style.css';
-
 import { PageConfig, URLExt } from '@jupyterlab/coreutils';
 
 import { VoilaApp } from './app';

packages/voila/src/main.ts

@@ -0,0 +1,4 @@
+@import url('~@fortawesome/fontawesome-free/css/all.min.css');
+@import url('~@fortawesome/fontawesome-free/css/v4-shims.min.css');
+@import url('~@lumino/widgets/style/index.css');
+@import url('~@jupyterlab/apputils/style/index.css');

packages/voila/style/index.css

@@ -0,0 +1 @@
+import './index.css';

packages/voila/style/index.js

@@ -27,9 +27,7 @@ fs.ensureDirSync(buildDir);
 
 // Copy files to the build directory
 const libDir = path.resolve(__dirname, 'lib');
-const style = path.resolve(__dirname, 'style.css');
 fs.copySync(libDir, buildDir);
-fs.copySync(style, path.resolve(buildDir, 'style.css'));
 
 const extras = Build.ensureAssets({
   packageNames: names,
@@ -39,6 +37,10 @@ const extras = Build.ensureAssets({
 // Make a bootstrap entrypoint
 const entryPoint = path.join(buildDir, 'bootstrap.js');
 
+// Also build the style bundle
+const styleDir = path.resolve(__dirname, 'style');
+const styleEntryPoint = path.join(styleDir, 'index.js');
+
 if (process.env.NODE_ENV === 'production') {
   baseConfig.mode = 'production';
 }
@@ -79,5 +81,12 @@ module.exports = [
         }
       })
     ]
+  }),
+  merge(baseConfig, {
+    entry: './' + path.relative(__dirname, styleEntryPoint),
+    output: {
+      path: distRoot,
+      filename: 'voila-style.js'
+    }
   })
 ].concat(extras);

packages/voila/webpack.config.js

@@ -83,9 +83,6 @@ artifacts = [
     "share/jupyter/voila/templates"
 ]
 
-[tool.hatch.build.hooks.custom]
-path = "hatch_build.py"
-
 [tool.hatch.build.targets.wheel.shared-data]
 "etc/jupyter" = "etc/jupyter"
 "voila/labextension" = "share/jupyter/labextensions/@voila-dashboards/jupyterlab-preview"
@@ -103,20 +100,6 @@ dependencies = [
     "hatch-jupyter-builder>=0.5.3",
 ]
 build-function = "hatch_jupyter_builder.npm_builder"
-ensured-targets = [
-    "voila/labextension/static/style.js",
-    "share/jupyter/voila/templates/classic/static/materialcolors.css",
-    "share/jupyter/voila/templates/classic/static/labvariables.css",
-    "share/jupyter/voila/templates/reveal/static/materialcolors.css",
-    "share/jupyter/voila/templates/reveal/static/labvariables.css",
-]
-skip-if-exists = [
-    "voila/labextension/static/style.js",
-    "share/jupyter/voila/templates/classic/static/materialcolors.css",
-    "share/jupyter/voila/templates/classic/static/labvariables.css",
-    "share/jupyter/voila/templates/reveal/static/materialcolors.css",
-    "share/jupyter/voila/templates/reveal/static/labvariables.css",
-]
 
 [tool.hatch.build.hooks.jupyter-builder.editable-build-kwargs]
 build_cmd = "build"

pyproject.toml

@@ -1,5 +1,6 @@
 {%- macro voila_setup_labextensions(base_url, labextensions) -%}
 <script src="{{ page_config['fullStaticUrl'] | e }}/voila.js"></script>
+<script src="{{ page_config['fullStaticUrl'] | e }}/voila-style.js"></script>
 {%- endmacro %}
 
 {# For backward compatibility #}