fix: Theming - switched from ?inline to ?raw css imports (#1600)

It seems that Enterprise does not handle css ?inline css imports in
node_modules the same way it does in src. Namely, the raw content gets
imported as an empty string instead of the raw content.

- Converted ?inline imports to ?raw. These seem to handle the raw
content as expected even if in node_modules
- Added a sass minification step to @deephaven/components. Vite seems to
minify ?inline imports but does not do so with raw
- Added a try / catch to MonacoUtils to avoid non-hex theme variables
from crashing the entire app

fixes #1599

BREAKING CHANGE: Theme css imports were switched from `?inline` to
`?raw`. Not likely that we have any consumers yet, but this would impact
webpack config.

Author: bmingles

jest.config.base.cjs

@@ -9,12 +9,12 @@ module.exports = {
     'node_modules/(?!(monaco-editor|d3-interpolate|d3-color)/)',
   ],
   moduleNameMapper: {
-    'theme-([^/]+?)\\.css(\\?inline)?$': path.join(
+    'theme-([^/]+?)\\.css(\\?(?:inline|raw))?$': path.join(
       __dirname,
       './__mocks__/css/mock-theme-$1.js'
     ),
     '\\.(css|less|scss|sass)$': 'identity-obj-proxy',
-    '\\.(css|less|scss|sass)\\?inline$': path.join(
+    '\\.(css|less|scss|sass)\\?(?:inline|raw)$': path.join(
       __dirname,
       './__mocks__/fileMock.js'
     ),

packages/babel-preset/index.js

@@ -41,7 +41,7 @@ module.exports = api => ({
       'transform-rename-import',
       {
         // The babel-plugin-add-import-extension adds the .js to .scss imports, just convert them back to .css
-        original: '^(.+?)\\.s?css(\\?inline)?\\.js$',
+        original: '^(.+?)\\.s?css(\\?(?:inline|raw))?\\.js$',
         replacement: '$1.css$2',
       },
     ],

packages/components/package.json

@@ -18,9 +18,10 @@
     "node": ">=10"
   },
   "scripts": {
-    "build": "cross-env NODE_ENV=production run-p build:*",
+    "build": "cross-env NODE_ENV=production run-s build:babel build:sass build:theme",
     "build:babel": "babel ./src --out-dir ./dist --extensions \".ts,.tsx,.js,.jsx\" --source-maps --root-mode upward",
-    "build:sass": "sass --embed-sources --load-path=../../node_modules ./src:./dist ./scss/BaseStyleSheet.scss:./css/BaseStyleSheet.css"
+    "build:sass": "sass --embed-sources --load-path=../../node_modules ./src:./dist ./scss/BaseStyleSheet.scss:./css/BaseStyleSheet.css",
+    "build:theme": "sass --embed-sources --style=compressed --load-path=../../node_modules ./src/theme:./dist/theme"
   },
   "dependencies": {
     "@adobe/react-spectrum": "^3.29.0",

packages/components/src/declaration.d.ts

@@ -17,4 +17,14 @@ declare module '*.scss?inline' {
   export default content;
 }
 
+declare module '*.css?raw' {
+  const content: string;
+  export default content;
+}
+
+declare module '*.scss?raw' {
+  const content: string;
+  export default content;
+}
+
 declare module '*.scss';

packages/components/src/theme/theme-dark/index.ts

@@ -1,14 +1,27 @@
-import themeDarkPalette from './theme-dark-palette.css?inline';
-import themeDarkSemantic from './theme-dark-semantic.css?inline';
-import themeDarkSemanticEditor from './theme-dark-semantic-editor.css?inline';
-import themeDarkSemanticGrid from './theme-dark-semantic-grid.css?inline';
-import themeDarkComponents from './theme-dark-components.css?inline';
+import themeDarkPalette from './theme-dark-palette.css?raw';
+import themeDarkSemantic from './theme-dark-semantic.css?raw';
+import themeDarkSemanticEditor from './theme-dark-semantic-editor.css?raw';
+import themeDarkSemanticGrid from './theme-dark-semantic-grid.css?raw';
+import themeDarkComponents from './theme-dark-components.css?raw';
 
 /**
- * DH theme variables are imported via Vite `?inline` query which provides the
+ * DH theme variables are imported via Vite `?raw` query which provides the
  * text content of the variable files as a string. The exported theme is just a
  * concatenation of the contents of all of these imports.
  *
+ * Note that ?raw / ?inline imports are natively supported by Vite, but consumers
+ * of @deephaven/components using Webpack will need to add a rule to their module
+ * config.
+ * e.g.
+ * module: {
+ *  rules: [
+ *    {
+ *      resourceQuery: /inline/,
+ *      type: 'asset/source',
+ *    },
+ *  ],
+ * },
+ *
  * e.g.
  *
  * :root {

packages/components/src/theme/theme-light/index.ts

@@ -1,5 +1,42 @@
-import themeLightPalette from './theme-light-palette.css?inline';
+import themeLightPalette from './theme-light-palette.css?raw';
 
+/**
+ * DH theme variables are imported via Vite `?raw` query which provides the
+ * text content of the variable files as a string. The exported theme is just a
+ * concatenation of the contents of all of these imports.
+ *
+ * Note that ?raw / ?inline imports are natively supported by Vite, but consumers
+ * of @deephaven/components using Webpack will need to add a rule to their module
+ * config.
+ * e.g.
+ * module: {
+ *  rules: [
+ *    {
+ *      resourceQuery: /inline/,
+ *      type: 'asset/source',
+ *    },
+ *  ],
+ * }
+ *
+ * e.g.
+ *
+ * :root {
+ *   --dh-color-from-light-palette: #fff;
+ *   --dh-color-from-light-palette2: #ccc;
+ * }
+ * :root {
+ *   --dh-color-from-light-semantic: #000;
+ * }
+ * :root {
+ *   --dh-color-from-light-semantic-editor: #000;
+ * }
+ * :root {
+ *   --dh-color-from-light-semantic-grid: #000;
+ * }
+ * :root {
+ *   --dh-color-from-light-components: #000;
+ * }
+ */
 export const themeLight = themeLightPalette;
 
 export default themeLight;

packages/console/src/monaco/MonacoUtils.ts

@@ -163,7 +163,14 @@ class MonacoUtils {
       colors: dhDarkColors,
     });
 
-    monaco.editor.setTheme('dh-dark');
+    try {
+      monaco.editor.setTheme('dh-dark');
+    } catch {
+      log.error(
+        `Failed to set 'dh-dark' Monaco theme, falling back to vs-dark`
+      );
+      monaco.editor.setTheme('vs-dark');
+    }
 
     registerLanguages([DbLang, PyLang, GroovyLang, LogLang, ScalaLang]);