@microsoft/fast-test-harness 0.1.0 → 0.3.0

package/dist/esm/ssr/render.js

@@ -21,10 +21,10 @@
  * flat exports.
  * ```ts
  * const { render } = createSSRRenderer({
- *     tagPrefix: "mai",
+ *     tagPrefix: "contoso",
  *     components: [
- *         { name: "button", packageName: "@mai-ui/button" },
- *         { name: "checkbox", packageName: "@mai-ui/checkbox" },
+ *         { name: "button", packageName: "@contoso/button" },
+ *         { name: "checkbox", packageName: "@contoso/checkbox" },
  *     ],
  * });
  * ```
@@ -71,75 +71,6 @@ function resolvePackageRoot(packageName) {
 function toServerUrl(absolutePath, packageRoot) {
     return `/${relative(packageRoot, absolutePath).replace(/\\/g, "/")}`;
 }
-/**
- * Parse a JavaScript default value string from CEM into a JSON-safe value.
- * @internal
- */
-export function parseDefaultValue(raw) {
-    const trimmed = raw.trim();
-    if (trimmed === "" || trimmed === "undefined" || trimmed === "null") {
-        return "";
-    }
-    if (trimmed === "true") {
-        return true;
-    }
-    if (trimmed === "false") {
-        return false;
-    }
-    if (trimmed.startsWith("'") || trimmed.startsWith('"')) {
-        return trimmed.slice(1, -1);
-    }
-    const num = Number(trimmed);
-    if (!Number.isNaN(num)) {
-        return num;
-    }
-    try {
-        return JSON.parse(trimmed);
-    }
-    catch {
-        return "";
-    }
-}
-/**
- * Load a Custom Elements Manifest and extract default state for
- * each custom element declaration. Returns a map of tag names to
- * their default property values.
- */
-function loadDefaultStateFromCEM(packageName, tagPrefix) {
-    const cemPath = resolveSpecifier(`${packageName}/custom-elements.json`);
-    if (!cemPath) {
-        return new Map();
-    }
-    try {
-        const cem = JSON.parse(readFileSync(cemPath, "utf8"));
-        const result = new Map();
-        for (const mod of cem.modules ?? []) {
-            for (const decl of mod.declarations ?? []) {
-                if (!decl.customElement) {
-                    continue;
-                }
-                const tagName = decl.tagName ?? `${tagPrefix}-${decl.name?.toLowerCase()}`;
-                const state = {};
-                for (const member of decl.members ?? []) {
-                    if (member.kind !== "field" || member.privacy !== "public") {
-                        continue;
-                    }
-                    state[member.name] =
-                        member.default != null
-                            ? parseDefaultValue(String(member.default))
-                            : "";
-                }
-                if (Object.keys(state).length > 0) {
-                    result.set(tagName, state);
-                }
-            }
-        }
-        return result;
-    }
-    catch {
-        return new Map();
-    }
-}
 /**
  * Load artifacts for a component from a monolithic package
  * (e.g., `@fluentui/web-components/button/template.html`).
@@ -155,7 +86,7 @@ function loadMonolithicComponent(packageName, componentDir, packageRoot) {
 }
 /**
  * Load artifacts for a component from a per-component package
- * (e.g., `@mai-ui/button/template.html`).
+ * (e.g., `@contoso/button/template.html`).
  */
 function loadPerPackageComponent(reg) {
     const fTemplatePath = resolveSpecifier(`${reg.packageName}/template.html`);
@@ -263,9 +194,9 @@ export function buildState(queryObj) {
  *
  * Supports two modes:
  * - **`packageName`**: Scans a monolithic package's dist directory for
- *   components in subdirectories (Fluent-style).
+ *   components in subdirectories (monolithic layout).
  * - **`components`**: Uses an explicit list of per-component packages
- *   with flat exports (MAI-style).
+ *   with flat exports.
  */
 export function createSSRRenderer(options) {
     const { tagPrefix } = options;
@@ -284,13 +215,13 @@ export function createSSRRenderer(options) {
     // Collect component artifacts from either mode.
     const artifacts = [];
     if (options.components) {
-        // Per-component packages (MAI-style).
+        // Per-component packages
         for (const reg of options.components) {
             artifacts.push(loadPerPackageComponent(reg));
         }
     }
     else if (options.packageName) {
-        // Monolithic package (Fluent-style).
+        // Monolithic package
         const packageRoot = resolvePackageRoot(options.packageName);
         const distDir = join(packageRoot, options.distDir ?? "dist/esm");
         const pattern = "**/*.template.html";
@@ -306,30 +237,13 @@ export function createSSRRenderer(options) {
             artifacts.push(loadMonolithicComponent(options.packageName, componentDir, packageRoot));
         }
     }
-    // Populate maps and collect default state from CEM.
-    const defaultStateByTag = new Map();
+    // Populate template and style maps from collected artifacts.
     for (const art of artifacts) {
-        const tagName = `${tagPrefix}-${art.componentName}`;
         if (art.fTemplate) {
             fTemplatesByName.set(art.componentName, art.fTemplate);
         }
         styleUrlsByName.set(art.componentName, art.stylesUrl);
     }
-    // Load CEM defaults per-package (each package may contain multiple elements).
-    if (options.components) {
-        for (const reg of options.components) {
-            const cemDefaults = loadDefaultStateFromCEM(reg.packageName, tagPrefix);
-            for (const [tag, state] of cemDefaults) {
-                defaultStateByTag.set(tag, state);
-            }
-        }
-    }
-    else if (options.packageName) {
-        const cemDefaults = loadDefaultStateFromCEM(options.packageName, tagPrefix);
-        for (const [tag, state] of cemDefaults) {
-            defaultStateByTag.set(tag, state);
-        }
-    }
     // Inject styles into f-templates, then parse into the WASM
     // templates map (tag-name → inner template content).
     const templatesMap = {};
@@ -339,7 +253,16 @@ export function createSSRRenderer(options) {
         const parsed = JSON.parse(wasm.parse_f_templates(styled));
         const entry = parsed.find((t) => t.name !== null);
         if (entry) {
-            templatesMap[`${tagPrefix}-${name}`] = entry.content;
+            const tagName = `${tagPrefix}-${name}`;
+            const attrs = entry.shadowrootAttributes ?? [];
+            // Use the object format when there are extra shadowroot attributes
+            // beyond the default shadowrootmode, so the WASM renderer can
+            // propagate them (e.g. shadowrootdelegatesfocus) onto the DSD
+            // <template> element.
+            const hasExtraAttrs = attrs.some(a => a.name !== "shadowrootmode" && a.name !== "shadowroot");
+            templatesMap[tagName] = hasExtraAttrs
+                ? { content: entry.content, shadowrootAttributes: attrs }
+                : entry.content;
         }
         else {
             console.warn(`No named template found for ${tagPrefix}-${name}`);
@@ -348,19 +271,21 @@ export function createSSRRenderer(options) {
     const templatesJson = JSON.stringify(templatesMap);
     // Concatenate all f-templates (with styles) for client hydration.
     const allFTemplates = [...fTemplatesByName.values()].join("\n");
-    // Resolve theme stylesheet if provided.
-    let preloadLinks = "";
+    // Build preload links: theme stylesheet + component stylesheets.
+    const preloadParts = [];
     if (options.themeStylesheet) {
-        preloadLinks = `<link rel="stylesheet" href="${options.themeStylesheet}">`;
+        preloadParts.push(`<link rel="stylesheet" href="${options.themeStylesheet}">`);
     }
+    for (const stylesUrl of styleUrlsByName.values()) {
+        if (stylesUrl) {
+            preloadParts.push(`<link rel="preload" href="${stylesUrl}" as="style">`);
+        }
+    }
+    const preloadLinks = preloadParts.join("\n");
     return {
         render(queryObj = {}) {
             const entryHtml = buildEntryHtml(queryObj);
-            const requestState = buildState(queryObj);
-            // Merge CEM default state (base) with request state (overrides).
-            const tagName = String(queryObj.tagName ?? "");
-            const defaults = defaultStateByTag.get(tagName) ?? {};
-            const state = { ...defaults, ...requestState };
+            const state = buildState(queryObj);
             let fixture = "";
             if (entryHtml) {
                 try {
@@ -368,6 +293,25 @@ export function createSSRRenderer(options) {
                     // Extract body content from the rendered document.
                     const bodyMatch = rendered.match(/<body[^>]*>([\s\S]*?)<\/body>/i);
                     fixture = bodyMatch?.[1] ?? entryHtml;
+                    // The WASM renderer only injects DSD for top-level
+                    // custom elements. Inject DSD for any nested custom
+                    // elements that have templates but weren't rendered.
+                    for (const nestedTag of Object.keys(templatesMap)) {
+                        // Match opening tags that don't already have a
+                        // DSD <template> as their first child.
+                        const openTagRe = new RegExp(`(<${nestedTag}(?=[\\s>/])[^>]*>)(?!\\s*<template[\\s>])`, "g");
+                        fixture = fixture.replace(openTagRe, (_, open) => {
+                            // Render this element in isolation.
+                            const solo = wasm.render_with_templates(`${open}</${nestedTag}>`, templatesJson, "{}", "camelCase");
+                            // Extract the DSD that was injected.
+                            const dsdStart = solo.indexOf("<template shadowrootmode");
+                            const dsdEnd = solo.lastIndexOf("</template>");
+                            if (dsdStart !== -1 && dsdEnd > dsdStart) {
+                                return `${open}${solo.slice(dsdStart, dsdEnd + "</template>".length)}`;
+                            }
+                            return open;
+                        });
+                    }
                 }
                 catch (e) {
                     // Fall back to the raw entry HTML if rendering fails.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@microsoft/fast-test-harness",
-  "version": "0.1.0",
+  "version": "0.3.0",
   "author": {
     "name": "Microsoft",
     "url": "https://discord.gg/FcSNfg4"
@@ -28,6 +28,10 @@
       "types": "./dist/dts/build/*.d.ts",
       "default": "./dist/esm/build/*.js"
     },
+    "./fixtures/*.js": {
+      "types": "./dist/dts/fixtures/*.d.ts",
+      "default": "./dist/esm/fixtures/*.js"
+    },
     "./ssr/*.js": {
       "types": "./dist/dts/ssr/*.d.ts",
       "default": "./dist/esm/ssr/*.js"
@@ -38,6 +42,7 @@
     },
     "./public/*": "./public/*",
     "./template.html": "./test/src/test-widget/test-widget.template.html",
+    "./input/template.html": "./test/src/test-widget/input/test-input.template.html",
     "./styles.css": "./test/src/test-widget/test-widget.styles.css",
     "./server.mjs": "./server.mjs",
     "./start.mjs": "./start.mjs",
@@ -48,36 +53,42 @@
     "./package.json": "./package.json"
   },
   "scripts": {
-    "clean": "clean dist temp test-results",
+    "clean": "clean dist temp test-results test/temp",
     "build": "npm run build:tsc",
     "build:tsc": "tsgo -p tsconfig.build.json",
-    "test": "npm run test:node && npm run test:playwright",
+    "lint": "biome-changed",
+    "lint:fix": "biome-changed -- --fix",
+    "prepublishOnly": "npm run clean && npm run build",
+    "test": "npm run lint && npm run test:node && npm run test:playwright",
     "test:node": "node --test --experimental-test-isolation=none \"**/*.test.ts\"",
-    "test:playwright": "playwright test"
+    "test:playwright": "playwright test",
+    "test:chromium": "playwright test --project=chromium"
   },
   "files": [
     "dist",
-    "playwright.config.mjs",
-    "playwright.config.d.ts",
     "public",
-    "server.mjs",
-    "start.mjs",
-    "vite.config.mjs",
-    "vite.config.d.ts"
+    "*.mjs",
+    "*.d.ts"
   ],
+  "devDependencies": {
+    "@microsoft/fast-element": "^2.10.4",
+    "@microsoft/fast-build": "^0.7.0",
+    "@microsoft/fast-html": "^1.0.0-alpha.53"
+  },
   "dependencies": {
     "cheerio": "1.2.0"
   },
-  "devDependencies": {
-    "@microsoft/fast-html": "*"
-  },
   "peerDependencies": {
-    "@microsoft/fast-build": ">=0.6.0 <1.0.0",
-    "@microsoft/fast-html": ">=1.0.0-alpha.52 <1.0.0",
+    "@microsoft/fast-element": "^2.10.4 || ^3.0.0",
+    "@microsoft/fast-build": "^0.7.0",
+    "@microsoft/fast-html": ">=1.0.0-alpha.53 <1.0.0",
     "@playwright/test": ">=1.40.0",
     "vite": ">=7.0.0"
   },
   "peerDependenciesMeta": {
+    "@microsoft/fast-element": {
+      "optional": true
+    },
     "@microsoft/fast-html": {
       "optional": true
     }

package/dist/dts/build/dom-shim.test.d.ts

@@ -1,2 +0,0 @@
-export {};
-//# sourceMappingURL=dom-shim.test.d.ts.map

package/dist/dts/build/dom-shim.test.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"dom-shim.test.d.ts","sourceRoot":"","sources":["../../../src/build/dom-shim.test.ts"],"names":[],"mappings":""}

package/dist/dts/build/generate-stylesheets.test.d.ts

@@ -1,2 +0,0 @@
-export {};
-//# sourceMappingURL=generate-stylesheets.test.d.ts.map

package/dist/dts/build/generate-stylesheets.test.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"generate-stylesheets.test.d.ts","sourceRoot":"","sources":["../../../src/build/generate-stylesheets.test.ts"],"names":[],"mappings":""}

package/dist/dts/build/generate-templates.test.d.ts

@@ -1,2 +0,0 @@
-export {};
-//# sourceMappingURL=generate-templates.test.d.ts.map

package/dist/dts/build/generate-templates.test.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"generate-templates.test.d.ts","sourceRoot":"","sources":["../../../src/build/generate-templates.test.ts"],"names":[],"mappings":""}

package/dist/dts/build/generate-webui-templates.test.d.ts

@@ -1,2 +0,0 @@
-export {};
-//# sourceMappingURL=generate-webui-templates.test.d.ts.map

package/dist/dts/build/generate-webui-templates.test.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"generate-webui-templates.test.d.ts","sourceRoot":"","sources":["../../../src/build/generate-webui-templates.test.ts"],"names":[],"mappings":""}

package/dist/dts/fixtures/csr-fixture.pw.spec.d.ts

@@ -1,2 +0,0 @@
-export {};
-//# sourceMappingURL=csr-fixture.pw.spec.d.ts.map

package/dist/dts/fixtures/csr-fixture.pw.spec.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"csr-fixture.pw.spec.d.ts","sourceRoot":"","sources":["../../../src/fixtures/csr-fixture.pw.spec.ts"],"names":[],"mappings":""}

package/dist/dts/fixtures/ssr-fixture.pw.spec.d.ts

@@ -1,2 +0,0 @@
-export {};
-//# sourceMappingURL=ssr-fixture.pw.spec.d.ts.map

package/dist/dts/fixtures/ssr-fixture.pw.spec.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"ssr-fixture.pw.spec.d.ts","sourceRoot":"","sources":["../../../src/fixtures/ssr-fixture.pw.spec.ts"],"names":[],"mappings":""}

package/dist/dts/ssr/render.test.d.ts

@@ -1,2 +0,0 @@
-export {};
-//# sourceMappingURL=render.test.d.ts.map

package/dist/dts/ssr/render.test.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"render.test.d.ts","sourceRoot":"","sources":["../../../src/ssr/render.test.ts"],"names":[],"mappings":""}

package/dist/esm/build/dom-shim.test.js

@@ -1,202 +0,0 @@
-import assert from "node:assert/strict";
-import { test } from "node:test";
-// Each test needs a clean globalThis, so we tear down the shim between tests.
-function teardownShim() {
-    for (const key of [
-        "Node",
-        "Element",
-        "HTMLElement",
-        "Document",
-        "CustomEvent",
-        "CSSStyleSheet",
-        "ShadowRoot",
-        "CustomElementRegistry",
-        "MutationObserver",
-        "MediaQueryList",
-        "matchMedia",
-        "document",
-        "customElements",
-        "window",
-        "CSS",
-    ]) {
-        delete globalThis[key];
-    }
-}
-test.describe("installDomShim", () => {
-    test.beforeEach(() => {
-        teardownShim();
-    });
-    async function loadShim() {
-        // Dynamic import so each test gets a fresh evaluation context
-        // after globalThis is cleaned.
-        const { installDomShim } = await import("@microsoft/fast-test-harness/build/dom-shim.js");
-        installDomShim();
-    }
-    test("should assign globals on first call", async () => {
-        await loadShim();
-        assert.ok(globalThis.window !== undefined);
-        assert.ok(globalThis.document !== undefined);
-        assert.ok(globalThis.customElements !== undefined);
-        assert.ok(globalThis.Node !== undefined);
-        assert.ok(globalThis.Element !== undefined);
-        assert.ok(globalThis.HTMLElement !== undefined);
-        assert.ok(globalThis.CSSStyleSheet !== undefined);
-        assert.ok(globalThis.MutationObserver !== undefined);
-        assert.ok(globalThis.matchMedia !== undefined);
-    });
-    test("should be idempotent when window is already defined", async () => {
-        const sentinel = { __sentinel: true };
-        globalThis.window = sentinel;
-        await loadShim();
-        assert.strictEqual(globalThis.window, sentinel);
-        assert.strictEqual(globalThis.document, undefined);
-    });
-    test("should set window to globalThis", async () => {
-        await loadShim();
-        assert.strictEqual(globalThis.window, globalThis);
-    });
-    test("should provide CSS.supports that returns true", async () => {
-        await loadShim();
-        assert.strictEqual(globalThis.CSS.supports("display", "flex"), true);
-    });
-    test("should not overwrite an existing CSS global", async () => {
-        const existing = { supports: () => false };
-        globalThis.CSS = existing;
-        await loadShim();
-        assert.strictEqual(globalThis.CSS, existing);
-    });
-});
-test.describe("ShimHTMLElement", () => {
-    test.beforeEach(async () => {
-        teardownShim();
-        const { installDomShim } = await import("@microsoft/fast-test-harness/build/dom-shim.js");
-        installDomShim();
-    });
-    test("should support setAttribute / getAttribute / hasAttribute", () => {
-        const el = new globalThis.HTMLElement();
-        assert.strictEqual(el.hasAttribute("id"), false);
-        assert.strictEqual(el.getAttribute("id"), null);
-        el.setAttribute("id", "test");
-        assert.strictEqual(el.hasAttribute("id"), true);
-        assert.strictEqual(el.getAttribute("id"), "test");
-    });
-    test("should support removeAttribute", () => {
-        const el = new globalThis.HTMLElement();
-        el.setAttribute("class", "foo");
-        assert.strictEqual(el.hasAttribute("class"), true);
-        el.removeAttribute("class");
-        assert.strictEqual(el.hasAttribute("class"), false);
-        assert.strictEqual(el.getAttribute("class"), null);
-    });
-    test("should return attributes as an array of {name, value}", () => {
-        const el = new globalThis.HTMLElement();
-        el.setAttribute("role", "button");
-        el.setAttribute("aria-label", "Close");
-        const attrs = el.attributes;
-        assert.strictEqual(attrs.length, 2);
-        assert.deepStrictEqual(attrs.map((a) => a.name).sort(), [
-            "aria-label",
-            "role",
-        ]);
-    });
-    test("should support attachShadow with open mode", () => {
-        const el = new globalThis.HTMLElement();
-        const sr = el.attachShadow({ mode: "open" });
-        assert.ok(sr);
-        assert.strictEqual(sr.host, el);
-        assert.strictEqual(el.shadowRoot, sr);
-    });
-    test("should not expose shadowRoot for closed mode", () => {
-        const el = new globalThis.HTMLElement();
-        el.attachShadow({ mode: "closed" });
-        assert.strictEqual(el.shadowRoot, null);
-    });
-    test("should provide a classList stub", () => {
-        const el = new globalThis.HTMLElement();
-        const cl = el.classList;
-        assert.strictEqual(cl.contains("foo"), false);
-        // Should not throw
-        cl.add("foo");
-        cl.remove("foo");
-        cl.toggle("foo");
-    });
-});
-test.describe("ShimCSSStyleSheet", () => {
-    test.beforeEach(async () => {
-        teardownShim();
-        const { installDomShim } = await import("@microsoft/fast-test-harness/build/dom-shim.js");
-        installDomShim();
-    });
-    test("should support insertRule", () => {
-        const sheet = new globalThis.CSSStyleSheet();
-        const idx = sheet.insertRule(".foo { color: red }", 0);
-        assert.strictEqual(idx, 0);
-        assert.strictEqual(sheet.cssRules.length, 1);
-        assert.strictEqual(sheet.cssRules[0].selectorText, ".foo ");
-    });
-});
-test.describe("ShimCustomElementRegistry", () => {
-    test.beforeEach(async () => {
-        teardownShim();
-        const { installDomShim } = await import("@microsoft/fast-test-harness/build/dom-shim.js");
-        installDomShim();
-    });
-    test("should support define and get", () => {
-        class MyEl {
-        }
-        globalThis.customElements.define("my-el", MyEl);
-        assert.strictEqual(globalThis.customElements.get("my-el"), MyEl);
-    });
-    test("should return undefined for unknown elements", () => {
-        assert.strictEqual(globalThis.customElements.get("unknown-el"), undefined);
-    });
-    test("should resolve whenDefined immediately", async () => {
-        const result = await globalThis.customElements.whenDefined("any-el");
-        assert.strictEqual(result, undefined);
-    });
-});
-test.describe("ShimDocument", () => {
-    test.beforeEach(async () => {
-        teardownShim();
-        const { installDomShim } = await import("@microsoft/fast-test-harness/build/dom-shim.js");
-        installDomShim();
-    });
-    test("should create elements via createElement", () => {
-        const el = globalThis.document.createElement("div");
-        assert.ok(el);
-        assert.strictEqual(typeof el.setAttribute, "function");
-    });
-    test("should support adoptedStyleSheets", () => {
-        assert.ok(Array.isArray(globalThis.document.adoptedStyleSheets));
-    });
-});
-test.describe("ShimCustomEvent", () => {
-    test.beforeEach(async () => {
-        teardownShim();
-        const { installDomShim } = await import("@microsoft/fast-test-harness/build/dom-shim.js");
-        installDomShim();
-    });
-    test("should carry detail", () => {
-        const evt = new globalThis.CustomEvent("test", { detail: 42 });
-        assert.strictEqual(evt.detail, 42);
-        assert.strictEqual(evt.type, "test");
-    });
-    test("should default detail to null", () => {
-        const evt = new globalThis.CustomEvent("test");
-        assert.strictEqual(evt.detail, null);
-    });
-});
-test.describe("matchMedia", () => {
-    test.beforeEach(async () => {
-        teardownShim();
-        const { installDomShim } = await import("@microsoft/fast-test-harness/build/dom-shim.js");
-        installDomShim();
-    });
-    test("should return a MediaQueryList with matches = false", () => {
-        const mql = globalThis.matchMedia("(prefers-color-scheme: dark)");
-        assert.strictEqual(mql.matches, false);
-        // Should not throw
-        mql.addEventListener("change", () => { });
-        mql.removeEventListener("change", () => { });
-    });
-});

package/dist/esm/build/generate-stylesheets.test.js

@@ -1,74 +0,0 @@
-import assert from "node:assert/strict";
-import { mkdir, mkdtemp, readFile, rm, writeFile } from "node:fs/promises";
-import { tmpdir } from "node:os";
-import { join } from "node:path";
-import { test } from "node:test";
-import { generateStylesheets } from "@microsoft/fast-test-harness/build/generate-stylesheets.js";
-test.describe("generateStylesheets", () => {
-    let tempDir;
-    test.beforeEach(async () => {
-        tempDir = await mkdtemp(join(tmpdir(), "fast-styles-"));
-    });
-    test.afterEach(async () => {
-        await rm(tempDir, { recursive: true, force: true });
-    });
-    test("should extract CSS from a styles module", async () => {
-        const distDir = join(tempDir, "dist");
-        await mkdir(distDir, { recursive: true });
-        // Write a fake styles module that exports an ElementStyles-like object.
-        await writeFile(join(distDir, "button.styles.js"), `export const styles = { styles: [":host { display: block; }", "span { color: red; }"] };`);
-        await generateStylesheets({ cwd: tempDir });
-        const css = await readFile(join(distDir, "button.styles.css"), "utf8");
-        assert.ok(css.includes(":host { display: block; }"));
-        assert.ok(css.includes("span { color: red; }"));
-    });
-    test("should write to outDir when specified", async () => {
-        const distDir = join(tempDir, "dist");
-        const outDir = join(tempDir, "out");
-        await mkdir(distDir, { recursive: true });
-        await writeFile(join(distDir, "card.styles.js"), `export const styles = { styles: [".card { padding: 8px; }"] };`);
-        await generateStylesheets({ cwd: tempDir, outDir: "out" });
-        const css = await readFile(join(outDir, "card.styles.css"), "utf8");
-        assert.ok(css.includes(".card { padding: 8px; }"));
-    });
-    test("should apply a format function", async () => {
-        const distDir = join(tempDir, "dist");
-        await mkdir(distDir, { recursive: true });
-        await writeFile(join(distDir, "link.styles.js"), `export const styles = { styles: ["a { color: blue; }"] };`);
-        await generateStylesheets({
-            cwd: tempDir,
-            format: css => `/* formatted */\n${css}`,
-        });
-        const css = await readFile(join(distDir, "link.styles.css"), "utf8");
-        assert.ok(css.startsWith("/* formatted */"));
-    });
-    test("should flatten nested styles arrays", async () => {
-        const distDir = join(tempDir, "dist");
-        await mkdir(distDir, { recursive: true });
-        await writeFile(join(distDir, "nested.styles.js"), `export const styles = {
-                styles: [
-                    { styles: [":host { display: flex; }", "div { margin: 0; }"] },
-                    "span { font-size: 14px; }"
-                ]
-            };`);
-        await generateStylesheets({ cwd: tempDir });
-        const css = await readFile(join(distDir, "nested.styles.css"), "utf8");
-        assert.ok(css.includes(":host { display: flex; }"));
-        assert.ok(css.includes("div { margin: 0; }"));
-        assert.ok(css.includes("span { font-size: 14px; }"));
-    });
-    test("should skip modules without a styles export", async () => {
-        const distDir = join(tempDir, "dist");
-        await mkdir(distDir, { recursive: true });
-        await writeFile(join(distDir, "empty.styles.js"), `export const template = "<div></div>";`);
-        await generateStylesheets({ cwd: tempDir });
-        // Should not create a CSS file
-        try {
-            await readFile(join(distDir, "empty.styles.css"), "utf8");
-            assert.fail("Should not have created a CSS file");
-        }
-        catch (err) {
-            assert.strictEqual(err.code, "ENOENT");
-        }
-    });
-});