test: build and drive a React 18 app in CI

[owjs3901]

Refs #691 (M 네 번째 PR, React 18 fixture CI). main에서 분기해 #720, #721, #722를 병합한 브랜치입니다. 세 PR이 먼저 병합되어야 합니다. 병합 후에는 이 PR의 차이가 apps/react-18, publish.yml, bun.lock만 남습니다.

요약

React 18.3.1 앱(apps/react-18)을 Vite 플러그인과 UI kit으로 빌드한 다음, 실제 Chromium에서 동작을 확인하는 CI job react-18을 추가합니다. 패키지는 React ^18 || ^19를 peer로 받으므로, React 19 전용 API가 다시 들어오면 이 job이 실패합니다.

확인하는 것

• 화면에 표시된 React.version이 18.로 시작
• ref 전달: Button, Checkbox, Input, Radio, Textarea(UI kit, fix(components): forward refs from the UI kit form components #721)와 styled('input')(생성 컴포넌트, fix(extractor): forward refs from generated styled components #722)의 ref가 실제 DOM 요소를 가리킴
• Select: 열고 옵션을 고르면 onChange 호출 (컨텍스트, 이벤트, 위치 계산)
• Stepper: 증가 버튼으로 값 변경
• 페이지 오류와 콘솔 오류가 하나도 없음
• tsc(React 18 타입)와 vite build 통과

이 fixture로 찾은 버그

• Select와 Stepper가 React 19 전용 <Context value>로 컨텍스트를 제공해, React 18에서 렌더링하자마자 앱이 깨졌습니다(r is not a function). 수정은 #720에 커밋했습니다(d6453d82).

구성

• 워크스페이스 패키지는 자체 테스트를 위해 React 19를 devDependency로 둡니다. 이 앱은 Vite resolve.dedupe와 tsconfig paths로 앱의 React 18 한 벌만 쓰게 하는데, 실제 설치 환경에서 peer가 앱의 React로 풀리는 것과 같습니다.
• 다른 job과 같은 방식으로 캐시하고, publish의 핵심 경로와 별개로 병렬 실행됩니다.

새로 생기는 오류

• 없습니다(CI job 추가).

검증

• 로컬: tsc 통과, vite build 통과, playwright test 1개 통과
• pre-commit(lint, tarpaulin, bun test) 통과

W40 main 반영 (2026-10-06)

• 2026-10-06: main의 a935315c34b45aeda6dc156e29a5c76df51b76bd까지 병합했습니다 (병합 head: 5644a8a6af6d3fd3dce26d054da828b845297cec).
• 충돌 해결: publish.yml의 같은 위치에 추가된 react-18과 vinext-rsc-css-e2e를 별도 작업으로 모두 남겼습니다. YAML 파싱으로 main의 모든 작업·단계가 원본과 동일함을 확인했고 게시 버전과 React peer/devDependency 의도를 함께 유지했습니다.
• 검증: CI37441982913 success; 다섯 검증 작업과 codecov/patch 모두 통과, MERGEABLE/CLEAN. Ubuntu Rust100%(10465/10465), Bun5484 pass/0 fail 및100%, landing 두 모드130개씩, React18 Chromium 실제 시나리오1개 통과. 직렬 빌드/1.99clippy/전체 훅, React18 타입 검사와 프로덕션 빌드, YAML 구조 검사 통과. 기존 React18 호환 코드의 lint 경고11개(오류0개)는 유지되었고 새 소스 오류는 추가되지 않았습니다.
• 새로 생기는 오류: 이번 병합으로 추가되는 오류는 없습니다. 기존 PR의 동작 및 남는 한계는 유지합니다.

2026-10-08 main 11790bef를 병합하여 업데이트했습니다. 충돌 없이 갱신된 부모 PR의 변경과 main의 변경을 모두 보존했습니다.

[github-actions]

Changepacks

@devup-ui/wasm@1.0.83 → 1.0.84 - bindings/devup-ui-wasm/package.json

Patch

• css(a, b) composing classes whose styles the build knows (a const bound to css() in the file, or a css() result another module exports with a rule object every value of which is known) merges their styles: a later part's declaration replaces an earlier one's for the same property, selector, breakpoint and layer, also under conditions (css(base, cond && danger)) and for ||/?? parts, where the classes used to be joined and the stylesheet order picked the winner. vanilla-extract style([a, b]) passes each composed style as its own argument, so the later one wins, and a style composed again later (style([a, b, a])) is kept. Classes the build does not know (strings, props, CSS Modules) are kept as they are
• styled(Base) extending a styled component the file binds to a const renders Base's tag directly with Base's styles composed under its own, so the extension's declarations replace Base's for the same property, selector, breakpoint and layer instead of losing to them by stylesheet order; Base's attrs apply before the extension's. attrs merge as styled-components merges them: className is joined with the caller's, style is merged and other props replace earlier ones. On an element, a className or style spread after the explicit prop now wins, as React merges props in the order they are written
• style-order-range only checks styleOrder where the build reads it: a prop of a Devup UI component and a top-level key of a style object passed to css/globalCss/keyframes. A styleOrder key in nested data, in a prop value such as an element passed as a prop, or in a call of a function sharing a name with an Object.prototype member is no longer reported. The array, typography and media rules already skip non-style data, and css-utils-literal-only accepts a css()/keyframes() result held in a const inside a function. No new build errors.
• Styled components the build generates are wrapped in React's forwardRef, so a ref passed to them reaches the element they render on React 18 as well as React 19; the file imports forwardRef from react when it defines one
• Styled components no longer pass every prop to the tag they render: $ props, theme and the props their style functions or attrs read are kept away from a tag unless it takes them as attributes, and shouldForwardProp (Emotion options or styled-components withConfig) is evaluated at build time. A shouldForwardProp the build cannot evaluate is a build error naming the file, line and code, with the forms it accepts. An element using a styled component the file defines drops props the component neither reads nor passes on; spread props are passed as written
• Styled components render what their as prop names, defaulting to the tag or component they were defined with, and pass forwardedAs on as as, as styled-components and Emotion do; as used to reach the rendered tag as an attribute. Component.withComponent(target) on a styled component the file binds to a const builds a component rendering the same styles and attrs as target (a tag name or a component JSX can name), where it used to call a method the generated function does not have and throw
• Tailwind classes in a className: each class compiles on its own and every class Tailwind does not define (custom, plugin and analytics classes) stays as written, where any recognized class used to rebuild the whole className without them and could rewrite part of another class; a class touching a template interpolation (icon-${name}) is left as written, and template classNames no longer get spaces inserted around interpolations. A class whose variant is not understood stays as written instead of applying unconditionally; variants follow Tailwind v4: stacked variants compose (hover:focus: matches the element itself), hover is guarded by @media (hover: hover), group-/peer- use the group/peer marker classes (and group-hover/name), and data-, aria-, has-, nth-, , **, supports-[…] and [&…]/[@media …] variants compile. Utilities emit all their declarations (size-, rounded-t-, truncate, sr-only, not-sr-only, text-sm with its line height, text-sm/6, leading-), translate/rotate/scale/skew compose through Tailwind's individual properties and registered variables (@Property) with negative values kept negative, and arbitrary values follow Tailwind's grammar: spaces for underscores except in url() and var() names, _ for an underscore, spaces around math operators, type hints, [property:value] and (--variable) shorthands. Words that only share a utility's prefix (select-wrapper, order-summary, cursor-foo) are no longer compiled

@devup-ui/bun-plugin@1.0.22 → 1.0.23 - packages/bun-plugin/package.json

Patch

• Bun plugin works with Bun.build: DevupUI() (from @devup-ui/bun-plugin/register) serves the generated stylesheet to the bundler's CSS loader once every other module is loaded, so the build emits a CSS output with the styles of the whole bundle instead of an empty module; class names are short there and readable under the runtime (debug option). Files importing the packages Devup UI takes the place of (@emotion/react, @emotion/styled, styled-components, @vanilla-extract/css), @stylexjs/stylex, or a subpath or re-export of these or @devup-ui/react, are compiled instead of skipped

@devup-ui/components@0.1.60 → 0.1.61 - packages/components/package.json

Patch

• @devup-ui/react and @devup-ui/components take React as a peer of ^18 || ^19 instead of * and no longer depend on React 19 themselves, so a React 18 app no longer gets a second React. Select and Stepper read their context with useContext instead of React 19's use() and provide it with Context.Provider instead of React 19's (which crashes React 18), and Select repositions its container from an effect instead of a callback ref returning cleanup, which React 18 ignores
• Button, Checkbox, Input, Radio and Textarea forward their ref to the button, input or textarea they render, so a ref reaches the form element on React 18 as well as React 19

@devup-ui/eslint-plugin@1.0.22 → 1.0.23 - packages/eslint-plugin/package.json

Patch

• style-order-range only checks styleOrder where the build reads it: a prop of a Devup UI component and a top-level key of a style object passed to css/globalCss/keyframes. A styleOrder key in nested data, in a prop value such as an element passed as a prop, or in a call of a function sharing a name with an Object.prototype member is no longer reported. The array, typography and media rules already skip non-style data, and css-utils-literal-only accepts a css()/keyframes() result held in a const inside a function. No new build errors.

@devup-ui/next-plugin@1.0.90 → 1.0.91 - packages/next-plugin/package.json

Patch

• Auto-update: depends on '@devup-ui/plugin-utils' via a local workspace dependency

@devup-ui/plugin-utils@1.0.17 → 1.0.18 - packages/plugin-utils/package.json

Patch

• Webpack and Rsbuild builds hold every style in their stylesheets: a stylesheet module is built on its first import, so styles extracted later (the global styles of files webpack or Rsbuild reached late, often outside src) were missing from the output. The files the entries reach under src are now extracted before the build, the shared base on disk is kept current, and when a stylesheet still changed during the build it is compiled once more, writing only the complete result. Rsbuild serves each stylesheet from the current sheet instead of a module-wide string kept only when it grew, which left edits that shortened the CSS and later builds in the same process stale. plugin-utils adds computeReachableFiles

@devup-ui/react@1.0.44 → 1.0.45 - packages/react/package.json

Patch

• @devup-ui/react and @devup-ui/components take React as a peer of ^18 || ^19 instead of * and no longer depend on React 19 themselves, so a React 18 app no longer gets a second React. Select and Stepper read their context with useContext instead of React 19's use() and provide it with Context.Provider instead of React 19's (which crashes React 18), and Select repositions its container from an effect instead of a callback ref returning cleanup, which React 18 ignores

@devup-ui/reset-css@1.0.31 → 1.0.32 - packages/reset-css/package.json

Patch

• Auto-update: depends on '@devup-ui/react' via a local workspace dependency

@devup-ui/rsbuild-plugin@1.0.67 → 1.0.68 - packages/rsbuild-plugin/package.json

Patch

• Webpack and Rsbuild builds hold every style in their stylesheets: a stylesheet module is built on its first import, so styles extracted later (the global styles of files webpack or Rsbuild reached late, often outside src) were missing from the output. The files the entries reach under src are now extracted before the build, the shared base on disk is kept current, and when a stylesheet still changed during the build it is compiled once more, writing only the complete result. Rsbuild serves each stylesheet from the current sheet instead of a module-wide string kept only when it grew, which left edits that shortened the CSS and later builds in the same process stale. plugin-utils adds computeReachableFiles

@devup-ui/vite-plugin@1.0.73 → 1.0.74 - packages/vite-plugin/package.json

Patch

• Auto-update: depends on '@devup-ui/plugin-utils' via a local workspace dependency

@devup-ui/webpack-plugin@1.0.71 → 1.0.72 - packages/webpack-plugin/package.json

Patch

• Webpack and Rsbuild builds hold every style in their stylesheets: a stylesheet module is built on its first import, so styles extracted later (the global styles of files webpack or Rsbuild reached late, often outside src) were missing from the output. The files the entries reach under src are now extracted before the build, the shared base on disk is kept current, and when a stylesheet still changed during the build it is compiled once more, writing only the complete result. Rsbuild serves each stylesheet from the current sheet instead of a module-wide string kept only when it grew, which left edits that shortened the CSS and later builds in the same process stale. plugin-utils adds computeReachableFiles

[codecov]

Codecov Report

✅ All modified and coverable lines are covered by tests.

Files with missing lines	Coverage Δ
libs/extractor/src/composition.rs	100.00% <100.00%> (ø)
...tractor/src/extractor/extract_style_from_styled.rs	100.00% <100.00%> (ø)
libs/extractor/src/imported_constants.rs	100.00% <100.00%> (ø)
libs/extractor/src/lib.rs	100.00% <ø> (ø)
libs/extractor/src/prop_modify_utils.rs	100.00% <100.00%> (ø)
libs/extractor/src/prop_valid.rs	100.00% <100.00%> (ø)
libs/extractor/src/style_values.rs	100.00% <100.00%> (ø)
libs/extractor/src/styled_reads.rs	100.00% <100.00%> (ø)
libs/extractor/src/utils.rs	100.00% <100.00%> (ø)
libs/extractor/src/vanilla_extract.rs	100.00% <ø> (ø)
... and 9 more

🚀 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.