Switched from inline to raw

#1599
deephaven · Oct 27, 2023 · add15f1 · add15f1
1 parent b065f1c
commit add15f1
Show file tree

Hide file tree

Showing 6 changed files with 75 additions and 15 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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;