@simplysm/sd-cli 14.0.37 → 14.0.39

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

@@ -37,6 +37,19 @@ vi.mock("browserslist-to-esbuild", () => ({
   default: vi.fn(() => ["chrome61"]),
 }));
 
+vi.mock("module", async (importOriginal) => {
+  const actual = await importOriginal<typeof import("module")>();
+  return {
+    ...actual,
+    createRequire: vi.fn(() => (name: string) => {
+      if (name === "nonexistent-plugin") {
+        throw new Error(`Cannot find module '${name}'`);
+      }
+      return (..._args: any[]) => ({ postcssPlugin: name });
+    }),
+  };
+});
+
 // --- Imports (after mocks) ---
 
 const { createClientEsbuildContext } = await import(
@@ -108,7 +121,7 @@ describe("createClientEsbuildContext — Acceptance", () => {
     expect(pluginOpts.incremental).toBe(true);
     expect(pluginOpts.sourceFileCache).toBe(mockSourceFileCache);
     expect(pluginOpts.loadResultCache).toBe(mockSourceFileCache.loadResultCache);
-    expect((pluginOpts as any).browserOnlyBuild).toBe(true);
+    expect(pluginOpts.includeTestMetadata).toBe(true);
 
     // BundleStylesheetOptions
     expect(styleOpts.workspaceRoot).toBe("/workspace");
@@ -161,6 +174,9 @@ describe("createClientEsbuildContext — Acceptance", () => {
     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);
@@ -168,7 +184,7 @@ describe("createClientEsbuildContext — Acceptance", () => {
   });
 
   // Scenario: 커스텀 env 주입
-  it("env 설정 시 import.meta.env.KEY로 define에 주입", async () => {
+  it("env 설정 시 import.meta.env 객체로 define에 주입", async () => {
     await createClientEsbuildContext({
       pkgDir: "/workspace/packages/my-app",
       cwd: "/workspace",
@@ -177,27 +193,26 @@ describe("createClientEsbuildContext — Acceptance", () => {
     });
 
     const esbuildOptions = vi.mocked(esbuild.context).mock.calls[0][0];
-    expect(esbuildOptions.define!["import.meta.env.API_URL"]).toBe(
-      '"https://api.example.com"',
+    expect(esbuildOptions.define!["import.meta.env"]).toBe(
+      JSON.stringify({ API_URL: "https://api.example.com", DEBUG: "true" }),
     );
-    expect(esbuildOptions.define!["import.meta.env.DEBUG"]).toBe('"true"');
   });
 
-  // Scenario: PostCSS 설정 전달
-  it("postcssPlugins 전달 시 BundleStylesheetOptions.postcssConfiguration에 반영", async () => {
+  // Scenario: PostCSS 설정 — postcssConfiguration 비활성화 + sd-postcss 등록
+  it("postcssPlugins 전달 시 postcssConfiguration은 undefined이고 sd-postcss 플러그인이 등록된다", async () => {
     await createClientEsbuildContext({
       pkgDir: "/workspace/packages/my-app",
       cwd: "/workspace",
       mode: "build",
       postcssPlugins: [["autoprefixer", {}]],
-      postcssConfigPath: "/workspace/packages/my-app",
     });
 
     const [, styleOpts] = vi.mocked(createCompilerPlugin).mock.calls[0];
-    expect(styleOpts.postcssConfiguration).toEqual({
-      config: { plugins: [["autoprefixer", {}]] },
-      configPath: "/workspace/packages/my-app",
-    });
+    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");
   });
 
   // Scenario: 프로덕션 일회성 빌드
@@ -355,8 +370,8 @@ describe("createClientEsbuildContext — Acceptance", () => {
     ]);
   });
 
-  // Scenario: dev 모드 출력 네이밍 (해시 없음)
-  it("dev 모드: entryNames, chunkNames, assetNames 모두 [name]", async () => {
+  // Scenario: dev 모드 출력 네이밍 (entry/asset은 해시 없음, chunk은 해시 포함)
+  it("dev 모드: entryNames, assetNames는 [name], chunkNames는 [name]-[hash]", async () => {
     await createClientEsbuildContext({
       pkgDir: "/workspace/packages/my-app",
       cwd: "/workspace",
@@ -365,7 +380,7 @@ describe("createClientEsbuildContext — Acceptance", () => {
 
     const esbuildOptions = vi.mocked(esbuild.context).mock.calls[0][0];
     expect(esbuildOptions.entryNames).toBe("[name]");
-    expect(esbuildOptions.chunkNames).toBe("[name]");
+    expect(esbuildOptions.chunkNames).toBe("[name]-[hash]");
     expect(esbuildOptions.assetNames).toBe("[name]");
   });
 

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

@@ -39,6 +39,19 @@ vi.mock("browserslist-to-esbuild", () => ({
   default: vi.fn(() => ["chrome61"]),
 }));
 
+vi.mock("module", async (importOriginal) => {
+  const actual = await importOriginal<typeof import("module")>();
+  return {
+    ...actual,
+    createRequire: vi.fn(() => (name: string) => {
+      if (name === "nonexistent-plugin") {
+        throw new Error(`Cannot find module '${name}'`);
+      }
+      return (..._args: any[]) => ({ postcssPlugin: name });
+    }),
+  };
+});
+
 // --- Imports (after mocks) ---
 
 const { createClientEsbuildContext } = await import(
@@ -108,22 +121,19 @@ describe("createClientEsbuildContext — define 생성", () => {
     expect(opts.define!["ngHmrMode"]).toBe("false");
   });
 
-  it("env가 없으면 import.meta.env 관련 define 없음", async () => {
+  it("env가 없으면 import.meta.env define 없음", async () => {
     await createClientEsbuildContext(baseDev);
     const opts = vi.mocked(esbuild.context).mock.calls[0][0];
-    const envKeys = Object.keys(opts.define!).filter((k) =>
-      k.startsWith("import.meta.env."),
-    );
-    expect(envKeys).toHaveLength(0);
+    expect(opts.define!["import.meta.env"]).toBeUndefined();
   });
 
-  it("env 값에 특수문자가 있으면 JSON.stringify로 이스케이프", async () => {
+  it("env 설정 시 import.meta.env 객체로 define에 주입", async () => {
     await createClientEsbuildContext({
       ...baseBuild,
       env: { MSG: 'hello "world"' },
     });
     const opts = vi.mocked(esbuild.context).mock.calls[0][0];
-    expect(opts.define!["import.meta.env.MSG"]).toBe('"hello \\"world\\""');
+    expect(opts.define!["import.meta.env"]).toBe(JSON.stringify({ MSG: 'hello "world"' }));
   });
 });
 
@@ -160,13 +170,65 @@ describe("createClientEsbuildContext — PostCSS 설정", () => {
     expect(styleOpts.postcssConfiguration).toBeUndefined();
   });
 
-  it("postcssConfigPath 미전달 시 pkgDir을 기본값으로 사용", async () => {
+  it("postcssPlugins 전달해도 postcssConfiguration은 항상 undefined", async () => {
     await createClientEsbuildContext({
       ...baseBuild,
       postcssPlugins: [["autoprefixer"]],
     });
     const [, styleOpts] = vi.mocked(createCompilerPlugin).mock.calls[0];
-    expect(styleOpts.postcssConfiguration!.configPath).toBe(baseBuild.pkgDir);
+    expect(styleOpts.postcssConfiguration).toBeUndefined();
+  });
+});
+
+describe("createClientEsbuildContext — PostCSS 플러그인 통합", () => {
+  beforeEach(() => vi.clearAllMocks());
+
+  it("postcssPlugins 전달 시 sd-postcss 플러그인이 plugins에 등록된다", async () => {
+    await createClientEsbuildContext({
+      ...baseBuild,
+      postcssPlugins: [["autoprefixer"]],
+    });
+    const opts = vi.mocked(esbuild.context).mock.calls[0][0];
+    const pluginNames = opts.plugins!.map((p: any) => p.name);
+    expect(pluginNames).toContain("sd-postcss");
+  });
+
+  it("postcssPlugins 미전달 시 sd-postcss 미등록", async () => {
+    await createClientEsbuildContext(baseBuild);
+    const opts = vi.mocked(esbuild.context).mock.calls[0][0];
+    const pluginNames = opts.plugins!.map((p: any) => p.name);
+    expect(pluginNames).not.toContain("sd-postcss");
+  });
+
+  it("sd-postcss가 customPlugins 뒤, sd-legacy-strip-dynamic-import 앞에 배치된다", async () => {
+    const customPlugin = { name: "custom", setup: vi.fn() };
+    await createClientEsbuildContext({
+      ...baseBuild,
+      postcssPlugins: [["autoprefixer"]],
+      plugins: [customPlugin as any],
+      legacyModule: true,
+      onEnd: vi.fn(),
+    });
+    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 postcssIdx = pluginNames.indexOf("sd-postcss");
+    const stripIdx = pluginNames.indexOf("sd-legacy-strip-dynamic-import");
+    const onEndIdx = pluginNames.indexOf("sd-on-end");
+
+    expect(postcssIdx).toBeGreaterThan(customIdx);
+    expect(postcssIdx).toBeLessThan(stripIdx);
+    expect(postcssIdx).toBeLessThan(onEndIdx);
+  });
+
+  it("존재하지 않는 플러그인 이름으로 에러가 throw된다", async () => {
+    await expect(
+      createClientEsbuildContext({
+        ...baseBuild,
+        postcssPlugins: [["nonexistent-plugin"]],
+      }),
+    ).rejects.toThrow("nonexistent-plugin");
   });
 });
 
@@ -471,8 +533,8 @@ describe("createClientEsbuildContext — legacyModule 설정", () => {
       env: { API_URL: "https://api.example.com" },
     });
     const opts = vi.mocked(esbuild.context).mock.calls[0][0];
-    expect(opts.define!["import.meta.env.API_URL"]).toBe(
-      JSON.stringify("https://api.example.com"),
+    expect(opts.define!["import.meta.env"]).toBe(
+      JSON.stringify({ API_URL: "https://api.example.com" }),
     );
     expect(opts.supported).toEqual({ "import-meta": false });
   });

package/tests/utils/esbuild-postcss-plugin.acc.spec.ts

@@ -0,0 +1,299 @@
+import { describe, it, expect, beforeEach, afterEach } from "vitest";
+import fs from "fs";
+import os from "os";
+import path from "path";
+import postcss from "postcss";
+import type esbuild from "esbuild";
+import { createPostcssPlugin } from "../../src/esbuild/esbuild-postcss-plugin";
+
+// --- Helpers ---
+
+/** PostCSS 플러그인: CSS 앞에 마커 주석을 추가한다 */
+function markerPlugin(): postcss.Plugin {
+  return {
+    postcssPlugin: "test-marker",
+    Once(root) {
+      root.prepend(new postcss.Comment({ text: "marker" }));
+    },
+  };
+}
+
+/** PostCSS 플러그인: 항상 예외를 발생시킨다 */
+function throwingPlugin(): postcss.Plugin {
+  return {
+    postcssPlugin: "test-throwing",
+    Once() {
+      throw new Error("postcss-boom");
+    },
+  };
+}
+
+/** esbuild 플러그인에서 onEnd 콜백을 캡처한다 */
+function captureOnEnd(
+  plugin: esbuild.Plugin,
+): (result: esbuild.BuildResult) => Promise<void> | void {
+  let cb!: (result: esbuild.BuildResult) => Promise<void> | void;
+  void plugin.setup({
+    onEnd(fn: (result: esbuild.BuildResult) => Promise<void> | void) {
+      cb = fn;
+    },
+  } as unknown as esbuild.PluginBuild);
+  return cb;
+}
+
+/** 최소한의 esbuild BuildResult를 생성한다 */
+function buildResult(outputs: Record<string, unknown>): esbuild.BuildResult {
+  return {
+    errors: [] as esbuild.Message[],
+    warnings: [] as esbuild.Message[],
+    metafile: { inputs: {}, outputs } as esbuild.Metafile,
+    outputFiles: [],
+    mangleCache: {},
+  };
+}
+
+// --- Tests ---
+
+describe("createPostcssPlugin — Acceptance", () => {
+  let tmpDir: string;
+
+  beforeEach(() => {
+    tmpDir = fs.mkdtempSync(path.join(os.tmpdir(), "postcss-test-"));
+  });
+
+  afterEach(() => {
+    fs.rmSync(tmpDir, { recursive: true, force: true });
+  });
+
+  // Scenario: .css 파일에 PostCSS 적용
+  it(".css 파일의 내용이 PostCSS 플러그인으로 변환되어 덮어쓰기된다", async () => {
+    const cssFile = path.join(tmpDir, "main.css");
+    fs.writeFileSync(cssFile, ".host { display: flex; }");
+
+    const plugin = createPostcssPlugin({ plugins: [markerPlugin()] });
+    const onEnd = captureOnEnd(plugin);
+
+    await onEnd(
+      buildResult({
+        [cssFile]: { bytes: 100, inputs: {}, imports: [], exports: [] },
+      }),
+    );
+
+    const output = fs.readFileSync(cssFile, "utf-8");
+    expect(output).toContain("/* marker */");
+    expect(output).toContain("display: flex");
+  });
+
+  // Scenario: .css 확장자가 아닌 파일은 CSS 전체 처리 대상에서 제외
+  it(".js 파일은 CSS 전체 적용 로직에서 처리되지 않아 원본이 유지된다", async () => {
+    const jsFile = path.join(tmpDir, "main.js");
+    const original = 'console.log("hello");';
+    fs.writeFileSync(jsFile, original);
+
+    const plugin = createPostcssPlugin({ plugins: [markerPlugin()] });
+    const onEnd = captureOnEnd(plugin);
+
+    await onEnd(
+      buildResult({
+        [jsFile]: { bytes: 100, inputs: {}, imports: [], exports: [] },
+      }),
+    );
+
+    expect(fs.readFileSync(jsFile, "utf-8")).toBe(original);
+  });
+
+  // Scenario: 빈 PostCSS 플러그인 배열로 생성 시 파일 처리 없음
+  it("빈 플러그인 배열이면 .css 파일을 읽지도 수정하지도 않는다", async () => {
+    const cssFile = path.join(tmpDir, "main.css");
+    const original = ".host { display: flex; }";
+    fs.writeFileSync(cssFile, original);
+
+    const plugin = createPostcssPlugin({ plugins: [] });
+    const onEnd = captureOnEnd(plugin);
+
+    await onEnd(
+      buildResult({
+        [cssFile]: { bytes: 100, inputs: {}, imports: [], exports: [] },
+      }),
+    );
+
+    expect(fs.readFileSync(cssFile, "utf-8")).toBe(original);
+  });
+
+  // Scenario: .css 파일 PostCSS 적용 실패 시 esbuild error 추가
+  it("PostCSS 실패 시 result.errors에 파일 경로와 에러 메시지가 추가된다", async () => {
+    const cssFile = path.join(tmpDir, "broken.css");
+    fs.writeFileSync(cssFile, ".host { display: flex; }");
+
+    const plugin = createPostcssPlugin({ plugins: [throwingPlugin()] });
+    const onEnd = captureOnEnd(plugin);
+
+    const result = buildResult({
+      [cssFile]: { bytes: 100, inputs: {}, imports: [], exports: [] },
+    });
+    await onEnd(result);
+
+    expect(result.errors).toHaveLength(1);
+    expect(result.errors[0].text).toContain("postcss-boom");
+    expect(result.errors[0].text).toContain(cssFile);
+  });
+
+  // --- Slice 2: .js 파일 AST 기반 inline CSS ---
+
+  // Scenario: ɵɵdefineComponent 내 단일 styles 문자열에 PostCSS 적용
+  it("ɵɵdefineComponent 내 styles 문자열에 PostCSS가 적용되어 내용이 변환된다", async () => {
+    const jsFile = path.join(tmpDir, "main.js");
+    const code = [
+      'import * as i0 from "@angular/core";',
+      "class MyComp {}",
+      "MyComp.ɵcmp = i0.ɵɵdefineComponent({",
+      '  styles: [".host { display: flex; }"]',
+      "});",
+    ].join("\n");
+    fs.writeFileSync(jsFile, code);
+
+    const plugin = createPostcssPlugin({ plugins: [markerPlugin()] });
+    const onEnd = captureOnEnd(plugin);
+
+    await onEnd(
+      buildResult({
+        [jsFile]: { bytes: 200, inputs: {}, imports: [], exports: [] },
+      }),
+    );
+
+    const output = fs.readFileSync(jsFile, "utf-8");
+    expect(output).toContain("/* marker */");
+    expect(output).toContain("display: flex");
+    // 원본 JS 구조가 유지되어야 한다
+    expect(output).toContain("ɵɵdefineComponent");
+  });
+
+  // Scenario: ɵɵdefineComponent 내 복수 styles 문자열에 각각 PostCSS 적용
+  it("복수 styles 문자열에 각각 독립적으로 PostCSS가 적용된다", async () => {
+    const jsFile = path.join(tmpDir, "multi.js");
+    const code = [
+      'import * as i0 from "@angular/core";',
+      "class MyComp {}",
+      "MyComp.ɵcmp = i0.ɵɵdefineComponent({",
+      '  styles: [".a { color: red; }", ".b { color: blue; }"]',
+      "});",
+    ].join("\n");
+    fs.writeFileSync(jsFile, code);
+
+    const plugin = createPostcssPlugin({ plugins: [markerPlugin()] });
+    const onEnd = captureOnEnd(plugin);
+
+    await onEnd(
+      buildResult({
+        [jsFile]: { bytes: 200, inputs: {}, imports: [], exports: [] },
+      }),
+    );
+
+    const output = fs.readFileSync(jsFile, "utf-8");
+    // 마커가 각 문자열에 독립적으로 적용됨 → 2회 등장
+    const markerCount = (output.match(/\/\* marker \*\//g) ?? []).length;
+    expect(markerCount).toBe(2);
+  });
+
+  // Scenario: styles 배열이 비어 있으면 파일 수정 안 함
+  it("styles 배열이 비어 있으면 .js 파일이 수정되지 않는다", async () => {
+    const jsFile = path.join(tmpDir, "empty.js");
+    const code = [
+      'import * as i0 from "@angular/core";',
+      "class MyComp {}",
+      "MyComp.ɵcmp = i0.ɵɵdefineComponent({",
+      "  styles: []",
+      "});",
+    ].join("\n");
+    fs.writeFileSync(jsFile, code);
+
+    const plugin = createPostcssPlugin({ plugins: [markerPlugin()] });
+    const onEnd = captureOnEnd(plugin);
+
+    await onEnd(
+      buildResult({
+        [jsFile]: { bytes: 200, inputs: {}, imports: [], exports: [] },
+      }),
+    );
+
+    expect(fs.readFileSync(jsFile, "utf-8")).toBe(code);
+  });
+
+  // Scenario: ɵɵdefineComponent 외부의 styles 속성은 무시
+  it("ɵɵdefineComponent 외부의 styles 속성은 처리되지 않는다", async () => {
+    const jsFile = path.join(tmpDir, "outside.js");
+    const code = [
+      'const config = { styles: [".host { display: flex; }"] };',
+      "export default config;",
+    ].join("\n");
+    fs.writeFileSync(jsFile, code);
+
+    const plugin = createPostcssPlugin({ plugins: [markerPlugin()] });
+    const onEnd = captureOnEnd(plugin);
+
+    await onEnd(
+      buildResult({
+        [jsFile]: { bytes: 200, inputs: {}, imports: [], exports: [] },
+      }),
+    );
+
+    expect(fs.readFileSync(jsFile, "utf-8")).toBe(code);
+  });
+
+  // Scenario: 한 .js 파일 내 여러 ɵɵdefineComponent의 styles 모두 처리
+  it("한 파일 내 여러 ɵɵdefineComponent의 styles 모두에 PostCSS가 적용된다", async () => {
+    const jsFile = path.join(tmpDir, "bundle.js");
+    const code = [
+      'import * as i0 from "@angular/core";',
+      "class CompA {}",
+      "CompA.ɵcmp = i0.ɵɵdefineComponent({",
+      '  styles: [".a { color: red; }"]',
+      "});",
+      "class CompB {}",
+      "CompB.ɵcmp = i0.ɵɵdefineComponent({",
+      '  styles: [".b { color: blue; }"]',
+      "});",
+    ].join("\n");
+    fs.writeFileSync(jsFile, code);
+
+    const plugin = createPostcssPlugin({ plugins: [markerPlugin()] });
+    const onEnd = captureOnEnd(plugin);
+
+    await onEnd(
+      buildResult({
+        [jsFile]: { bytes: 200, inputs: {}, imports: [], exports: [] },
+      }),
+    );
+
+    const output = fs.readFileSync(jsFile, "utf-8");
+    const markerCount = (output.match(/\/\* marker \*\//g) ?? []).length;
+    expect(markerCount).toBe(2);
+    expect(output).toContain("color: red");
+    expect(output).toContain("color: blue");
+  });
+
+  // Scenario: .js 파일 inline CSS PostCSS 적용 실패 시 esbuild error 추가
+  it(".js inline CSS PostCSS 실패 시 result.errors에 에러가 추가된다", async () => {
+    const jsFile = path.join(tmpDir, "fail.js");
+    const code = [
+      'import * as i0 from "@angular/core";',
+      "class MyComp {}",
+      "MyComp.ɵcmp = i0.ɵɵdefineComponent({",
+      '  styles: [".host { display: flex; }"]',
+      "});",
+    ].join("\n");
+    fs.writeFileSync(jsFile, code);
+
+    const plugin = createPostcssPlugin({ plugins: [throwingPlugin()] });
+    const onEnd = captureOnEnd(plugin);
+
+    const result = buildResult({
+      [jsFile]: { bytes: 200, inputs: {}, imports: [], exports: [] },
+    });
+    await onEnd(result);
+
+    expect(result.errors.length).toBeGreaterThanOrEqual(1);
+    expect(result.errors[0].text).toContain("postcss-boom");
+    expect(result.errors[0].text).toContain(jsFile);
+  });
+});