[Refactor] styled-system 변경 사항 안 잡히도록 설정 수정 (#38)

* chore: root에 panda codegen, formatting 관련 스크립트 추가

* chore:formatting 관련 스크립트 수정

* chore: styled-system 폴더 포맷팅

* chore: build 스크립트 순서 수정

* chore: husky pre-push hook 추가

* chore: styled-system format 스크립트 styled-system만 적용되도록 수정

* fix : wow-docs 에서 codegen 하는 로직 삭제

---------

Co-authored-by: SeieunYoo <[email protected]>

.husky/pre-push

@@ -0,0 +1,4 @@
+#!/usr/bin/env sh
+. "$(dirname -- "$0")/_/husky.sh"
+
+pnpm codegen:build

apps/wow-docs/app/page.module.css

@@ -94,7 +94,9 @@
   border-radius: var(--border-radius);
   background: rgba(var(--card-rgb), 0);
   border: 1px solid rgba(var(--card-border-rgb), 0);
-  transition: background 200ms, border 200ms;
+  transition:
+    background 200ms,
+    border 200ms;
 }
 
 .card span {

apps/wow-docs/package.json

@@ -3,7 +3,7 @@
   "version": "0.0.0",
   "private": true,
   "scripts": {
-    "dev": "pnpm panda codegen && rm -rf .next && next dev",
+    "dev": "rm -rf .next && next dev",
     "build": "next build",
     "start": "next start",
     "lint": "eslint . --max-warnings 0",

apps/wow-docs/styled-system/css/conditions.js

@@ -1,34 +1,36 @@
-import { withoutSpace } from '../helpers.js';
+import { withoutSpace } from "../helpers.js";
 
-const conditionsStr = "_hover,_focus,_focusWithin,_focusVisible,_disabled,_active,_visited,_target,_readOnly,_readWrite,_empty,_checked,_enabled,_expanded,_highlighted,_before,_after,_firstLetter,_firstLine,_marker,_selection,_file,_backdrop,_first,_last,_only,_even,_odd,_firstOfType,_lastOfType,_onlyOfType,_peerFocus,_peerHover,_peerActive,_peerFocusWithin,_peerFocusVisible,_peerDisabled,_peerChecked,_peerInvalid,_peerExpanded,_peerPlaceholderShown,_groupFocus,_groupHover,_groupActive,_groupFocusWithin,_groupFocusVisible,_groupDisabled,_groupChecked,_groupExpanded,_groupInvalid,_indeterminate,_required,_valid,_invalid,_autofill,_inRange,_outOfRange,_placeholder,_placeholderShown,_pressed,_selected,_default,_optional,_open,_closed,_fullscreen,_loading,_currentPage,_currentStep,_motionReduce,_motionSafe,_print,_landscape,_portrait,_dark,_light,_osDark,_osLight,_highContrast,_lessContrast,_moreContrast,_ltr,_rtl,_scrollbar,_scrollbarThumb,_scrollbarTrack,_horizontal,_vertical,_starting,sm,smOnly,smDown,md,mdOnly,mdDown,lg,lgOnly,lgDown,xl,xlOnly,xlDown,2xl,2xlOnly,2xlDown,smToMd,smToLg,smToXl,smTo2xl,mdToLg,mdToXl,mdTo2xl,lgToXl,lgTo2xl,xlTo2xl,@/xs,@/sm,@/md,@/lg,@/xl,@/2xl,@/3xl,@/4xl,@/5xl,@/6xl,@/7xl,@/8xl,base"
-const conditions = new Set(conditionsStr.split(','))
+const conditionsStr =
+  "_hover,_focus,_focusWithin,_focusVisible,_disabled,_active,_visited,_target,_readOnly,_readWrite,_empty,_checked,_enabled,_expanded,_highlighted,_before,_after,_firstLetter,_firstLine,_marker,_selection,_file,_backdrop,_first,_last,_only,_even,_odd,_firstOfType,_lastOfType,_onlyOfType,_peerFocus,_peerHover,_peerActive,_peerFocusWithin,_peerFocusVisible,_peerDisabled,_peerChecked,_peerInvalid,_peerExpanded,_peerPlaceholderShown,_groupFocus,_groupHover,_groupActive,_groupFocusWithin,_groupFocusVisible,_groupDisabled,_groupChecked,_groupExpanded,_groupInvalid,_indeterminate,_required,_valid,_invalid,_autofill,_inRange,_outOfRange,_placeholder,_placeholderShown,_pressed,_selected,_default,_optional,_open,_closed,_fullscreen,_loading,_currentPage,_currentStep,_motionReduce,_motionSafe,_print,_landscape,_portrait,_dark,_light,_osDark,_osLight,_highContrast,_lessContrast,_moreContrast,_ltr,_rtl,_scrollbar,_scrollbarThumb,_scrollbarTrack,_horizontal,_vertical,_starting,sm,smOnly,smDown,md,mdOnly,mdDown,lg,lgOnly,lgDown,xl,xlOnly,xlDown,2xl,2xlOnly,2xlDown,smToMd,smToLg,smToXl,smTo2xl,mdToLg,mdToXl,mdTo2xl,lgToXl,lgTo2xl,xlTo2xl,@/xs,@/sm,@/md,@/lg,@/xl,@/2xl,@/3xl,@/4xl,@/5xl,@/6xl,@/7xl,@/8xl,base";
+const conditions = new Set(conditionsStr.split(","));
 
-export function isCondition(value){
-  return conditions.has(value) || /^@|&|&$/.test(value)
+export function isCondition(value) {
+  return conditions.has(value) || /^@|&|&$/.test(value);
 }
 
-const underscoreRegex = /^_/
-const conditionsSelectorRegex = /&|@/
+const underscoreRegex = /^_/;
+const conditionsSelectorRegex = /&|@/;
 
-export function finalizeConditions(paths){
+export function finalizeConditions(paths) {
   return paths.map((path) => {
-    if (conditions.has(path)){
-      return path.replace(underscoreRegex, '')
+    if (conditions.has(path)) {
+      return path.replace(underscoreRegex, "");
     }
 
-    if (conditionsSelectorRegex.test(path)){
-      return `[${withoutSpace(path.trim())}]`
+    if (conditionsSelectorRegex.test(path)) {
+      return `[${withoutSpace(path.trim())}]`;
     }
 
-    return path
-  })}
+    return path;
+  });
+}
 
-  export function sortConditions(paths){
-    return paths.sort((a, b) => {
-      const aa = isCondition(a)
-      const bb = isCondition(b)
-      if (aa && !bb) return 1
-      if (!aa && bb) return -1
-      return 0
-    })
-  }
+export function sortConditions(paths) {
+  return paths.sort((a, b) => {
+    const aa = isCondition(a);
+    const bb = isCondition(b);
+    if (aa && !bb) return 1;
+    if (!aa && bb) return -1;
+    return 0;
+  });
+}

apps/wow-docs/styled-system/css/css.d.ts

@@ -1,18 +1,18 @@
 /* eslint-disable */
-import type { SystemStyleObject } from '../types/index';
+import type { SystemStyleObject } from "../types/index";
 
-type Styles = SystemStyleObject | undefined | null | false
+type Styles = SystemStyleObject | undefined | null | false;
 
 interface CssFunction {
-  (styles: Styles): string
-  (styles: Styles[]): string
-  (...styles: Array<Styles | Styles[]>): string
-  (styles: Styles): string
+  (styles: Styles): string;
+  (styles: Styles[]): string;
+  (...styles: Array<Styles | Styles[]>): string;
+  (styles: Styles): string;
 
-  raw: (styles: Styles) => string
-  raw: (styles: Styles[]) => string
-  raw: (...styles: Array<Styles | Styles[]>) => string
-  raw: (styles: Styles) => string
+  raw: (styles: Styles) => string;
+  raw: (styles: Styles[]) => string;
+  raw: (...styles: Array<Styles | Styles[]>) => string;
+  raw: (styles: Styles) => string;
 }
 
-export declare const css: CssFunction;
+export declare const css: CssFunction;