feat(extractor): compose styled components other modules define

[owjs3901]

Refs #688 (A: 다른 파일과 include 라이브러리의 styled 정의를 모듈 해석으로 읽어 합성). #730 위에 쌓은 브랜치입니다. #706 #707 #710 #711 #722 #727 #728 #729 #730이 먼저 병합되어야 합니다.

요약

같은 파일에서 정의한 styled 컴포넌트는 이미 정적으로 합성되지만, 다른 모듈이나 include 라이브러리에서 import한 styled 컴포넌트는 불투명한 런타임 컴포넌트로 남아 계속 감싸졌습니다. 이제 빌드가 그 모듈의 정의를 읽어 같은 파일에서 정의한 것과 똑같이 합성합니다.

// base.ts
export const Base = styled.div`color: red; padding: 4px;`

// app.tsx
import { Base } from './base'
export const Card = styled(Base).attrs({ role: 'region' })`color: blue;`

이전에는 as: DevupAs = Base로 Base를 런타임에 한 번 더 렌더링했고, 지금은 Base의 태그와 스타일을 읽어 div에 color: blue(뒤 선언이 이김)와 padding: 4px를 직접 붙입니다.

동작

• 모듈 해석: imported constant와 같은 해석기(상대 경로, tsconfig paths, 패키지 exports, include 라이브러리)로 모듈을 읽습니다. 모듈은 자신의 추출과 똑같이(별칭 변환 → 상수 인라인 → 방문) 컴파일하고, 그 안의 import도 같은 방식으로 따라갑니다. export { X } from, export * from, import { X }; export { X }, export default, 이름 바꾼 export, 순환 import를 처리합니다. 한 번의 추출 안에서 모듈은 한 번만 읽습니다.
• 합성: styled(Imported)(...), styled(Imported).attrs(...), styled(Imported)\...`, Imported.withComponent(...), (Emotion cssprop),styled(UI.Imported)(namespace import)가 같은 파일 정의와 같은 규칙으로 합성됩니다. 속성+선택자+브레이크포인트+레이어마다 뒤 선언이 이기고, attrs는 순서대로 합쳐지며, 읽는 props(reads)와 shouldForwardProp`으로 props를 거릅니다. 합성된 스타일은 가져오는 파일이 자기 이름으로 만들므로 가져오는 파일의 CSS에 들어갑니다.
• 의존성: 읽은 모듈(과 그 모듈이 읽은 모듈)은 imported constant처럼 dependencies로 보고되어, 그 모듈이 바뀌면 가져오는 파일이 다시 빌드됩니다. 플러그인 쪽 변경은 필요 없었습니다(vite addWatchFile, webpack/rsbuild addDependency, next 로더가 이미 이 목록을 씁니다).
• 파일 간 컴포넌트 선택자(${ImportedChild} { ... }, [ImportedChild] 규칙 키): 정의하는 파일이 내보내는 styled 컴포넌트마다 마커 클래스를 붙이고, 선택하는 파일은 같은 마커를 읽습니다. 마커는 정의 모듈의 파일 번호와 export 이름의 정렬 순서로만 정해지는 순수 함수라, 두 파일(과 두 프로세스)이 같은 문자열을 계산합니다. 플러그인은 모듈 해석기가 돌려주는 경로와 추출에 넘기는 파일 이름을 이미 같게 맞춥니다(toId). 확장한 컴포넌트는 기반 컴포넌트의 마커도 받습니다.
• 읽을 수 없는 정의는 지금처럼 런타임 컴포넌트로 감쌉니다(아래 남는 한계).

프로브 (--debug, survey/probe.ts --modules)

$ probe app.tsx            # Card = styled(Base).attrs({ role: 'region' })`color: blue;`
export const Card = ... as: DevupAs = "div" ... className={["c-1-Card c-0-Base color-0-blue--255 padding-0-4px--255", className]...}
                        ... {...__devupProps, ...{ role: "region" }}
export const Wide = ... as: DevupAs = "input", "invalid"를 거름 ... className={["c-1-Wide c-0-Field width-0-100_pc_--255 border-0---255", className]...}
                        style={{ "--border-0-": `1px solid ${(p=>p.invalid?`red`:`gray`)(rest)}`, ...style }}
export const Panel = ... className={["c-1-Panel margin-0-0-_a__s__d_c-0-Base-255", className]...}   // ${Base} { margin: 0 }
export const Small = ... as: DevupAs = "span" ... className={["padding-0-4px--255 color-0-red--255", className]...}   // Base.withComponent('span')
CSS: .border-0---255{border:var(--border-0-)}.color-0-blue--255{color:blue}.color-0-red--255{color:red}.padding-0-4px--255{padding:4px}.width-0-100_pc_--255{width:100%}.margin-0-0-_a__s__d_c-0-Base-255 .c-0-Base{margin:0}
DEPENDENCIES: .../p2/base.ts

$ probe base.ts            # 정의하는 파일
export const Base = ... className={["c-0-Base padding-0-4px--255 color-0-red--255", className]...}   // 선택자가 읽는 c-0-Base와 같은 마커

$ probe css-prop.tsx       # <Base css={{ color: 'blue' }} title="hi" />
<div title="hi" className="padding-0-4px--255 color-0-blue--255 c-0-Base" />
CSS: .color-0-blue--255{color:blue}.padding-0-4px--255{padding:4px}

새로 생기는 오류

새 종류의 오류는 없습니다. 달라지는 점은 하나입니다.

• import한 styled 컴포넌트의 css prop이 그 컴포넌트의 스타일과 겹치면, 같은 파일 정의와 똑같이 파일:줄:열: cssonoverrides stylesBasesets, which the build orders only for a styled component rendering a tag with no attrs or props read, ...: move these styles intostyled(Base)(...)``로 보고됩니다. 이전에는 순서가 스타일시트에 맡겨져 조용히 넘어갔습니다. 겹치지 않거나 태그로 인라인할 수 있으면(attrs, 읽는 props, spread, `as` 없음) 오류 없이 `css` prop이 이깁니다.

남는 한계

정확히 읽을 수 없는 정의는 건드리지 않고 지금 동작(런타임 컴포넌트로 감싸기)을 유지합니다.

• 런타임만 아는 base: styled(Link), styled(forwardRef(...)), styled(getThing().div). 정의 모듈의 식별자를 가져오는 쪽에서 가리킬 수 없기 때문입니다.
• 정의 모듈의 바인딩을 읽는 attrs/클래스/동적 스타일 식(const handler = ...; styled.div.attrs({ onClick: handler }), 모듈 안 함수를 부르는 ${(p) => scaled(p.x)}, 모듈 안 css() mixin 클래스). 식은 가져오는 파일에서 다시 평가되므로, 자신의 매개변수, props, rest, 언어 전역(Math, Number, String ...)만 읽는 식(타입 주석 포함)만 읽습니다.
• 빌드 오류가 있는 모듈, 런타임 값이 있어 boa 계산이 필요한 모듈: 그 모듈의 정의는 읽지 않지만 마커는 계속 계산합니다(컴포넌트 선택자는 동작).
• 해석할 수 없는 모듈, import 순환, .css.ts, export const Base = 5처럼 styled 호출이 아닌 export, import type.
• namespace import 멤버는 styled(UI.Base)와 UI.Base.withComponent(...)만 읽습니다. ${UI.Child} { ... }와 <UI.Base css={...}>는 읽지 않습니다.
• <Imported foo />처럼 합성 없이 쓰는 호출부에서는 props를 거르지 않습니다(정의 모듈이 자기 컴포넌트 안에서 거릅니다).
• 마커: 내보내는 styled 컴포넌트는 선택 여부와 관계없이 마커 클래스를 하나씩 더 받습니다. 정의하는 파일은 누가 선택하는지 알 수 없기 때문입니다. 마커는 파일 번호를 쓰므로 원자 클래스 이름처럼 플러그인이 파일 맵을 시드하는 것을 전제로 합니다. 이 때문에 내보내는 styled 컴포넌트가 있던 기존 스냅샷 14개의 클래스 목록이 달라졌습니다(클래스 추가만, 스타일 변화 없음).

검증

• cargo fmt, cargo +1.99 clippy --workspace --all-targets -- -D warnings, cargo test --workspace 통과
• 모듈 두 개(해석기 헬퍼)로 합성, 선택자, 재export/namespace, 읽을 수 없는 정의, 순환을 단위 테스트(imported_styled.rs)와 insta 스냅샷으로 확인. 같은 파일 정의와 스타일이 같은지(styled/attrs/withComponent/css prop 10여 가지)도 비교합니다.
• WASM API와 디스크의 실제 파일로 끝에서 끝까지 검증(packages/next-plugin/src/__tests__/imported-styled.test.ts): 상대 경로, tsconfig paths, 패키지 exports의 include 라이브러리, 의존성 보고, 모듈 변경 반영, 파일 간 마커 일치
• WASM 재빌드, 루트 bun run build, bun test 5491 통과, 커버리지 100%
• bun lint: 기존 경고 2개 외 없음

[github-actions]

Changepacks

@devup-ui/wasm@1.0.82 → 1.0.83 - 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
• Emotion's now compiles at build time with no runtime: the element becomes what its child function ({ css, cx, theme }) => ... renders, each css and cx call becomes the classes it composes (later styles replace earlier ones; css reads strings as CSS text and its tagged templates split around mixins; cx keeps unknown classes, reads { name: condition } objects as conditional classes and composes nested css and cx calls), and theme.a.b in their values becomes var(--a-b). Numbers in css rules are px lengths, as Emotion reads them, and top-level constants are inlined. New build errors, each at file:line:col: a without exactly one child function taking { css, cx, theme } that gives what it renders at once (attributes, other children, rest or default parameters, async or generator functions, several statements); reading the theme other than as theme.a.b in a css value; using css or cx other than by calling them; a cx object with a spread, getter or method; parts css and cx cannot compose (runtime calls, spreads, a condition choosing between styles and classes). @devup-ui/react/compat exports ClassNames with the ClassNamesContent and ClassNamesArg types, and the @emotion/react declarations include them
• Emotion and styled-components component selectors now compile at build time: a styled component the file defines that another style selects (${Child} { ... } in CSS text, [Child] or [&:hover ${Child}] as a rule key) gets a short marker class, which only such components get, and the selector reads it as .marker; a component extending it, or an element inlining it for its css prop, keeps the marker. Selectors written without & now nest under the component as stylis nests them (ul { ... } is & ul, a selector list nests each selector, :hover applies to the component itself) instead of becoming global rules, and rule-object keys starting with ., #, [, *, >, + or ~ are read as nested selectors instead of properties
• Emotion's css prop compiles at build time while @emotion/react is aliased: on tags and Devup UI components always, and on every element once the file imports @emotion/react or @emotion/styled or names @emotion/react in a @jsxImportSource pragma; jsx, jsxs and jsxDEV from @emotion/react/jsx-runtime (or jsx-dev-runtime) and jsx from @emotion/react compile it too, so libraries built with Emotion's JSX runtime do as well. The prop becomes the element's className, with CSS variables in its style for values only the runtime gives: arrays and conditions compose with a later part replacing what an earlier one sets, css() classes the file knows compose by their styles, strings and templates are CSS text, css`` mixins split the text around them, a function of the theme reads theme.a.b as var(--a-b), unitless numbers are px as in Emotion (constants included), and a className holding known css() classes overrides the prop as Emotion's registered classes do. A styled component the file defines renders its tag in the element's place when the prop overrides its styles and it renders a tag with no attrs or props read and the element has no spread, as or forwardedAs. Emotion's JSX runtime imports become react/jsx-runtime, the pragma names react, and jsx comes from @devup-ui/react/compat (React's createElement); @devup-ui/react/compat/css-prop types the prop on React.Attributes. New build errors, each with file:line:column and the code: a css prop part the build cannot read (a call, an element), a style object declared inside a function or with let, a binding only running the module gives or code changes, a theme function that does more than return rules or reads the theme other than as theme.a.b in a value, an interpolation CSS text cannot place or a mixin inside a nested rule, and a css prop overriding a styled component's styles where its tag cannot be rendered in place. Composing css() with a part that reads a known binding (such as a keyframes name) now reads its value
• A project whose tsconfig.json (or jsconfig.json) builds JSX with Emotion (compilerOptions.jsxImportSource of @emotion/react, through extends and project references too) now compiles the css prop on every element of every file, and its .tsx and .jsx files are built with React's JSX runtime through a /** @jsxImportSource react */ pragma, which a file's own JSX pragma overrides, so the bundler no longer imports Emotion's runtime. The plugins read the setting into a new @emotion/react/jsx-runtime alias (importAliases can turn it off with false, and it is left out when @emotion/react is not aliased); @devup-ui/react/compat/emotion-jsx-runtime declares Emotion's JSX runtimes as React's so the project type-checks without Emotion installed. plugin-utils exports readJsxImportSource, and mergeImportAliases takes the JSX import source
• globalCss: theme tokens ($text) resolve to var(--text) in global rules instead of being written as invalid $text; imports given as { url, query } objects with unquoted keys are emitted instead of dropped; an '@layer name' key puts the rules it holds in that cascade layer (layers nest as base.reset) instead of flattening them into invalid declarations, and a layer name that is not one identifier is a build error
• A styled component another module defines now composes at build time exactly as one the file defines itself: styled(ImportedBase)(...), styled(ImportedBase).attrs(...), ImportedBase.withComponent(...) and the Emotion css prop on ImportedBase render the base's tag with the base's styles under their own (the later declaration wins per property, selector, breakpoint and layer), merge attrs in order and filter props by what the styles read and shouldForwardProp. The build reads the other module through the same module resolution imported constants use (relative paths, tsconfig paths, package exports, include libraries) and reports it as a dependency, so a change to it rebuilds the importing file. A definition the build cannot read exactly (a base only the runtime gives, an attrs or style expression reading a binding of the defining module, a module with a build error, an unresolvable module, an import cycle) stays a runtime component that wraps, as before. Every exported styled component now carries a marker class computed from its file and its export name alone, so ${ImportedChild} { ... } in CSS text and [ImportedChild] as a rule key select it from another file; the marker replaces the registry-ordered one, which two files could not compute alike. No new build errors: the css prop on an imported styled component now reports the same override error a local one does when its styles overlap the component's
• 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
• Theme CSS: a color only one variant defines is defined in that variant; a variant renders dark only when it is named dark or listed as dark in the new theme.colorScheme, others light, and light-dark() only encodes a light default with one dark variant; theme names that are not CSS identifiers are quoted in [data-theme]; typography emits fontStyle and textTransform; color variables come out in a fixed order. $tokens with dashes (text-primary) resolve instead of breaking into var(--text)-primary, and dotted length and shadow names are declared with dashes like their references. registerTheme reports, with the theme path, a token name the $token syntax cannot reach and two tokens of a variant that become the same CSS variable (a-b and a.b)

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

Patch

• A project whose tsconfig.json (or jsconfig.json) builds JSX with Emotion (compilerOptions.jsxImportSource of @emotion/react, through extends and project references too) now compiles the css prop on every element of every file, and its .tsx and .jsx files are built with React's JSX runtime through a /** @jsxImportSource react */ pragma, which a file's own JSX pragma overrides, so the bundler no longer imports Emotion's runtime. The plugins read the setting into a new @emotion/react/jsx-runtime alias (importAliases can turn it off with false, and it is left out when @emotion/react is not aliased); @devup-ui/react/compat/emotion-jsx-runtime declares Emotion's JSX runtimes as React's so the project type-checks without Emotion installed. plugin-utils exports readJsxImportSource, and mergeImportAliases takes the JSX import source

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

Patch

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

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

Patch

• no-duplicate-value, no-useless-responsive, no-useless-tailing-nulls, no-typography-token-prefix and prefer-media-shorthand only report and fix values the build reads as styles: style props of Box, Flex and the other style components and the arguments of css, globalCss and keyframes, through style objects, responsive arrays, conditions and spreads. Arrays and keys in props the component passes through (data-, aria-, event handlers, HTML attributes, props, styleVars), in arguments of other functions and under imports/fontFaces/params are left alone, where autofix used to rewrite them; styles of a component nested in another's prop are checked too. css-utils-literal-only reads a css() or keyframes() result held in a const of any scope as static, as the build does

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

Patch

• A project whose tsconfig.json (or jsconfig.json) builds JSX with Emotion (compilerOptions.jsxImportSource of @emotion/react, through extends and project references too) now compiles the css prop on every element of every file, and its .tsx and .jsx files are built with React's JSX runtime through a /** @jsxImportSource react */ pragma, which a file's own JSX pragma overrides, so the bundler no longer imports Emotion's runtime. The plugins read the setting into a new @emotion/react/jsx-runtime alias (importAliases can turn it off with false, and it is left out when @emotion/react is not aliased); @devup-ui/react/compat/emotion-jsx-runtime declares Emotion's JSX runtimes as React's so the project type-checks without Emotion installed. plugin-utils exports readJsxImportSource, and mergeImportAliases takes the JSX import source

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

Patch

• A project whose tsconfig.json (or jsconfig.json) builds JSX with Emotion (compilerOptions.jsxImportSource of @emotion/react, through extends and project references too) now compiles the css prop on every element of every file, and its .tsx and .jsx files are built with React's JSX runtime through a /** @jsxImportSource react */ pragma, which a file's own JSX pragma overrides, so the bundler no longer imports Emotion's runtime. The plugins read the setting into a new @emotion/react/jsx-runtime alias (importAliases can turn it off with false, and it is left out when @emotion/react is not aliased); @devup-ui/react/compat/emotion-jsx-runtime declares Emotion's JSX runtimes as React's so the project type-checks without Emotion installed. plugin-utils exports readJsxImportSource, and mergeImportAliases takes the JSX import source
• Theme CSS: a color only one variant defines is defined in that variant; a variant renders dark only when it is named dark or listed as dark in the new theme.colorScheme, others light, and light-dark() only encodes a light default with one dark variant; theme names that are not CSS identifiers are quoted in [data-theme]; typography emits fontStyle and textTransform; color variables come out in a fixed order. $tokens with dashes (text-primary) resolve instead of breaking into var(--text)-primary, and dotted length and shadow names are declared with dashes like their references. registerTheme reports, with the theme path, a token name the $token syntax cannot reach and two tokens of a variant that become the same CSS variable (a-b and a.b)

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

Patch

• Emotion's now compiles at build time with no runtime: the element becomes what its child function ({ css, cx, theme }) => ... renders, each css and cx call becomes the classes it composes (later styles replace earlier ones; css reads strings as CSS text and its tagged templates split around mixins; cx keeps unknown classes, reads { name: condition } objects as conditional classes and composes nested css and cx calls), and theme.a.b in their values becomes var(--a-b). Numbers in css rules are px lengths, as Emotion reads them, and top-level constants are inlined. New build errors, each at file:line:col: a without exactly one child function taking { css, cx, theme } that gives what it renders at once (attributes, other children, rest or default parameters, async or generator functions, several statements); reading the theme other than as theme.a.b in a css value; using css or cx other than by calling them; a cx object with a spread, getter or method; parts css and cx cannot compose (runtime calls, spreads, a condition choosing between styles and classes). @devup-ui/react/compat exports ClassNames with the ClassNamesContent and ClassNamesArg types, and the @emotion/react declarations include them
• Emotion's css prop compiles at build time while @emotion/react is aliased: on tags and Devup UI components always, and on every element once the file imports @emotion/react or @emotion/styled or names @emotion/react in a @jsxImportSource pragma; jsx, jsxs and jsxDEV from @emotion/react/jsx-runtime (or jsx-dev-runtime) and jsx from @emotion/react compile it too, so libraries built with Emotion's JSX runtime do as well. The prop becomes the element's className, with CSS variables in its style for values only the runtime gives: arrays and conditions compose with a later part replacing what an earlier one sets, css() classes the file knows compose by their styles, strings and templates are CSS text, css`` mixins split the text around them, a function of the theme reads theme.a.b as var(--a-b), unitless numbers are px as in Emotion (constants included), and a className holding known css() classes overrides the prop as Emotion's registered classes do. A styled component the file defines renders its tag in the element's place when the prop overrides its styles and it renders a tag with no attrs or props read and the element has no spread, as or forwardedAs. Emotion's JSX runtime imports become react/jsx-runtime, the pragma names react, and jsx comes from @devup-ui/react/compat (React's createElement); @devup-ui/react/compat/css-prop types the prop on React.Attributes. New build errors, each with file:line:column and the code: a css prop part the build cannot read (a call, an element), a style object declared inside a function or with let, a binding only running the module gives or code changes, a theme function that does more than return rules or reads the theme other than as theme.a.b in a value, an interpolation CSS text cannot place or a mixin inside a nested rule, and a css prop overriding a styled component's styles where its tag cannot be rendered in place. Composing css() with a part that reads a known binding (such as a keyframes name) now reads its value
• A project whose tsconfig.json (or jsconfig.json) builds JSX with Emotion (compilerOptions.jsxImportSource of @emotion/react, through extends and project references too) now compiles the css prop on every element of every file, and its .tsx and .jsx files are built with React's JSX runtime through a /** @jsxImportSource react */ pragma, which a file's own JSX pragma overrides, so the bundler no longer imports Emotion's runtime. The plugins read the setting into a new @emotion/react/jsx-runtime alias (importAliases can turn it off with false, and it is left out when @emotion/react is not aliased); @devup-ui/react/compat/emotion-jsx-runtime declares Emotion's JSX runtimes as React's so the project type-checks without Emotion installed. plugin-utils exports readJsxImportSource, and mergeImportAliases takes the JSX import source

@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.66 → 1.0.67 - packages/rsbuild-plugin/package.json

Patch

• A project whose tsconfig.json (or jsconfig.json) builds JSX with Emotion (compilerOptions.jsxImportSource of @emotion/react, through extends and project references too) now compiles the css prop on every element of every file, and its .tsx and .jsx files are built with React's JSX runtime through a /** @jsxImportSource react */ pragma, which a file's own JSX pragma overrides, so the bundler no longer imports Emotion's runtime. The plugins read the setting into a new @emotion/react/jsx-runtime alias (importAliases can turn it off with false, and it is left out when @emotion/react is not aliased); @devup-ui/react/compat/emotion-jsx-runtime declares Emotion's JSX runtimes as React's so the project type-checks without Emotion installed. plugin-utils exports readJsxImportSource, and mergeImportAliases takes the JSX import source

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

Patch

• A project whose tsconfig.json (or jsconfig.json) builds JSX with Emotion (compilerOptions.jsxImportSource of @emotion/react, through extends and project references too) now compiles the css prop on every element of every file, and its .tsx and .jsx files are built with React's JSX runtime through a /** @jsxImportSource react */ pragma, which a file's own JSX pragma overrides, so the bundler no longer imports Emotion's runtime. The plugins read the setting into a new @emotion/react/jsx-runtime alias (importAliases can turn it off with false, and it is left out when @emotion/react is not aliased); @devup-ui/react/compat/emotion-jsx-runtime declares Emotion's JSX runtimes as React's so the project type-checks without Emotion installed. plugin-utils exports readJsxImportSource, and mergeImportAliases takes the JSX import source

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

Patch

• A project whose tsconfig.json (or jsconfig.json) builds JSX with Emotion (compilerOptions.jsxImportSource of @emotion/react, through extends and project references too) now compiles the css prop on every element of every file, and its .tsx and .jsx files are built with React's JSX runtime through a /** @jsxImportSource react */ pragma, which a file's own JSX pragma overrides, so the bundler no longer imports Emotion's runtime. The plugins read the setting into a new @emotion/react/jsx-runtime alias (importAliases can turn it off with false, and it is left out when @emotion/react is not aliased); @devup-ui/react/compat/emotion-jsx-runtime declares Emotion's JSX runtimes as React's so the project type-checks without Emotion installed. plugin-utils exports readJsxImportSource, and mergeImportAliases takes the JSX import source

[codecov]

Codecov Report

✅ All modified and coverable lines are covered by tests.

Files with missing lines	Coverage Δ
bindings/devup-ui-wasm/src/lib.rs	100.00% <ø> (ø)
libs/css/src/lib.rs	100.00% <100.00%> (ø)
libs/css/src/theme_tokens.rs	100.00% <ø> (ø)
libs/extractor/src/build_time_values.rs	100.00% <100.00%> (ø)
libs/extractor/src/composition.rs	100.00% <100.00%> (ø)
libs/extractor/src/css_prop.rs	100.00% <100.00%> (ø)
libs/extractor/src/css_utils.rs	100.00% <100.00%> (ø)
...tor/src/extractor/extract_style_from_expression.rs	100.00% <ø> (ø)
...tractor/src/extractor/extract_style_from_styled.rs	100.00% <100.00%> (ø)
libs/extractor/src/import_alias_visit.rs	100.00% <100.00%> (ø)
... and 19 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.