Use wasm build of procss for non-rust projects

finos · texodus · Jan 18, 2023 · Jan 7, 2023 · Jan 8, 2023 · Jan 8, 2023
commit 1331619f54d7c259103e9358f177ed2e738e194b
diff --git a/packages/perspective-jupyterlab/build.js b/packages/perspective-jupyterlab/build.js
@@ -1,7 +1,5 @@
 const cpy = require("cpy");
 
-const { lessLoader } = require("esbuild-plugin-less");
-
 const { WasmPlugin } = require("@finos/perspective-esbuild-plugin/wasm");
 const { WorkerPlugin } = require("@finos/perspective-esbuild-plugin/worker");
 const { UMDLoader } = require("@finos/perspective-esbuild-plugin/umd");
@@ -12,17 +10,13 @@ const TEST_BUILD = {
     define: {
         global: "window",
     },
-    plugins: [
-        lessLoader(),
-        WasmPlugin(true),
-        WorkerPlugin({ inline: true }),
-        UMDLoader(),
-    ],
+    plugins: [WasmPlugin(true), WorkerPlugin({ inline: true }), UMDLoader()],
     globalName: "PerspectiveLumino",
     format: "cjs",
     loader: {
         ".html": "text",
         ".ttf": "file",
+        ".css": "text",
     },
     outfile: "dist/umd/lumino.js",
 };
@@ -32,10 +26,11 @@ const PROD_BUILD = {
     define: {
         global: "window",
     },
-    plugins: [lessLoader(), WasmPlugin(true), WorkerPlugin({ inline: true })],
+    plugins: [WasmPlugin(true), WorkerPlugin({ inline: true })],
     external: ["@jupyter*", "@lumino*"],
     format: "esm",
     loader: {
+        ".css": "text",
         ".html": "text",
         ".ttf": "file",
     },
@@ -46,7 +41,27 @@ const BUILD = [
     process.argv.some((x) => x == "--test") ? TEST_BUILD : PROD_BUILD,
 ];
 
+const { BuildCss } = require("@prospective.co/procss/target/cjs/procss.js");
+const fs = require("fs");
+
+function add(builder, path, path2) {
+    builder.add(
+        path,
+        fs.readFileSync(require.resolve(path2 || path)).toString()
+    );
+}
+
 async function build_all() {
+    fs.mkdirSync("dist/css", { recursive: true });
+    const builder3 = new BuildCss("");
+
+    add(builder3, "@finos/perspective-viewer/dist/css/themes.css");
+    add(builder3, "./index.less", "./src/less/index.less");
+    fs.writeFileSync(
+        "dist/css/perspective-jupyterlab.css",
+        builder3.compile().get("index.css")
+    );
+
     await Promise.all(BUILD.map(build)).catch(() => process.exit(1));
     cpy(["dist/css/*"], "dist/umd");
 }

diff --git a/packages/perspective-jupyterlab/src/js/index.js b/packages/perspective-jupyterlab/src/js/index.js
@@ -14,7 +14,6 @@ export * from "./view";
 export * from "./widget";
 
 /* css */
-import "../less/index.less";
 import "@finos/perspective-viewer-datagrid";
 import "@finos/perspective-viewer-d3fc";
 import "@finos/perspective-viewer-openlayers/dist/umd/perspective-viewer-openlayers.js";

diff --git a/packages/perspective-jupyterlab/src/less/index.less b/packages/perspective-jupyterlab/src/less/index.less
@@ -1,4 +1,4 @@
-@import (inline) "@finos/perspective-viewer/dist/css/themes.css";
+@import "@finos/perspective-viewer/dist/css/themes.css";
 
 div.PSPContainer {
     overflow: auto;

diff --git a/packages/perspective-workspace/build.js b/packages/perspective-workspace/build.js
@@ -1,44 +1,26 @@
-const { lessLoader } = require("esbuild-plugin-less");
 const { execSync } = require("child_process");
-
-const {
-    InlineCSSPlugin,
-} = require("@finos/perspective-esbuild-plugin/inline_css");
 const {
     NodeModulesExternal,
 } = require("@finos/perspective-esbuild-plugin/external");
-const {
-    IgnoreCSSPlugin,
-} = require("@finos/perspective-esbuild-plugin/ignore_css");
 const { WasmPlugin } = require("@finos/perspective-esbuild-plugin/wasm");
 const { WorkerPlugin } = require("@finos/perspective-esbuild-plugin/worker");
 const { ResolvePlugin } = require("@finos/perspective-esbuild-plugin/resolve");
 const { build } = require("@finos/perspective-esbuild-plugin/build");
 
 const BUILD = [
-    {
-        entryPoints: [
-            "src/themes/material.less",
-            "src/themes/material-dark.less",
-        ],
-        plugins: [lessLoader()],
-        outdir: "dist/css",
-    },
     {
         entryPoints: ["src/js/perspective-workspace.js"],
         define: {
             global: "window",
         },
         format: "esm",
         plugins: [
-            InlineCSSPlugin(),
-            IgnoreCSSPlugin(),
-
             // Inlining `lumino` and importing the `.ts` source saves _50kb_
             NodeModulesExternal("@lumino"),
         ],
         loader: {
             ".html": "text",
+            ".css": "text",
         },
         external: ["*.wasm"],
         outfile: "dist/esm/perspective-workspace.js",
@@ -48,14 +30,10 @@ const BUILD = [
         define: {
             global: "window",
         },
-        plugins: [
-            InlineCSSPlugin(),
-            IgnoreCSSPlugin(),
-            WasmPlugin(true),
-            WorkerPlugin({ inline: true }),
-        ],
+        plugins: [WasmPlugin(true), WorkerPlugin({ inline: true })],
         format: "iife",
         loader: {
+            ".css": "text",
             ".html": "text",
         },
         outfile: "dist/umd/perspective-workspace.js",
@@ -72,21 +50,86 @@ const BUILD = [
                 "@finos/perspective-viewer":
                     "@finos/perspective-viewer/dist/esm/perspective-viewer.js",
             }),
-            InlineCSSPlugin(),
-            IgnoreCSSPlugin(),
             WasmPlugin(false),
             WorkerPlugin({ inline: false }),
         ],
         format: "esm",
         splitting: true,
         loader: {
+            ".css": "text",
             ".html": "text",
         },
         outdir: "dist/cdn",
     },
 ];
 
+const { BuildCss } = require("@prospective.co/procss/target/cjs/procss.js");
+const fs = require("fs");
+
+function add(builder, path, path2) {
+    builder.add(
+        path,
+        fs.readFileSync(require.resolve(path2 || path)).toString()
+    );
+}
+
 async function build_all() {
+    fs.mkdirSync("build/css", { recursive: true });
+    fs.mkdirSync("dist/css", { recursive: true });
+    const builder3 = new BuildCss("");
+
+    add(builder3, "@lumino/widgets/style/widget.css");
+    add(builder3, "@lumino/widgets/style/accordionpanel.css");
+    add(builder3, "@lumino/widgets/style/commandpalette.css");
+    add(builder3, "@lumino/widgets/style/dockpanel.css");
+    add(builder3, "@lumino/widgets/style/menu.css");
+    add(builder3, "@lumino/widgets/style/menubar.css");
+    add(builder3, "@lumino/widgets/style/scrollbar.css");
+    add(builder3, "@lumino/widgets/style/splitpanel.css");
+    add(builder3, "@lumino/widgets/style/tabbar.css");
+    add(builder3, "@lumino/widgets/style/tabpanel.css");
+
+    add(builder3, "@lumino/widgets/style/menu.css");
+    add(builder3, "@lumino/widgets/style/index.css");
+
+    add(builder3, "./tabbar.less", "./src/less/tabbar.less");
+    add(builder3, "./dockpanel.less", "./src/less/dockpanel.less");
+    add(builder3, "./widget.less", "./src/less/widget.less");
+
+    add(builder3, "./viewer.less", "./src/less/viewer.less");
+    add(builder3, "./menu.less", "./src/less/menu.less");
+    add(builder3, "./workspace.less", "./src/less/workspace.less");
+    add(builder3, "./injected.less", "./src/less/injected.less");
+    fs.writeFileSync(
+        "build/css/workspace.css",
+        builder3.compile().get("workspace.css")
+    );
+
+    fs.writeFileSync(
+        "build/css/injected.css",
+        builder3.compile().get("injected.css")
+    );
+
+    const builder = new BuildCss("");
+    add(builder, "@finos/perspective-viewer/dist/css/material.css");
+    add(builder, "material.scss", "./src/themes/material.less");
+    add(builder, "material2.scss", "./src/themes/material.less");
+    fs.writeFileSync(
+        "dist/css/material.css",
+        builder.compile().get("material2.css")
+    );
+
+    const builder2 = new BuildCss("");
+    add(builder2, "@finos/perspective-viewer/dist/css/material.css");
+    add(builder2, "@finos/perspective-viewer/dist/css/material-dark.css");
+    add(builder2, "@finos/perspective-viewer/src/themes/variables.less");
+    add(builder2, "material.less", "./src/themes/material.less");
+    add(builder2, "material-dark2.scss", "./src/themes/material-dark.less");
+    fs.writeFileSync(
+        "dist/css/material-dark.css",
+        builder2.compile().get("material-dark2.css")
+    );
+
     await Promise.all(BUILD.map(build)).catch(() => process.exit(1));
     execSync("cpy dist/css/* dist/umd");
 }

diff --git a/packages/perspective-workspace/package.json b/packages/perspective-workspace/package.json
@@ -50,6 +50,7 @@
         "lodash": "^4.17.4"
     },
     "devDependencies": {
+        "@prospective.co/procss": "^0.1.8",
         "@finos/perspective-esbuild-plugin": "^1.9.1",
         "@finos/perspective-test": "^1.9.1"
     }

diff --git a/packages/perspective-workspace/src/js/perspective-workspace.js b/packages/perspective-workspace/src/js/perspective-workspace.js
@@ -7,7 +7,7 @@
  *
  */
 
-import style from "../less/workspace.less";
+import style from "../../build/css/workspace.css";
 import template from "../html/workspace.html";
 import { PerspectiveWorkspace, SIDE } from "./workspace";
 export { PerspectiveWorkspace } from "./workspace";
@@ -16,7 +16,7 @@ import { Widget } from "@lumino/widgets/src/widget";
 import { bindTemplate } from "./workspace/utils.js";
 export { PerspectiveViewerWidget } from "./workspace/widget";
 
-import injectedStyles from "../less/injected.less";
+import injectedStyles from "../../build/css/injected.css";
 
 /**
  * A Custom Element for coordinating a set of `<perspective-viewer>` light DOM

diff --git a/packages/perspective-workspace/src/less/menu.less b/packages/perspective-workspace/src/less/menu.less
@@ -7,7 +7,7 @@
  *
  */
 
-@import (inline) "@lumino/widgets/style/menu.css";
+@import "@lumino/widgets/style/menu.css";
 
 .p-Menu {
     font-size: 12px;

diff --git a/packages/perspective-workspace/src/less/tabbar.less b/packages/perspective-workspace/src/less/tabbar.less
@@ -15,9 +15,9 @@
     padding: 0px;
 }
 
-.p-TabBar-tabLabel[value="[untitled]"] {
-    color: #ddd !important;
-}
+// .p-TabBar-tabLabel[value="[untitled]"] {
+//     color: #ddd !important;
+// }
 
 .p-TabBar-tabLabel:focus {
     outline: none;
@@ -145,7 +145,7 @@
     .shadow {
         margin: -1px;
         position: absolute;
-        width: calc(~"100% + 2px");
+        width: calc(100% + 2px);
         height: 200%;
         pointer-events: none;
         left: 0px;

diff --git a/packages/perspective-workspace/src/less/workspace.less b/packages/perspective-workspace/src/less/workspace.less
@@ -7,7 +7,16 @@
  *
  */
 
-@import "../../../../node_modules/@lumino/widgets/style/index.css";
+@import "@lumino/widgets/style/widget.css";
+@import "@lumino/widgets/style/accordionpanel.css";
+@import "@lumino/widgets/style/commandpalette.css";
+@import "@lumino/widgets/style/dockpanel.css";
+@import "@lumino/widgets/style/menu.css";
+@import "@lumino/widgets/style/menubar.css";
+@import "@lumino/widgets/style/scrollbar.css";
+@import "@lumino/widgets/style/splitpanel.css";
+@import "@lumino/widgets/style/tabbar.css";
+@import "@lumino/widgets/style/tabpanel.css";
 
 :host {
     @import "./tabbar.less";

diff --git a/packages/perspective-workspace/src/themes/material-dark.less b/packages/perspective-workspace/src/themes/material-dark.less
@@ -7,10 +7,10 @@
  *
  */
 
-@import (less) "@finos/perspective-viewer/src/themes/variables.less";
-@import (inline) "@finos/perspective-viewer/dist/css/material-dark.css";
+@import url("ref://@finos/perspective-viewer/src/themes/variables.less");
+@import "@finos/perspective-viewer/dist/css/material-dark.css";
 
-@import (reference) "./material.less";
+@import url("ref://material.less");
 
 perspective-workspace,
 perspective-workspace[theme="Material Dark"],
@@ -19,7 +19,7 @@ perspective-indicator[theme="Material Dark"] {
 }
 
 perspective-workspace {
-    .perspective-workspace-material-base();
+    @include perspective-workspace-material-base;
     background-color: @grey800;
     color: white;
     --workspace-master--background-color: @grey800;

diff --git a/packages/perspective-workspace/src/themes/material.less b/packages/perspective-workspace/src/themes/material.less
@@ -7,7 +7,7 @@
  *
  */
 
-@import (inline) "@finos/perspective-viewer/dist/css/material.css";
+@import "@finos/perspective-viewer/dist/css/material.css";
 
 
 perspective-workspace,
@@ -17,7 +17,7 @@ perspective-indicator[theme="Material Light"] {
 }
 
 perspective-workspace {
-    .perspective-workspace-material-base();
+    @include perspective-workspace-material-base;
 }
 
 perspective-viewer[theme="Material Light"].workspace-master-widget {
@@ -33,7 +33,7 @@ perspective-viewer[theme="Material Light"].workspace-master-widget {
     }
 }
 
-.perspective-workspace-material-base() {
+@mixin perspective-workspace-material-base {
     font-family: "Open Sans";
     --open-settings-button--content: "expand_more";
     --close-settings-button--content: "expand_less";