// CSS: // .a { background-color: red; } // .b { padding: 1rem; } // .c:hover { background-color: blue; } ``` **동적 값은 CSS 변수로 변환:** ```tsx // 개발자가 작성: const example = // Devup UI가 생성: const generated =

// CSS: // .a { background-color: var(--a); } ``` **복잡한 표현식과 반응형 배열 — 완벽 지원:** ```tsx // 개발자가 작성: const example = // Devup UI가 생성: const generated = (

) // 각 브레이크포인트에 대한 반응형 CSS 생성 ``` **타입 세이프 테마:** `devup.json` ```json { "theme": { "colors": { "default": { "primary": "#0070f3", "text": "#000" }, "dark": { "primary": "#3291ff", "text": "#fff" } }, "typography": { "heading": { "fontFamily": "Pretendard", "fontSize": "24px", "fontWeight": 700, "lineHeight": 1.3 } } } } ``` ```tsx // 타입 세이프 테마 토큰 const textExample = const boxExample = ``` **반응형 + 가상 선택자 동시 사용:** ```tsx // 반응형과 가상 선택자 함께 사용 const example = // 동일한 표현 const example2 = ``` **styled-components / Emotion 호환 `styled()` API:** ```tsx import { styled } from '@devup-ui/react' // styled-components, Emotion 사용자에게 익숙한 문법 const Card = styled('div', { bg: 'white', p: 4, // 4 * 4 = 16px borderRadius: '8px', boxShadow: '0 4px 6px rgba(0, 0, 0, 0.1)', _hover: { boxShadow: '0 10px 15px rgba(0, 0, 0, 0.1)', }, }) // 버튼 예시 const Button = styled('button', { px: 4, // 4 * 4 = 16px py: 2, // 2 * 4 = 8px borderRadius: '4px', cursor: 'pointer', }) // 사용 const cardExample = Content const buttonExample = ``` ## 영감 - Styled System — 문법적인 부분에서 영감을 받았습니다 - Chakra UI — 문법적인 부분에서 영감을 받았습니다 - Theme UI — 전체적인 시스템적인 부분에서 영감을 받았습니다 - Vanilla Extract — 전처리기 부분에서 영감을 받았습니다 - Rainbow Sprinkles — 전체적인 시스템적인 부분에서 영감을 받았습니다 - Kuma UI — 문법적인 부분과 방법론에서 영감을 받았습니다 ## 기여 방법 ### 요구 사항 - [Node.js](https://nodejs.org) (LTS 버전 권장) - [Rust](https://rustup.rs) 컴파일러 - [Bun](https://bun.sh) 패키지 매니저 ### 개발 환경 설정 개발 환경을 위해 아래 패키지들을 설치합니다: ```sh bun install bun run build cargo install cargo-tarpaulin cargo install wasm-pack ``` 설치 후 `bun run test`를 실행하여 문제가 없는지 확인합니다.

CSS-in-JS의 미래 — 제로 런타임, 완전한 문법 지원