fix(bun-plugin): emit extracted CSS from clean checkouts

[owjs3901]

문제

bun-plugin이 추출한 CSS를 버린다.

writeDataFiles()는 CSS 디렉토리만 만들고, loadSourceFile()은 codeExtract 결과의 스타일을 기록하지 않는다. 그 결과 df/devup-ui/devup-ui.css가 생성되지 않는다.

소스는 이미 주입된 CSS import를 경로 없는 가상 모듈(src/css-id.ts)로 해석해 Bun 런타임 로딩과 워크트리 간 트랜스파일러 캐시 격리를 해결해 두었다. 다만 스타일시트 자체를 쓰는 단계가 없다.

다른 플러그인과의 대조

플러그인	CSS 처리
Next	getCss(null, false)로 초기화 후 로더/코디네이터로 갱신
Webpack	watch 초기 기록, 소스 로더에서 추출 CSS 기록, 빌드 후 최종 시트
Vite	디렉토리 선생성 후 초기 시트, 변환 중 구체화, getCss로 마감
Rsbuild	변환 중 스타일시트 import 구체화, CSS transform으로 제공
Bun	디렉토리만 생성, 추출 CSS 폐기

수정

Bun은 singleCss = true라 산출물이 df/devup-ui/devup-ui.css 하나다.

// 디렉토리 생성 직후 초기화
await writeFile(join(cssDir, 'devup-ui.css'), getCss(null, false), 'utf-8')

// 추출 직후 갱신
writeFileSync(join(cssDir, 'devup-ui.css'), getCss(null, false), 'utf-8')

추출 후 갱신에 동기 쓰기를 쓴 이유는 주석으로 남겼다. 동시 소스 로드가 최신 시트를 이전 시트로 덮어쓰는 것을 막는다.

빈 플레이스홀더로 대체하지 않았다. Bun의 가상 런타임 모듈은 의도적으로 CSS를 담지 않으므로 플레이스홀더만 두면 스타일이 그대로 버려진다. 캐시 격리를 위한 가상 해석은 유지했다.

다른 플러그인의 동작은 변경하지 않았다. 방출 시점과 로더가 서로 달라 공통 유틸로 묶지 않았다.

회귀 테스트

packages/bun-plugin/__regression__/css-emit.bun.ts를 추가하고 test:regression에 연결했다.

df가 없는 임시 디렉토리에서 격리된 Bun 프로세스로 실행하며, 빌드된 플러그인과 실제 WASM을 쓴다. 테마 유무별 초기 방출, 서로 다른 스타일 8개의 병렬 추출, CSS import를 확인한다. 콜드 스타트 검증을 위해 이 케이스들만 트랜스파일러 캐시를 끄고, 기존 worktree-isolation 회귀는 공유 캐시를 계속 사용한다.

검증 (Windows, Bun 1.4.1)

수정 전 RED: 기존 2개 통과, 신규 3개는 스타일시트 부재로 실패(false / ENOENT).

수정 후:

• bun run --filter @devup-ui/bun-plugin test:regression: 5 pass / 0 fail
• bun run test: 5180 pass / 0 fail, 87 snapshots, 함수·라인 커버리지 100%
• Rust 커버리지 98.21% (8572/8728, +0.00%)
• bun run lint: 통과 (format, Clippy, ESLint)

커버리지 설정과 기존 단언은 변경하지 않았다.

Tarpaulin과 Clippy를 동시 실행하면 Windows에서 target fingerprint 파일이 일시적으로 사라져 검증 명령을 순차 재실행했다.

발견 경위

girok-space에서 컴포넌트를 import하는 테스트 파일이 모듈 로드 단계에서 대량으로 실패하던 것을 추적하다 발견했다. 해당 저장소에서 스타일시트를 수동 생성하자 124 pass / 466 fail → 185 pass / 413 fail로 61개가 살아났다.

[github-actions]

Changepacks

@devup-ui/bun-plugin@1.0.17 - packages/bun-plugin/package.json

Maybe you forgot to write the following files to the latest version

[codecov]

Codecov Report

✅ All modified and coverable lines are covered by tests.

🚀 New features to boost your workflow:

• ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
• 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.