tweak cypress config file, issue on CI

Author: heswell

vuu-ui/cypress.config.mjs

@@ -2,7 +2,41 @@ import { defineConfig } from "cypress";
 import react from "@vitejs/plugin-react";
 import tsconfigPaths from "vite-tsconfig-paths";
 import { version as reactVersion } from "react";
-import { cssInline } from "vite-plugin-inline-css";
+import { createFilter, Plugin } from "vite";
+import MagicString from "magic-string";
+
+export function cssInline(): Plugin {
+  const exclude = ["**/**.stories.tsx"];
+  const include = [
+    "**/packages/grid-layout/**/*.{tsx,jsx}",
+    "**/packages/vuu-datatable/**/*.{tsx,jsx}",
+    "**/packages/vuu-data-react/**/*.{tsx,jsx}",
+    "**/packages/vuu-filters/**/*.{tsx,jsx}",
+    "**/packages/vuu-layout/**/*.{tsx,jsx}",
+    "**/packages/vuu-popups/**/*.{tsx,jsx}",
+    "**/packages/vuu-shell/**/*.{tsx,jsx}",
+    "**/packages/vuu-table/**/*.{tsx,jsx}",
+    "**/packages/vuu-table-extras/**/*.{tsx,jsx}",
+    "**/packages/vuu-ui-controls/**/*.{tsx,jsx}",
+  ];
+
+  const filter = createFilter(include, exclude);
+
+  return {
+    name: "vite-plugin-inline-css",
+    enforce: "pre",
+    transform(src, id) {
+      if (filter(id)) {
+        const s = new MagicString(src);
+        s.replaceAll('.css";', '.css?inline";');
+        return {
+          code: s.toString(),
+          map: s.generateMap({ hires: true, source: id }),
+        };
+      }
+    },
+  };
+}
 
 const viteConfig = {
   plugins: [react(), tsconfigPaths(), /*, IstanbulPlugin()*/ cssInline()],

vuu-ui/tools/vite-plugin-inline-css/src/index.js

@@ -5,22 +5,21 @@ import MagicString from "magic-string";
  */
 // This plugin adds "?inline" to each css import within our components to disable
 // vite's own style injection used in storybook
-export function cssInline(options = {}) {
-  const {
-    exclude = ["**/**.stories.tsx"],
-    include = [
-      "**/packages/grid-layout/**/*.{tsx,jsx}",
-      "**/packages/vuu-datatable/**/*.{tsx,jsx}",
-      "**/packages/vuu-data-react/**/*.{tsx,jsx}",
-      "**/packages/vuu-filters/**/*.{tsx,jsx}",
-      "**/packages/vuu-layout/**/*.{tsx,jsx}",
-      "**/packages/vuu-popups/**/*.{tsx,jsx}",
-      "**/packages/vuu-shell/**/*.{tsx,jsx}",
-      "**/packages/vuu-table/**/*.{tsx,jsx}",
-      "**/packages/vuu-table-extras/**/*.{tsx,jsx}",
-      "**/packages/vuu-ui-controls/**/*.{tsx,jsx}",
-    ],
-  } = options;
+export function cssInline() {
+  const exclude = ["**/**.stories.tsx"];
+  const include = [
+    "**/packages/grid-layout/**/*.{tsx,jsx}",
+    "**/packages/vuu-datatable/**/*.{tsx,jsx}",
+    "**/packages/vuu-data-react/**/*.{tsx,jsx}",
+    "**/packages/vuu-filters/**/*.{tsx,jsx}",
+    "**/packages/vuu-layout/**/*.{tsx,jsx}",
+    "**/packages/vuu-popups/**/*.{tsx,jsx}",
+    "**/packages/vuu-shell/**/*.{tsx,jsx}",
+    "**/packages/vuu-table/**/*.{tsx,jsx}",
+    "**/packages/vuu-table-extras/**/*.{tsx,jsx}",
+    "**/packages/vuu-ui-controls/**/*.{tsx,jsx}",
+  ];
+
   const filter = createFilter(include, exclude);
 
   return {