@mandujs/mcp 0.12.2 → 0.13.0

package/src/resources/skills/mandu-styling/rules/style-perf-purge.md

@@ -1,192 +1,192 @@
----
-title: CSS Purge and Tree Shaking
-impact: MEDIUM
-impactDescription: Removes unused CSS for smaller bundles
-tags: styling, performance, purge, tree-shaking
----
-
-## CSS Purge and Tree Shaking
-
-**Impact: MEDIUM (Removes unused CSS for smaller bundles)**
-
-미사용 CSS를 제거하여 번들 크기를 최소화하세요.
-
-## Tailwind 자동 Purge
-
-Tailwind v3+는 JIT 컴파일로 사용된 클래스만 생성합니다.
-
-```typescript
-// tailwind.config.ts
-export default {
-  // content 경로가 정확해야 함
-  content: [
-    "./app/**/*.{js,ts,jsx,tsx,mdx}",
-    "./components/**/*.{js,ts,jsx,tsx,mdx}",
-    "./lib/**/*.{js,ts,jsx,tsx,mdx}",
-  ],
-  // ...
-};
-```
-
-## Safelist 관리
-
-```typescript
-// tailwind.config.ts
-export default {
-  content: ["./app/**/*.{ts,tsx}"],
-
-  // 동적으로 생성되는 클래스는 safelist에 추가
-  safelist: [
-    // 정적 패턴
-    "bg-red-500",
-    "bg-green-500",
-    "bg-blue-500",
-
-    // 정규식 패턴
-    {
-      pattern: /bg-(red|green|blue)-(100|500|900)/,
-    },
-
-    // 변형 포함
-    {
-      pattern: /text-(red|green|blue)-500/,
-      variants: ["hover", "dark"],
-    },
-  ],
-};
-```
-
-## 동적 클래스 문제 방지
-
-```tsx
-// ❌ Tailwind가 감지 못함
-const color = "blue";
-<div className={`bg-${color}-500`} />
-
-// ✅ 전체 클래스명 사용
-const colorClasses = {
-  blue: "bg-blue-500",
-  red: "bg-red-500",
-  green: "bg-green-500",
-};
-<div className={colorClasses[color]} />
-
-// ✅ cva 사용
-const badge = cva("px-2 py-1 rounded", {
-  variants: {
-    color: {
-      blue: "bg-blue-500",
-      red: "bg-red-500",
-      green: "bg-green-500",
-    },
-  },
-});
-```
-
-## PurgeCSS 수동 설정
-
-Tailwind 외 CSS 파일용:
-
-```bash
-bun add -d purgecss
-```
-
-```javascript
-// purgecss.config.js
-export default {
-  content: ["./app/**/*.tsx", "./components/**/*.tsx"],
-  css: ["./styles/legacy.css"],
-  output: "./dist/styles/",
-
-  // 유지할 선택자
-  safelist: {
-    standard: [/^data-/],
-    deep: [/^modal/],
-    greedy: [/tooltip/],
-  },
-
-  // 커스텀 추출기
-  extractors: [
-    {
-      extractor: (content) => content.match(/[\w-/:]+(?<!:)/g) || [],
-      extensions: ["tsx", "ts"],
-    },
-  ],
-};
-```
-
-```bash
-bunx purgecss --config purgecss.config.js
-```
-
-## CSS Modules 최적화
-
-CSS Modules는 자동으로 스코프되지만, 미사용 클래스는 제거되지 않음:
-
-```bash
-bun add -d postcss-modules
-```
-
-```javascript
-// postcss.config.js
-export default {
-  plugins: {
-    "postcss-modules": {
-      generateScopedName: "[name]__[local]___[hash:base64:5]",
-      // 미사용 export 경고
-      getJSON: (cssFileName, json) => {
-        // 사용되지 않은 클래스 로깅
-        console.log(`CSS Modules in ${cssFileName}:`, Object.keys(json));
-      },
-    },
-  },
-};
-```
-
-## 번들 분석
-
-```bash
-# CSS 번들 크기 분석
-bun add -d source-map-explorer
-
-# 분석 실행
-bunx source-map-explorer dist/styles.css --html report.html
-```
-
-## 빌드 스크립트
-
-```typescript
-// scripts/analyze-css.ts
-import { Glob } from "bun";
-
-const cssGlob = new Glob("dist/**/*.css");
-let totalSize = 0;
-
-for await (const file of cssGlob.scan()) {
-  const stat = await Bun.file(file).size;
-  console.log(`${file}: ${(stat / 1024).toFixed(2)} KB`);
-  totalSize += stat;
-}
-
-console.log(`\nTotal CSS: ${(totalSize / 1024).toFixed(2)} KB`);
-
-// 경고 임계값
-if (totalSize > 50 * 1024) {
-  console.warn("⚠️ CSS bundle exceeds 50KB");
-}
-```
-
-## CI에서 크기 체크
-
-```yaml
-# .github/workflows/ci.yml
-- name: Check CSS size
-  run: |
-    SIZE=$(stat -f%z dist/styles.css 2>/dev/null || stat -c%s dist/styles.css)
-    if [ $SIZE -gt 51200 ]; then
-      echo "CSS size ($SIZE bytes) exceeds 50KB limit"
-      exit 1
-    fi
-```
-
-Reference: [Tailwind Optimizing for Production](https://tailwindcss.com/docs/optimizing-for-production)
+---
+title: CSS Purge and Tree Shaking
+impact: MEDIUM
+impactDescription: Removes unused CSS for smaller bundles
+tags: styling, performance, purge, tree-shaking
+---
+
+## CSS Purge and Tree Shaking
+
+**Impact: MEDIUM (Removes unused CSS for smaller bundles)**
+
+미사용 CSS를 제거하여 번들 크기를 최소화하세요.
+
+## Tailwind 자동 Purge
+
+Tailwind v3+는 JIT 컴파일로 사용된 클래스만 생성합니다.
+
+```typescript
+// tailwind.config.ts
+export default {
+  // content 경로가 정확해야 함
+  content: [
+    "./app/**/*.{js,ts,jsx,tsx,mdx}",
+    "./components/**/*.{js,ts,jsx,tsx,mdx}",
+    "./lib/**/*.{js,ts,jsx,tsx,mdx}",
+  ],
+  // ...
+};
+```
+
+## Safelist 관리
+
+```typescript
+// tailwind.config.ts
+export default {
+  content: ["./app/**/*.{ts,tsx}"],
+
+  // 동적으로 생성되는 클래스는 safelist에 추가
+  safelist: [
+    // 정적 패턴
+    "bg-red-500",
+    "bg-green-500",
+    "bg-blue-500",
+
+    // 정규식 패턴
+    {
+      pattern: /bg-(red|green|blue)-(100|500|900)/,
+    },
+
+    // 변형 포함
+    {
+      pattern: /text-(red|green|blue)-500/,
+      variants: ["hover", "dark"],
+    },
+  ],
+};
+```
+
+## 동적 클래스 문제 방지
+
+```tsx
+// ❌ Tailwind가 감지 못함
+const color = "blue";
+<div className={`bg-${color}-500`} />
+
+// ✅ 전체 클래스명 사용
+const colorClasses = {
+  blue: "bg-blue-500",
+  red: "bg-red-500",
+  green: "bg-green-500",
+};
+<div className={colorClasses[color]} />
+
+// ✅ cva 사용
+const badge = cva("px-2 py-1 rounded", {
+  variants: {
+    color: {
+      blue: "bg-blue-500",
+      red: "bg-red-500",
+      green: "bg-green-500",
+    },
+  },
+});
+```
+
+## PurgeCSS 수동 설정
+
+Tailwind 외 CSS 파일용:
+
+```bash
+bun add -d purgecss
+```
+
+```javascript
+// purgecss.config.js
+export default {
+  content: ["./app/**/*.tsx", "./components/**/*.tsx"],
+  css: ["./styles/legacy.css"],
+  output: "./dist/styles/",
+
+  // 유지할 선택자
+  safelist: {
+    standard: [/^data-/],
+    deep: [/^modal/],
+    greedy: [/tooltip/],
+  },
+
+  // 커스텀 추출기
+  extractors: [
+    {
+      extractor: (content) => content.match(/[\w-/:]+(?<!:)/g) || [],
+      extensions: ["tsx", "ts"],
+    },
+  ],
+};
+```
+
+```bash
+bunx purgecss --config purgecss.config.js
+```
+
+## CSS Modules 최적화
+
+CSS Modules는 자동으로 스코프되지만, 미사용 클래스는 제거되지 않음:
+
+```bash
+bun add -d postcss-modules
+```
+
+```javascript
+// postcss.config.js
+export default {
+  plugins: {
+    "postcss-modules": {
+      generateScopedName: "[name]__[local]___[hash:base64:5]",
+      // 미사용 export 경고
+      getJSON: (cssFileName, json) => {
+        // 사용되지 않은 클래스 로깅
+        console.log(`CSS Modules in ${cssFileName}:`, Object.keys(json));
+      },
+    },
+  },
+};
+```
+
+## 번들 분석
+
+```bash
+# CSS 번들 크기 분석
+bun add -d source-map-explorer
+
+# 분석 실행
+bunx source-map-explorer dist/styles.css --html report.html
+```
+
+## 빌드 스크립트
+
+```typescript
+// scripts/analyze-css.ts
+import { Glob } from "bun";
+
+const cssGlob = new Glob("dist/**/*.css");
+let totalSize = 0;
+
+for await (const file of cssGlob.scan()) {
+  const stat = await Bun.file(file).size;
+  console.log(`${file}: ${(stat / 1024).toFixed(2)} KB`);
+  totalSize += stat;
+}
+
+console.log(`\nTotal CSS: ${(totalSize / 1024).toFixed(2)} KB`);
+
+// 경고 임계값
+if (totalSize > 50 * 1024) {
+  console.warn("⚠️ CSS bundle exceeds 50KB");
+}
+```
+
+## CI에서 크기 체크
+
+```yaml
+# .github/workflows/ci.yml
+- name: Check CSS size
+  run: |
+    SIZE=$(stat -f%z dist/styles.css 2>/dev/null || stat -c%s dist/styles.css)
+    if [ $SIZE -gt 51200 ]; then
+      echo "CSS size ($SIZE bytes) exceeds 50KB limit"
+      exit 1
+    fi
+```
+
+Reference: [Tailwind Optimizing for Production](https://tailwindcss.com/docs/optimizing-for-production)