@testspectra/react 1.2.5 → 1.2.6

package/dist/index.js

@@ -1249,34 +1249,53 @@ import * as esbuild from "esbuild";
 import { createRequire as createRequire2 } from "node:module";
 var bundleCache = /* @__PURE__ */ new Map();
 var inFlightBuilds = /* @__PURE__ */ new Map();
-var cssInjectorPlugin = {
-  name: "spectra-css-injector",
-  setup(build2) {
-    build2.onLoad({ filter: /\.(css|scss|sass|less)$/ }, async (args) => {
-      try {
-        const raw = await fs.promises.readFile(args.path, "utf8");
-        const escaped = JSON.stringify(raw);
-        const sourcePath = JSON.stringify(args.path);
-        return {
-          contents: `
-            if (typeof document !== 'undefined') {
-              const style = document.createElement('style');
-              style.setAttribute('data-spectra-css', ${sourcePath});
-              style.textContent = ${escaped};
-              document.head.appendChild(style);
-            }
-          `,
-          loader: "js"
-        };
-      } catch (e) {
-        return {
-          contents: `/* failed to load css: ${String(e)} */`,
-          loader: "js"
-        };
-      }
-    });
+var consumerRootForCss;
+var TAILWIND_CSS_HINT = /@import\s+['"]tailwindcss['"]|@tailwind\b|@source\b|@theme\b/;
+async function compileCss(raw, filePath) {
+  const consumerRoot = consumerRootForCss;
+  if (!consumerRoot || !TAILWIND_CSS_HINT.test(raw)) return raw;
+  try {
+    const req = createRequire2(path3.join(consumerRoot, "package.json"));
+    const postcss = req("postcss");
+    const tailwind = req("@tailwindcss/postcss");
+    const result = await postcss([tailwind()]).process(raw, { from: filePath });
+    return result.css;
+  } catch {
+    return raw;
   }
-};
+}
+function createCssInjectorPlugin() {
+  return {
+    name: "spectra-css-injector",
+    setup(build2) {
+      build2.onLoad({ filter: /\.(css|scss|sass|less)$/ }, async (args) => {
+        try {
+          const raw = await fs.promises.readFile(args.path, "utf8");
+          const css = await compileCss(raw, args.path);
+          const escaped = JSON.stringify(css);
+          const sourcePath = JSON.stringify(args.path);
+          return {
+            contents: `
+              if (typeof document !== 'undefined') {
+                const style = document.createElement('style');
+                style.setAttribute('data-spectra-css', ${sourcePath});
+                style.textContent = ${escaped};
+                document.head.appendChild(style);
+              }
+            `,
+            loader: "js"
+          };
+        } catch (e) {
+          return {
+            contents: `/* failed to load css: ${String(e)} */`,
+            loader: "js"
+          };
+        }
+      });
+    }
+  };
+}
+var cssInjectorPlugin = createCssInjectorPlugin();
 var SHARED_REACT_EXTERNALS = [
   "react",
   "react/jsx-runtime",
@@ -1618,6 +1637,7 @@ function makeHandler(testRoot, packageDir, harnessHtml, setupEntrypoint, runnerE
 }
 async function startBundleServer(opts = {}) {
   const testRoot = path3.resolve(opts.testRoot ?? process.cwd());
+  consumerRootForCss = testRoot;
   const packageDir = opts.packageDir ?? resolveReactPackageDir();
   const manifest = opts.manifest ?? { pageObjects: [], steps: [], fixtures: [] };
   const stepDelayMs = opts.stepDelayMs ?? 0;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@testspectra/react",
-  "version": "1.2.5",
+  "version": "1.2.6",
   "description": "Bundled Vitest browser-mode runner for React component testing with the TestSpectra Spectra.* DSL",
   "keywords": [
     "testspectra",
@@ -42,7 +42,7 @@
     "esbuild": "^0.28.2",
     "playwright": "^1.48.0",
     "vitest": "^2.1.8",
-    "@testspectra/matchers": "1.2.5"
+    "@testspectra/matchers": "1.2.6"
   },
   "peerDependencies": {
     "react": ">=18.0.0",