feat: improve Vuetify CSS scoping

Previously the CSS was simply scoped to `.vuetify-styles` in `@mariobuikhuizen/vuetify` JS-package. We moved the scoping to be here to be closer to the rest of the relevant code. The scoping is now also done based using the `:where` CSS selector, since this has no impact on specificity, meaning that Vuetify CSS should be less likely to override other styles unexpectedly.

js/package.json

@@ -41,28 +41,31 @@
     "@babel/preset-env": "^7.4.4",
     "@jupyterlab/builder": "^3 || ^4",
     "ajv": "^6.10.0",
-    "css-loader": "^2.1.1",
+    "autoprefixer": "^10.4.20",
+    "css-loader": "^7.1.2",
     "eslint": "^5.16.0",
     "eslint-config-airbnb-base": "^13.1.0",
     "eslint-plugin-import": "^2.17.2",
     "eslint-plugin-vue": "^5.2.2",
-    "file-loader": "^3.0.1",
+    "mini-css-extract-plugin": "^2.9.2",
     "npm-run-all": "^4.1.5",
+    "postcss-loader": "^8.1.1",
+    "postcss-scopify": "^1.0.0",
     "rimraf": "^2.6.3",
     "style-loader": "^0.23.1",
-    "webpack": "^4.31.0",
-    "webpack-cli": "^3.3.2"
+    "webpack": "^5.97.1",
+    "webpack-cli": "^6.0.1"
   },
   "dependencies": {
     "@jupyter-widgets/base": "^1 || ^2 || ^3 || ^4 || ^6",
     "@jupyterlab/apputils": "^2 || ^3 || ^4",
-    "@mariobuikhuizen/vuetify": "2.2.26-rc.0",
-    "@mdi/font": "^4.9.95",
+    "@mariobuikhuizen/vuetify": "^2.2.26-rc.1",
+    "@mdi/font": "^7.4.47",
     "core-js": "^3.0.1",
-    "jupyter-vue": "^1.0.0",
+    "jupyter-vue": "^1.11.2",
     "lodash": "^4.17.11",
     "material-design-icons-iconfont": "^5.0.1",
-    "typeface-roboto": "0.0.54"
+    "typeface-roboto": "^1.1.13"
   },
   "jupyterlab": {
     "extension": "lib/labplugin",

js/postcss.config.js

@@ -0,0 +1,14 @@
+const autoprefixer = require("autoprefixer");
+const scopify = require("postcss-scopify");
+
+module.exports = (ctx) => ({
+  plugins: [
+    autoprefixer({
+      remove: false,
+    }),
+    scopify({
+      scope: ":where(.vuetify-styles)",
+      exclude: [".vuetify-styles", "html", "body", ":root"],
+    }),
+  ],
+});

js/src/index.js

@@ -8,5 +8,6 @@ export * from "./generated";
 export { HtmlModel } from "./Html";
 export { VuetifyTemplateModel } from "./VuetifyTemplate";
 export { ThemeModel, ThemeColorsModel } from "./Themes";
+export { Vue, Vuetify } from "./plugins/vuetify";
 
 export const { version } = require("../package.json"); // eslint-disable-line global-require

js/src/plugins/vuetify.js

@@ -5,3 +5,4 @@ import "@mariobuikhuizen/vuetify/dist/vuetify.min.css";
 Vue.use(Vuetify);
 
 export default new Vuetify();
+export { Vue, Vuetify };

js/src/styles.css

@@ -4,7 +4,7 @@ html {
   font-size: 16px;
 }
 
-.vuetify-styles div.v-application--wrap {
+div.v-application--wrap {
   /* disable min-height: 100vh set by vuetify */
   min-height: unset;
 }

js/webpack.config.js

@@ -1,13 +1,14 @@
 var path = require("path");
 var version = require("./package.json").version;
+const MiniCssExtractPlugin = require("mini-css-extract-plugin");
 
 // Custom webpack rules are generally the same for all webpack bundles, hence
 // stored in a separate local variable.
 var rules = [
-  { test: /\.css$/, use: ["style-loader", "css-loader"] },
+  { test: /\.css$/, use: ["style-loader", "css-loader", "postcss-loader"] },
   {
     test: /\.(woff|woff2|eot|ttf|otf)$/,
-    loader: "file-loader",
+    type: "asset/resource",
   },
 ];
 
@@ -171,8 +172,23 @@ module.exports = [
     },
     devtool: "source-map",
     module: {
-      rules: rules,
+      rules: [
+        {
+          test: /\.css$/,
+          use: [MiniCssExtractPlugin.loader, "css-loader", "postcss-loader"],
+        },
+        {
+          test: /\.(woff|woff2|eot|ttf|otf)$/,
+          type: "asset/resource",
+        },
+      ],
     },
+    // we extract the CSS to a separate file, since we might want to import it separately for global use
+    plugins: [
+      new MiniCssExtractPlugin({
+        filename: "jupyter-vuetify.min.css",
+      }),
+    ],
     externals: ["@jupyter-widgets/base", "@jupyterlab/apputils", "jupyter-vue"],
     resolve: {
       alias: {

js/webpack.config.lab3.js

@@ -1,9 +1,19 @@
 var path = require("path");
 
+const rules = [
+  {
+    test: /\.css$/,
+    use: ["postcss-loader"],
+  },
+];
+
 module.exports = {
   resolve: {
     alias: {
       vue$: path.resolve(__dirname, "lib", "vue_alias"),
     },
   },
+  module: {
+    rules: rules,
+  },
 };