@testspectra/react 1.2.4 → 1.2.6

package/dist/index.js

@@ -199,6 +199,18 @@ function mockResponseBodyText(body) {
 function parseElementSentinel(selector) {
   const closest = /^(.*)::closest\((.+)\)$/.exec(selector);
   if (closest) return { kind: "closest", base: closest[1], arg: closest[2] };
+  const children = /^(.*)::children\((.*)\)$/.exec(selector);
+  if (children) return { kind: "children", base: children[1], arg: children[2].trim() || null };
+  const bareChildren = /^(.*)::children$/.exec(selector);
+  if (bareChildren) return { kind: "children", base: bareChildren[1], arg: null };
+  const siblings = /^(.*)::siblings\((.*)\)$/.exec(selector);
+  if (siblings) return { kind: "siblings", base: siblings[1], arg: siblings[2].trim() || null };
+  const bareSiblings = /^(.*)::siblings$/.exec(selector);
+  if (bareSiblings) return { kind: "siblings", base: bareSiblings[1], arg: null };
+  const next = /^(.*)::next\((.*)\)$/.exec(selector);
+  if (next) return { kind: "next", base: next[1], arg: next[2].trim() || null };
+  const bareNext = /^(.*)::next$/.exec(selector);
+  if (bareNext) return { kind: "next", base: bareNext[1], arg: null };
   const parent = /^(.*)::parent$/.exec(selector);
   if (parent) return { kind: "parent", base: parent[1] };
   return null;
@@ -401,23 +413,50 @@ function resolveEl(selector, index) {
 function selectorText(target) {
   return typeof target === "string" ? target : target.selector;
 }
-function resolveSentinel(raw, parent) {
+function pickFromList(list, index) {
+  if (index === null || index === void 0) return list[0] ?? null;
+  if (index >= 0) return list[index] ?? null;
+  return list[list.length + index] ?? null;
+}
+function matchesSelector(el, selector) {
+  if (!selector) return true;
+  try {
+    return el.matches(selector);
+  } catch {
+    return false;
+  }
+}
+function resolveSentinelList(raw, parent) {
   const sentinel = parseElementSentinel(raw);
   if (!sentinel) return void 0;
   const baseTarget = parent ? { selector: sentinel.base, index: null, parent } : sentinel.base;
   const base = resolveScopedEl(baseTarget, null);
-  if (!base) return null;
-  if (sentinel.kind === "parent") return base.parentElement ?? null;
-  return base.closest(sentinel.arg) ?? null;
+  if (sentinel.kind === "parent") return base?.parentElement ? [base.parentElement] : [];
+  if (sentinel.kind === "closest") {
+    const ancestor = base?.closest(sentinel.arg) ?? null;
+    return ancestor ? [ancestor] : [];
+  }
+  if (!base) return [];
+  if (sentinel.kind === "children") {
+    return Array.from(base.children).filter((child) => matchesSelector(child, sentinel.arg));
+  }
+  if (sentinel.kind === "siblings") {
+    const parentEl = base.parentElement;
+    if (!parentEl) return [];
+    return Array.from(parentEl.children).filter((child) => child !== base && matchesSelector(child, sentinel.arg));
+  }
+  let sibling = base.nextElementSibling;
+  while (sibling && !matchesSelector(sibling, sentinel.arg)) sibling = sibling.nextElementSibling;
+  return sibling ? [sibling] : [];
 }
 function resolveScopedEl(target, fallbackIndex) {
   if (typeof target === "string") {
-    const sentinel = resolveSentinel(target, void 0);
-    if (sentinel !== void 0) return sentinel;
+    const sentinelList2 = resolveSentinelList(target, void 0);
+    if (sentinelList2 !== void 0) return pickFromList(sentinelList2, fallbackIndex);
     return resolveEl(target, fallbackIndex);
   }
-  const childSentinel = resolveSentinel(target.selector, target.parent);
-  if (childSentinel !== void 0) return childSentinel;
+  const sentinelList = resolveSentinelList(target.selector, target.parent);
+  if (sentinelList !== void 0) return pickFromList(sentinelList, target.index ?? fallbackIndex);
   const parentEl = target.parent ? resolveScopedEl(target.parent, target.parent.index) : document.documentElement;
   if (!parentEl) return null;
   const css = resolveSelector(target.selector);
@@ -758,8 +797,12 @@ var DomDriverBridge = class {
   }
   async count(selector) {
     if (typeof selector === "string") {
+      const sentinelList2 = resolveSentinelList(selector, void 0);
+      if (sentinelList2 !== void 0) return sentinelList2.length;
       return document.querySelectorAll(resolveSelector(selector)).length;
     }
+    const sentinelList = resolveSentinelList(selector.selector, selector.parent);
+    if (sentinelList !== void 0) return sentinelList.length;
     const parentEl = selector.parent ? resolveScopedEl(selector.parent, selector.parent.index) : document.documentElement;
     if (!parentEl) return 0;
     return parentEl.querySelectorAll(resolveSelector(selector.selector)).length;
@@ -1206,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",
@@ -1575,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;