sh-ui-cli 0.45.3 → 0.47.0

package/data/tokens/build.mjs

@@ -574,6 +574,10 @@ const tokenEmitters = {
     // 동일. 향후 Tailwind v3 theme.config.ts 를 별도 emit 하고 싶으면
     // 여기에 다른 함수를 등록.
     tailwind: buildTokensCss,
+    // CSS Modules 변종도 토큰은 평문 CSS custom properties — :root 변수를
+    // 그대로 참조하면 되므로 tokens.css 를 공유. .module.css 안에서도
+    // var(--primary) 같은 글로벌 변수는 정상 참조됨.
+    "css-modules": buildTokensCss,
   },
   flutter: {
     plain: buildTokensDart,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sh-ui-cli",
-  "version": "0.45.3",
+  "version": "0.47.0",
   "description": "sh-ui CLI — 프로젝트 스캐폴드(create) + 컴포넌트 추가(add/list/remove) + IDE-내 AI용 MCP 서버",
   "license": "MIT",
   "repository": {

package/src/add.mjs

@@ -193,19 +193,19 @@ function frameworkMatches(entry, cssFramework) {
 }
 
 /**
- * cssFramework="tailwind" 인데 컴포넌트에 tailwind 전용 변종 파일이 없으면
- * plain 으로 fallback. plain CSS 컴포넌트도 @theme inline 브리지 덕분에
- * Tailwind v4 프로젝트에서 그대로 동작하므로 깨지지 않음.
+ * 컴포넌트에 요청된 cssFramework 전용 변종 파일이 없으면 plain 으로 fallback.
+ * plain CSS 컴포넌트는 :root 변수만 의존하므로 어떤 환경(Tailwind v4, CSS Modules,
+ * vanilla CSS) 에서도 그대로 동작 — 깨지지 않음.
  *
- * 점진적 rollout 전략 — 모든 컴포넌트가 한 번에 tailwind 변종을 갖출 필요 없이
- * 가능한 것부터 utility-class 변종을 제공하고, 나머지는 plain 으로 자연 처리.
+ * 점진적 rollout 전략 — 모든 컴포넌트가 한 번에 새 변종을 갖출 필요 없이
+ * 가능한 것부터 변종을 제공하고, 나머지는 plain 으로 자연 처리.
  */
 function effectiveFramework(entry, cssFramework) {
-  if (cssFramework !== "tailwind") return cssFramework;
-  const hasTailwindVariant = (entry.files ?? []).some(
-    (f) => f.frameworks && f.frameworks.includes("tailwind"),
+  if (cssFramework === "plain") return cssFramework;
+  const hasVariant = (entry.files ?? []).some(
+    (f) => f.frameworks && f.frameworks.includes(cssFramework),
   );
-  return hasTailwindVariant ? "tailwind" : "plain";
+  return hasVariant ? cssFramework : "plain";
 }
 
 async function addComponent(name, config, cwd, installed, pendingDeps, diffMode, summary, conflictResolver) {
@@ -223,11 +223,11 @@ async function addComponent(name, config, cwd, installed, pendingDeps, diffMode,
   const requestedFw = config.cssFramework ?? "plain";
   const cssFramework = effectiveFramework(entry, requestedFw);
 
-  // 사용자가 tailwind 를 골랐는데 이 컴포넌트는 plain 으로 fallback 된 경우 한 줄 알림.
+  // 사용자가 plain 외 변종을 골랐는데 이 컴포넌트는 plain 으로 fallback 된 경우 한 줄 알림.
   // 동작에 문제는 없지만 일관성에 대한 기대를 정확히 셋업하기 위함.
-  if (requestedFw === "tailwind" && cssFramework === "plain" && !diffMode) {
+  if (requestedFw !== "plain" && cssFramework === "plain" && !diffMode) {
     console.log(
-      `ℹ ${name} — Tailwind 변종 미제공, plain 변종으로 설치 (Tailwind v4 환경에서 그대로 동작)`,
+      `ℹ ${name} — ${requestedFw} 변종 미제공, plain 변종으로 설치 (어떤 환경에서도 그대로 동작)`,
     );
   }
 

package/src/api.d.ts

@@ -12,10 +12,11 @@ export type ThemeMode = 'light-dark' | 'light' | 'dark';
 
 /** 현재 실제로 동작하는 CSS 프레임워크.
  * - plain: 모든 컴포넌트가 plain 변종 보유.
- * - tailwind: 일부 컴포넌트가 utility-class 변종 보유 — 미지원 컴포넌트는 add 시 plain 으로 자동 fallback. */
-export type CssFrameworkSupported = 'plain' | 'tailwind';
+ * - tailwind: 모든 styled 컴포넌트가 utility-class 변종 보유.
+ * - css-modules: 모든 styled 컴포넌트가 .module.css 변종 보유. */
+export type CssFrameworkSupported = 'plain' | 'tailwind' | 'css-modules';
 /** 향후 추가 예정 — UI 에서 "곧 지원" 으로 노출되지만 CLI 는 거부. */
-export type CssFrameworkPlanned = 'css-modules' | 'vanilla-extract';
+export type CssFrameworkPlanned = 'vanilla-extract';
 /** 알려진 전체 (validation 메시지용). */
 export type CssFramework = CssFrameworkSupported | CssFrameworkPlanned;
 

package/src/constants.js

@@ -25,11 +25,12 @@ export const THEME_MODES = ['light-dark', 'light', 'dark'];
 
 // 현재 실제로 동작하는 값.
 // - plain: CSS custom properties + 일반 .css 파일 (모든 컴포넌트 변종 보유)
-// - tailwind: utility class TSX 변종 (button/card/input 부터 시작, 점진적 확대 — 변종이 없는 컴포넌트는 add 시 plain 으로 자동 fallback)
-export const CSS_FRAMEWORKS_SUPPORTED = ['plain', 'tailwind'];
+// - tailwind: utility class TSX 변종 (모든 styled 컴포넌트 변종 보유)
+// - css-modules: 모듈 단위 .module.css + styles.X 참조 (모든 styled 컴포넌트 변종 보유)
+export const CSS_FRAMEWORKS_SUPPORTED = ['plain', 'tailwind', 'css-modules'];
 
 // 향후 추가 예정. 사용자가 이 값을 주면 친절 에러로 안내.
-export const CSS_FRAMEWORKS_PLANNED = ['css-modules', 'vanilla-extract'];
+export const CSS_FRAMEWORKS_PLANNED = ['vanilla-extract'];
 
 // 알려진 전체 — 검증 시 supported 와 planned 둘 다 인지하기 위함.
 export const CSS_FRAMEWORKS_ALL = [