feat: Babel Plugin - Mock css imports (#1607)

Created a Babel transform plugin `mockCssImportPlugin` that transforms
certain css imports into const expressions.
- Replaces import of `.module.css` / `.module.scss` - with a const
object literal containing a key / value of the module name
- Replaces css imports of `?inline` and `?raw` with a const string
literal matching the import path

The new plugin is configured as a plugin for `babel-jest`

resolves #1606

jest.config.base.cjs

@@ -2,22 +2,20 @@ const path = require('path');
 
 module.exports = {
   transform: {
-    '.(ts|tsx|js|jsx)': ['babel-jest', { rootMode: 'upward' }],
+    '.(ts|tsx|js|jsx)': [
+      'babel-jest',
+      {
+        rootMode: 'upward',
+        plugins: ['@deephaven/babel-preset/mockCssImportPlugin'],
+      },
+    ],
   },
   // Makes jest transform monaco, but continue ignoring other node_modules. Used for MonacoUtils test
   transformIgnorePatterns: [
     'node_modules/(?!(monaco-editor|d3-interpolate|d3-color)/)',
   ],
   moduleNameMapper: {
-    '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|raw)$': path.join(
-      __dirname,
-      './__mocks__/fileMock.js'
-    ),
     '\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$':
       path.join(__dirname, './__mocks__/fileMock.js'),
     '^fira$': 'identity-obj-proxy',

packages/babel-preset/mockCssImportPlugin.js

@@ -0,0 +1,74 @@
+const CSS_INLINE_IMPORT_REGEX = /\.s?css\?(inline|raw)$/;
+const CSS_MODULE_IMPORT_REGEX = /([^/]+)\.module\.s?css/;
+
+/**
+ * Babel transform plugin to mock CSS imports for unit testing purposes. This
+ * can be passed to `babel-jest` transform as a plugin.
+ *
+ * e.g.
+ *
+ * transform: {
+ *   '.(ts|tsx|js|jsx)': [
+ *     'babel-jest',
+ *     {
+ *       plugins: [
+ *         '@deephaven/babel-preset/mockCssImportPlugin',
+ *       ],
+ *     },
+ *   ],
+ * },
+ */
+module.exports = function mockCssImportPlugin({ types: t }) {
+  return {
+    name: 'transform-mock-css-import',
+    visitor: {
+      /** Match import declarations */
+      ImportDeclaration(path) {
+        const { node } = path;
+
+        const [, moduleName] =
+          CSS_MODULE_IMPORT_REGEX.exec(node.source.value) || [];
+
+        // Replace CSS module import with a const object declaration. Object
+        // will have single key / value derived from the module name.
+        // e.g.
+        // import saturn from './saturn.module.css';
+        // becomes
+        // const styles = { 'saturn': 'saturn' };
+        if (moduleName) {
+          const { name } = node.specifiers[0].local;
+
+          path.replaceWith(
+            t.variableDeclaration('const', [
+              t.variableDeclarator(
+                t.identifier(name),
+                t.objectExpression([
+                  t.objectProperty(
+                    t.identifier(`'${moduleName}'`),
+                    t.stringLiteral(moduleName)
+                  ),
+                ])
+              ),
+            ])
+          );
+        }
+        // Replace (s)css imports that have ?inline or ?raw query strings with a
+        // const variable declaration.
+        // e.g.
+        // import './saturn.css?inline';
+        // becomes
+        // const saturn = './saturn.css?inline';
+        else if (CSS_INLINE_IMPORT_REGEX.test(node.source.value)) {
+          const { name } = node.specifiers[0].local;
+          const { value } = node.source;
+
+          path.replaceWith(
+            t.variableDeclaration('const', [
+              t.variableDeclarator(t.identifier(name), t.stringLiteral(value)),
+            ])
+          );
+        }
+      },
+    },
+  };
+};

packages/babel-preset/package.json

@@ -10,6 +10,10 @@
   "author": "Deephaven Data Labs LLC",
   "license": "Apache-2.0",
   "main": "./index.js",
+  "exports": {
+    ".": "./index.js",
+    "./mockCssImportPlugin": "./mockCssImportPlugin.js"
+  },
   "dependencies": {
     "@babel/core": "^7.20.0",
     "@babel/plugin-proposal-class-properties": "^7.18.0",

packages/components/src/__snapshots__/SpectrumUtils.test.ts.snap

@@ -3,10 +3,10 @@
 exports[`themeDHDefault should merge Spectrum default with DH custom styles 1`] = `
 {
   "dark": {
-    "dh-spectrum-alias": "mock-dh-spectrum-alias",
-    "dh-spectrum-overrides": "mock-dh-spectrum-overrides",
-    "dh-spectrum-palette": "mock-dh-spectrum-palette",
     "spectrum--darkest": "spectrum--darkest_256eeb",
+    "theme-spectrum-alias": "theme-spectrum-alias",
+    "theme-spectrum-overrides": "theme-spectrum-overrides",
+    "theme-spectrum-palette": "theme-spectrum-palette",
   },
   "global": {
     "spectrum": "spectrum_9e130c",
@@ -21,10 +21,10 @@ exports[`themeDHDefault should merge Spectrum default with DH custom styles 1`]
     "spectrum--large": "spectrum--large_c40598",
   },
   "light": {
-    "dh-spectrum-alias": "mock-dh-spectrum-alias",
-    "dh-spectrum-overrides": "mock-dh-spectrum-overrides",
-    "dh-spectrum-palette": "mock-dh-spectrum-palette",
     "spectrum--light": "spectrum--light_a40724",
+    "theme-spectrum-alias": "theme-spectrum-alias",
+    "theme-spectrum-overrides": "theme-spectrum-overrides",
+    "theme-spectrum-palette": "theme-spectrum-palette",
   },
   "medium": {
     "spectrum--medium": "spectrum--medium_4b172c",

packages/components/src/theme/ThemeUtils.test.ts

@@ -192,17 +192,17 @@ describe('getDefaultBaseThemes', () => {
         name: 'Default Dark',
         themeKey: 'default-dark',
         styleContent: [
-          'mock-theme-dark-palette',
-          'mock-theme-dark-semantic',
-          'mock-theme-dark-semantic-editor',
-          'mock-theme-dark-semantic-grid',
-          'mock-theme-dark-components',
+          './theme-dark-palette.css?raw',
+          './theme-dark-semantic.css?raw',
+          './theme-dark-semantic-editor.css?raw',
+          './theme-dark-semantic-grid.css?raw',
+          './theme-dark-components.css?raw',
         ].join('\n'),
       },
       {
         name: 'Default Light',
         themeKey: 'default-light',
-        styleContent: 'mock-theme-light-palette',
+        styleContent: './theme-light-palette.css?raw',
       },
     ]);
   });

packages/components/src/theme/__snapshots__/ThemeProvider.test.tsx.snap

@@ -6,10 +6,10 @@ exports[`ThemeProvider setSelectedThemeKey: [ [Object] ] should change selected
     <style
       data-theme-key="default-light"
     >
-      mock-theme-light-palette
+      ./theme-light-palette.css?raw
     </style>
     <div
-      class="spectrum_b37d53 spectrum_2a241c spectrum--light_a40724 mock-dh-spectrum-palette mock-dh-spectrum-alias mock-dh-spectrum-overrides spectrum--large_c40598 spectrum_9e130c spectrum--medium_9e130c spectrum--large_9e130c spectrum--darkest_9e130c spectrum--dark_9e130c spectrum--light_9e130c spectrum--lightest_9e130c"
+      class="spectrum_b37d53 spectrum_2a241c spectrum--light_a40724 theme-spectrum-palette theme-spectrum-alias theme-spectrum-overrides spectrum--large_c40598 spectrum_9e130c spectrum--medium_9e130c spectrum--large_9e130c spectrum--darkest_9e130c spectrum--dark_9e130c spectrum--light_9e130c spectrum--lightest_9e130c"
       dir="ltr"
       lang="en-US"
       style="isolation: isolate; color-scheme: light;"
@@ -28,17 +28,17 @@ exports[`ThemeProvider setSelectedThemeKey: [ [Object] ] should change selected
     <style
       data-theme-key="default-dark"
     >
-      mock-theme-dark-palette
-mock-theme-dark-semantic
-mock-theme-dark-semantic-editor
-mock-theme-dark-semantic-grid
-mock-theme-dark-components
+      ./theme-dark-palette.css?raw
+./theme-dark-semantic.css?raw
+./theme-dark-semantic-editor.css?raw
+./theme-dark-semantic-grid.css?raw
+./theme-dark-components.css?raw
     </style>
     <style
       data-theme-key="themeA"
     />
     <div
-      class="spectrum_b37d53 spectrum_2a241c spectrum--light_a40724 mock-dh-spectrum-palette mock-dh-spectrum-alias mock-dh-spectrum-overrides spectrum--large_c40598 spectrum_9e130c spectrum--medium_9e130c spectrum--large_9e130c spectrum--darkest_9e130c spectrum--dark_9e130c spectrum--light_9e130c spectrum--lightest_9e130c"
+      class="spectrum_b37d53 spectrum_2a241c spectrum--light_a40724 theme-spectrum-palette theme-spectrum-alias theme-spectrum-overrides spectrum--large_c40598 spectrum_9e130c spectrum--medium_9e130c spectrum--large_9e130c spectrum--darkest_9e130c spectrum--dark_9e130c spectrum--light_9e130c spectrum--lightest_9e130c"
       dir="ltr"
       lang="en-US"
       style="isolation: isolate; color-scheme: light;"
@@ -55,7 +55,7 @@ exports[`ThemeProvider setSelectedThemeKey: null should change selected theme: d
 <body>
   <div>
     <div
-      class="spectrum_b37d53 spectrum_2a241c spectrum--light_a40724 mock-dh-spectrum-palette mock-dh-spectrum-alias mock-dh-spectrum-overrides spectrum--large_c40598 spectrum_9e130c spectrum--medium_9e130c spectrum--large_9e130c spectrum--darkest_9e130c spectrum--dark_9e130c spectrum--light_9e130c spectrum--lightest_9e130c"
+      class="spectrum_b37d53 spectrum_2a241c spectrum--light_a40724 theme-spectrum-palette theme-spectrum-alias theme-spectrum-overrides spectrum--large_c40598 spectrum_9e130c spectrum--medium_9e130c spectrum--large_9e130c spectrum--darkest_9e130c spectrum--dark_9e130c spectrum--light_9e130c spectrum--lightest_9e130c"
       dir="ltr"
       lang="en-US"
       style="isolation: isolate; color-scheme: light;"
@@ -72,7 +72,7 @@ exports[`ThemeProvider setSelectedThemeKey: null should change selected theme: t
 <body>
   <div>
     <div
-      class="spectrum_b37d53 spectrum_2a241c spectrum--light_a40724 mock-dh-spectrum-palette mock-dh-spectrum-alias mock-dh-spectrum-overrides spectrum--large_c40598 spectrum_9e130c spectrum--medium_9e130c spectrum--large_9e130c spectrum--darkest_9e130c spectrum--dark_9e130c spectrum--light_9e130c spectrum--lightest_9e130c"
+      class="spectrum_b37d53 spectrum_2a241c spectrum--light_a40724 theme-spectrum-palette theme-spectrum-alias theme-spectrum-overrides spectrum--large_c40598 spectrum_9e130c spectrum--medium_9e130c spectrum--large_9e130c spectrum--darkest_9e130c spectrum--dark_9e130c spectrum--light_9e130c spectrum--lightest_9e130c"
       dir="ltr"
       lang="en-US"
       style="isolation: isolate; color-scheme: light;"
@@ -91,17 +91,17 @@ exports[`ThemeProvider should load themes based on preload data or default: [ [O
     <style
       data-theme-key="default-dark"
     >
-      mock-theme-dark-palette
-mock-theme-dark-semantic
-mock-theme-dark-semantic-editor
-mock-theme-dark-semantic-grid
-mock-theme-dark-components
+      ./theme-dark-palette.css?raw
+./theme-dark-semantic.css?raw
+./theme-dark-semantic-editor.css?raw
+./theme-dark-semantic-grid.css?raw
+./theme-dark-components.css?raw
     </style>
     <style
       data-theme-key="themeA"
     />
     <div
-      class="spectrum_b37d53 spectrum_2a241c spectrum--light_a40724 mock-dh-spectrum-palette mock-dh-spectrum-alias mock-dh-spectrum-overrides spectrum--large_c40598 spectrum_9e130c spectrum--medium_9e130c spectrum--large_9e130c spectrum--darkest_9e130c spectrum--dark_9e130c spectrum--light_9e130c spectrum--lightest_9e130c"
+      class="spectrum_b37d53 spectrum_2a241c spectrum--light_a40724 theme-spectrum-palette theme-spectrum-alias theme-spectrum-overrides spectrum--large_c40598 spectrum_9e130c spectrum--medium_9e130c spectrum--large_9e130c spectrum--darkest_9e130c spectrum--dark_9e130c spectrum--light_9e130c spectrum--lightest_9e130c"
       dir="ltr"
       lang="en-US"
       style="isolation: isolate; color-scheme: light;"
@@ -120,14 +120,14 @@ exports[`ThemeProvider should load themes based on preload data or default: [ [O
     <style
       data-theme-key="default-dark"
     >
-      mock-theme-dark-palette
-mock-theme-dark-semantic
-mock-theme-dark-semantic-editor
-mock-theme-dark-semantic-grid
-mock-theme-dark-components
+      ./theme-dark-palette.css?raw
+./theme-dark-semantic.css?raw
+./theme-dark-semantic-editor.css?raw
+./theme-dark-semantic-grid.css?raw
+./theme-dark-components.css?raw
     </style>
     <div
-      class="spectrum_b37d53 spectrum_2a241c spectrum--light_a40724 mock-dh-spectrum-palette mock-dh-spectrum-alias mock-dh-spectrum-overrides spectrum--large_c40598 spectrum_9e130c spectrum--medium_9e130c spectrum--large_9e130c spectrum--darkest_9e130c spectrum--dark_9e130c spectrum--light_9e130c spectrum--lightest_9e130c"
+      class="spectrum_b37d53 spectrum_2a241c spectrum--light_a40724 theme-spectrum-palette theme-spectrum-alias theme-spectrum-overrides spectrum--large_c40598 spectrum_9e130c spectrum--medium_9e130c spectrum--large_9e130c spectrum--darkest_9e130c spectrum--dark_9e130c spectrum--light_9e130c spectrum--lightest_9e130c"
       dir="ltr"
       lang="en-US"
       style="isolation: isolate; color-scheme: light;"
@@ -144,7 +144,7 @@ exports[`ThemeProvider should load themes based on preload data or default: null
 <body>
   <div>
     <div
-      class="spectrum_b37d53 spectrum_2a241c spectrum--light_a40724 mock-dh-spectrum-palette mock-dh-spectrum-alias mock-dh-spectrum-overrides spectrum--large_c40598 spectrum_9e130c spectrum--medium_9e130c spectrum--large_9e130c spectrum--darkest_9e130c spectrum--dark_9e130c spectrum--light_9e130c spectrum--lightest_9e130c"
+      class="spectrum_b37d53 spectrum_2a241c spectrum--light_a40724 theme-spectrum-palette theme-spectrum-alias theme-spectrum-overrides spectrum--large_c40598 spectrum_9e130c spectrum--medium_9e130c spectrum--large_9e130c spectrum--darkest_9e130c spectrum--dark_9e130c spectrum--light_9e130c spectrum--lightest_9e130c"
       dir="ltr"
       lang="en-US"
       style="isolation: isolate; color-scheme: light;"
@@ -161,7 +161,7 @@ exports[`ThemeProvider should load themes based on preload data or default: null
 <body>
   <div>
     <div
-      class="spectrum_b37d53 spectrum_2a241c spectrum--light_a40724 mock-dh-spectrum-palette mock-dh-spectrum-alias mock-dh-spectrum-overrides spectrum--large_c40598 spectrum_9e130c spectrum--medium_9e130c spectrum--large_9e130c spectrum--darkest_9e130c spectrum--dark_9e130c spectrum--light_9e130c spectrum--lightest_9e130c"
+      class="spectrum_b37d53 spectrum_2a241c spectrum--light_a40724 theme-spectrum-palette theme-spectrum-alias theme-spectrum-overrides spectrum--large_c40598 spectrum_9e130c spectrum--medium_9e130c spectrum--large_9e130c spectrum--darkest_9e130c spectrum--dark_9e130c spectrum--light_9e130c spectrum--lightest_9e130c"
       dir="ltr"
       lang="en-US"
       style="isolation: isolate; color-scheme: light;"