fix: css module 번들 이슈 수정

[noahluftyang]

변경사항

• css 모듈로 정의한 스타일이 제대로 적용되지 않는 문제 수정
• tsup의 css loader에 local-css를 주입하여 올바른 클래스네임을 생성하도록 변경
• 반복되는 tsup config를 모노레포 최상단에 정의하여 각 패키지에서 재사용하도록 수정

시각자료

as-is	to-be

체크리스트

• 기능 명세를 작성하였나요?
• 테스트 코드를 작성하였나요?

추가 논의사항

Summary by CodeRabbit

• 버전 업데이트

  • @sipe-team/typography 패키지 버전이 0.0.2에서 0.0.3-next.0으로 업데이트
  • @sipe-team/badge 패키지 버전이 0.0.1에서 0.0.2-next.0으로 업데이트

• 빌드 구성

  • 중앙화된 tsup.config.ts 구성 파일 도입
  • 여러 패키지의 빌드 설정이 공통 구성으로 통합됨

• 버그 수정

  • CSS 모듈 번들 관련 문제 해결

[changeset-bot]

🦋 Changeset detected

Latest commit: 620784a

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

This PR includes changesets to release 9 packages

Name	Type
@sipe-team/radio-group	Patch
@sipe-team/skeleton	Patch
@sipe-team/divider	Patch
@sipe-team/tooltip	Patch
@sipe-team/switch	Patch
@sipe-team/input	Patch
@sipe-team/badge	Patch
@sipe-team/card	Patch
@sipe-team/side	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]

개요

Walkthrough

이 풀 리퀘스트는 @sipe-team 네임스페이스의 여러 패키지에 대한 광범위한 구성 변경을 포함하고 있습니다. 주요 변경 사항은 중앙화된 tsup.config.ts 빌드 구성 도입, 패키지 버전 업데이트, 그리고 타이포그래피 모듈의 CSS 번들 수정을 포함합니다.

Changes

파일/디렉토리	변경 요약
.changeset/	새로운 변경 세트 파일 추가 및 사전 릴리즈 구성
package.json	tsup 개발 의존성 추가
packages/*/tsup.config.ts	모든 패키지의 빌드 구성을 중앙화된 설정으로 대체
packages/typography/	버전 0.0.2에서 0.0.3-next.0으로 업데이트, CSS 모듈 번들 수정
packages/badge/	버전 0.0.1에서 0.0.2-next.0으로 업데이트

Poem

🐰 빌드 설정의 토끼 춤 🎉
중앙화된 구성으로 깡총깡총
패키지들은 손을 잡고
새로운 버전을 노래해요
코드의 토끼, 즐겁게 뛰어요! 🚀

---

📜 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 dad7ce7 and 620784a.

⛔ Files ignored due to path filters (1)

• pnpm-lock.yaml is excluded by !**/pnpm-lock.yaml

📒 Files selected for processing (18)

• .changeset/eight-kiwis-fix.md (1 hunks)
• .changeset/pre.json (1 hunks)
• .changeset/real-oranges-compete.md (1 hunks)
• package.json (1 hunks)
• packages/Input/tsup.config.ts (1 hunks)
• packages/badge/CHANGELOG.md (1 hunks)
• packages/badge/package.json (1 hunks)
• packages/badge/tsup.config.ts (1 hunks)
• packages/card/tsup.config.ts (1 hunks)
• packages/divider/tsup.config.ts (1 hunks)
• packages/radio-group/tsup.config.ts (1 hunks)
• packages/skeleton/tsup.config.ts (1 hunks)
• packages/switch/tsup.config.ts (1 hunks)
• packages/tooltip/tsup.config.ts (1 hunks)
• packages/typography/CHANGELOG.md (1 hunks)
• packages/typography/package.json (1 hunks)
• packages/typography/tsup.config.ts (1 hunks)
• tsup.config.ts (1 hunks)

✅ Files skipped from review due to trivial changes (16)

• .changeset/eight-kiwis-fix.md
• tsup.config.ts
• packages/skeleton/tsup.config.ts
• packages/tooltip/tsup.config.ts
• packages/badge/package.json
• .changeset/real-oranges-compete.md
• packages/badge/tsup.config.ts
• packages/card/tsup.config.ts
• packages/Input/tsup.config.ts
• packages/typography/tsup.config.ts
• packages/divider/tsup.config.ts
• packages/switch/tsup.config.ts
• packages/typography/CHANGELOG.md
• packages/radio-group/tsup.config.ts
• packages/badge/CHANGELOG.md
• .changeset/pre.json

🔇 Additional comments (3)

package.json (1)

26-26: 빌드 구성 중앙화를 위한 tsup 의존성 추가가 적절해 보입니다.

모노레포의 패키지들 간에 일관된 빌드 설정을 공유할 수 있게 되어 유지보수성이 향상될 것으로 보입니다.

packages/typography/package.json (2)

4-4: 버전 업데이트가 적절히 이루어졌습니다.

CSS 모듈 번들 이슈 수정을 위한 프리릴리즈 버전 업데이트가 semver 규칙을 잘 따르고 있습니다.

---

Line range hint 47-63: CSS 모듈 번들링 설정 검증이 필요합니다.

현재 publishConfig.exports 설정이 CSS 모듈을 올바르게 처리하는지 확인이 필요합니다.

다음 스크립트를 실행하여 tsup 설정과 CSS 모듈 관련 설정을 확인해주세요:

✅ Verification successful

CSS 모듈 설정이 올바르게 구성되어 있습니다.

Typography 컴포넌트의 CSS 모듈 처리가 다음과 같이 적절하게 설정되어 있음을 확인했습니다:

• tsup 설정에서 .css 파일을 local-css 로더로 처리하도록 설정됨
• Typography 컴포넌트에서 Typography.module.css를 올바르게 임포트하여 사용 중
• env.d.ts에서 CSS 모듈 타입 선언이 정상적으로 구성됨

현재 설정으로 CSS 모듈이 올바르게 번들링되어 배포될 것으로 판단됩니다.

🏁 Scripts executed

The following scripts were executed for the analysis:

Script:

#!/bin/bash
# tsup 설정 파일에서 CSS 모듈 관련 설정 확인
rg -A 10 "cssModules|local-css" 

# 빌드 출력 디렉토리에서 CSS 파일 처리 방식 확인
fd -e css . dist/ --exec cat {} 2>/dev/null || echo "dist 디렉토리가 없거나 CSS 파일을 찾을 수 없습니다"

Length of output: 223

---

Script:

#!/bin/bash
# Check the tsup configuration file content
cat tsup.config.ts

# Find any CSS imports or CSS module usage in the codebase
rg -g '*.{ts,tsx}' '\.css' -A 3

# Check package.json for CSS related configurations
cat packages/typography/package.json

Length of output: 5382

---

Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media?

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

🪧 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. (Beta)
• @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.

[froggy1014]

pre-release 처음알았다...

[noahluftyang]

앗 prerelease 모드 끄는거 깜빡했다

[froggy1014]

아 이거 merge되기전에 꺼야하는거야 .. ? 미안 나 몰랐으....

[froggy1014]

버그 수정 확인했습니다. 감사합니다 -