@simplysm/sd-cli 14.0.42 → 14.0.44

package/tests/utils/diagnostic-utils.spec.ts

@@ -50,29 +50,38 @@ describe("isWorkspaceDiagnostic", () => {
 });
 
 describe("formatDiagnosticError", () => {
-  it("formats diagnostic with file info", () => {
-    const diag = {
-      file: {
-        fileName: "/workspace/src/index.ts",
-        getLineAndCharacterOfPosition: () => ({ line: 5, character: 10 }),
-      },
-      start: 100,
+  it("파일 정보가 있는 diagnostic을 컬러+코드 컨텍스트로 포맷한다", () => {
+    const sourceFile = ts.createSourceFile(
+      "/workspace/src/index.ts",
+      "const x = 1;\nconst y: string = 123;\n",
+      ts.ScriptTarget.Latest,
+    );
+    const diag: ts.Diagnostic = {
+      file: sourceFile,
+      start: 27,
+      length: 3,
+      category: ts.DiagnosticCategory.Error,
       code: 2345,
       messageText: "Type error",
     };
-    const result = formatDiagnosticError(diag as any);
-    expect(result).toBe("/workspace/src/index.ts:6:11: TS2345: Type error");
+    const result = formatDiagnosticError(diag, "/workspace");
+    expect(result).toContain("TS2345");
+    expect(result).toContain("Type error");
+    expect(result).toContain("index.ts");
   });
 
-  it("formats diagnostic without file info", () => {
-    const diag = {
-      file: null,
-      start: null,
+  it("파일 정보가 없는 diagnostic을 포맷한다", () => {
+    const diag: ts.Diagnostic = {
+      file: undefined,
+      start: undefined,
+      length: undefined,
+      category: ts.DiagnosticCategory.Error,
       code: 1001,
       messageText: "Global error",
     };
-    const result = formatDiagnosticError(diag as any);
-    expect(result).toBe("TS1001: Global error");
+    const result = formatDiagnosticError(diag, "/workspace");
+    expect(result).toContain("TS1001");
+    expect(result).toContain("Global error");
   });
 });
 

package/tests/utils/engine-watch-events.acc.spec.ts

@@ -192,6 +192,65 @@ describe("setupWatchEvents (Acceptance)", () => {
     await expect(promise).resolves.toBeUndefined();
   });
 
+  it("build 성공 + warnings 시 ResultCollector에 warnings가 저장된다", () => {
+    const worker = new MockWorker();
+    const resultCollector = new ResultCollector();
+
+    setupWatchEvents(worker, {
+      name: "test-pkg",
+      target: "node",
+      resultCollector,
+      normalizeBuild: (d) => d as NormalizedBuildInfo,
+    });
+
+    worker.emit("build", { success: true, warnings: ["warn1"] });
+
+    const result = resultCollector.get("test-pkg:build");
+    expect(result).toMatchObject({
+      status: "success",
+      warnings: "warn1",
+    });
+  });
+
+  it("build 성공 + warnings 없음 시 ResultCollector에 warnings가 undefined이다", () => {
+    const worker = new MockWorker();
+    const resultCollector = new ResultCollector();
+
+    setupWatchEvents(worker, {
+      name: "test-pkg",
+      target: "node",
+      resultCollector,
+      normalizeBuild: (d) => d as NormalizedBuildInfo,
+    });
+
+    worker.emit("build", { success: true });
+
+    const result = resultCollector.get("test-pkg:build");
+    expect(result?.status).toBe("success");
+    expect(result?.warnings).toBeUndefined();
+  });
+
+  it("build 실패 + warnings 시 에러와 경고 모두 저장된다", () => {
+    const worker = new MockWorker();
+    const resultCollector = new ResultCollector();
+
+    setupWatchEvents(worker, {
+      name: "test-pkg",
+      target: "node",
+      resultCollector,
+      normalizeBuild: (d) => d as NormalizedBuildInfo,
+    });
+
+    worker.emit("build", { success: false, errors: ["err1"], warnings: ["warn1"] });
+
+    const result = resultCollector.get("test-pkg:build");
+    expect(result).toMatchObject({
+      status: "error",
+      message: "err1",
+      warnings: "warn1",
+    });
+  });
+
   it("두 번째 build 이벤트에서는 waitForInitialBuild가 다시 resolve되지 않는다", async () => {
     const worker = new MockWorker();
     const resultCollector = new ResultCollector();

package/tests/utils/engine-watch-events.spec.ts

@@ -138,4 +138,62 @@ describe("setupWatchEvents", () => {
       expect(() => resolveInitialBuild()).not.toThrow();
     });
   });
+
+  //#region Feature 1.1 Slice 1: engine-watch-events warnings 전달
+
+  describe("warnings 전달", () => {
+    it("build 이벤트의 warnings를 ResultCollector에 저장한다", () => {
+      const worker = new MockWorker();
+      const resultCollector = new ResultCollector();
+
+      setupWatchEvents(worker, {
+        name: "client-app",
+        target: "client",
+        resultCollector,
+        normalizeBuild: (d) => d as { success: boolean; warnings?: string[] },
+      });
+
+      worker.emit("build", { success: true, warnings: ["warn1"] });
+
+      const result = resultCollector.get("client-app:build");
+      expect(result?.status).toBe("success");
+      expect(result?.warnings).toBe("warn1");
+    });
+
+    it("build 이벤트에 warnings가 없으면 undefined이다", () => {
+      const worker = new MockWorker();
+      const resultCollector = new ResultCollector();
+
+      setupWatchEvents(worker, {
+        name: "client-app",
+        target: "client",
+        resultCollector,
+        normalizeBuild: (d) => d as { success: boolean },
+      });
+
+      worker.emit("build", { success: true });
+
+      const result = resultCollector.get("client-app:build");
+      expect(result?.warnings).toBeUndefined();
+    });
+
+    it("여러 warnings를 줄바꿈으로 결합하여 저장한다", () => {
+      const worker = new MockWorker();
+      const resultCollector = new ResultCollector();
+
+      setupWatchEvents(worker, {
+        name: "client-app",
+        target: "client",
+        resultCollector,
+        normalizeBuild: (d) => d as { success: boolean; warnings?: string[] },
+      });
+
+      worker.emit("build", { success: true, warnings: ["warn1", "warn2"] });
+
+      const result = resultCollector.get("client-app:build");
+      expect(result?.warnings).toBe("warn1\nwarn2");
+    });
+  });
+
+  //#endregion
 });

package/tests/utils/esbuild-client-config-integration.verify.md

@@ -0,0 +1,9 @@
+# Feature 3.1 esbuild-client-config.ts 통합 — LLM 검증
+
+## 검증 항목
+
+- [x] `@angular/build/private`에서 `createCompilerPlugin`, `SourceFileCache`, `CompilerPluginOptions`, `BundleStylesheetOptions` import가 없다: grep 결과 `@angular/build/private` 매치 없음
+- [x] `createAngularCompilerPlugin`이 `./esbuild-angular-compiler-plugin.js`에서 import되어 있다: line 10에서 import, line 119에서 호출 확인
+- [x] `ClientSourceFileCache`가 `AngularSourceFileCache`를 확장하고 `typeScriptFileCache`, `loadResultCache` 프로퍼티를 가진다: line 46-49에서 `extends AngularSourceFileCache` + 두 프로퍼티 확인
+- [x] `ClientEsbuildResult.sourceFileCache` 타입이 `ClientSourceFileCache`이다: line 53 확인
+- [x] `client.worker.ts`의 `sourceFileCache.loadResultCache.watchFiles`, `sourceFileCache.typeScriptFileCache.keys()`, `sourceFileCache.invalidate()` 접근이 새 구조와 타입 호환된다: typecheck 0 에러로 타입 호환성 확인됨

package/tests/utils/esbuild-client-config.acc.spec.ts

@@ -15,23 +15,17 @@ vi.mock("esbuild", () => ({
   },
 }));
 
-const mockSourceFileCache = {
-  loadResultCache: { name: "mockLoadResultCache" },
-  invalidate: vi.fn(),
-  modifiedFiles: new Set<string>(),
-};
+const mockAngularPlugin = { name: "sd-angular-compiler" };
 
-const mockAngularPlugin = { name: "angular-compiler" };
+vi.mock("../../src/esbuild/esbuild-angular-compiler-plugin", () => ({
+  createAngularCompilerPlugin: vi.fn(() => mockAngularPlugin),
+}));
 
-vi.mock("@angular/build/private", () => {
-  function MockSourceFileCache() {
-    return mockSourceFileCache;
-  }
-  return {
-    createCompilerPlugin: vi.fn(() => mockAngularPlugin),
-    SourceFileCache: vi.fn(MockSourceFileCache),
-  };
-});
+const mockTransformStylesheet = vi.fn();
+
+vi.mock("../../src/angular/client-transform-stylesheet", () => ({
+  createClientTransformStylesheet: vi.fn(() => mockTransformStylesheet),
+}));
 
 vi.mock("browserslist-to-esbuild", () => ({
   default: vi.fn(() => ["chrome61"]),
@@ -52,11 +46,16 @@ vi.mock("module", async (importOriginal) => {
 
 // --- Imports (after mocks) ---
 
-const { createClientEsbuildContext } = await import(
+const { createClientEsbuildContext, ClientSourceFileCache } = await import(
   "../../src/esbuild/esbuild-client-config"
 );
 const esbuild = (await import("esbuild")).default;
-const { createCompilerPlugin, SourceFileCache } = await import("@angular/build/private");
+const { createAngularCompilerPlugin } = await import(
+  "../../src/esbuild/esbuild-angular-compiler-plugin"
+);
+const { createClientTransformStylesheet } = await import(
+  "../../src/angular/client-transform-stylesheet"
+);
 const browserslistToEsbuild = (await import("browserslist-to-esbuild")).default;
 
 describe("createClientEsbuildContext — Acceptance", () => {
@@ -65,10 +64,10 @@ describe("createClientEsbuildContext — Acceptance", () => {
   });
 
   // Scenario: Angular main.ts를 ESM 번들로 빌드
-  // + CompilerPluginOptions와 BundleStylesheetOptions로 플러그인 생성
-  // + SourceFileCache로 LMDB 기반 증분 캐시
+  // + AngularCompilerPluginOptions로 플러그인 생성
+  // + ClientSourceFileCache로 증분 캐시
   // + dev 모드 Angular 플래그 + 소스맵
-  it("dev 모드: ESM 번들 설정, Angular 플래그, 소스맵, SourceFileCache로 esbuild context 생성", async () => {
+  it("dev 모드: ESM 번들 설정, Angular 플래그, 소스맵, ClientSourceFileCache로 esbuild context 생성", async () => {
     const result = await createClientEsbuildContext({
       pkgDir: "/workspace/packages/my-app",
       cwd: "/workspace",
@@ -102,16 +101,14 @@ describe("createClientEsbuildContext — Acceptance", () => {
     expect(esbuildOptions.define!["ngDevMode"]).toBeUndefined();
     expect(esbuildOptions.define!["ngHmrMode"]).toBeUndefined();
 
-    // SourceFileCache 생성
-    expect(SourceFileCache).toHaveBeenCalledWith(
-      path.join("/workspace/packages/my-app", ".angular", "cache"),
-    );
+    // ClientSourceFileCache 인스턴스
+    expect(result.sourceFileCache).toBeInstanceOf(ClientSourceFileCache);
 
-    // createCompilerPlugin 호출 검증
-    expect(createCompilerPlugin).toHaveBeenCalledOnce();
-    const [pluginOpts, styleOpts] = vi.mocked(createCompilerPlugin).mock.calls[0];
+    // createAngularCompilerPlugin 호출 검증
+    expect(createAngularCompilerPlugin).toHaveBeenCalledOnce();
+    const pluginOpts = vi.mocked(createAngularCompilerPlugin).mock.calls[0][0];
 
-    // CompilerPluginOptions
+    // AngularCompilerPluginOptions
     expect(pluginOpts.tsconfig).toBe(
       path.join("/workspace/packages/my-app", "tsconfig.json"),
     );
@@ -119,20 +116,20 @@ describe("createClientEsbuildContext — Acceptance", () => {
     expect(pluginOpts.advancedOptimizations).toBe(false);
     expect(pluginOpts.thirdPartySourcemaps).toBe(true);
     expect(pluginOpts.incremental).toBe(true);
-    expect(pluginOpts.sourceFileCache).toBe(mockSourceFileCache);
-    expect(pluginOpts.loadResultCache).toBe(mockSourceFileCache.loadResultCache);
+    expect(pluginOpts.sourceFileCache).toBe(result.sourceFileCache);
+    expect(pluginOpts.typeScriptFileCache).toBe(result.sourceFileCache.typeScriptFileCache);
+    expect(pluginOpts.loadResultCache).toBe(result.sourceFileCache.loadResultCache);
     expect(pluginOpts.includeTestMetadata).toBe(true);
+    expect(pluginOpts.persistentCachePath).toBe(
+      path.join("/workspace/packages/my-app", ".angular", "cache"),
+    );
 
-    // BundleStylesheetOptions
-    expect(styleOpts.workspaceRoot).toBe("/workspace");
-    expect(styleOpts.optimization).toBe(false);
-    expect(styleOpts.sourcemap).toBe("linked");
-    expect(styleOpts.inlineStyleLanguage).toBe("scss");
-    expect(styleOpts.cacheOptions.enabled).toBe(true);
+    // transformStylesheet 콜백 전달
+    expect(pluginOpts.transformStylesheet).toBe(mockTransformStylesheet);
+    expect(createClientTransformStylesheet).toHaveBeenCalledOnce();
 
     // 반환값
     expect(result.context).toBe(mockContext);
-    expect(result.sourceFileCache).toBe(mockSourceFileCache);
 
     // angularPlugin이 plugins에 포함됨
     expect(esbuildOptions.plugins).toContainEqual(mockAngularPlugin);
@@ -169,18 +166,13 @@ describe("createClientEsbuildContext — Acceptance", () => {
     expect(esbuildOptions.define!["ngJitMode"]).toBe("false");
     expect(esbuildOptions.define!["ngHmrMode"]).toBe("false");
 
-    // CompilerPluginOptions
-    const [pluginOpts, styleOpts] = vi.mocked(createCompilerPlugin).mock.calls[0];
+    // AngularCompilerPluginOptions
+    const pluginOpts = vi.mocked(createAngularCompilerPlugin).mock.calls[0][0];
     expect(pluginOpts.sourcemap).toBe(false);
     expect(pluginOpts.advancedOptimizations).toBe(true);
     expect(pluginOpts.thirdPartySourcemaps).toBe(false);
     expect(pluginOpts.incremental).toBe(false);
     expect(pluginOpts.includeTestMetadata).toBe(false);
-    expect((pluginOpts as unknown as Record<string, unknown>)["browserOnlyBuild"]).toBeUndefined();
-
-    // BundleStylesheetOptions
-    expect(styleOpts.optimization).toBe(true);
-    expect(styleOpts.sourcemap).toBe(false);
   });
 
   // Scenario: 커스텀 env 주입
@@ -198,8 +190,8 @@ describe("createClientEsbuildContext — Acceptance", () => {
     );
   });
 
-  // Scenario: PostCSS 설정 — postcssConfiguration 비활성화 + sd-postcss 등록
-  it("postcssPlugins 전달 시 postcssConfiguration은 undefined이고 sd-postcss 플러그인이 등록된다", async () => {
+  // Scenario: PostCSS 설정 — sd-postcss 등록 + transformStylesheet에 postcssPlugins 전달
+  it("postcssPlugins 전달 시 sd-postcss 플러그인이 등록되고 transformStylesheet에도 전달된다", async () => {
     await createClientEsbuildContext({
       pkgDir: "/workspace/packages/my-app",
       cwd: "/workspace",
@@ -207,12 +199,13 @@ describe("createClientEsbuildContext — Acceptance", () => {
       postcssPlugins: [["autoprefixer", {}]],
     });
 
-    const [, styleOpts] = vi.mocked(createCompilerPlugin).mock.calls[0];
-    expect(styleOpts.postcssConfiguration).toBeUndefined();
-
     const esbuildOptions = vi.mocked(esbuild.context).mock.calls[0][0];
     const pluginNames = esbuildOptions.plugins!.map((p: any) => p.name);
     expect(pluginNames).toContain("sd-postcss");
+
+    const transformOpts = vi.mocked(createClientTransformStylesheet).mock.calls[0][0];
+    expect(transformOpts.postcssPlugins).toBeDefined();
+    expect(transformOpts.postcssPlugins).toHaveLength(1);
   });
 
   // Scenario: 프로덕션 일회성 빌드
@@ -306,7 +299,7 @@ describe("createClientEsbuildContext — Acceptance", () => {
   });
 
   // Scenario: browserslist 미설정 시 기본 target "es2022"
-  it("browserslist 미설정 시 esbuild target과 BundleStylesheetOptions.target이 [es2022]", async () => {
+  it("browserslist 미설정 시 esbuild target이 [es2022]", async () => {
     await createClientEsbuildContext({
       pkgDir: "/workspace/packages/my-app",
       cwd: "/workspace",
@@ -315,9 +308,6 @@ describe("createClientEsbuildContext — Acceptance", () => {
 
     const esbuildOptions = vi.mocked(esbuild.context).mock.calls[0][0];
     expect(esbuildOptions.target).toEqual(["es2022"]);
-
-    const [, styleOpts] = vi.mocked(createCompilerPlugin).mock.calls[0];
-    expect(styleOpts.target).toEqual(["es2022"]);
   });
 
   // Scenario: browserslist 문자열 설정 시 변환
@@ -335,9 +325,6 @@ describe("createClientEsbuildContext — Acceptance", () => {
 
     const esbuildOptions = vi.mocked(esbuild.context).mock.calls[0][0];
     expect(esbuildOptions.target).toEqual(["chrome61"]);
-
-    const [, styleOpts] = vi.mocked(createCompilerPlugin).mock.calls[0];
-    expect(styleOpts.target).toEqual(["chrome61"]);
   });
 
   // Scenario: polyfills 경로 전달 시 entryPoints에 추가
@@ -413,9 +400,6 @@ describe("createClientEsbuildContext — Acceptance", () => {
 
     const esbuildOptions = vi.mocked(esbuild.context).mock.calls[0][0];
     expect(esbuildOptions.target).toEqual(["chrome61", "firefox60"]);
-
-    const [, styleOpts] = vi.mocked(createCompilerPlugin).mock.calls[0];
-    expect(styleOpts.target).toEqual(["chrome61", "firefox60"]);
   });
 
   // Scenario: esbuild context에 tsconfig 옵션이 전달된다
@@ -447,12 +431,12 @@ describe("createClientEsbuildContext — Acceptance", () => {
     const pluginNames = esbuildOptions.plugins!.map((p: any) => p.name);
 
     expect(pluginNames).toContain("custom");
-    expect(pluginNames).toContain("angular-compiler");
+    expect(pluginNames).toContain("sd-angular-compiler");
     expect(pluginNames).toContain("sd-scss");
     expect(pluginNames[pluginNames.length - 1]).toBe("sd-on-end");
 
     const customIdx = pluginNames.indexOf("custom");
-    const angularIdx = pluginNames.indexOf("angular-compiler");
+    const angularIdx = pluginNames.indexOf("sd-angular-compiler");
     const scssIdx = pluginNames.indexOf("sd-scss");
     expect(customIdx).toBeLessThan(angularIdx);
     expect(angularIdx).toBeLessThan(scssIdx);

package/tests/utils/esbuild-client-config.spec.ts

@@ -16,24 +16,17 @@ vi.mock("esbuild", () => ({
   },
 }));
 
-const mockSourceFileCache = {
-  loadResultCache: { name: "mockLoadResultCache" },
-  invalidate: vi.fn(),
-  modifiedFiles: new Set<string>(),
-};
+const mockAngularPlugin = { name: "sd-angular-compiler" };
 
-const mockAngularPlugin = { name: "angular-compiler" };
+vi.mock("../../src/esbuild/esbuild-angular-compiler-plugin", () => ({
+  createAngularCompilerPlugin: vi.fn(() => mockAngularPlugin),
+}));
 
-vi.mock("@angular/build/private", () => {
-  // vi.fn()의 arrow function은 new로 호출 불가 — 일반 function 사용
-  function MockSourceFileCache() {
-    return mockSourceFileCache;
-  }
-  return {
-    createCompilerPlugin: vi.fn(() => mockAngularPlugin),
-    SourceFileCache: vi.fn(MockSourceFileCache),
-  };
-});
+const mockTransformStylesheet = vi.fn();
+
+vi.mock("../../src/angular/client-transform-stylesheet", () => ({
+  createClientTransformStylesheet: vi.fn(() => mockTransformStylesheet),
+}));
 
 vi.mock("browserslist-to-esbuild", () => ({
   default: vi.fn(() => ["chrome61"]),
@@ -54,11 +47,16 @@ vi.mock("module", async (importOriginal) => {
 
 // --- Imports (after mocks) ---
 
-const { createClientEsbuildContext } = await import(
+const { createClientEsbuildContext, ClientSourceFileCache } = await import(
   "../../src/esbuild/esbuild-client-config"
 );
 const esbuild = (await import("esbuild")).default;
-const { createCompilerPlugin, SourceFileCache } = await import("@angular/build/private");
+const { createAngularCompilerPlugin } = await import(
+  "../../src/esbuild/esbuild-angular-compiler-plugin"
+);
+const { createClientTransformStylesheet } = await import(
+  "../../src/angular/client-transform-stylesheet"
+);
 const browserslistToEsbuild = (await import("browserslist-to-esbuild")).default;
 
 // --- Helpers ---
@@ -140,43 +138,55 @@ describe("createClientEsbuildContext — define 생성", () => {
 describe("createClientEsbuildContext — 소스맵 설정", () => {
   beforeEach(() => vi.clearAllMocks());
 
-  it("dev 모드: esbuild sourcemap=linked, CompilerPlugin sourcemap=true, StyleOptions sourcemap=linked", async () => {
+  it("dev 모드: esbuild sourcemap=linked, AngularCompilerPlugin sourcemap=true", async () => {
     await createClientEsbuildContext(baseDev);
     const opts = vi.mocked(esbuild.context).mock.calls[0][0];
     expect(opts.sourcemap).toBe("linked");
 
-    const [pluginOpts, styleOpts] = vi.mocked(createCompilerPlugin).mock.calls[0];
+    const pluginOpts = vi.mocked(createAngularCompilerPlugin).mock.calls[0][0];
     expect(pluginOpts.sourcemap).toBe(true);
-    expect(styleOpts.sourcemap).toBe("linked");
   });
 
-  it("build 모드: esbuild sourcemap=false, CompilerPlugin sourcemap=false, StyleOptions sourcemap=false", async () => {
+  it("build 모드: esbuild sourcemap=false, AngularCompilerPlugin sourcemap=false", async () => {
     await createClientEsbuildContext(baseBuild);
     const opts = vi.mocked(esbuild.context).mock.calls[0][0];
     expect(opts.sourcemap).toBe(false);
 
-    const [pluginOpts, styleOpts] = vi.mocked(createCompilerPlugin).mock.calls[0];
+    const pluginOpts = vi.mocked(createAngularCompilerPlugin).mock.calls[0][0];
     expect(pluginOpts.sourcemap).toBe(false);
-    expect(styleOpts.sourcemap).toBe(false);
   });
 });
 
-describe("createClientEsbuildContext — PostCSS 설정", () => {
+describe("createClientEsbuildContext — transformStylesheet 설정", () => {
   beforeEach(() => vi.clearAllMocks());
 
-  it("postcssPlugins 미전달 시 postcssConfiguration이 undefined", async () => {
+  it("transformStylesheet 콜백이 createAngularCompilerPlugin에 전달된다", async () => {
+    await createClientEsbuildContext(baseBuild);
+    const pluginOpts = vi.mocked(createAngularCompilerPlugin).mock.calls[0][0];
+    expect(pluginOpts.transformStylesheet).toBe(mockTransformStylesheet);
+  });
+
+  it("stylesheetDependencies와 stylesheetErrors가 createAngularCompilerPlugin에 전달된다", async () => {
     await createClientEsbuildContext(baseBuild);
-    const [, styleOpts] = vi.mocked(createCompilerPlugin).mock.calls[0];
-    expect(styleOpts.postcssConfiguration).toBeUndefined();
+    const pluginOpts = vi.mocked(createAngularCompilerPlugin).mock.calls[0][0];
+    expect(pluginOpts.stylesheetDependencies).toBeInstanceOf(Map);
+    expect(pluginOpts.stylesheetErrors).toBeInstanceOf(Array);
   });
 
-  it("postcssPlugins 전달해도 postcssConfiguration은 항상 undefined", async () => {
+  it("postcssPlugins가 createClientTransformStylesheet에 전달된다", async () => {
     await createClientEsbuildContext({
       ...baseBuild,
       postcssPlugins: [["autoprefixer"]],
     });
-    const [, styleOpts] = vi.mocked(createCompilerPlugin).mock.calls[0];
-    expect(styleOpts.postcssConfiguration).toBeUndefined();
+    const transformOpts = vi.mocked(createClientTransformStylesheet).mock.calls[0][0];
+    expect(transformOpts.postcssPlugins).toBeDefined();
+    expect(transformOpts.postcssPlugins).toHaveLength(1);
+  });
+
+  it("postcssPlugins 미전달 시 createClientTransformStylesheet에 postcssPlugins가 undefined", async () => {
+    await createClientEsbuildContext(baseBuild);
+    const transformOpts = vi.mocked(createClientTransformStylesheet).mock.calls[0][0];
+    expect(transformOpts.postcssPlugins).toBeUndefined();
   });
 });
 
@@ -232,21 +242,28 @@ describe("createClientEsbuildContext — PostCSS 플러그인 통합", () => {
   });
 });
 
-describe("createClientEsbuildContext — SourceFileCache", () => {
+describe("createClientEsbuildContext — ClientSourceFileCache", () => {
   beforeEach(() => vi.clearAllMocks());
 
-  it("SourceFileCache가 .angular/cache 경로로 생성됨", async () => {
-    await createClientEsbuildContext(baseDev);
-    expect(SourceFileCache).toHaveBeenCalledWith(
-      path.join("/workspace/packages/my-app", ".angular", "cache"),
-    );
+  it("반환된 sourceFileCache가 ClientSourceFileCache 인스턴스", async () => {
+    const result = await createClientEsbuildContext(baseDev);
+    expect(result.sourceFileCache).toBeInstanceOf(ClientSourceFileCache);
+  });
+
+  it("sourceFileCache의 typeScriptFileCache와 loadResultCache가 AngularCompilerPlugin에 전달됨", async () => {
+    const result = await createClientEsbuildContext(baseDev);
+    const pluginOpts = vi.mocked(createAngularCompilerPlugin).mock.calls[0][0];
+    expect(pluginOpts.sourceFileCache).toBe(result.sourceFileCache);
+    expect(pluginOpts.typeScriptFileCache).toBe(result.sourceFileCache.typeScriptFileCache);
+    expect(pluginOpts.loadResultCache).toBe(result.sourceFileCache.loadResultCache);
   });
 
-  it("sourceFileCache와 loadResultCache가 CompilerPluginOptions에 전달됨", async () => {
+  it("persistentCachePath가 .angular/cache 경로로 전달됨", async () => {
     await createClientEsbuildContext(baseDev);
-    const [pluginOpts] = vi.mocked(createCompilerPlugin).mock.calls[0];
-    expect(pluginOpts.sourceFileCache).toBe(mockSourceFileCache);
-    expect(pluginOpts.loadResultCache).toBe(mockSourceFileCache.loadResultCache);
+    const pluginOpts = vi.mocked(createAngularCompilerPlugin).mock.calls[0][0];
+    expect(pluginOpts.persistentCachePath).toBe(
+      path.join("/workspace/packages/my-app", ".angular", "cache"),
+    );
   });
 });
 
@@ -258,7 +275,7 @@ describe("createClientEsbuildContext — 추가 옵션", () => {
       ...baseDev,
       tsconfig: "/workspace/packages/my-app/tsconfig.build.json",
     });
-    const [pluginOpts] = vi.mocked(createCompilerPlugin).mock.calls[0];
+    const pluginOpts = vi.mocked(createAngularCompilerPlugin).mock.calls[0][0];
     expect(pluginOpts.tsconfig).toBe(
       "/workspace/packages/my-app/tsconfig.build.json",
     );
@@ -283,13 +300,13 @@ describe("createClientEsbuildContext — 추가 옵션", () => {
     expect(opts.plugins).toContainEqual(customPlugin);
   });
 
-  it("templateUpdates가 CompilerPluginOptions에 전달됨", async () => {
+  it("templateUpdates가 AngularCompilerPluginOptions에 전달됨", async () => {
     const updates = new Map([["comp1", "template1"]]);
     await createClientEsbuildContext({
       ...baseDev,
       templateUpdates: updates,
     });
-    const [pluginOpts] = vi.mocked(createCompilerPlugin).mock.calls[0];
+    const pluginOpts = vi.mocked(createAngularCompilerPlugin).mock.calls[0][0];
     expect(pluginOpts.templateUpdates).toBe(updates);
   });
 });
@@ -303,10 +320,13 @@ describe("createClientEsbuildContext — browserslist → target 변환", () =>
     expect(opts.target).toEqual(["es2022"]);
   });
 
-  it("browserslist 미설정 시 BundleStylesheetOptions.target이 [es2022]", async () => {
+  it("browserslist 미설정 시 createClientTransformStylesheet의 loadPaths가 설정됨", async () => {
     await createClientEsbuildContext(baseDev);
-    const [, styleOpts] = vi.mocked(createCompilerPlugin).mock.calls[0];
-    expect(styleOpts.target).toEqual(["es2022"]);
+    const transformOpts = vi.mocked(createClientTransformStylesheet).mock.calls[0][0];
+    expect(transformOpts.loadPaths).toEqual([
+      path.join("/workspace/packages/my-app", "node_modules"),
+      path.join("/workspace", "node_modules"),
+    ]);
   });
 
   it("browserslist 문자열은 배열로 변환하여 browserslistToEsbuild에 전달", async () => {
@@ -324,16 +344,14 @@ describe("createClientEsbuildContext — browserslist → target 변환", () =>
     expect(browserslistToEsbuild).toHaveBeenCalledWith(["Chrome 61", "Firefox 60"]);
   });
 
-  it("browserslistToEsbuild 결과가 esbuild target과 styleOptions.target에 동일하게 적용", async () => {
+  it("browserslistToEsbuild 결과가 esbuild target에 적용", async () => {
     vi.mocked(browserslistToEsbuild).mockReturnValueOnce(["chrome61", "firefox60"]);
     await createClientEsbuildContext({
       ...baseDev,
       browserslist: ["Chrome 61", "Firefox 60"],
     });
     const opts = vi.mocked(esbuild.context).mock.calls[0][0];
-    const [, styleOpts] = vi.mocked(createCompilerPlugin).mock.calls[0];
     expect(opts.target).toEqual(["chrome61", "firefox60"]);
-    expect(styleOpts.target).toEqual(["chrome61", "firefox60"]);
   });
 });
 
@@ -448,7 +466,7 @@ describe("createClientEsbuildContext — onEnd 플러그인", () => {
     const opts = vi.mocked(esbuild.context).mock.calls[0][0];
     const pluginNames = opts.plugins!.map((p: any) => p.name);
     const customIdx = pluginNames.indexOf("custom");
-    const angularIdx = pluginNames.indexOf("angular-compiler");
+    const angularIdx = pluginNames.indexOf("sd-angular-compiler");
     expect(customIdx).toBeLessThan(angularIdx);
   });
 });
@@ -493,7 +511,7 @@ describe("createClientEsbuildContext — SCSS 플러그인 통합", () => {
     const opts = vi.mocked(esbuild.context).mock.calls[0][0];
     const pluginNames = opts.plugins!.map((p: any) => p.name);
 
-    const angularIdx = pluginNames.indexOf("angular-compiler");
+    const angularIdx = pluginNames.indexOf("sd-angular-compiler");
     const scssIdx = pluginNames.indexOf("sd-scss");
 
     expect(scssIdx).toBe(angularIdx + 1);