emotion/babel-preset-css-prop 深度指南一行配置开启 css prop 的 Babel Preset 全解析【免费下载链接】emotion CSS-in-JS library designed for high performance style composition项目地址: https://gitcode.com/gh_mirrors/em/emotionemotion/babel-preset-css-prop是 Emotion 官方提供的 Babel Preset用于在采用classic JSX runtime的项目中通过一行presets配置为整个项目自动启用cssprop编译后 JSX 调用从React.createElement切换为 Emotion 的jsx工厂函数样式对象在编译期被静态化并生成带 hash 的类名。本文以该 preset 的 CHANGELOG 为骨架结合其源码、测试快照与官方文档系统讲解安装配置、选项语义、编译产物形态以及从 10.x 到 11.x 的关键破坏性变更与迁移路径帮助你既会用、也理解它为什么这么设计。一、这个 Preset 到底做了什么三个插件的组合编排从源码结构看emotion/babel-preset-css-prop本身并不实现任何转换逻辑而是一个装配器它把三个插件按固定顺序组合起来并把用户传入的选项分发给对应插件。入口文件 的核心逻辑非常直白export default (api, { pragma, sourceMap, autoLabel, labelFormat, importMap, ...options } {}) { if (options.runtime) { throw new Error( The runtime option has been removed. ... ) } return { plugins: [ [pragmatic, { export: jsx, module: emotion/react, import: pragmaName }], [jsx, { pragma: pragmaName, pragmaFrag: React.Fragment, ...options }], [emotion, { sourceMap, autoLabel, labelFormat, cssPropOptimization: true, importMap }] ] } }三个插件各司其职emotion/babel-plugin-jsx-pragmatic在编译产物中自动注入import { jsx as ___EmotionJSX } from emotion/react语句源码见 jsx-pragmatic 实现它只在检测到JSXElement/JSXFragment时才追加导入且插入在既有 import 之后以避免与 polyfill 出现顺序问题——这正是 10.0.23 版本修复的行为。babel/plugin-transform-react-jsx负责真正的 JSX 转换把 pragma 指向___EmotionJSXFragment 指向React.Fragment其余选项如useBuiltIns、throwIfNamespace原样透传。源码注释明确说明这种解构出 Emotion 专属选项、其余全透传的设计是为了向前兼容babel/plugin-transform-react-jsx未来新增选项会自动生效。emotion/babel-plugin处理cssprop 与css/styled调用的样式静态化其中cssPropOptimization: true被强制开启确保 css prop 走最优化的编译路径。此外package.json 中exports字段限定了可导入的文件范围11.10.0 引入同时保持对main/module兼容入口peerDependencies 要求babel/core 7。二、安装与三种使用方式2.1 安装yarn add emotion/babel-preset-css-prop # 或 npm install emotion/babel-preset-css-prop2.2 方式一Babel 配置文件推荐在.babelrc或babel.config.js中{ presets: [emotion/babel-preset-css-prop] }注意两个关键约束该 preset 已内置 emotion 插件原.babelrc中的emotion/babel-plugin或旧版babel-plugin-emotion条目应删除其选项移到 preset 里若同时保留会造成重复转换。若你同时使用babel/preset-react或babel/preset-typescriptemotion/babel-preset-css-prop必须放在它们之后以确保 JSX pragma 相关转换按正确顺序执行。选项迁移示例来自 README{ presets: [ [ emotion/babel-preset-css-prop, { autoLabel: dev-only, labelFormat: [local] } ] ], - plugins: [ - [ - emotion, - { - autoLabel: dev-only, - labelFormat: [local] - } - ] - ] }2.3 方式二Babel CLIbabel --presets emotion/babel-preset-css-prop script.js2.4 方式三Node APIrequire(babel/core).transform(code, { presets: [emotion/babel-preset-css-prop] })2.5 适用边界新 JSX runtime 用户不要用这个 preset官方 css prop 文档 明确指出该 preset 只服务于 classic JSX runtime。若你使用 React 16.14.0并想用新 JSX runtimeruntime: automatic应改为babel/preset-react配合emotion/babel-plugin{ presets: [ [babel/preset-react, { runtime: automatic, importSource: emotion/react }] ], plugins: [emotion/babel-plugin] }Next.js 用户则需在其next/babelpreset 内嵌配置{ presets: [ [next/babel, { preset-react: { runtime: automatic, importSource: emotion/react } }] ], plugins: [emotion/babel-plugin] }不兼容警告该 preset 与babel/plugin-transform-react-inline-elements不兼容二者同时使用会导致cssprop 样式无法正确生效。另外它不适用于禁止自定义 Babel 配置的项目如 Create React App这类项目应改用文件顶部的/** jsx jsx */pragma 方式。三、编译产物剖析从a css{{...}}到___EmotionJSX3.1 官方文档示例README 给出了完整的输入 → 输出对照。输入const Link props ( a css{{ color: hotpink, :hover: { color: darkorchid } }} {...props} / )输出经简化import { jsx as ___EmotionJSX } from emotion/react var _ref process.env.NODE_ENV production ? { name: 1fpk7dx-Link, styles: color:hotpink;:hover{color:darkorchid;}label:Link; } : { name: 1fpk7dx-Link, styles: color:hotpink;:hover{color:darkorchid;}label:Link;, map: /*# sourceMappingURLdata:application/json;... */ } const Link props ___EmotionJSX(a, _extends({ css: _ref }, props))3.2 从测试快照看真实产物细节仓库测试tests/index.js 通过babel-tester对 fixture 做快照断言index.js.snap 揭示了若干实现细节自动注入导入import { jsx as ___EmotionJSX } from emotion/react;会被追加到文件已有 import 之后。双环境产物样式对象以process.env.NODE_ENV production三元表达式区分——生产分支只有name和styles无 sourcemap、无 label 冗余开发分支额外携带map内联 source map和toString报错提示函数。开发期防误用提示产物中包含_EMOTION_STRINGIFIED_CSS_ERROR__函数当开发者不小心把css函数返回的对象当普通对象如用作classNamestringify 时给出明确报错。这是 10.0.23 引入的 dev hint。label 拼接开发分支的 styles 形如color:hotpink;label:Button;label 以;开头衔接——这是 10.0.22 修复的声明块末尾缺分号导致 label 粘连问题修复方式就是给 label 字符串加前导分号。四、选项全解Emotion 专属选项与 JSX 选项透传该 preset 同时接受emotion/babel-plugin与babel/plugin-transform-react-jsx的选项前者被显式解构后者通过剩余参数透传。4.1autoLabel三值枚举11.0.0 起重大变更11.0.0autoLabel不再是布尔值改为三个字符串值默认dev-only取值行为dev-only默认生产代码不生成 label体积更优开发环境保留 label便于调试与定位always只要可能就始终添加 labelnever完全禁用 label从 快照 可以看到dev-only的实际效果生产分支 styles 只有color:hotpink开发分支则多出;label:Button;。4.2labelFormat字符串模板或函数字符串模板支持[local]、[filename]、[dirname]三个占位符。label 计算逻辑见 label.js[local]取组件/变量标识符[filename]取文件名index会被替换为所在目录名[dirname]取文件所在目录的 basename非法的 CSS 类名字符统一被清洗为-。函数11.0.0 起labelFormat可以是一个函数接收{ name, path }后返回自定义字符串实现任意 label 规则。测试用例 options-are-used.js 用labelFormat: [dirname]--[filename]--[local]验证了模板展开对应快照 中生成了label:__fixtures__--array-css-prop--Component;这样的完整路径式 label。4.3importMap替换已废弃的instances11.0.0 起importMap用于告诉 emotion 插件哪些导入路径应被视为 Emotion 的导出从而在你 re-export Emotion API 的项目中仍能命中转换。11.0.0 移除了旧的instances选项所有使用处应迁移到importMapCHANGELOG 中该变更与importMap引入是同一个 PR。4.4sourceMap布尔值控制是否生成开发环境的样式 source map对应产物中的map字段。测试用例中显式传sourceMap: false以观察 label 行为差异。4.5 透传给 JSX 插件的选项useBuiltIns、throwIfNamespace、pragma等其余选项直接转发给babel/plugin-transform-react-jsx。README 给出的完整示例均为默认值演示{ presets: [ [ emotion/babel-preset-css-prop, { autoLabel: dev-only, labelFormat: [local], useBuiltIns: false, throwIfNamespace: true } ] ] }4.6 被移除的runtime选项如果你在配置中仍写runtime: automaticpreset 会直接抛出异常src/index.js#L16-L20错误信息会指引你改用babel/preset-reactemotion/babel-plugin的组合。这个选项的生命周期详见下文。五、CHANGELOG 主线10.x → 11.x 的关键演进与迁移关联文档 CHANGELOG 记录了该 preset 从 10.0.14 到 11.12.0 的完整演进以下按主题梳理外部 commit/PR 链接不在此展开请直接查看仓库中的 CHANGELOG 原文5.1runtime选项引入 → 弃用 → 移除10.1.0新增runtime选项可配置为automatic以启用新 JSX runtime需兼容版本的 React。10.2.0该选项被弃用。原因在于 preset 内部已包含 JSX 转换插件再配runtime: automatic会导致 Babel 配置中 JSX 插件重复、产生难以排查的问题且某些 preset 隐式包含 JSX 插件时问题更隐蔽。官方建议直接用babel/preset-reactbabel-plugin-emotion替代。11.0.0正式移除。配置残留runtime会直接抛错。同时10.2.1 曾修复一个相关问题只有runtime: automatic时才会根据development选项使用babel/plugin-transform-react-jsx-developmentclassic runtime 与该插件不兼容。迁移路径10.x → 11.x 必读- presets: [[emotion/babel-preset-css-prop, { runtime: automatic }]] presets: [[babel/preset-react, { runtime: automatic, importSource: emotion/react }]], plugins: [emotion/babel-plugin]5.2instances→importMap11.0.0 移除instances选项统一由importMap承担声明 Emotion 别名导入的职责语义更明确也覆盖了 re-export 场景。5.3autoLabel从布尔改为三值见上文 4.1这是 11.0.0 的另一项破坏性变更。旧写法autoLabel: true/false需改为dev-only/always/never。5.4 数组形式 css prop 的转换调整11.0.0调整了传给 css prop 的数组的转换方式使数组中的函数元素能在运行时被解析——即css{[base, ({ theme }) theme.color]}这类依赖 props/theme 的样式对象可以在运行时求值而静态对象仍被编译期优化。对应 fixture 见 array-css-prop.js快照显示css{[{ color: green }]}被编译为___EmotionJSX(div, _extends({ css: _ref }, props))。5.5 工程与分发层面的演进10.0.27补充 LICENSE 文件仓库遵循 MIT见 package.json。10.0.22label 字符串加前导分号避免声明块末尾无分号时的粘连问题。10.0.23emotion/core导入插入到已有 import 之后避免与 polyfill 的顺序冲突同时加入css 对象被意外 stringify的开发期提示。11.10.0package.json增加exports字段限制可导入文件范围同时尽量保留公共 API 的导入路径。11.11.0修复 Node ESM 环境下的导入问题。11.12.0更新依赖emotion/babel-plugin11.12.0与emotion/babel-plugin-jsx-pragmatic0.3.0。六、验证与测试快照如何保证转换行为稳定该 preset 的测试策略值得借鉴通过自定义的babel-tester工具以真实 Babel 配置跑 fixture 并做快照断言。测试入口tests/index.js 直接以 preset 本身作为presets配置运行。两个 fixtureindex.js 含 Fragment 与展开属性的 Button、array-css-prop.js 含数组 css prop覆盖了典型场景。第二个测试文件 options-are-used.js 专门验证sourceMap与labelFormat选项确实被消费并反映在产物中。对比 index.js.snap 与 options-are-used.js.snap 可以直观看到默认labelFormat: [local]时 label 是Button而自定义模板后变成__fixtures__--__fixtures__--Button。这类快照把preset 组装是否正确、选项是否透传、产物是否含 sourcemap/label全部固化为可回归的契约。七、常见问题速查问题解决方案配置runtime: automatic报错改用babel/preset-reactemotion/babel-plugin见 2.5 节项目不允许自定义 Babel 配置CRA 等文件顶部加/** jsx jsx */pragma见 docs/css-prop.mdx 的 JSX Pragma 小节生产包体积敏感autoLabel保持默认dev-only生产分支不会生成 label需要为组件加可读类名便于调试配置autoLabel: always与labelFormat模板或函数与babel/plugin-transform-react-inline-elements冲突二者不可同时使用移除 inline-elements 插件依赖自动注入的jsx导入无需手动导入只有检测到 JSX 语法时jsxPragmatic才会注入import { jsx } from emotion/react八、总结emotion/babel-preset-css-prop的定位非常清晰它是 classic JSX runtime 下一键启用 css prop的便捷入口内部通过jsx-pragmatic注入 Emotion jsx 导入→plugin-transform-react-jsx切换 JSX 工厂→emotion/babel-plugin静态化样式对象三插件协作完成转换其演进主线runtime引入又移除、instances让位importMap、autoLabel布尔改三值、labelFormat支持函数反映的是 Emotion 团队对配置正交性与新 JSX runtime 兼容性的持续收敛。理解这份 CHANGELOG等于同时理解了 preset 的全部选项边界与 10.x 升级 11.x 的完整迁移地图而对照 源码 与 测试快照你就能准确预判任意配置组合的编译产物形态。【免费下载链接】emotion CSS-in-JS library designed for high performance style composition项目地址: https://gitcode.com/gh_mirrors/em/emotion创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 @emotion/babel-preset-css-prop 深度指南：一行配置开启 css prop 的 Babel Preset 全解析
emotion/babel-preset-css-prop 深度指南一行配置开启 css prop 的 Babel Preset 全解析【免费下载链接】emotion CSS-in-JS library designed for high performance style composition项目地址: https://gitcode.com/gh_mirrors/em/emotionemotion/babel-preset-css-prop是 Emotion 官方提供的 Babel Preset用于在采用classic JSX runtime的项目中通过一行presets配置为整个项目自动启用cssprop编译后 JSX 调用从React.createElement切换为 Emotion 的jsx工厂函数样式对象在编译期被静态化并生成带 hash 的类名。本文以该 preset 的 CHANGELOG 为骨架结合其源码、测试快照与官方文档系统讲解安装配置、选项语义、编译产物形态以及从 10.x 到 11.x 的关键破坏性变更与迁移路径帮助你既会用、也理解它为什么这么设计。一、这个 Preset 到底做了什么三个插件的组合编排从源码结构看emotion/babel-preset-css-prop本身并不实现任何转换逻辑而是一个装配器它把三个插件按固定顺序组合起来并把用户传入的选项分发给对应插件。入口文件 的核心逻辑非常直白export default (api, { pragma, sourceMap, autoLabel, labelFormat, importMap, ...options } {}) { if (options.runtime) { throw new Error( The runtime option has been removed. ... ) } return { plugins: [ [pragmatic, { export: jsx, module: emotion/react, import: pragmaName }], [jsx, { pragma: pragmaName, pragmaFrag: React.Fragment, ...options }], [emotion, { sourceMap, autoLabel, labelFormat, cssPropOptimization: true, importMap }] ] } }三个插件各司其职emotion/babel-plugin-jsx-pragmatic在编译产物中自动注入import { jsx as ___EmotionJSX } from emotion/react语句源码见 jsx-pragmatic 实现它只在检测到JSXElement/JSXFragment时才追加导入且插入在既有 import 之后以避免与 polyfill 出现顺序问题——这正是 10.0.23 版本修复的行为。babel/plugin-transform-react-jsx负责真正的 JSX 转换把 pragma 指向___EmotionJSXFragment 指向React.Fragment其余选项如useBuiltIns、throwIfNamespace原样透传。源码注释明确说明这种解构出 Emotion 专属选项、其余全透传的设计是为了向前兼容babel/plugin-transform-react-jsx未来新增选项会自动生效。emotion/babel-plugin处理cssprop 与css/styled调用的样式静态化其中cssPropOptimization: true被强制开启确保 css prop 走最优化的编译路径。此外package.json 中exports字段限定了可导入的文件范围11.10.0 引入同时保持对main/module兼容入口peerDependencies 要求babel/core 7。二、安装与三种使用方式2.1 安装yarn add emotion/babel-preset-css-prop # 或 npm install emotion/babel-preset-css-prop2.2 方式一Babel 配置文件推荐在.babelrc或babel.config.js中{ presets: [emotion/babel-preset-css-prop] }注意两个关键约束该 preset 已内置 emotion 插件原.babelrc中的emotion/babel-plugin或旧版babel-plugin-emotion条目应删除其选项移到 preset 里若同时保留会造成重复转换。若你同时使用babel/preset-react或babel/preset-typescriptemotion/babel-preset-css-prop必须放在它们之后以确保 JSX pragma 相关转换按正确顺序执行。选项迁移示例来自 README{ presets: [ [ emotion/babel-preset-css-prop, { autoLabel: dev-only, labelFormat: [local] } ] ], - plugins: [ - [ - emotion, - { - autoLabel: dev-only, - labelFormat: [local] - } - ] - ] }2.3 方式二Babel CLIbabel --presets emotion/babel-preset-css-prop script.js2.4 方式三Node APIrequire(babel/core).transform(code, { presets: [emotion/babel-preset-css-prop] })2.5 适用边界新 JSX runtime 用户不要用这个 preset官方 css prop 文档 明确指出该 preset 只服务于 classic JSX runtime。若你使用 React 16.14.0并想用新 JSX runtimeruntime: automatic应改为babel/preset-react配合emotion/babel-plugin{ presets: [ [babel/preset-react, { runtime: automatic, importSource: emotion/react }] ], plugins: [emotion/babel-plugin] }Next.js 用户则需在其next/babelpreset 内嵌配置{ presets: [ [next/babel, { preset-react: { runtime: automatic, importSource: emotion/react } }] ], plugins: [emotion/babel-plugin] }不兼容警告该 preset 与babel/plugin-transform-react-inline-elements不兼容二者同时使用会导致cssprop 样式无法正确生效。另外它不适用于禁止自定义 Babel 配置的项目如 Create React App这类项目应改用文件顶部的/** jsx jsx */pragma 方式。三、编译产物剖析从a css{{...}}到___EmotionJSX3.1 官方文档示例README 给出了完整的输入 → 输出对照。输入const Link props ( a css{{ color: hotpink, :hover: { color: darkorchid } }} {...props} / )输出经简化import { jsx as ___EmotionJSX } from emotion/react var _ref process.env.NODE_ENV production ? { name: 1fpk7dx-Link, styles: color:hotpink;:hover{color:darkorchid;}label:Link; } : { name: 1fpk7dx-Link, styles: color:hotpink;:hover{color:darkorchid;}label:Link;, map: /*# sourceMappingURLdata:application/json;... */ } const Link props ___EmotionJSX(a, _extends({ css: _ref }, props))3.2 从测试快照看真实产物细节仓库测试tests/index.js 通过babel-tester对 fixture 做快照断言index.js.snap 揭示了若干实现细节自动注入导入import { jsx as ___EmotionJSX } from emotion/react;会被追加到文件已有 import 之后。双环境产物样式对象以process.env.NODE_ENV production三元表达式区分——生产分支只有name和styles无 sourcemap、无 label 冗余开发分支额外携带map内联 source map和toString报错提示函数。开发期防误用提示产物中包含_EMOTION_STRINGIFIED_CSS_ERROR__函数当开发者不小心把css函数返回的对象当普通对象如用作classNamestringify 时给出明确报错。这是 10.0.23 引入的 dev hint。label 拼接开发分支的 styles 形如color:hotpink;label:Button;label 以;开头衔接——这是 10.0.22 修复的声明块末尾缺分号导致 label 粘连问题修复方式就是给 label 字符串加前导分号。四、选项全解Emotion 专属选项与 JSX 选项透传该 preset 同时接受emotion/babel-plugin与babel/plugin-transform-react-jsx的选项前者被显式解构后者通过剩余参数透传。4.1autoLabel三值枚举11.0.0 起重大变更11.0.0autoLabel不再是布尔值改为三个字符串值默认dev-only取值行为dev-only默认生产代码不生成 label体积更优开发环境保留 label便于调试与定位always只要可能就始终添加 labelnever完全禁用 label从 快照 可以看到dev-only的实际效果生产分支 styles 只有color:hotpink开发分支则多出;label:Button;。4.2labelFormat字符串模板或函数字符串模板支持[local]、[filename]、[dirname]三个占位符。label 计算逻辑见 label.js[local]取组件/变量标识符[filename]取文件名index会被替换为所在目录名[dirname]取文件所在目录的 basename非法的 CSS 类名字符统一被清洗为-。函数11.0.0 起labelFormat可以是一个函数接收{ name, path }后返回自定义字符串实现任意 label 规则。测试用例 options-are-used.js 用labelFormat: [dirname]--[filename]--[local]验证了模板展开对应快照 中生成了label:__fixtures__--array-css-prop--Component;这样的完整路径式 label。4.3importMap替换已废弃的instances11.0.0 起importMap用于告诉 emotion 插件哪些导入路径应被视为 Emotion 的导出从而在你 re-export Emotion API 的项目中仍能命中转换。11.0.0 移除了旧的instances选项所有使用处应迁移到importMapCHANGELOG 中该变更与importMap引入是同一个 PR。4.4sourceMap布尔值控制是否生成开发环境的样式 source map对应产物中的map字段。测试用例中显式传sourceMap: false以观察 label 行为差异。4.5 透传给 JSX 插件的选项useBuiltIns、throwIfNamespace、pragma等其余选项直接转发给babel/plugin-transform-react-jsx。README 给出的完整示例均为默认值演示{ presets: [ [ emotion/babel-preset-css-prop, { autoLabel: dev-only, labelFormat: [local], useBuiltIns: false, throwIfNamespace: true } ] ] }4.6 被移除的runtime选项如果你在配置中仍写runtime: automaticpreset 会直接抛出异常src/index.js#L16-L20错误信息会指引你改用babel/preset-reactemotion/babel-plugin的组合。这个选项的生命周期详见下文。五、CHANGELOG 主线10.x → 11.x 的关键演进与迁移关联文档 CHANGELOG 记录了该 preset 从 10.0.14 到 11.12.0 的完整演进以下按主题梳理外部 commit/PR 链接不在此展开请直接查看仓库中的 CHANGELOG 原文5.1runtime选项引入 → 弃用 → 移除10.1.0新增runtime选项可配置为automatic以启用新 JSX runtime需兼容版本的 React。10.2.0该选项被弃用。原因在于 preset 内部已包含 JSX 转换插件再配runtime: automatic会导致 Babel 配置中 JSX 插件重复、产生难以排查的问题且某些 preset 隐式包含 JSX 插件时问题更隐蔽。官方建议直接用babel/preset-reactbabel-plugin-emotion替代。11.0.0正式移除。配置残留runtime会直接抛错。同时10.2.1 曾修复一个相关问题只有runtime: automatic时才会根据development选项使用babel/plugin-transform-react-jsx-developmentclassic runtime 与该插件不兼容。迁移路径10.x → 11.x 必读- presets: [[emotion/babel-preset-css-prop, { runtime: automatic }]] presets: [[babel/preset-react, { runtime: automatic, importSource: emotion/react }]], plugins: [emotion/babel-plugin]5.2instances→importMap11.0.0 移除instances选项统一由importMap承担声明 Emotion 别名导入的职责语义更明确也覆盖了 re-export 场景。5.3autoLabel从布尔改为三值见上文 4.1这是 11.0.0 的另一项破坏性变更。旧写法autoLabel: true/false需改为dev-only/always/never。5.4 数组形式 css prop 的转换调整11.0.0调整了传给 css prop 的数组的转换方式使数组中的函数元素能在运行时被解析——即css{[base, ({ theme }) theme.color]}这类依赖 props/theme 的样式对象可以在运行时求值而静态对象仍被编译期优化。对应 fixture 见 array-css-prop.js快照显示css{[{ color: green }]}被编译为___EmotionJSX(div, _extends({ css: _ref }, props))。5.5 工程与分发层面的演进10.0.27补充 LICENSE 文件仓库遵循 MIT见 package.json。10.0.22label 字符串加前导分号避免声明块末尾无分号时的粘连问题。10.0.23emotion/core导入插入到已有 import 之后避免与 polyfill 的顺序冲突同时加入css 对象被意外 stringify的开发期提示。11.10.0package.json增加exports字段限制可导入文件范围同时尽量保留公共 API 的导入路径。11.11.0修复 Node ESM 环境下的导入问题。11.12.0更新依赖emotion/babel-plugin11.12.0与emotion/babel-plugin-jsx-pragmatic0.3.0。六、验证与测试快照如何保证转换行为稳定该 preset 的测试策略值得借鉴通过自定义的babel-tester工具以真实 Babel 配置跑 fixture 并做快照断言。测试入口tests/index.js 直接以 preset 本身作为presets配置运行。两个 fixtureindex.js 含 Fragment 与展开属性的 Button、array-css-prop.js 含数组 css prop覆盖了典型场景。第二个测试文件 options-are-used.js 专门验证sourceMap与labelFormat选项确实被消费并反映在产物中。对比 index.js.snap 与 options-are-used.js.snap 可以直观看到默认labelFormat: [local]时 label 是Button而自定义模板后变成__fixtures__--__fixtures__--Button。这类快照把preset 组装是否正确、选项是否透传、产物是否含 sourcemap/label全部固化为可回归的契约。七、常见问题速查问题解决方案配置runtime: automatic报错改用babel/preset-reactemotion/babel-plugin见 2.5 节项目不允许自定义 Babel 配置CRA 等文件顶部加/** jsx jsx */pragma见 docs/css-prop.mdx 的 JSX Pragma 小节生产包体积敏感autoLabel保持默认dev-only生产分支不会生成 label需要为组件加可读类名便于调试配置autoLabel: always与labelFormat模板或函数与babel/plugin-transform-react-inline-elements冲突二者不可同时使用移除 inline-elements 插件依赖自动注入的jsx导入无需手动导入只有检测到 JSX 语法时jsxPragmatic才会注入import { jsx } from emotion/react八、总结emotion/babel-preset-css-prop的定位非常清晰它是 classic JSX runtime 下一键启用 css prop的便捷入口内部通过jsx-pragmatic注入 Emotion jsx 导入→plugin-transform-react-jsx切换 JSX 工厂→emotion/babel-plugin静态化样式对象三插件协作完成转换其演进主线runtime引入又移除、instances让位importMap、autoLabel布尔改三值、labelFormat支持函数反映的是 Emotion 团队对配置正交性与新 JSX runtime 兼容性的持续收敛。理解这份 CHANGELOG等于同时理解了 preset 的全部选项边界与 10.x 升级 11.x 的完整迁移地图而对照 源码 与 测试快照你就能准确预判任意配置组合的编译产物形态。【免费下载链接】emotion CSS-in-JS library designed for high performance style composition项目地址: https://gitcode.com/gh_mirrors/em/emotion创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考