`@swc/plugin-emotion` ≥ 14.8.0 wraps array `css` props in `css()` when the element spreads props, dropping theme-function styles

[elado]

Describe the bug

When a JSX element has an array css prop and spreads props (<div css={[a, b]} {...props} /> — the standard forwardRef pattern), @swc/plugin-emotion 14.8.0 and later wrap the array in a render-time css([...]) call. That css() runs without theme context, so any theme-function element ((theme) => css({ ... })) is stringified instead of resolved (Emotion logs "Functions that are interpolated in css calls will be stringified"), and its declarations are silently dropped from the output.

14.7.0 does not wrap — it leaves the array raw, so Emotion's JSX runtime resolves the theme function correctly.

The wrapping only happens when {...props} is present; an array css prop without a spread is left raw even on 14.14.0.

Input (input.tsx)

import { css } from '@emotion/react';
import { forwardRef } from 'react';

const styles = {
  row: (theme) => css({ display: 'grid', gap: theme.spacing.sm }),
};

// array css prop + {...props} spread
export const Row = forwardRef((props, ref) => <div ref={ref} css={[styles.row, {}]} {...props} />);

Repro (repro.js)

const { transformSync } = require('@swc/core');
const fs = require('fs');

const out = transformSync(fs.readFileSync('input.tsx', 'utf8'), {
  filename: 'input.tsx',
  jsc: {
    parser: { syntax: 'typescript', tsx: true },
    transform: { react: { runtime: 'automatic', importSource: '@emotion/react' } },
    experimental: {
      plugins: [[require.resolve('@swc/plugin-emotion'), { autoLabel: 'never' }]],
    },
  },
});
console.log(out.code);

npm i @swc/core @swc/plugin-emotion@<version>
node repro.js

Actual (@swc/plugin-emotion 14.8.0 – 14.14.0)

css: /*#__PURE__*/ (0, _react.css)([styles.row, {}]),

At runtime css([styles.row, {}]) is evaluated with no theme → styles.row is stringified → display: grid and gap never reach the DOM.

Expected (matches @swc/plugin-emotion 14.7.0)

css: [styles.row, {}],

The raw array is passed through, and Emotion's JSX runtime resolves the theme function with the active theme, so display: grid / gap are applied.

Bisect

Version	Output	Theme fn resolved?
14.7.0	raw array	✅ yes
14.8.0 → 14.14.0	wrapped css([...])	❌ no (stringified)

Impact

Every forwardRef component that spreads props onto an element with a theme-function array css prop loses those styles. This is a common pattern, so the effect is broad (in our case it broke notebook layout — display: grid missing on a row). Workaround is pinning @swc/plugin-emotion to 14.7.0.

Version

• @swc/plugin-emotion: 14.8.0 – 14.14.0 (14.7.0 OK)
• @swc/core: 1.15.43 (reproduces across versions)

[kdy1]

I can confirm this is a real regression when comparing against @emotion/babel-plugin.

I tested the reported shape with these versions:

• @babel/core@7.29.7
• @babel/preset-react@7.29.7
• @babel/preset-typescript@7.29.7
• @emotion/babel-plugin@11.13.5
• @emotion/react@11.14.0
• @emotion/serialize@1.3.3
• @swc/core@1.15.43
• @swc/plugin-emotion@14.7.0, 14.8.0, and 14.14.0

Minimal repro I used:

import { css } from "@emotion/react";
import { forwardRef } from "react";

const styles = {
  row: (theme) => css({ display: "grid", gap: theme.spacing.sm }),
};

export const Row = forwardRef((props, ref) => (
  <div ref={ref} css={[styles.row, {}]} {...props} />
));

Babel keeps the JSX css prop as a raw array:

css: [styles.row, ""], ...props

SWC behavior changes at @swc/plugin-emotion@14.8.0:

// 14.7.0
css: [ styles.row, {} ]

// 14.8.0 / 14.14.0
css: /*#__PURE__*/ css([ styles.row, {} ])

This is not just an output-shape difference. It is observable at Emotion runtime. Serializing the raw array with a theme evaluates the theme callback and produces the expected CSS, e.g. display:grid;gap:8px;.... But calling css([styles.row, {}]) first serializes without the theme context, so the theme callback is not evaluated as intended and the function ends up stringified/incorrect.

One additional note: in my local repro, the regression is not limited to the prop-spread form. The spread case is a valid repro, but <div css={[styles.row, {}]} /> is also wrapped in css([...]) in 14.8.0+ when the Emotion transform runs for the file. So the affected surface may be slightly broader than the original example.

The likely source is the JSX css prop object/array rewrite added in feat(emotion): add sourcemap and auto-label for css prop with object styles (#599). That path rewrites Expr::Object | Expr::Array JSX css prop values into css(...). That can be okay for some static cases, but it diverges from Babel for arrays containing theme functions, where the raw array needs to reach Emotion's JSX runtime.