From add15f1b1ce7ad96bf40849a39c80434070b54c0 Mon Sep 17 00:00:00 2001 From: Brian Ingles Date: Fri, 27 Oct 2023 10:02:12 -0500 Subject: [PATCH] Switched from inline to raw #1599 --- jest.config.base.cjs | 4 +- packages/babel-preset/index.js | 2 +- .../src/styleguide/ThemeColors.tsx | 10 ++--- packages/components/src/declaration.d.ts | 10 +++++ .../components/src/theme/theme-dark/index.ts | 25 +++++++++--- .../components/src/theme/theme-light/index.ts | 39 ++++++++++++++++++- 6 files changed, 75 insertions(+), 15 deletions(-) diff --git a/jest.config.base.cjs b/jest.config.base.cjs index 05be728cb4..50dd525e8d 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(\\?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)\\?raw$': path.join( __dirname, './__mocks__/fileMock.js' ), diff --git a/packages/babel-preset/index.js b/packages/babel-preset/index.js index 479ceee645..6dee33c48e 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(\\?raw)?\\.js$', replacement: '$1.css$2', }, ], diff --git a/packages/code-studio/src/styleguide/ThemeColors.tsx b/packages/code-studio/src/styleguide/ThemeColors.tsx index dc7ba764cf..9a7692e7e3 100644 --- a/packages/code-studio/src/styleguide/ThemeColors.tsx +++ b/packages/code-studio/src/styleguide/ThemeColors.tsx @@ -1,11 +1,11 @@ import React, { useMemo } from 'react'; import { Tooltip } from '@deephaven/components'; import { ColorUtils } from '@deephaven/utils'; -import palette from '@deephaven/components/src/theme/theme-dark/theme-dark-palette.css?inline'; -import semantic from '@deephaven/components/src/theme/theme-dark/theme-dark-semantic.css?inline'; -import semanticEditor from '@deephaven/components/src/theme/theme-dark/theme-dark-semantic-editor.css?inline'; -import semanticGrid from '@deephaven/components/src/theme/theme-dark/theme-dark-semantic-grid.css?inline'; -import components from '@deephaven/components/src/theme/theme-dark/theme-dark-components.css?inline'; +import palette from '@deephaven/components/src/theme/theme-dark/theme-dark-palette.css?raw'; +import semantic from '@deephaven/components/src/theme/theme-dark/theme-dark-semantic.css?raw'; +import semanticEditor from '@deephaven/components/src/theme/theme-dark/theme-dark-semantic-editor.css?raw'; +import semanticGrid from '@deephaven/components/src/theme/theme-dark/theme-dark-semantic-grid.css?raw'; +import components from '@deephaven/components/src/theme/theme-dark/theme-dark-components.css?raw'; import styles from './ThemeColors.module.scss'; // Group names are extracted from var names via a regex capture group. Most of 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;