perf(css): break seed-box selector into separate selectors #700
Conversation
…yout control and styling consistency
|
Walkthrough이번 변경사항은 기존의 Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant ReactComponent
participant createStyleProps
participant CSS
User->>ReactComponent: 컴포넌트 렌더링 (Box, ActionButton 등)
ReactComponent->>createStyleProps: 스타일 prop 전달
createStyleProps->>createStyleProps: prop 분석, 유틸리티 클래스/변수 생성
createStyleProps-->>ReactComponent: { className, style, restProps }
ReactComponent->>CSS: className로 스타일 적용
ReactComponent->>DOM: style 인라인 적용
Poem
✨ Finishing Touches
🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
Deploying seed-design-v3 with
|
| Latest commit: |
15316bf
|
| Status: | ✅ Deploy successful! |
| Preview URL: | https://13761e3d.seed-design.pages.dev |
| Branch Preview URL: | https://perf-style-props.seed-design.pages.dev |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 4
🧹 Nitpick comments (6)
packages/react/src/utils/styled.tsx (1)
463-471:alignSelf처리 시 전용 매핑 함수 구분 권장
alignSelf값을handleAlignItems로 재사용하고 있으나, 일부 CSS 클래스는
seed-self-*접두사를 사용합니다. 현재 매핑이seed-flex-start등과 같이
align-items용 클래스명을 반환해 잘못된 스타일이 적용될 수 있습니다. 전용
handleAlignSelf함수를 분리해 정확히 매핑하도록 개선을 고려해 주세요.packages/css/all.css (3)
63-81:.seed-none사용 시 접근성·레이아웃 영향 검토 필요
display: none;은 모든 렌더 트리를 제거하므로
- 스크린리더가 요소를 완전히 무시하고
- 포커스가 사라지며
- 레이아웃이 재계산됩니다.
인터랙션 중 토글된다면 시각적 깜빡임·레이아웃 시프트가 발생할 수 있으니
–aria-hidden,visibility: hidden,opacity: 0대안이 적절한지 확인해 주세요.
필요 시seed-none대신 접근성 전용 유틸리티(예:sr-only)를 분리하는 것도 고려해 볼 만합니다.
83-97:position: sticky유틸리티는 기준 오프셋이 없으면 무효
.seed-sticky는top / bottom등 오프셋이 지정되지 않으면 일반 static과 동일하게 동작합니다.
개별 컴포넌트에서 매번top: 0등을 선언해야 하므로 실수 여지가 큽니다.
.seed-sticky-top-0,.seed-sticky-bottom-0같은 파생 클래스를 추가하면 사용성이 개선될 것 같습니다.
297-305: CSS 파일 용량·성능 고려이 PR로 셀렉터가 수백 개 이상 늘어났습니다. 모바일 Edge 등 오래된 브라우저에서는 최초 파싱 비용이 체감될 수 있습니다.
– 배포 시 gzip/brotli 압축률을 확인하고
– tree-shaking 불가 환경(웹뷰 등)에서는 필요한 유틸리티만 부분 import 하는 전략을 검토해 보세요.packages/qvism-preset/src/global.ts (2)
164-170:borderStyle: "solid"고정 → 옵션화 검토
.seed-border-solid만 제공되면 dashed / dotted 등을 쓰려면 별도 inline-style이 필요합니다.
.seed-border-{solid|dashed|dotted|none}처럼 확장하거나,
CSS 변수--seed-box-border-style를 사용해 선택지를 열어두는 게 유연합니다.
227-236:.seed-box-inset– 실제 레이아웃 위험
top/right/bottom/left를 전부 0으로 초기화해 절대 위치 요소가 예상치 못하게 전체 영역을 덮는 사례가 자주 발생합니다.
상하좌우를 개별 클래스로 분리(.seed-top-0등)하거나,.seed-inset클래스는 문서에서 위험성을 강조해 주세요.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (8)
packages/css/all.css(1 hunks)packages/css/base.css(1 hunks)packages/css/base.min.css(1 hunks)packages/qvism-preset/src/global.ts(1 hunks)packages/react/src/components/ActionButton/ActionButton.tsx(2 hunks)packages/react/src/components/Box/Box.tsx(1 hunks)packages/react/src/components/ResponsivePair/ResponsivePair.tsx(2 hunks)packages/react/src/utils/styled.tsx(9 hunks)
🧰 Additional context used
🪛 Biome (1.9.4)
packages/css/base.min.css
[error] 1-1: Unexpected unknown function: constant
Use a known function instead.
See MDN web docs for more details.
(lint/correctness/noUnknownFunction)
[error] 1-1: Unexpected unknown function: constant
Use a known function instead.
See MDN web docs for more details.
(lint/correctness/noUnknownFunction)
[error] 1-1: Unexpected unknown function: constant
Use a known function instead.
See MDN web docs for more details.
(lint/correctness/noUnknownFunction)
⏰ Context from checks skipped due to timeout of 90000ms (3)
- GitHub Check: Analyze (javascript)
- GitHub Check: chromatic-deployment
- GitHub Check: Deploy Seed Design V3 Docs
🔇 Additional comments (24)
packages/react/src/components/ResponsivePair/ResponsivePair.tsx (1)
25-28:Flex에 전달되는 분산 props 검토 필요
alignContent="stretch"프롭을 제거했는데, 레이아웃 요구사항이 동일한지 확인이
필요합니다. 모바일/데스크톱 브레이크포인트에서 콘텐츠가 예상대로 감기는지 다시 한 번
살펴봐 주세요.packages/react/src/components/ActionButton/ActionButton.tsx (1)
27-28: 변경된 스타일 파이프라인과 잘 맞물립니다
createStyleProps결과를clsx로 결합하여 기존 레시피 클래스와 함께 적용한 점이
적절합니다. 별다른 문제 없이 동작할 것으로 보입니다.packages/react/src/components/Box/Box.tsx (1)
9-13: 기존 기본 클래스 제거에 따른 회귀 가능성 확인예전에는 모든
Box에"seed-box"클래스가 강제로 부착되어 기본position: relative등
여러 기본 스타일을 제공했습니다. 이번 변경으로 클래스가 제거되면서 레이아웃이나
타이포그래피 기본 값이 달라질 수 있습니다. 새 유틸리티 클래스 체계가 동일한 기본값을
보장하는지 스토리북/샘플 페이지에서 시각적으로 확인해 주세요.packages/css/all.css (2)
175-205: X·Y overflow 유틸리티 누락/중복 확인현재
overflow-x-*,overflow-y-*는 존재하지만- 전체 축
overflow-visible/hidden/auto/scroll유틸리티가 없습니다.반대로
.seed-none처럼 축 구분 없이 쓰고 싶은 경우가 생길 수 있으니
overflow-visible등을 추가하거나 문서에 의도적으로 제외했음을 명시해 주세요.
211-235: CSS 변수 기본값 상이 가능성
.seed-box-padding-top/bottom/...에서--seed-box-padding-top: var(--seed-box-padding);를 사용하지만,
.seed-box-padding유틸리티를 동시에 적용하지 않으면--seed-box-padding이 정의되지 않아 계산값이0으로 fallback 됩니다. 의도된 동작인지 확인 부탁드립니다.
(동일 패턴이 radius·border 등 다수 반복)packages/qvism-preset/src/global.ts (1)
281-297:.seed-consistent-width구현 👍굵기 변화 시 폭 불규칙 문제를 훌륭하게 해결했네요. 동일 기법을 Button 컴포넌트 등 텍스트가 바뀌는 UI에도 재사용하면 UX가 좋아질 것 같습니다.
packages/css/base.min.css (1)
1-831: 자동 생성된 Minified CSS 파일 검토 자동 건너뜀
이 파일은base.css로부터 빌드 프로세스를 통해 생성된 산출물입니다. 수동 리뷰 대신 원본인packages/css/base.css의 변경사항을 검토해주세요.🧰 Tools
🪛 Biome (1.9.4)
[error] 1-1: Unexpected unknown function: constant
Use a known function instead.
See MDN web docs for more details.(lint/correctness/noUnknownFunction)
[error] 1-1: Unexpected unknown function: constant
Use a known function instead.
See MDN web docs for more details.(lint/correctness/noUnknownFunction)
[error] 1-1: Unexpected unknown function: constant
Use a known function instead.
See MDN web docs for more details.(lint/correctness/noUnknownFunction)
packages/css/base.css (17)
6-11: legacy 호환:constant()함수 사용 검토
@supports(left:constant(safe-area-inset-left))블록은 iOS Safari 레거시 지원을 위한constant()구문입니다. 현재 지원 브라우저 범위에 따라 해당 블록 유지 여부를 결정하거나, 불필요하다면 제거하고env()만 사용하도록 정리하는 것을 권장합니다.Also applies to: 13-18
🧰 Tools
🪛 Biome (1.9.4)
[error] 6-6: Unexpected unknown function: constant
Use a known function instead.
See MDN web docs for more details.(lint/correctness/noUnknownFunction)
[error] 8-8: Unexpected unknown function: constant
Use a known function instead.
See MDN web docs for more details.(lint/correctness/noUnknownFunction)
[error] 9-9: Unexpected unknown function: constant
Use a known function instead.
See MDN web docs for more details.(lint/correctness/noUnknownFunction)
63-81: 디스플레이 유틸리티 클래스 적절 적용
.seed-block,.seed-flex,.seed-inline-flex,.seed-inline-block,.seed-none클래스는 각각 단일display속성만을 담당하여 유틸리티 스타일 접근 방식을 잘 따르고 있습니다.
83-97: 포지션 유틸리티 클래스 적절 적용
.seed-absolute,.seed-relative,.seed-fixed,.seed-sticky클래스가 위치 속성을 명확히 분리하여 정의하고 있어 유지보수성과 재사용성이 우수합니다.
99-113: 플렉스 방향 유틸리티 클래스 적절 적용
.seed-flex-row,.seed-flex-column,.seed-flex-row-reverse,.seed-flex-column-reverse가flex-direction만을 담당하며 일관성 있게 구현되었습니다.
115-121: 플렉스 래핑 유틸리티 클래스 적절 적용
.seed-flex-wrap,.seed-flex-wrap-reverse가 각각flex-wrap속성을 분리하여 정의하고 있어 레이아웃 조정이 용이합니다.
123-141: 정렬(Justify) 유틸리티 클래스 적절 적용
.seed-justify-start,.seed-justify-end,.seed-justify-center,.seed-justify-between,.seed-justify-around는justify-content속성을 명확히 분리하여 관리하고 있어 좋습니다.
143-157: 정렬(Align-items) 유틸리티 클래스 적절 적용
.seed-align-start,.seed-align-end,.seed-align-center,.seed-align-stretch가align-items만을 담당하며 일관성을 잘 유지합니다.
159-173: 정렬(Align-self) 유틸리티 클래스 적절 적용
.seed-self-start,.seed-self-end,.seed-self-center,.seed-self-stretch가align-self속성만을 명확히 분리하여 구현되어 있습니다.
175-205: 오버플로우 유틸리티 클래스 적절 적용
.seed-overflow-x-*,.seed-overflow-y-*클래스들은 각각 축별로 제어할 수 있도록 분리되어 있으며, 오버플로우 처리 유연성을 높입니다.
207-210: 테두리 스타일 유틸리티 클래스 적절 적용
.seed-border-solid가border-style: solid;만을 담당하여 유틸리티 철학을 잘 반영하고 있습니다.
211-234: 패딩 유틸리티 클래스 적절 적용
.seed-box-padding,.seed-box-padding-top/ bottom/ left/ right클래스는 CSS 변수로 패딩 값을 관리하며, 필요한 방향별 제어를 제공합니다.
236-259: 테두리 반경(Border-radius) 유틸리티 클래스 적절 적용
.seed-box-radius및 방향별 radius 클래스들이 CSS 변수와 함께 일관된 패턴으로 정의되었습니다.
261-284: 테두리 색상 유틸리티 클래스 적절 적용
.seed-box-border와-top/ bottom/ left/ right클래스가 각각border-color속성만을 담당하며 유연한 컬러 지정이 가능합니다.
286-300: Inset 및 Gap 유틸리티 클래스 적절 적용
.seed-box-inset와.seed-box-gap이 CSS 변수로 제어되어 간편한 여백 및 위치 설정을 지원합니다.
302-310: Flex 성장/축소 유틸리티 클래스 적절 적용
.seed-box-grow,.seed-box-shrink가flex-grow/flex-shrink만을 담당하여 플렉스 아이템 크기 조정에 유용합니다.
312-330: 높이/너비 유틸리티 클래스 적절 적용
.seed-box-height/ max-height/ min-height,.seed-box-width/ max-width/ min-width가 CSS 변수 기반으로 정의되어 있으며, 레이아웃 유연성을 보장합니다.
342-350: 배경/텍스트 색상 유틸리티 클래스 적절 적용
.seed-box-background,.seed-box-color가background-color와color속성만을 분리하여 정의하고 있어 명확합니다.
| const { style } = createStyleProps({ | ||
| minWidth: `calc(${100 / childrenArray.length}% - ${handleDimension(gap)} / ${childrenArray.length})`, | ||
| flexGrow: 1, | ||
| }); |
There was a problem hiding this comment.
🛠️ Refactor suggestion
gap가 정의되지 않았을 때 잘못된 CSS 계산식이 생성됩니다
handleDimension(gap)이 undefined를 반환하면 calc(… - undefined / …) 형태가 되어 브라우저에서
무효 CSS 값이 됩니다. gap이 없을 때는 0으로 대체하거나 calc 자체를 사용하지 않는 방식으로
보완해 주세요.
- const { style } = createStyleProps({
- minWidth: `calc(${100 / childrenArray.length}% - ${handleDimension(gap)} / ${childrenArray.length})`,
+ const { style, className } = createStyleProps({
+ minWidth: gap
+ ? `calc(${100 / childrenArray.length}% - ${handleDimension(gap)} / ${childrenArray.length})`
+ : `${100 / childrenArray.length}%`,또한 createStyleProps가 반환하는 className을 사용하지 않아 클래스-기반 유틸리티가 적용되지
않습니다. 아래와 같이 Slot에 전달해 주세요.
- <Slot style={style}>{childrenArray[0]}</Slot>
+ <Slot className={className} style={style}>
+ {childrenArray[0]}
+ </Slot>📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| const { style } = createStyleProps({ | |
| minWidth: `calc(${100 / childrenArray.length}% - ${handleDimension(gap)} / ${childrenArray.length})`, | |
| flexGrow: 1, | |
| }); | |
| const { style, className } = createStyleProps({ | |
| minWidth: gap | |
| ? `calc(${100 / childrenArray.length}% - ${handleDimension(gap)} / ${childrenArray.length})` | |
| : `${100 / childrenArray.length}%`, | |
| flexGrow: 1, | |
| }); | |
| <Slot className={className} style={style}> | |
| {childrenArray[0]} | |
| </Slot> |
| variableResult["--seed-box-background"] && "seed-box-background", | ||
| variableResult["--seed-box-color"] && "seed-box-color", | ||
| variableResult["--seed-box-border-color"] && "seed-box-border-color", | ||
| variableResult["--seed-box-padding"] && "seed-box-padding", | ||
| variableResult["--seed-box-padding-top"] && "seed-box-padding-top", | ||
| variableResult["--seed-box-padding-bottom"] && "seed-box-padding-bottom", | ||
| variableResult["--seed-box-padding-left"] && "seed-box-padding-left", | ||
| variableResult["--seed-box-padding-right"] && "seed-box-padding-right", | ||
| variableResult["--seed-box-radius"] && "seed-box-radius", | ||
| variableResult["--seed-box-radius-top-left"] && "seed-box-radius-top-left", | ||
| variableResult["--seed-box-radius-top-right"] && "seed-box-radius-top-right", | ||
| variableResult["--seed-box-radius-bottom-right"] && "seed-box-radius-bottom-right", | ||
| variableResult["--seed-box-radius-bottom-left"] && "seed-box-radius-bottom-left", | ||
| variableResult["--seed-box-border-width"] && "seed-box-border", |
There was a problem hiding this comment.
border-radius 관련 변수명 불일치로 클래스가 적용되지 않습니다
variableObj에서는 --seed-box-border-radius, --seed-box-border-top-left-radius 등
border- 접두사가 붙은 키를 사용하지만, 클래스 배열에서는 --seed-box-radius 계열을
찾고 있어 조건이 항상 false가 됩니다. 그 결과 radius 관련 유틸리티 클래스가
전혀 붙지 않아 모서리 둥글기 설정이 동작하지 않습니다.
- variableResult["--seed-box-radius"] && "seed-box-radius",
- variableResult["--seed-box-radius-top-left"] && "seed-box-radius-top-left",
- variableResult["--seed-box-radius-top-right"] && "seed-box-radius-top-right",
- variableResult["--seed-box-radius-bottom-right"] && "seed-box-radius-bottom-right",
- variableResult["--seed-box-radius-bottom-left"] && "seed-box-radius-bottom-left",
+ variableResult["--seed-box-border-radius"] && "seed-box-radius",
+ variableResult["--seed-box-border-top-left-radius"] && "seed-box-radius-top-left",
+ variableResult["--seed-box-border-top-right-radius"] && "seed-box-radius-top-right",
+ variableResult["--seed-box-border-bottom-right-radius"] && "seed-box-radius-bottom-right",
+ variableResult["--seed-box-border-bottom-left-radius"] && "seed-box-radius-bottom-left",수정 후 radius 관련 클래스가 정상적으로 추가되는지 e2e 테스트나 스냅샷 테스트로
검증해 주세요.
📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| variableResult["--seed-box-background"] && "seed-box-background", | |
| variableResult["--seed-box-color"] && "seed-box-color", | |
| variableResult["--seed-box-border-color"] && "seed-box-border-color", | |
| variableResult["--seed-box-padding"] && "seed-box-padding", | |
| variableResult["--seed-box-padding-top"] && "seed-box-padding-top", | |
| variableResult["--seed-box-padding-bottom"] && "seed-box-padding-bottom", | |
| variableResult["--seed-box-padding-left"] && "seed-box-padding-left", | |
| variableResult["--seed-box-padding-right"] && "seed-box-padding-right", | |
| variableResult["--seed-box-radius"] && "seed-box-radius", | |
| variableResult["--seed-box-radius-top-left"] && "seed-box-radius-top-left", | |
| variableResult["--seed-box-radius-top-right"] && "seed-box-radius-top-right", | |
| variableResult["--seed-box-radius-bottom-right"] && "seed-box-radius-bottom-right", | |
| variableResult["--seed-box-radius-bottom-left"] && "seed-box-radius-bottom-left", | |
| variableResult["--seed-box-border-width"] && "seed-box-border", | |
| variableResult["--seed-box-background"] && "seed-box-background", | |
| variableResult["--seed-box-color"] && "seed-box-color", | |
| variableResult["--seed-box-border-color"] && "seed-box-border-color", | |
| variableResult["--seed-box-padding"] && "seed-box-padding", | |
| variableResult["--seed-box-padding-top"] && "seed-box-padding-top", | |
| variableResult["--seed-box-padding-bottom"] && "seed-box-padding-bottom", | |
| variableResult["--seed-box-padding-left"] && "seed-box-padding-left", | |
| variableResult["--seed-box-padding-right"] && "seed-box-padding-right", | |
| - variableResult["--seed-box-radius"] && "seed-box-radius", | |
| - variableResult["--seed-box-radius-top-left"] && "seed-box-radius-top-left", | |
| - variableResult["--seed-box-radius-top-right"] && "seed-box-radius-top-right", | |
| - variableResult["--seed-box-radius-bottom-right"] && "seed-box-radius-bottom-right", | |
| - variableResult["--seed-box-radius-bottom-left"] && "seed-box-radius-bottom-left", | |
| + variableResult["--seed-box-border-radius"] && "seed-box-radius", | |
| + variableResult["--seed-box-border-top-left-radius"] && "seed-box-radius-top-left", | |
| + variableResult["--seed-box-border-top-right-radius"] && "seed-box-radius-top-right", | |
| + variableResult["--seed-box-border-bottom-right-radius"] && "seed-box-radius-bottom-right", | |
| + variableResult["--seed-box-border-bottom-left-radius"] && "seed-box-radius-bottom-left", | |
| variableResult["--seed-box-border-width"] && "seed-box-border", |
| ".seed-block": { | ||
| display: "block", | ||
| }, | ||
| ".seed-flex": { | ||
| display: "flex", | ||
| }, | ||
| ".seed-inline-flex": { | ||
| display: "inline-flex", | ||
| }, | ||
| ".seed-inline-block": { | ||
| display: "inline-block", | ||
| }, | ||
| ".seed-none": { | ||
| display: "none", | ||
| }, |
There was a problem hiding this comment.
🛠️ Refactor suggestion
유틸리티 클래스 정의를 코드 생성으로 전환 고려
JS 객체에 수십 개의 문자열 키를 수작업으로 넣으면
- 오타가 정적 타이핑/린팅으로 잡히지 않고
- 동일 키 중복 시 마지막 값으로 덮어쓰기 되어 버그 추적이 어렵습니다.
예시 TypeScript 헬퍼:
+function addDisplay(name: string, value: CSS.Property.Display) {
+ styles[`.seed-${name}`] = { display: value };
+}
+["block","flex","inline-flex","inline-block","none"].forEach(v => addDisplay(v, v as any));같은 패턴을 position, flex-direction 등에도 적용하면 유지보수가 훨씬 수월해집니다.
| width: "var(--seed-box-width)", | ||
|
|
||
| "--seed-box-top": "initial", | ||
| "--seed-box-bottom": "initial", | ||
| "--seed-box-left": "initial", | ||
| "--seed-box-right": "initial", | ||
| }, | ||
| ".seed-box-radius": { | ||
| "--seed-box-radius": "0", | ||
| borderRadius: "var(--seed-box-radius)", | ||
| }, | ||
| ".seed-box-radius-top-left": { | ||
| "--seed-box-radius-top-left": "var(--seed-box-radius)", | ||
| borderTopLeftRadius: "var(--seed-box-radius-top-left)", | ||
| }, | ||
| ".seed-box-radius-top-right": { | ||
| "--seed-box-radius-top-right": "var(--seed-box-radius)", | ||
| borderTopRightRadius: "var(--seed-box-radius-top-right)", | ||
| }, | ||
| ".seed-box-radius-bottom-left": { | ||
| "--seed-box-radius-bottom-left": "var(--seed-box-radius)", | ||
| borderBottomLeftRadius: "var(--seed-box-radius-bottom-left)", | ||
| }, | ||
| ".seed-box-radius-bottom-right": { | ||
| "--seed-box-radius-bottom-right": "var(--seed-box-radius)", | ||
| borderBottomRightRadius: "var(--seed-box-radius-bottom-right)", | ||
| }, | ||
| ".seed-box-border": { | ||
| "--seed-box-border-color": "initial", | ||
| borderColor: "var(--seed-box-border-color)", | ||
| }, | ||
| ".seed-box-border-top": { | ||
| "--seed-box-border-top-color": "var(--seed-box-border-color)", | ||
| borderTopColor: "var(--seed-box-border-top-color)", | ||
| }, | ||
| ".seed-box-border-bottom": { | ||
| "--seed-box-border-bottom-color": "var(--seed-box-border-color)", | ||
| borderBottomColor: "var(--seed-box-border-bottom-color)", | ||
| }, | ||
| ".seed-box-border-left": { | ||
| "--seed-box-border-left-color": "var(--seed-box-border-color)", | ||
| borderLeftColor: "var(--seed-box-border-left-color)", | ||
| }, | ||
| ".seed-box-border-right": { | ||
| "--seed-box-border-right-color": "var(--seed-box-border-color)", | ||
| borderRightColor: "var(--seed-box-border-right-color)", | ||
| }, | ||
| ".seed-box-inset": { | ||
| "--seed-box-top": "0", | ||
| "--seed-box-right": "0", | ||
| "--seed-box-bottom": "0", | ||
| "--seed-box-left": "0", | ||
| top: "var(--seed-box-top)", | ||
| right: "var(--seed-box-right)", | ||
| bottom: "var(--seed-box-bottom)", | ||
| left: "var(--seed-box-left)", | ||
| right: "var(--seed-box-right)", | ||
|
|
||
| "--seed-box-border-radius": "initial", | ||
| "--seed-box-border-bottom-left-radius": "var(--seed-box-border-radius)", | ||
| "--seed-box-border-bottom-right-radius": "var(--seed-box-border-radius)", | ||
| "--seed-box-border-top-left-radius": "var(--seed-box-border-radius)", | ||
| "--seed-box-border-top-right-radius": "var(--seed-box-border-radius)", | ||
| borderBottomLeftRadius: "var(--seed-box-border-bottom-left-radius)", | ||
| borderBottomRightRadius: "var(--seed-box-border-bottom-right-radius)", | ||
| borderTopLeftRadius: "var(--seed-box-border-top-left-radius)", | ||
| borderTopRightRadius: "var(--seed-box-border-top-right-radius)", | ||
|
|
||
| "--seed-box-display": "block", | ||
| "--seed-box-position": "initial", | ||
| display: "var(--seed-box-display)", | ||
| position: "var(--seed-box-position)", | ||
|
|
||
| "--seed-box-overflow-x": "initial", | ||
| "--seed-box-overflow-y": "initial", | ||
| overflowX: "var(--seed-box-overflow-x)", | ||
| overflowY: "var(--seed-box-overflow-y)", | ||
|
|
||
| "--seed-box-flex-grow": "initial", | ||
| "--seed-box-flex-shrink": "initial", | ||
| flexGrow: "var(--seed-box-flex-grow)", | ||
| flexShrink: "var(--seed-box-flex-shrink)", | ||
|
|
||
| "--seed-box-flex-direction": "initial", | ||
| "--seed-box-flex-wrap": "initial", | ||
| "--seed-box-justify-content": "initial", | ||
| "--seed-box-align-items": "stretch", | ||
| "--seed-box-align-content": "stretch", | ||
| "--seed-box-align-self": "auto", | ||
| }, | ||
| ".seed-box-gap": { | ||
| "--seed-box-gap": "initial", | ||
| flexDirection: "var(--seed-box-flex-direction)", | ||
| flexWrap: "var(--seed-box-flex-wrap)", | ||
| justifyContent: "var(--seed-box-justify-content)", | ||
| alignItems: "var(--seed-box-align-items)", | ||
| alignContent: "var(--seed-box-align-content)", | ||
| alignSelf: "var(--seed-box-align-self)", | ||
| gap: "var(--seed-box-gap)", | ||
| }, |
There was a problem hiding this comment.
커스텀 프로퍼티 초기값 ‑ SSR Flash 방지
다수 유틸리티가 --seed-*-* : initial을 기본값으로 둡니다.
서버 렌더링 후 클라이언트에서 클래스가 붙기 전까지 한 프레임 동안 ‘initial 값’이 적용되면서 레이아웃 플래시가 발생할 수 있습니다.
초기값을 실제 기대 디폴트(예: 0, auto, transparent)로 지정하면 FOUC를 줄일 수 있습니다.
Summary by CodeRabbit
New Features
Refactor
.seed-box클래스를 제거하고, 유틸리티 클래스 기반의 스타일링 방식으로 전환되었습니다.