Skip to content

feat: update recipe stylesheets handling #667

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Merged
malangcat merged 1 commit into from
Apr 22, 2025
Merged

feat: update recipe stylesheets handling #667

malangcat merged 1 commit into from
Apr 22, 2025

Conversation

@malangcat
Copy link
Contributor

@malangcat malangcat commented Apr 22, 2025 •
edited by coderabbitai bot
Loading

Summary by CodeRabbit

  • New Features

    • 각 CSS 레시피 모듈에 해당 CSS 파일이 직접 임포트되어 스타일이 자동으로 적용됩니다.

  • Chores

    • 더 이상 사용하지 않는 플러그인 및 관련 의존성이 패키지와 설정 파일에서 제거되었습니다.
    • 불필요한 메타데이터 및 설정 파일이 정리되었습니다.

  • Refactor

    • 코드 생성 함수가 CSS 임포트 옵션을 지원하도록 개선되었습니다.

@changeset-bot
Copy link

changeset-bot bot commented Apr 22, 2025 •
edited
Loading

🦋 Changeset detected

Latest commit: cbb6d6d

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 8 packages
Name Type
@seed-design/stackflow Patch
@seed-design/react Patch
@seed-design/css Patch
@seed-design/figma Patch
@seed-design/rsbuild-plugin Patch
@seed-design/vite-plugin Patch
@seed-design/webpack-plugin Patch
@seed-design/mcp Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

@coderabbitai
Copy link
Contributor

coderabbitai bot commented Apr 22, 2025 •
edited
Loading

Walkthrough

이번 변경에서는 각 CSS 레시피 모듈에 해당 CSS 파일을 직접 import하는 방식으로 스타일시트 의존성을 명시적으로 표현하도록 업데이트되었습니다. 이를 위해 여러 CSS 레시피 파일 상단에 CSS import 구문이 추가되었고, 기존에 사용되던 Rollup 플러그인(@seed-design/qvism-rollup-plugin)과 관련된 코드, 타입 선언, 패키지 의존성, Vite 플러그인 설정 등이 모두 제거되었습니다. 또한, JS 코드 생성 함수에 CSS import를 제어할 수 있는 옵션이 추가되었습니다. 변경사항은 주로 의존성 관리와 빌드 설정에 집중되어 있습니다.

Changes

파일/경로 그룹 변경 요약
.changeset/wild-shoes-train.md 패치 레벨 변경 기록 추가: 스타일시트 의존성 직접 명시로 레시피 업데이트 내용 기록
ecosystem/qvism/rollup-plugin/index.d.ts,
ecosystem/qvism/rollup-plugin/index.mjs,
ecosystem/qvism/rollup-plugin/package.json		 qvism 롤업 플러그인 전체 삭제(코드, 타입, 패키지 메타데이터)
packages/react/package.json,
packages/stackflow/package.json		 qvism 롤업 플러그인 devDependencies에서 제거
packages/react/vite.config.mts,
packages/stackflow/vite.config.mts		 Vite 설정에서 qvism 플러그인 import 및 사용 코드 제거
ecosystem/qvism/core/src/js.ts JS 코드 생성 함수에 importCss 옵션 추가, CSS import 구문 조건부 삽입 기능 도입
packages/css/recipes/*.mjs 각 레시피 JS 파일 상단에 대응 CSS 파일 import 구문 추가(코드/로직 변경 없음)

Sequence Diagram(s)

sequenceDiagram
    participant User
    participant RecipeModule
    participant CSSFile

    User->>RecipeModule: import 레시피 JS 모듈
    RecipeModule->>CSSFile: import './[recipe].css'
    CSSFile-->>RecipeModule: 스타일 적용
    RecipeModule-->>User: 스타일이 적용된 레시피 기능 제공
Loading

Poem

🐇
CSS는 이제 직접 불러와,
플러그인은 조용히 안녕 인사!
레시피마다 스타일이 쏙—
깔끔해진 모듈, 토끼도 뿅!
import 한 줄로 멋이 피어나,
오늘도 코드밭에 봄이 왔나 봐.
🥕✨

📜 Recent review details

Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between d302a65 and cbb6d6d.

⛔ Files ignored due to path filters (1)
  • bun.lock is excluded by !**/*.lock
📒 Files selected for processing (52)
  • .changeset/wild-shoes-train.md (1 hunks)
  • ecosystem/qvism/core/src/js.ts (5 hunks)
  • ecosystem/qvism/rollup-plugin/index.d.ts (0 hunks)
  • ecosystem/qvism/rollup-plugin/index.mjs (0 hunks)
  • ecosystem/qvism/rollup-plugin/package.json (0 hunks)
  • packages/css/recipes/action-button.mjs (1 hunks)
  • packages/css/recipes/action-chip.mjs (1 hunks)
  • packages/css/recipes/action-sheet-item.mjs (1 hunks)
  • packages/css/recipes/action-sheet.mjs (1 hunks)
  • packages/css/recipes/app-bar-main.mjs (1 hunks)
  • packages/css/recipes/app-bar.mjs (1 hunks)
  • packages/css/recipes/app-screen.mjs (1 hunks)
  • packages/css/recipes/avatar-stack.mjs (1 hunks)
  • packages/css/recipes/avatar.mjs (1 hunks)
  • packages/css/recipes/badge.mjs (1 hunks)
  • packages/css/recipes/bottom-sheet.mjs (1 hunks)
  • packages/css/recipes/callout.mjs (1 hunks)
  • packages/css/recipes/checkbox.mjs (1 hunks)
  • packages/css/recipes/chip-tabs.mjs (1 hunks)
  • packages/css/recipes/control-chip.mjs (1 hunks)
  • packages/css/recipes/dialog.mjs (1 hunks)
  • packages/css/recipes/extended-action-sheet-item.mjs (1 hunks)
  • packages/css/recipes/extended-action-sheet.mjs (1 hunks)
  • packages/css/recipes/extended-fab.mjs (1 hunks)
  • packages/css/recipes/fab.mjs (1 hunks)
  • packages/css/recipes/help-bubble.mjs (1 hunks)
  • packages/css/recipes/identity-placeholder.mjs (1 hunks)
  • packages/css/recipes/inline-banner.mjs (1 hunks)
  • packages/css/recipes/link-content.mjs (1 hunks)
  • packages/css/recipes/manner-temp-badge.mjs (1 hunks)
  • packages/css/recipes/manner-temp.mjs (1 hunks)
  • packages/css/recipes/notification-badge-positioner.mjs (1 hunks)
  • packages/css/recipes/notification-badge.mjs (1 hunks)
  • packages/css/recipes/progress-circle.mjs (1 hunks)
  • packages/css/recipes/pull-to-refresh.mjs (1 hunks)
  • packages/css/recipes/radio.mjs (1 hunks)
  • packages/css/recipes/reaction-button.mjs (1 hunks)
  • packages/css/recipes/segmented-control.mjs (1 hunks)
  • packages/css/recipes/select-box-group.mjs (1 hunks)
  • packages/css/recipes/select-box.mjs (1 hunks)
  • packages/css/recipes/skeleton.mjs (1 hunks)
  • packages/css/recipes/snackbar-region.mjs (1 hunks)
  • packages/css/recipes/snackbar.mjs (1 hunks)
  • packages/css/recipes/switch.mjs (1 hunks)
  • packages/css/recipes/tabs.mjs (1 hunks)
  • packages/css/recipes/text-field.mjs (1 hunks)
  • packages/css/recipes/text.mjs (1 hunks)
  • packages/css/recipes/toggle-button.mjs (1 hunks)
  • packages/react/package.json (0 hunks)
  • packages/react/vite.config.mts (0 hunks)
  • packages/stackflow/package.json (0 hunks)
  • packages/stackflow/vite.config.mts (0 hunks)
💤 Files with no reviewable changes (7)
  • packages/stackflow/package.json
  • packages/react/package.json
  • packages/stackflow/vite.config.mts
  • packages/react/vite.config.mts
  • ecosystem/qvism/rollup-plugin/package.json
  • ecosystem/qvism/rollup-plugin/index.d.ts
  • ecosystem/qvism/rollup-plugin/index.mjs
🧰 Additional context used
🧬 Code Graph Analysis (1)
ecosystem/qvism/core/src/js.ts (1)
ecosystem/qvism/core/src/types.ts (2)
  • RecipeDefinition (91-97)
  • RecipeVariantRecord (85-85)
⏰ Context from checks skipped due to timeout of 90000ms (3)
  • GitHub Check: Deploy Seed Design V3 Docs
  • GitHub Check: chromatic-deployment
  • GitHub Check: Analyze (javascript)
🔇 Additional comments (54)
packages/css/recipes/extended-action-sheet-item.mjs (1)

1-1: 스타일 종속성 명시
extended-action-sheet-item.css 파일을 직접 import하여 스타일 의존성을 명확히 표현했습니다.

packages/css/recipes/action-sheet-item.mjs (1)

1-1: CSS import 추가 확인
action-sheet-item.css를 모듈 상단에 import하여 스타일 종속성을 분명히 드러냈습니다.

packages/css/recipes/fab.mjs (1)

1-1: 스타일시트 import 적용
fab.css를 직접 import하여 FAB 레시피 모듈의 스타일 의존성을 명시적으로 처리했습니다.

packages/css/recipes/snackbar-region.mjs (1)

1-1: 명시적 CSS import 도입
snackbar-region.css import 추가로 스타일 의존성이 모듈 내에 직접 선언되었습니다.

packages/css/recipes/tabs.mjs (1)

1-1: CSS import 구문 추가
tabs.css를 상단에 import하여 탭 컴포넌트의 스타일 로드를 명확히 보장합니다.

packages/css/recipes/skeleton.mjs (1)

1-1:

Details

❓ Verification inconclusive

CSS 파일 가져오기 및 번들러 설정 확인
skeleton.mjs 모듈 상단에 import './skeleton.css';가 추가되었습니다. 해당 경로에 skeleton.css 파일이 실제로 존재하는지 확인하고, 번들러(CSS 로더)가 MJS에서의 CSS side‑effect import를 처리할 수 있도록 설정되어 있는지 검증해주세요.

🏁 Script executed:

#!/bin/bash
# Verify that skeleton.css exists under packages/css/recipes
fd skeleton.css packages/css/recipes

Length of output: 72

skeleton.css 파일 존재 확인됨 – 번들러 설정 검증 요청

  • packages/css/recipes/skeleton.css 파일이 정상적으로 존재함을 확인했습니다.
  • MJS 모듈에서 CSS 사이드 이펙트(import './skeleton.css')를 올바르게 처리할 수 있도록 번들러(CSS 로더/플러그인) 설정이 되어 있는지 검증해주세요.
packages/css/recipes/badge.mjs (1)

1-1:

Details

✅ Verification successful

Badge 레시피 CSS import 경로 및 존재 여부 확인
badge.mjs 상단에 import './badge.css';가 추가되었습니다. 파일 경로가 정확하고, 저장소 내에 badge.css 파일이 존재하는지 확인해주세요.

🏁 Script executed:

#!/bin/bash
# Verify that badge.css exists under packages/css/recipes
fd badge.css packages/css/recipes

Length of output: 153

Badge 레시피 CSS import 경로 확인 완료
packages/css/recipes/badge.css 파일이 존재함을 확인했습니다. import 경로가 정확하여 추가 작업이 필요 없습니다.

packages/css/recipes/app-screen.mjs (1)

1-1:

Details

❓ Verification inconclusive

AppScreen 레시피 스타일시트 import 확인
app-screen.mjs 최상단에 import './app-screen.css';가 추가되었습니다. app-screen.css 파일 위치가 올바른지, 그리고 해당 CSS가 빌드 프로세스에서 잘 처리되는지 검증해주세요.

🏁 Script executed:

#!/bin/bash
# Verify that app-screen.css exists under packages/css/recipes
fd app-screen.css packages/css/recipes

Length of output: 76

🏁 Script executed:

#!/bin/bash
# 번들러 설정 파일 검색
fd --ignore-case --glob "webpack.config.*" --glob "rollup.config.*" --glob "vite.config.*"

# 검색된 설정 파일에서 CSS 처리 관련 설정 확인
for file in $(fd --ignore-case --glob "webpack.config.*" --glob "rollup.config.*" --glob "vite.config.*"); do
  echo "=== $file ==="
  rg -n "css" "$file"
done

Length of output: 512

CSS 파일 존재 확인 및 번들러 설정 검토 필요
packages/css/recipes/app-screen.mjs 최상단에 추가된 import './app-screen.css'; 경로 상에 packages/css/recipes/app-screen.css 파일이 실제로 존재함을 확인했습니다. 다만, 프로젝트 루트 또는 패키지별 번들러 설정(예: webpack.config.js, vite.config.js 등)에서 CSS import를 처리하도록 설정되어 있는지 확인이 필요합니다.

확인할 사항:

  • 번들러 설정 파일 위치 및 이름(루트 또는 각 패키지 폴더 내)
  • 해당 설정 파일에서 CSS 관련 로더/플러그인(css-loader/postcss-loader, Vite의 경우 @vitejs/plugin-vue 등) 적용 여부
  • 빌드 후 산출물(dist 등)에 app-screen.css가 포함되는지
packages/css/recipes/callout.mjs (1)

1-1:

Details

✅ Verification successful

Callout 레시피 CSS import 경로 및 파일 존재 여부 확인
callout.mjs의 최상단에 import './callout.css';가 추가되었습니다. 실제로 해당 경로에 callout.css가 저장되어 있는지 확인해주세요.

🏁 Script executed:

#!/bin/bash
# Verify that callout.css exists under packages/css/recipes
fd callout.css packages/css/recipes

Length of output: 70

Callout 레시피 CSS import 경로 확인 완료
packages/css/recipes/callout.css 파일이 존재하며, import './callout.css'; 경로가 올바릅니다.

packages/css/recipes/select-box.mjs (1)

1-1:

Details

✅ Verification successful

SelectBox 레시피 CSS import 일관성 및 파일 존재 확인
select-box.mjs 상단에 import './select-box.css';가 추가되었습니다. 경로가 정확하며, 저장소 내에 select-box.css 파일이 존재하는지 검증해주세요.

🏁 Script executed:

#!/bin/bash
# Verify that select-box.css exists under packages/css/recipes
fd select-box.css packages/css/recipes

Length of output: 76

SelectBox 레시피 CSS 임포트 경로 검증 완료
packages/css/recipes/select-box.css 파일이 존재하므로 import 경로가 올바릅니다. 추가 조치가 필요하지 않습니다.

packages/css/recipes/pull-to-refresh.mjs (1)

1-1: CSS import 명시로 스타일 의존성 선언이 명확해졌습니다.

  • ./pull-to-refresh.css 파일 경로가 정확한지, 해당 CSS 파일이 실제로 존재하는지 확인해 주세요.
  • Vite 또는 번들러 설정에서 이 import가 정상으로 처리되는지 테스트가 필요합니다.
packages/css/recipes/extended-fab.mjs (1)

1-1: 스타일시트 import 추가가 PR 의도에 부합합니다.

  • ./extended-fab.css 파일명이 정확한지, 레시피 모듈과 동일 디렉터리에 존재하는지 검증해 주세요.
  • 빌드/번들 과정에서 CSS가 올바르게 포함되는지 확인이 필요합니다.
packages/css/recipes/help-bubble.mjs (1)

1-1: help-bubble 모듈에 스타일 import를 명시적으로 추가한 것은 적절합니다.

  • ./help-bubble.css 경로가 올바른지, 파일이 누락되지 않았는지 확인해 주세요.
  • Vite 설정에서 이 import가 예상대로 반영되는지 테스트해주세요.
packages/css/recipes/checkbox.mjs (1)

1-1: checkbox 레시피에 CSS import가 정확히 추가되었습니다.

  • ./checkbox.css 파일 경로 및 파일명이 정확한지 검증해 주세요.
  • 빌드 시점에 CSS가 정상으로 번들링되는지 확인이 필요합니다.
packages/css/recipes/chip-tabs.mjs (1)

1-1: chip-tabs 모듈의 스타일 의존성이 명시적으로 선언되었습니다.

  • ./chip-tabs.css가 실제로 존재하는지, 철자 및 경로가 정확한지 확인해 주세요.
  • 번들러 또는 런타임 환경에서 CSS import가 제대로 동작하는지 테스트를 권장합니다.
packages/css/recipes/action-chip.mjs (1)

1-1: action-chip 모듈: CSS 임포트 추가
모듈 상단에 action-chip.css를 임포트하여 스타일 의존성을 명시적으로 표현했습니다. 변경 사항이 의도한 대로 적용되었으며, 사용 중인 번들러(Vite)가 CSS 임포트를 정상적으로 처리하는지 확인해주세요.

packages/css/recipes/dialog.mjs (1)

1-1: dialog 모듈: CSS 임포트 추가
모듈 상단에 dialog.css 임포트를 추가하여 스타일 의존성을 명시적으로 관리하도록 수정했습니다. Vite 설정에서 해당 CSS 파일이 로드되는지 확인 바랍니다.

packages/css/recipes/link-content.mjs (1)

1-1: link-content 모듈: CSS 임포트 추가
link-content.css 임포트를 통해 스타일 의존성이 명확히 명시되었습니다. 변경 사항이 바람직하며, CSS가 적절히 번들링되는지 검증 필요합니다.

packages/css/recipes/app-bar-main.mjs (1)

1-1: app-bar-main 모듈: CSS 임포트 추가
app-bar-main.css 파일을 모듈 상단에 임포트하여 스타일 의존성을 직접 표현했습니다. 빌드 설정에서 CSS 파일이 제대로 포함되는지 확인 부탁드립니다.

packages/css/recipes/text.mjs (1)

1-1: text 모듈: CSS 임포트 추가
text.css 임포트를 추가하여 스타일 의존성을 명확히 관리하도록 변경되었습니다. 번들러가 해당 CSS를 로드하는지 검증해주세요.

packages/css/recipes/switch.mjs (1)

1-1: 명시적 CSS import 추가 확인
switch.css 파일을 모듈 최상단에 import함으로써 스타일 의존성이 명확해졌습니다. 파일 경로와 이름이 모듈 위치와 일치하는지 확인되었습니다.

packages/css/recipes/action-button.mjs (1)

1-1: 명시적 CSS import 추가 확인
action-button.css 파일을 모듈 최상단에 import하여 스타일 의존성을 직접 표현했습니다. 경로 및 파일명이 올바른지 검증되었습니다.

packages/css/recipes/avatar.mjs (1)

1-1: 명시적 CSS import 추가 확인
avatar.css 파일을 모듈 최상단에 import하여 스타일 의존성을 명확히 했습니다. 경로와 파일명이 일치하는지 확인되었습니다.

packages/css/recipes/inline-banner.mjs (1)

1-1: 명시적 CSS import 추가 확인
inline-banner.css 파일을 모듈 최상단에 import하여 스타일 의존성을 직접 선언했습니다. 경로 및 파일명 일치 여부를 검토했습니다.

packages/css/recipes/reaction-button.mjs (1)

1-1: 명시적 CSS import 추가 확인
reaction-button.css 파일을 모듈 최상단에 import하여 스타일 의존성을 명확히 했습니다. 파일 경로와 이름이 올바른지 확인했습니다.

packages/css/recipes/toggle-button.mjs (1)

1-1: CSS import 추가: 스타일 의존성 명시
toggle-button 레시피 모듈 최상단에 CSS 파일을 직접 import하여 빌드 시 스타일이 누락되지 않도록 보장했습니다.

packages/css/recipes/control-chip.mjs (1)

1-1: CSS import 추가: 스타일 의존성 명시
control‑chip 레시피 모듈 최상단에 CSS 파일을 직접 import하여 스타일 의존성을 명시적으로 표현했습니다.

packages/css/recipes/snackbar.mjs (1)

1-1: CSS import 추가: 스타일 의존성 명시
snackbar 레시피 모듈 최상단에 CSS 파일을 import하여 스타일이 올바르게 적용되도록 했습니다.

packages/css/recipes/extended-action-sheet.mjs (1)

1-1: CSS import 추가: 스타일 의존성 명시
extended‑action‑sheet 레시피 모듈 최상단에 CSS 파일을 import하여 관련 스타일이 누락되지 않도록 했습니다.

packages/css/recipes/progress-circle.mjs (1)

1-1: CSS import 추가: 스타일 의존성 명시
progress‑circle 레시피 모듈 최상단에 CSS 파일을 import하여 스타일 의존성을 명시적으로 관리했습니다.

packages/css/recipes/select-box-group.mjs (2)

1-1: CSS 의존성 명시를 위한 import 추가 승인
select-box-group.css를 명시적으로 import하여 스타일 의존성이 명확해졌습니다. 다른 레시피 파일과 일관된 패턴을 잘 따르고 있습니다.

1-1: CSS 파일 존재 여부 및 빌드 포함 검증 요청
추가된 select-box-group.css 파일이 해당 경로에 실제로 존재하며, 빌드 및 배포 번들에 정상 포함되는지 확인해 주세요.

packages/css/recipes/manner-temp-badge.mjs (2)

1-1: CSS import 추가로 스타일 의존성 명확화
manner-temp-badge.css를 명시적으로 import하여 CSS 종속성을 드러낸 점이 PR 목적에 부합합니다.

1-1: CSS 파일 확인 요청
manner-temp-badge.css가 올바른 경로에 위치하며 빌드 및 배포 과정에 포함되는지 검증해 주세요.

packages/css/recipes/segmented-control.mjs (2)

1-1: CSS 의존성 명시로 import 추가 확인
segmented-control.css import를 통해 스타일 종속성이 명시적으로 관리됩니다. 레시피 모듈 업데이트 가이드에 맞는 변경입니다.

1-1: CSS 파일 경로 및 포함 여부 검증 필요
segmented-control.css가 파일 시스템에 존재하고, Vite/Rollup 빌드에 정상 포함되는지 확인 부탁드립니다.

packages/css/recipes/notification-badge.mjs (2)

1-1: 명시적 CSS import 추가 승인
notification-badge.css import로 스타일 의존성이 명확해졌습니다. 코드 생성 로직 변경과 일관됩니다.

1-1: CSS 파일 존재 및 배포 포함 검증
추가된 notification-badge.css가 프로젝트에 존재하며, 빌드 아티팩트에 포함되는지 확인 바랍니다.

packages/css/recipes/action-sheet.mjs (2)

1-1: CSS 의존성 명시: import 추가 적절
action-sheet.css를 import하여 스타일 의존성을 직접 표현한 변경이 적절합니다.

1-1: CSS 파일 확인 요청
action-sheet.css가 올바른 위치에 존재하고, 번들링 시 누락되지 않는지 검증해 주세요.

packages/css/recipes/manner-temp.mjs (1)

1-1: CSS import 명시적 추가 승인
import './manner-temp.css'; 구문이 레시피 모듈 최상단에 올바르게 추가되었습니다. 스타일시트 파일 경로와 파일명이 정확하며, 해당 파일이 존재하는지와 빌드(번들러) 설정이 CSS import를 처리하도록 구성되어 있는지 확인해주세요.

packages/css/recipes/identity-placeholder.mjs (1)

1-1: CSS import 명시적 추가 승인
import './identity-placeholder.css'; 구문이 레시피 모듈 최상단에 올바르게 추가되었습니다. CSS 파일 경로 및 이름이 정확한지, 그리고 번들러 설정이 해당 import를 정상 처리하는지 확인해주세요.

packages/css/recipes/avatar-stack.mjs (1)

1-1: CSS import 명시적 추가 승인
import './avatar-stack.css'; 구문이 올바르게 추가되어 스타일 의존성이 명시되었습니다. CSS 파일이 존재하고, 빌드 설정에서 해당 import를 처리하도록 구성되어 있는지 검증 부탁드립니다.

packages/css/recipes/bottom-sheet.mjs (1)

1-1: CSS import 명시적 추가 승인
import './bottom-sheet.css'; 구문이 레시피 모듈 최상단에 정확히 추가되었습니다. CSS 파일 경로 및 파일명을 다시 한번 확인하고, 번들러가 해당 import를 처리하는지 검증해주세요.

packages/css/recipes/notification-badge-positioner.mjs (1)

1-1: CSS import 명시적 추가 승인
import './notification-badge-positioner.css'; 구문이 올바르게 추가되어 스타일시트 의존성이 명시되었습니다. CSS 파일이 실제로 존재하는지, 그리고 번들러 설정이 이러한 import를 처리하도록 구성되어 있는지 확인 부탁드립니다.

packages/css/recipes/radio.mjs (1)

1-1: 스타일시트 의존성을 명시적으로 추가했습니다.

CSS 파일을 직접 임포트하여 스타일시트 의존성을 명확하게 표현했습니다. 이는 빌드 도구에 의존하지 않고 컴포넌트가 필요한 스타일을 직접 가져오게 하는 좋은 접근 방식입니다.

packages/css/recipes/text-field.mjs (1)

1-1: 스타일시트 의존성을 명시적으로 추가했습니다.

CSS 파일을 직접 임포트함으로써 text-field 레시피가 필요로 하는 스타일을 명확하게 표현했습니다. 이러한 명시적 접근 방식은 의존성 관리를 더 용이하게 만듭니다.

packages/css/recipes/app-bar.mjs (1)

1-1: 스타일시트 의존성을 명시적으로 추가했습니다.

CSS 파일을 직접 임포트함으로써 app-bar 레시피와 관련된 스타일 의존성을 명확하게 표현했습니다. 이는 이전에 플러그인으로 처리되던 스타일 주입 방식보다 더 투명한 접근 방식입니다.

.changeset/wild-shoes-train.md (1)

1-8: 패치 버전 업데이트 및 변경 목적이 명확합니다.

패치 버전 업데이트가 필요한 패키지들이 명확하게 나열되어 있고, 변경 사항의 목적(레시피에서 직접 스타일시트 의존성을 표현)이 간결하게 기술되어 있습니다.

ecosystem/qvism/core/src/js.ts (5)

25-27: 새로운 옵션 파라미터가 추가되었습니다.

코드 생성 함수에 CSS 임포트 제어를 위한 importCss 옵션이 추가되었고 기본값이 true로 설정되어 있습니다. 이는 기존 코드와의 하위 호환성을 유지하면서 새로운 기능을 제공하는 좋은 접근법입니다.

44-46: 조건부 CSS 임포트 기능이 추가되었습니다.

importCss 옵션에 따라 CSS 파일 임포트 구문을 조건부로 추가하는 기능이 구현되었습니다. 이 방식은 레시피 파일마다 직접 스타일시트 의존성을 명시적으로 표현할 수 있게 해줍니다.

79-82: generateRecipeJs 함수에도 동일한 옵션이 추가되었습니다.

generateRecipeJs 함수에도 importCss 옵션이 추가되어 일관성 있는 API를 제공합니다. 이는 슬롯 기반 레시피와 일반 레시피 모두에 대해 동일한 방식으로 스타일시트 의존성을 처리할 수 있게 해줍니다.

96-98: 조건부 CSS 임포트가 일관되게 적용되었습니다.

generateRecipeJs 함수에서도 동일한 방식으로 조건부 CSS 임포트 구문이 구현되었습니다. 이러한 일관성은 코드의 가독성과 유지보수성을 향상시킵니다.

124-132: generateJs 함수에는 변화가 없습니다.

generateJs 함수에서는 options 객체가 그대로 하위 함수로 전달되므로, 추가된 importCss 옵션이 자동으로 사용됩니다. 이는 기존 코드와의 호환성을 유지하면서 새로운 기능을 추가한 좋은 예입니다.

✨ Finishing Touches
  • 📝 Generate Docstrings
🪧 Tips

Chat

There are 3 ways to chat with CodeRabbit:

  • Review comments: Directly reply to a review comment made by CodeRabbit. Example:
    • I pushed a fix in commit <commit_id>, please review it.
    • Generate unit testing code for this file.
    • Open a follow-up GitHub issue for this discussion.
  • Files and specific lines of code (under the "Files changed" tab): Tag @coderabbitai in a new review comment at the desired location with your query. Examples:
    • @coderabbitai generate unit testing code for this file.
    • @coderabbitai modularize this function.
  • PR comments: Tag @coderabbitai in a new PR comment to ask questions about the PR branch. For the best results, please provide a very specific query, as very limited context is provided in this mode. Examples:
    • @coderabbitai gather interesting stats about this repository and render them as a table. Additionally, render a pie chart showing the language distribution in the codebase.
    • @coderabbitai read src/utils.ts and generate unit testing code.
    • @coderabbitai read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.
    • @coderabbitai help me debug CodeRabbit configuration file.

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)

  • @coderabbitai pause to pause the reviews on a PR.
  • @coderabbitai resume to resume the paused reviews.
  • @coderabbitai review to trigger an incremental review. This is useful when automatic reviews are disabled for the repository.
  • @coderabbitai full review to do a full review from scratch and review all the files again.
  • @coderabbitai summary to regenerate the summary of the PR.
  • @coderabbitai generate docstrings to generate docstrings for this PR.
  • @coderabbitai resolve resolve all the CodeRabbit review comments.
  • @coderabbitai configuration to show the current CodeRabbit configuration for the repository.
  • @coderabbitai help to get help.

Other keywords and placeholders

  • Add @coderabbitai ignore anywhere in the PR description to prevent this PR from being reviewed.
  • Add @coderabbitai summary to generate the high-level summary at a specific location in the PR description.
  • Add @coderabbitai anywhere in the PR title to generate the title automatically.

CodeRabbit Configuration File (.coderabbit.yaml)

  • You can programmatically configure CodeRabbit by adding a .coderabbit.yaml file to the root of your repository.
  • Please see the configuration documentation for more information.
  • If your editor has YAML language server enabled, you can add the path at the top of this file to enable auto-completion and validation: # yaml-language-server: $schema=https://coderabbit.ai/integrations/schema.v2.json

Documentation and Community

  • Visit our Documentation for detailed information on how to use CodeRabbit.
  • Join our Discord Community to get help, request features, and share feedback.
  • Follow us on X/Twitter for updates and announcements.

@malangcat
feat: update recipe stylesheets handling
cbb6d6d 
- Added support for directly importing stylesheets in recipe definitions.
- Updated `generateSlotRecipeJs` and `generateRecipeJs` functions to include an `importCss` option.
- Removed the `@seed-design/qvism-rollup-plugin` dependency from multiple package configurations.
- Cleaned up related files and added necessary imports for various recipe components.
@cloudflare-workers-and-pages
Copy link

cloudflare-workers-and-pages bot commented Apr 22, 2025

Deploying seed-design-v3 with  Cloudflare Pages  Cloudflare Pages

Latest commit: cbb6d6d
Status: ✅  Deploy successful!
Preview URL: https://5e821bcb.seed-design.pages.dev
Branch Preview URL: https://recipe-css-import.seed-design.pages.dev

View logs

@malangcat malangcat merged commit c042f90 into dev Apr 22, 2025
8 of 9 checks passed
@malangcat malangcat deleted the recipe-css-import branch April 22, 2025 08:21
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

No reviews

Assignees

No one assigned

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

2 participants

@malangcat