前端【免费下载链接】emotion CSS-in-JS library designed for high performance style composition项目地址https://gitcode.com/gh_mirrors/em/emotion点击查看免费下载导读import-from-emotion是 emotion/eslint-plugin 提供的一条专用于迁移场景的 ESLint 规则。它负责拦截从react-emotion包中导入非styled的导出并自动把导入改写为从emotion或emotion/styled直接引入帮助团队在 Emotion 10/11 升级过程中一键完成 import 语句的批量修正。读完本文你将掌握该规则的触发条件、自动修复逻辑、底层实现原理以及如何在项目中开启它完成迁移。一、规则背景为什么要从 react-emotion 迁移出来在 Emotion 10 及更高版本中react-emotion这个旧包不再被推荐使用其导出也不再转发re-export自emotion。这意味着import { css } from react-emotion这样的旧写法在 Emotion 10 中无法再取到emotion核心包的能力。因此官方推荐在 React 应用中直接使用emotion包或按用途拆分后的emotion/*子包而不是react-emotion。import-from-emotion规则正是为此而生它只允许从react-emotion导入styled这是唯一被保留的场景其余导出一律报错并给出修复方案。说明该规则文档原文位于 import-from-emotion.md是 Emotion 官方 ESLint 插件文档体系的组成部分。二、规则的判定逻辑什么算错误什么算正确判定条件规则会在每次遇到ImportDeclarationES 模块导入语句时检查两件事见 import-from-emotion.ts导入来源node.source.value是否等于react-emotion导入说明符specifiers中是否存在非默认导入即不是import x from ...这种ImportDefaultSpecifier。两个条件同时满足时即触发incorrectImport报错。不正确的写法import { css } from react-emotion该规则会报告错误提示信息为emotions exports should be imported directly from emotion rather than from react-emotion正确的写法import { css } from emotion直接从emotion包导入核心导出css、keyframes、injectGlobal等不会触发任何告警。三、自动修复fixer 的分支逻辑import-from-emotion的meta.fixable被标记为code也就是说它支持 ESLint 的--fix自动修复大部分场景下你无需手工改动任何代码。修复逻辑在 import-from-emotion.ts 中按导入说明符的类型分为三种分支分支 1命名空间导入import * as ...——不修复import * as emotion from react-emotion由于无法确定命名空间对象里需要重写到哪个包fixer直接返回null即只报错、不自动修复需要开发者手工处理。分支 2同时存在默认导入与命名导入——拆分为两条语句import styled, { css } from react-emotion自动修复后变为import styled from emotion/styled; import { css } from emotion;styled默认导入被拆分到emotion/styled其余命名导入进入emotion。实现上利用了默认导入说明符永远排在第一位这一 AST 特性源码注释default specifiers are always first并将命名导入逐个处理若本地名与导入名一致如css直接输出css若使用了别名如import { css as somethingElse }则输出css as somethingElse完整保留别名语义。分支 3仅命名导入——仅改写来源字符串import { css } from react-emotion自动修复后变为import { css } from emotion这里直接调用fixer.replaceText(node.source, emotion)只替换来源字符串最轻量。一个可验证的修复案例在测试文件 import-from-emotion.test.ts 中别名场景的期望输出为// 输入 import styled, { css as somethingElse } from react-emotion // --fix 输出 import styled from emotion/styled; import { css as somethingElse } from emotion;四、如何在项目中启用该规则1. 安装先安装 ESLint再安装插件见 README.md$ npm i eslint --save-dev $ npm install emotion/eslint-plugin --save-dev注意若你的 ESLint 是全局安装的-g标志emotion/eslint-plugin也必须全局安装否则无法解析。2. 配置 .eslintrc在 plugins 中注册emotion可省略/eslint-plugin后缀{ plugins: [emotion] }在 rules 中开启该规则{ rules: { emotion/import-from-emotion: error } }3. 与其他迁移规则组合使用官方在 README 中给出了 Emotion 10 迁移期的推荐组合import-from-emotion只是其中之一{ rules: { emotion/jsx-import: error, emotion/no-vanilla: error, emotion/import-from-emotion: error, emotion/styled-import: error } }相关规则各有分工均可在迁移后继续保留例如jsx-import可以保证使用 css prop 时自动引入jsxjsx-import确保emotion/react的jsx被导入在 css prop 场景下自动补齐jsx jsx声明styled-import确保styled从emotion/styled导入而不是从react-emotionno-vanilla禁用对emotionvanilla 版本的导入适合使用 React 的应用。官方同时提醒这些规则默认假设你在使用 React如果你不使用 React应继续使用emotion包此时不应开启no-vanilla等规则。五、源码实现细节规则是如何注册与分发的规则元信息从源码 import-from-emotion.ts 可以看到规则使用typescript-eslint/utils的ESLintUtils.RuleCreator创建元信息包括docs.description确保 styled 从emotion/styled导入docs.recommended: false不属于推荐的默认开启规则需要显式配置fixable: code支持自动修复schema: []不接收任何配置选项type: problem属于代码有问题类规则。在插件中的注册位置该规则在 packages/eslint-plugin/src/index.ts 中被导入并以import-from-emotion为键注册。同插件还导出no-vanilla、syntax-preference、styled-import、jsx-import、pkg-renaming五条规则覆盖了样式语法偏好、包名重命名等更多场景。错误报告的元信息 URL规则通过utils.ts中的createRule见 utils.ts生成指向对应文档的错误报告链接便于开发者点击后跳转到当前规则说明页排查问题。六、测试用例验证测试文件 import-from-emotion.test.ts 使用RuleTester验证了以下四类场景场景输入期望结果合法import { css } from emotion不报错valid仅命名导入import { css } from react-emotion报incorrectImport修复为从emotion导入默认 命名导入import styled, { css } from react-emotion拆分为两条 import别名导入import styled, { css as somethingElse } from react-emotion保留别名拆分为两条 import这些用例同时验证了规则错误报告 自动修复的完整行为也是你升级后回归测试的好素材。七、使用建议与注意事项优先使用--fix或编辑器自动修复规则本身的设计目标就是可自动修复文档也明确说明你通常无需手工改动迁移后无需急于移除即使完成迁移继续保留import-from-emotion也可以防止有人重新写回react-emotion的旧导入注意命名空间导入的边界import * as emotion from react-emotion这类写法规则只报错不修复需要手工处理先了解项目是否使用 React若项目不用 React应继续使用 vanillaemotion包此时不应启用针对 React 生态的迁移规则结合 codemod 使用插件还内置了 Emotion 11 的pkg-renaming规则见 README.md如需跨大版本迁移可一并参考。通过以上配置与理解你可以安全地把import-from-emotion纳入 CI 与本地 lint 流程让 Emotion 10/11 的升级迁移变得可自动化、可回归、可追溯。赞分享前端【免费下载链接】emotion CSS-in-JS library designed for high performance style composition项目地址https://gitcode.com/gh_mirrors/em/emotion点击查看免费下载相关推荐深入理解IRust的工作原理从代码执行到结果输出深入理解IRust的工作原理从代码执行到结果输出 IRust是一款跨平台的Rust交互式解释器REPL它让开发者能够实时编写、测试和运行Rust代码片段前端Puck 编辑器 iframe 内注入 Emotion Cachepuckeditor/plugin-emotion-cache 插件实战与源码解析Puck 编辑器 iframe 内注入 Emotion Cachepuckeditor/plugin emotion cache 插件实战与源码解析 导读前端低代码UI组件UmiJS x Emotion基于官方 with-emotion 示例的 Emotion 集成实战指南UmiJS x Emotion基于官方 with emotion 示例的 Emotion 集成实战指南 UmiJS 官方仓库内置了一个名为 with emot前端Web框架CLI构建工具上一篇Rerun 组件批次Component Batches深入解析从数据模型、实例连接语义到存储与查询下一篇安全内幕validator.js如何防御ReDoS正则拒绝服务攻击创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
Emotion 迁移必备：深入解析 @emotion/eslint-plugin 的 import-from-emotion 规则
前端【免费下载链接】emotion CSS-in-JS library designed for high performance style composition项目地址https://gitcode.com/gh_mirrors/em/emotion点击查看免费下载导读import-from-emotion是 emotion/eslint-plugin 提供的一条专用于迁移场景的 ESLint 规则。它负责拦截从react-emotion包中导入非styled的导出并自动把导入改写为从emotion或emotion/styled直接引入帮助团队在 Emotion 10/11 升级过程中一键完成 import 语句的批量修正。读完本文你将掌握该规则的触发条件、自动修复逻辑、底层实现原理以及如何在项目中开启它完成迁移。一、规则背景为什么要从 react-emotion 迁移出来在 Emotion 10 及更高版本中react-emotion这个旧包不再被推荐使用其导出也不再转发re-export自emotion。这意味着import { css } from react-emotion这样的旧写法在 Emotion 10 中无法再取到emotion核心包的能力。因此官方推荐在 React 应用中直接使用emotion包或按用途拆分后的emotion/*子包而不是react-emotion。import-from-emotion规则正是为此而生它只允许从react-emotion导入styled这是唯一被保留的场景其余导出一律报错并给出修复方案。说明该规则文档原文位于 import-from-emotion.md是 Emotion 官方 ESLint 插件文档体系的组成部分。二、规则的判定逻辑什么算错误什么算正确判定条件规则会在每次遇到ImportDeclarationES 模块导入语句时检查两件事见 import-from-emotion.ts导入来源node.source.value是否等于react-emotion导入说明符specifiers中是否存在非默认导入即不是import x from ...这种ImportDefaultSpecifier。两个条件同时满足时即触发incorrectImport报错。不正确的写法import { css } from react-emotion该规则会报告错误提示信息为emotions exports should be imported directly from emotion rather than from react-emotion正确的写法import { css } from emotion直接从emotion包导入核心导出css、keyframes、injectGlobal等不会触发任何告警。三、自动修复fixer 的分支逻辑import-from-emotion的meta.fixable被标记为code也就是说它支持 ESLint 的--fix自动修复大部分场景下你无需手工改动任何代码。修复逻辑在 import-from-emotion.ts 中按导入说明符的类型分为三种分支分支 1命名空间导入import * as ...——不修复import * as emotion from react-emotion由于无法确定命名空间对象里需要重写到哪个包fixer直接返回null即只报错、不自动修复需要开发者手工处理。分支 2同时存在默认导入与命名导入——拆分为两条语句import styled, { css } from react-emotion自动修复后变为import styled from emotion/styled; import { css } from emotion;styled默认导入被拆分到emotion/styled其余命名导入进入emotion。实现上利用了默认导入说明符永远排在第一位这一 AST 特性源码注释default specifiers are always first并将命名导入逐个处理若本地名与导入名一致如css直接输出css若使用了别名如import { css as somethingElse }则输出css as somethingElse完整保留别名语义。分支 3仅命名导入——仅改写来源字符串import { css } from react-emotion自动修复后变为import { css } from emotion这里直接调用fixer.replaceText(node.source, emotion)只替换来源字符串最轻量。一个可验证的修复案例在测试文件 import-from-emotion.test.ts 中别名场景的期望输出为// 输入 import styled, { css as somethingElse } from react-emotion // --fix 输出 import styled from emotion/styled; import { css as somethingElse } from emotion;四、如何在项目中启用该规则1. 安装先安装 ESLint再安装插件见 README.md$ npm i eslint --save-dev $ npm install emotion/eslint-plugin --save-dev注意若你的 ESLint 是全局安装的-g标志emotion/eslint-plugin也必须全局安装否则无法解析。2. 配置 .eslintrc在 plugins 中注册emotion可省略/eslint-plugin后缀{ plugins: [emotion] }在 rules 中开启该规则{ rules: { emotion/import-from-emotion: error } }3. 与其他迁移规则组合使用官方在 README 中给出了 Emotion 10 迁移期的推荐组合import-from-emotion只是其中之一{ rules: { emotion/jsx-import: error, emotion/no-vanilla: error, emotion/import-from-emotion: error, emotion/styled-import: error } }相关规则各有分工均可在迁移后继续保留例如jsx-import可以保证使用 css prop 时自动引入jsxjsx-import确保emotion/react的jsx被导入在 css prop 场景下自动补齐jsx jsx声明styled-import确保styled从emotion/styled导入而不是从react-emotionno-vanilla禁用对emotionvanilla 版本的导入适合使用 React 的应用。官方同时提醒这些规则默认假设你在使用 React如果你不使用 React应继续使用emotion包此时不应开启no-vanilla等规则。五、源码实现细节规则是如何注册与分发的规则元信息从源码 import-from-emotion.ts 可以看到规则使用typescript-eslint/utils的ESLintUtils.RuleCreator创建元信息包括docs.description确保 styled 从emotion/styled导入docs.recommended: false不属于推荐的默认开启规则需要显式配置fixable: code支持自动修复schema: []不接收任何配置选项type: problem属于代码有问题类规则。在插件中的注册位置该规则在 packages/eslint-plugin/src/index.ts 中被导入并以import-from-emotion为键注册。同插件还导出no-vanilla、syntax-preference、styled-import、jsx-import、pkg-renaming五条规则覆盖了样式语法偏好、包名重命名等更多场景。错误报告的元信息 URL规则通过utils.ts中的createRule见 utils.ts生成指向对应文档的错误报告链接便于开发者点击后跳转到当前规则说明页排查问题。六、测试用例验证测试文件 import-from-emotion.test.ts 使用RuleTester验证了以下四类场景场景输入期望结果合法import { css } from emotion不报错valid仅命名导入import { css } from react-emotion报incorrectImport修复为从emotion导入默认 命名导入import styled, { css } from react-emotion拆分为两条 import别名导入import styled, { css as somethingElse } from react-emotion保留别名拆分为两条 import这些用例同时验证了规则错误报告 自动修复的完整行为也是你升级后回归测试的好素材。七、使用建议与注意事项优先使用--fix或编辑器自动修复规则本身的设计目标就是可自动修复文档也明确说明你通常无需手工改动迁移后无需急于移除即使完成迁移继续保留import-from-emotion也可以防止有人重新写回react-emotion的旧导入注意命名空间导入的边界import * as emotion from react-emotion这类写法规则只报错不修复需要手工处理先了解项目是否使用 React若项目不用 React应继续使用 vanillaemotion包此时不应启用针对 React 生态的迁移规则结合 codemod 使用插件还内置了 Emotion 11 的pkg-renaming规则见 README.md如需跨大版本迁移可一并参考。通过以上配置与理解你可以安全地把import-from-emotion纳入 CI 与本地 lint 流程让 Emotion 10/11 的升级迁移变得可自动化、可回归、可追溯。赞分享前端【免费下载链接】emotion CSS-in-JS library designed for high performance style composition项目地址https://gitcode.com/gh_mirrors/em/emotion点击查看免费下载相关推荐深入理解IRust的工作原理从代码执行到结果输出深入理解IRust的工作原理从代码执行到结果输出 IRust是一款跨平台的Rust交互式解释器REPL它让开发者能够实时编写、测试和运行Rust代码片段前端Puck 编辑器 iframe 内注入 Emotion Cachepuckeditor/plugin-emotion-cache 插件实战与源码解析Puck 编辑器 iframe 内注入 Emotion Cachepuckeditor/plugin emotion cache 插件实战与源码解析 导读前端低代码UI组件UmiJS x Emotion基于官方 with-emotion 示例的 Emotion 集成实战指南UmiJS x Emotion基于官方 with emotion 示例的 Emotion 集成实战指南 UmiJS 官方仓库内置了一个名为 with emot前端Web框架CLI构建工具上一篇Rerun 组件批次Component Batches深入解析从数据模型、实例连接语义到存储与查询下一篇安全内幕validator.js如何防御ReDoS正则拒绝服务攻击创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
