fix(fast-test-harness): preserve subdirectory structure in generateStylesheets outDir

change/@microsoft-fast-test-harness-f59cad4a-a9c4-46c4-b48b-b04ee70367ab.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "fix: correct output directory structure for generated CSS files",
+  "packageName": "@microsoft/fast-test-harness",
+  "email": "863023+radium-v@users.noreply.github.com",
+  "dependentChangeType": "none"
+}

packages/fast-test-harness/src/build/generate-stylesheets.test.ts

@@ -49,6 +49,24 @@ test.describe("generateStylesheets", () => {
         assert.ok(css.includes(".card { padding: 8px; }"));
     });
 
+    test("should preserve subdirectory structure in outDir", async () => {
+        const distDir = join(tempDir, "dist", "badge");
+        await mkdir(distDir, { recursive: true });
+
+        await writeFile(
+            join(distDir, "badge.styles.js"),
+            `export const styles = { styles: [":host { display: inline; }"] };`,
+        );
+
+        await generateStylesheets({ cwd: tempDir, outDir: "src" });
+
+        const css = await readFile(
+            join(tempDir, "src", "badge", "badge.styles.css"),
+            "utf8",
+        );
+        assert.ok(css.includes(":host { display: inline; }"));
+    });
+
     test("should apply a format function", async () => {
         const distDir = join(tempDir, "dist");
         await mkdir(distDir, { recursive: true });

packages/fast-test-harness/src/build/generate-stylesheets.ts

@@ -98,8 +98,9 @@ export async function generateStylesheets(
     for await (const jsFile of glob(pattern, { cwd: distDir })) {
         const jsFilePath = path.resolve(distDir, jsFile);
         const baseName = path.basename(jsFile, ".js") + ".css";
+        const relativeDir = path.relative(distDir, path.dirname(jsFilePath));
         const cssFilePath = outDir
-            ? path.resolve(outDir, baseName)
+            ? path.resolve(outDir, relativeDir, baseName)
             : path.resolve(path.dirname(jsFilePath), baseName);
 
         try {