@plus-experience/design-system-carbon 0.2.6 → 0.2.8

package/bin/setup.js

@@ -43,29 +43,42 @@ if (!pkg.dependencies?.next) {
 run("npm install @carbon/react @carbon/icons-react @ibm/plex clsx tailwind-merge next-themes date-fns recharts");
 log("Carbon + UI 의존성 설치");
 
-// 5. dev 의존성 (sass)
-run("npm install -D sass");
-log("sass 설치");
+// 5. dev 의존성 — sass는 더 이상 필요 없음 (carbon.css 사전 컴파일 사용)
 
+const styleImport = '@import "@plus-experience/design-system-carbon/styles.css";';
+const targetCss = path.join(appDir, "globals.css");
 const srcCss = path.join(cwd, "node_modules/@plus-experience/design-system-carbon/app/globals.css");
-if (fs.existsSync(srcCss)) {
-  let cssContent = fs.readFileSync(srcCss, "utf8");
-  const styleImport = '@import "@plus-experience/design-system-carbon/styles.css";';
-  if (!cssContent.includes(styleImport)) {
-    cssContent = cssContent.replace(
-      '@import "tailwindcss/theme"',
-      '@import "tailwindcss/theme"' + '\n' + styleImport
-    );
+
+if (fs.existsSync(targetCss)) {
+  // Don't overwrite user's globals.css — only inject our import line.
+  let cssContent = fs.readFileSync(targetCss, "utf8");
+  if (cssContent.includes(styleImport)) {
+    log("globals.css — 이미 import됨 (스킵)");
+  } else {
+    // Repair the previous broken patcher's output if present.
+    const brokenPattern = /@import\s+["']tailwindcss\/theme["']\s*\n\s*@import\s+["']@plus-experience\/design-system-carbon\/styles\.css["'];\s*([^;]*;)/;
+    if (brokenPattern.test(cssContent)) {
+      cssContent = cssContent.replace(brokenPattern, `@import "tailwindcss/theme" $1\n${styleImport}`);
+      log("globals.css — 깨진 import 라인 복구");
+    } else {
+      cssContent = injectStyleImport(cssContent, styleImport);
+      log("globals.css — Carbon styles import 추가");
+    }
+    fs.writeFileSync(targetCss, cssContent);
   }
-  fs.writeFileSync(path.join(appDir, "globals.css"), cssContent);
-  log("globals.css 복사");
+} else if (fs.existsSync(srcCss)) {
+  // No globals.css yet — seed from our template with the import injected.
+  let cssContent = fs.readFileSync(srcCss, "utf8");
+  cssContent = injectStyleImport(cssContent, styleImport);
+  fs.writeFileSync(targetCss, cssContent);
+  log("globals.css 생성");
 }
 
-// 7. carbon.scss 복사
-const srcScss = path.join(cwd, "node_modules/@plus-experience/design-system-carbon/app/carbon.scss");
-if (fs.existsSync(srcScss)) {
-  fs.copyFileSync(srcScss, path.join(appDir, "carbon.scss"));
-  log("carbon.scss 복사");
+// 7. carbon.scss는 더 이상 복사하지 않음 — 사전 컴파일된 carbon.css를 직접 import
+const legacyScss = path.join(appDir, "carbon.scss");
+if (fs.existsSync(legacyScss)) {
+  fs.unlinkSync(legacyScss);
+  log("기존 carbon.scss 제거 (carbon.css로 마이그레이션)");
 }
 
 // 8. DESIGN_SYSTEM.md + CLAUDE.md + AGENTS.md 설정
@@ -130,6 +143,25 @@ console.log('   import { Button } from "@plus-experience/design-system-carbon/ui
 
 // --- helpers ---
 
+function injectStyleImport(cssContent, styleImport) {
+  if (cssContent.includes(styleImport)) return cssContent;
+
+  // Prefer placing right after a tailwind import so layer order is sane.
+  const tailwindImport = cssContent.match(/@import\s+["']tailwindcss[^"']*["'][^;]*;/);
+  if (tailwindImport) {
+    return cssContent.replace(tailwindImport[0], `${tailwindImport[0]}\n${styleImport}`);
+  }
+
+  // Fall back to any other top-level @import.
+  const anyImport = cssContent.match(/@import[^;]*;/);
+  if (anyImport) {
+    return cssContent.replace(anyImport[0], `${anyImport[0]}\n${styleImport}`);
+  }
+
+  // No imports at all — prepend to the file.
+  return `${styleImport}\n${cssContent}`;
+}
+
 function patchNextConfig() {
   const candidates = ["next.config.ts", "next.config.mjs", "next.config.js"];
   let configPath = null;
@@ -257,21 +289,23 @@ function patchLayout() {
     modified = true;
   }
 
-  // Add carbon.scss import if not present
-  if (!content.includes("carbon.scss")) {
-    const importLine = 'import "./carbon.scss";';
+  // Migrate legacy carbon.scss import → carbon.css from package
+  const carbonCssImport = 'import "@plus-experience/design-system-carbon/carbon.css";';
+  if (/import\s+["']\.\/carbon\.scss["'];?/.test(content)) {
+    content = content.replace(/import\s+["']\.\/carbon\.scss["'];?/, carbonCssImport);
+    modified = true;
+  } else if (!content.includes("@plus-experience/design-system-carbon/carbon.css")) {
     if (content.includes("import")) {
-      // Add after last import
       const lastImportIdx = content.lastIndexOf("import ");
       const endOfLine = content.indexOf("\n", lastImportIdx);
-      content = content.slice(0, endOfLine + 1) + importLine + "\n" + content.slice(endOfLine + 1);
+      content = content.slice(0, endOfLine + 1) + carbonCssImport + "\n" + content.slice(endOfLine + 1);
       modified = true;
     }
   }
 
   if (modified) {
     fs.writeFileSync(layoutPath, content);
-    log("app/layout — dark 클래스 + carbon.scss import 추가");
+    log("app/layout — dark 클래스 + carbon.css import 추가");
   } else {
     log("app/layout — 이미 설정됨 (스킵)");
   }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@plus-experience/design-system-carbon",
-  "version": "0.2.6",
+  "version": "0.2.8",
   "private": false,
   "publishConfig": {
     "registry": "https://registry.npmjs.org",