From f6d0874a98cc7377c3857a44930b5c636b72ca1f Mon Sep 17 00:00:00 2001 From: Brian Ingles Date: Fri, 27 Oct 2023 15:57:14 -0500 Subject: [PATCH] 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. --- jest.config.base.cjs | 4 +- packages/babel-preset/index.js | 2 +- packages/components/package.json | 5 ++- packages/components/src/declaration.d.ts | 10 +++++ .../components/src/theme/theme-dark/index.ts | 25 +++++++++--- .../components/src/theme/theme-light/index.ts | 39 ++++++++++++++++++- packages/console/src/monaco/MonacoUtils.ts | 9 ++++- 7 files changed, 81 insertions(+), 13 deletions(-) diff --git a/jest.config.base.cjs b/jest.config.base.cjs index 05be728cb4..69d343c882 100644 --- a/jest.config.base.cjs +++ b/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' ), diff --git a/packages/babel-preset/index.js b/packages/babel-preset/index.js index 479ceee645..a83d585bba 100644 --- a/packages/babel-preset/index.js +++ b/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', }, ], diff --git a/packages/components/package.json b/packages/components/package.json index ded494e26f..ed8e684aa0 100644 --- a/packages/components/package.json +++ b/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", diff --git a/packages/components/src/declaration.d.ts b/packages/components/src/declaration.d.ts index f1577432ee..7e85157bc9 100644 --- a/packages/components/src/declaration.d.ts +++ b/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'; diff --git a/packages/components/src/theme/theme-dark/index.ts b/packages/components/src/theme/theme-dark/index.ts index e5f40db52a..c724fa562b 100644 --- a/packages/components/src/theme/theme-dark/index.ts +++ b/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 { diff --git a/packages/components/src/theme/theme-light/index.ts b/packages/components/src/theme/theme-light/index.ts index b6c7d42258..5788e85bd5 100644 --- a/packages/components/src/theme/theme-light/index.ts +++ b/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; diff --git a/packages/console/src/monaco/MonacoUtils.ts b/packages/console/src/monaco/MonacoUtils.ts index 94d373a968..1dca213375 100644 --- a/packages/console/src/monaco/MonacoUtils.ts +++ b/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]);