inline-style-to-class

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

inline-style-to-class

Convert an inline

style

attribute, JSX

style

object, or

<style>

block into a single, semantically named CSS class. Appends the result to a stylesheet detected from the project's own file conventions — works with plain CSS, SCSS, or Sass-indented syntax. The inverse operation of

/css-to-class

Every concrete value in the migrated declarations is replaced with a CSS variable: if a custom property in the project already holds that value, the class references it; otherwise a new variable is created and declared. The original literal is always kept as the

var()

fallback, so the class renders even when the variable is absent.

将内联

style

属性、JSX

style

对象或

<style>

块转换为单个语义化命名的CSS类。将结果添加到根据项目文件惯例识别出的样式表中——支持纯CSS、SCSS或Sass缩进语法。是

/css-to-class

的逆向操作。

迁移后的声明中，每个具体值都会被替换为CSS变量：如果项目中已有自定义属性包含该值，则类会引用该变量；否则会创建一个新变量并进行声明。原始字面量始终保留为

var()

的回退值，因此即使变量不存在，类仍能正常渲染。

Input forms

输入形式

Form	Example
IDE selection	Select an element or style block in your editor, then run `/inline-style-to-class`
HTML inline attribute	`<div style="background: var(--surface-1); padding: 1rem">`
JSX style object	`<Button style={{ backgroundColor: theme.primary, padding: 8 }}>`
`<style>` block	`<style>.hero { color: red; padding: 2rem; }</style>`

形式	示例
IDE选中内容	在编辑器中选中元素或样式块，然后运行 `/inline-style-to-class`
HTML内联属性	`<div style="background: var(--surface-1); padding: 1rem">`
JSX样式对象	`<Button style={{ backgroundColor: theme.primary, padding: 8 }}>`
`<style>` 块	`<style>.hero { color: red; padding: 2rem; }</style>`

IDE selection detection

IDE选中内容检测

When invoked from an IDE (VS Code, JetBrains), Claude Code includes the selected text along with the source file path and line range. The skill detects this by checking for file-context metadata attached to the user's prompt (a file path with a line range and the selected content).

When IDE selection context is present:

Source file and line range are captured for in-place editing in Step 7.
The selected text is used as the input — no pasting or prompt content needed.
If the selection is a full element (e.g.
```
<div style="..." class="existing">
```
), the element tag and existing classes are preserved during refactoring. In-place editing is enabled — the skill can safely remove the
```
style
```
attribute and add the
```
class
```
reference.
If the selection is only a
```
style
```
attribute value (e.g.
```
background: red; padding: 1rem
```
) without the enclosing element tag, the skill uses
```
Read
```
to load the surrounding lines from the source file and expand context to the full containing element. If expansion succeeds, the full element is used for in-place editing. If the element boundary cannot be determined (e.g. the tag spans many lines or is ambiguous), in-place editing is disabled for this invocation — the refactored source is emitted to chat instead, and the summary notes which file and line to update manually.

When no IDE selection context is detected, the skill falls back to parsing the input from the user's prompt text (the existing behavior).

从IDE（VS Code、JetBrains）调用时，Claude Code会包含选中的文本以及源文件路径和行范围。技能通过检查用户提示中附加的文件上下文元数据（包含行范围的文件路径和选中内容）来检测这一点。

当存在IDE选中内容上下文时：

源文件和行范围会被捕获，用于步骤7中的原地编辑。
选中的文本将作为输入——无需粘贴或提供提示内容。
如果选中的是完整元素（例如
```
<div style="..." class="existing">
```
），重构期间会保留元素标签和现有类。启用原地编辑——技能可以安全地移除
```
style
```
属性并添加
```
class
```
引用。
如果选中的只是
```
style
```
属性值（例如
```
background: red; padding: 1rem
```
）而没有包含元素标签，技能会使用
```
Read
```
加载源文件中的周围行，将上下文扩展到完整的包含元素。如果扩展成功，将使用完整元素进行原地编辑。如果无法确定元素边界（例如标签跨多行或存在歧义），则本次调用禁用原地编辑——重构后的代码会输出到聊天窗口中，摘要会注明需要手动更新的文件和行号。

当未检测到IDE选中内容上下文时，技能会回退到解析用户提示文本中的输入（现有行为）。

Name rules

命名规则

Max 20 characters, kebab-case only (
```
[a-z][a-z0-9-]*
```
).
If
```
name
```
is supplied, apply this sanitisation pipeline in order:
1. Lowercase.
2. Replace spaces and underscores with
```
-
```
  .
3. Strip any character not in
```
[a-z0-9-]
```
  .
4. Strip leading hyphens and leading digits until the name starts with
```
[a-z]
```
  .
5. Strip trailing hyphens. Collapse consecutive hyphens to one.
6. Truncate to 20 chars. If the result is empty after step 6, ask via
```
AskUserQuestion
```
  for a valid name instead of emitting an invalid identifier. Warn the user whenever any coercion occurred.
If
```
name
```
is omitted: auto-generate via the algorithm below. When the result is ambiguous or ≤ 3 chars, ask via
```
AskUserQuestion
```
with the generated name pre-filled as the suggestion.

最大20个字符，仅使用kebab-case格式（
```
[a-z][a-z0-9-]*
```
）。
如果提供了
```
name
```
，按以下顺序应用清理流程：
1. 转换为小写。
2. 将空格和下划线替换为
```
-
```
  。
3. 去除所有不在
```
[a-z0-9-]
```
  范围内的字符。
4. 去除前导连字符和前导数字，直到名称以
```
[a-z]
```
  开头。
5. 去除尾随连字符。将连续的连字符合并为一个。
6. 截断至20个字符。如果步骤6后结果为空，通过
```
AskUserQuestion
```
  询问有效的名称，而不是输出无效标识符。无论何时进行了强制转换，都要向用户发出警告。
如果省略
```
name
```
：通过以下算法自动生成。当结果存在歧义或≤3个字符时，通过
```
AskUserQuestion
```
询问，并将生成的名称预填为建议。

Auto-name algorithm

自动命名算法

If an element tag is present, derive an abbreviation:
```
button
```
→
```
btn
```
,
```
section
```
→
```
section
```
,
```
header
```
→
```
header
```
,
```
nav
```
→
```
nav
```
,
```
ul
```
/
```
li
```
→
```
list
```
,
```
input
```
→
```
input
```
,
```
img
```
→
```
img
```
,
```
a
```
→
```
link
```
. All other tags use the tag name verbatim (e.g.
```
div
```
→
```
div
```
).

From the first declaration in the style source, extract a role hint from the property name:

```
background
```
/
```
background-color
```
/
```
color
```
→
```
bg
```
```
padding
```
/
```
padding-*
```
→
```
pad
```
```
margin
```
/
```
margin-*
```
→
```
gap
```
```
font-size
```
/
```
font-weight
```
/
```
font-*
```
→
```
type
```
```
display
```
/
```
flex
```
/
```
grid
```
→
```
layout
```
```
border
```
/
```
border-*
```
→
```
border
```
```
width
```
/
```
height
```
/
```
min-*
```
/
```
max-*
```
→
```
size
```
```
position
```
/
```
top
```
/
```
left
```
/
```
z-index
```
→
```
pos
```
Any other property — skip the role hint.

Join with
```
-
```
:
```
<tag-abbrev>-<role>
```
, e.g.
```
div-bg
```
,
```
btn-pad
```
. If no tag is available, use the role hint alone.
Truncate to 20 chars. Collapse double
```
-
```
. Strip leading/trailing
```
-
```
.
If the result is empty, use
```
custom-class
```
and warn. If the result is 1–3 chars, ask via
```
AskUserQuestion
```
with the suggestion pre-filled.

如果存在元素标签，推导缩写：
```
button
```
→
```
btn
```
，
```
section
```
→
```
section
```
，
```
header
```
→
```
header
```
，
```
nav
```
→
```
nav
```
，
```
ul
```
/
```
li
```
→
```
list
```
，
```
input
```
→
```
input
```
，
```
img
```
→
```
img
```
，
```
a
```
→
```
link
```
。所有其他标签直接使用标签名（例如
```
div
```
→
```
div
```
）。

从样式源的第一个声明中，从属性名提取角色提示：

```
background
```
/
```
background-color
```
/
```
color
```
→
```
bg
```
```
padding
```
/
```
padding-*
```
→
```
pad
```
```
margin
```
/
```
margin-*
```
→
```
gap
```
```
font-size
```
/
```
font-weight
```
/
```
font-*
```
→
```
type
```
```
display
```
/
```
flex
```
/
```
grid
```
→
```
layout
```
```
border
```
/
```
border-*
```
→
```
border
```
```
width
```
/
```
height
```
/
```
min-*
```
/
```
max-*
```
→
```
size
```
```
position
```
/
```
top
```
/
```
left
```
/
```
z-index
```
→
```
pos
```
任何其他属性——跳过角色提示。

用
```
-
```
连接：
```
<标签缩写>-<角色>
```
，例如
```
div-bg
```
、
```
btn-pad
```
。如果没有标签可用，仅使用角色提示。
截断至20个字符。合并双重
```
-
```
。去除前导/尾随
```
-
```
。
如果结果为空，使用
```
custom-class
```
并发出警告。如果结果为1-3个字符，通过
```
AskUserQuestion
```
询问，并将建议预填。

Stylesheet discovery

样式表发现

Glob for stylesheets in priority order, excluding

**/node_modules/**

**/.git/**

**/dist/**

**/build/**

```
src/**/*.{css,scss,sass}
```
```
styles/**/*.{css,scss,sass}
```
```
app/**/*.{css,scss,sass}
```
```
*.{css,scss,sass}
```
(repo root)

From the matching files, detect:
- Syntax flavor — by extension (
```
.css
```
  ,
```
.scss
```
  ,
```
.sass
```
  ).
- Indentation — read the first non-empty rule body; count leading whitespace characters.
- Trailing newline — note whether the file ends with
```
\n
```
  .
Selection: if exactly one candidate exists, use it. If multiple candidates exist and one is a clear entry file (named
```
globals
```
,
```
main
```
,
```
index
```
,
```
styles
```
,
```
app
```
, or
```
base
```
), use that one. Otherwise prompt with
```
AskUserQuestion
```
to pick.
If no stylesheet is found, emit the CSS block to chat only and note that no target file was detected; invite the user to paste it manually.

按优先级顺序查找样式表，排除

**/node_modules/**

、

**/.git/**

、

**/dist/**

、

**/build/**

：

```
src/**/*.{css,scss,sass}
```
```
styles/**/*.{css,scss,sass}
```
```
app/**/*.{css,scss,sass}
```
```
*.{css,scss,sass}
```
（仓库根目录）

从匹配的文件中检测：
- 语法类型——通过扩展名（
```
.css
```
  、
```
.scss
```
  、
```
.sass
```
  ）。
- 缩进——读取第一个非空规则体；统计前导空格字符数。
- 尾随换行符——记录文件是否以
```
\n
```
  结尾。
选择：如果恰好有一个候选文件，使用它。如果有多个候选文件，且其中一个是明确的入口文件（命名为
```
globals
```
、
```
main
```
、
```
index
```
、
```
styles
```
、
```
app
```
或
```
base
```
），则使用该文件。否则通过
```
AskUserQuestion
```
提示用户选择。
如果未找到样式表，仅在聊天窗口中输出CSS块，并注明未检测到目标文件；邀请用户手动粘贴。

Variable discovery

变量发现

Run this alongside Stylesheet discovery so the class can be tokenized.

Collect existing variables. Across the same glob set (same excludes), grep every custom-property declaration with
```
^\s*(--[A-Za-z0-9_-]+)\s*:\s*([^;\n]+);?
```
— the identifier class allows uppercase and underscores (custom-property names are case-sensitive), and the trailing
```
;
```
is optional so semicolon-less
```
.sass
```
declarations and a block's last unterminated declaration are still captured. Build a reverse map of normalised value → variable name (see normalisation under Value tokenizing rules). This map drives reuse — when a migrated value matches, reference the existing variable instead of creating one.
Detect the naming convention per value category. Inspect the discovered names to infer the project's prefix for each category — e.g. colors as
```
--color-*
```
vs
```
--clr-*
```
vs
```
--c-*
```
; spacing as
```
--space-*
```
vs
```
--spacing-*
```
vs
```
--size-*
```
. Use the detected prefix when creating new variables of that category. If a category has no precedent, fall back to the default semantic prefix listed below.
Locate the declaration target for new variables, in priority order:
- A dedicated tokens/variables file already in the project:
```
tokens.{css,scss,sass}
```
  ,
```
variables.{css,scss,sass}
```
  , or
```
_variables.{scss,sass}
```
  .
- An existing
```
:root { }
```
  block (in any discovered stylesheet, preferring an entry file named
```
globals
```
  ,
```
main
```
  ,
```
index
```
  ,
```
styles
```
  ,
```
app
```
  , or
```
base
```
  ).
- Otherwise: the target stylesheet chosen in Stylesheet discovery — a new
```
:root { }
```
  block will be created at the top of it. Remember this target for the "Declare new variables" workflow step.

与样式表发现同时进行，以便对类进行令牌化处理。

收集现有变量。在相同的查找集合（相同排除项）中，使用
```
^\s*(--[A-Za-z0-9_-]+)\s*:\s*([^;\n]+);?
```
匹配每个自定义属性声明——标识符允许大写和下划线（自定义属性名称区分大小写），尾随的
```
;
```
是可选的，因此无分号的
```
.sass
```
声明和块中最后一个未终止的声明仍能被捕获。构建反向映射：标准化值 → 变量名称（请参阅值令牌化规则下的标准化）。此映射用于复用——当迁移的值匹配时，引用现有变量而非创建新变量。
按值类别检测命名约定。检查发现的名称，推断项目中每个类别的前缀——例如颜色为
```
--color-*
```
vs
```
--clr-*
```
vs
```
--c-*
```
；间距为
```
--space-*
```
vs
```
--spacing-*
```
vs
```
--size-*
```
。创建该类别的新变量时使用检测到的前缀。如果某个类别没有先例，回退到下面列出的默认语义前缀。
定位新变量的声明目标，按优先级顺序：
- 项目中已有的专用令牌/变量文件：
```
tokens.{css,scss,sass}
```
  、
```
variables.{css,scss,sass}
```
  或
```
_variables.{scss,sass}
```
  。
- 现有的
```
:root { }
```
  块（在任何发现的样式表中，优先选择命名为
```
globals
```
  、
```
main
```
  、
```
index
```
  、
```
styles
```
  、
```
app
```
  或
```
base
```
  的入口文件）。
- 否则：在样式表发现步骤中选择的目标样式表——会在其顶部创建一个新的
```
:root { }
```
  块。记住此目标，用于“声明新变量”工作流步骤。

Value tokenizing rules

值令牌化规则

Every concrete value is replaced with a variable. Reuse always wins over creation.

Classify the value:
- color —
```
#hex
```
  (3 or 6 digit, matched by
```
#([0-9a-fA-F]{6}|[0-9a-fA-F]{3})
```
  ),
```
rgb()
```
  /
```
rgba()
```
  ,
```
hsl()
```
  /
```
hsla()
```
  , or a named color (
```
red
```
  ,
```
white
```
  , …).
- length / dimension — a number with a unit (
```
px
```
  ,
```
rem
```
  ,
```
em
```
  ,
```
%
```
  ,
```
vh
```
  ,
```
vw
```
  ,
```
ch
```
  , …).
- radius / font-size / shadow / z-index — recognised from the property name (
```
border-radius
```
  ,
```
font-size
```
  ,
```
box-shadow
```
  ,
```
z-index
```
  ).
- keyword — a bare identifier such as
```
flex
```
  ,
```
block
```
  ,
```
none
```
  ,
```
auto
```
  ,
```
center
```
  .
- other — anything else concrete (e.g. multi-value shorthands); tokenize the whole value as one unit.
Normalise for matching: for hex colors, lowercase and expand 3-digit to 6-digit; for every value, collapse internal whitespace to single spaces. Do not lowercase the value as a whole — preserve case for
```
url(...)
```
paths, quoted strings, and any case-sensitive identifier, so a value never matches a variable that points at a different resource. Matching is exact on the normalised form only — values are never converted across color formats (no hex↔rgb↔hsl) and units are never converted (
```
16px
```
≠
```
1rem
```
). Note this limitation in the summary when relevant.
Skip (do not tokenize):
- Values that are already a
```
var(...)
```
  reference — i.e. the trimmed value begins with
```
var(
```
  — pass through unchanged. Use this prefix check rather than a full regex, so references whose fallback contains nested parens (e.g.
```
var(--x, calc(...))
```
  or
```
var(--x, color-mix(...))
```
  ) are still recognised.
- Unresolved JSX expressions — keep the existing
```
/* unresolved */
```
  placeholder behavior.
Dedupe within a run: the same normalised value resolves to one variable. A variable created earlier in the same run is reused for later occurrences rather than created twice.

每个具体值都会被替换为变量。复用始终优先于创建。

对值进行分类：
- 颜色——
```
#hex
```
  （3位或6位，匹配
```
#([0-9a-fA-F]{6}|[0-9a-fA-F]{3})
```
  ）、
```
rgb()
```
  /
```
rgba()
```
  、
```
hsl()
```
  /
```
hsla()
```
  或命名颜色（
```
red
```
  、
```
white
```
  等）。
- 长度/尺寸——带单位的数字（
```
px
```
  、
```
rem
```
  、
```
em
```
  、
```
%
```
  、
```
vh
```
  、
```
vw
```
  、
```
ch
```
  等）。
- 圆角/字体大小/阴影/z-index——从属性名识别（
```
border-radius
```
  、
```
font-size
```
  、
```
box-shadow
```
  、
```
z-index
```
  ）。
- 关键字——裸标识符，例如
```
flex
```
  、
```
block
```
  、
```
none
```
  、
```
auto
```
  、
```
center
```
  。
- 其他——任何其他具体值（例如多值简写）；将整个值作为一个单元进行令牌化。
标准化以进行匹配：对于十六进制颜色，转换为小写并将3位扩展为6位；对于每个值，将内部空格折叠为单个空格。不要将整个值转换为小写——保留
```
url(...)
```
路径、引号字符串和任何区分大小写的标识符的大小写，确保值永远不会指向不同资源的变量匹配。仅在标准化形式上精确匹配——值不会跨颜色格式转换（无十六进制↔rgb↔hsl），单位也不会转换（
```
16px
```
≠
```
1rem
```
）。相关时在摘要中注明此限制。
跳过（不进行令牌化）：
- 已经是
```
var(...)
```
  引用的值——即修剪后的值以
```
var(
```
  开头——直接保留。使用此前缀检查而非完整正则表达式，以便回退包含嵌套括号的引用（例如
```
var(--x, calc(...))
```
  或
```
var(--x, color-mix(...))
```
  ）仍能被识别。
- 未解析的JSX表达式——保留现有的
```
/* unresolved */
```
  占位符行为。
单次运行内去重：相同的标准化值解析为一个变量。在同一次运行中，较早创建的变量会被后续出现的相同值复用，而非重复创建。

Naming new variables

新变量命名

When no existing variable matches, create one:

Use the project's detected prefix for the value's category (from Variable discovery step 2).
If there is no precedent, use the default semantic template for the category:
- color →
```
--color-1
```
  ,
```
--color-2
```
  , … (or a descriptive
```
--color-<role>
```
  when the property implies one)
- length / spacing →
```
--space-*
```
- size (
```
width
```
  /
```
height
```
  /
```
min-*
```
  /
```
max-*
```
  ) →
```
--size-*
```
- radius →
```
--radius-*
```
- font-size →
```
--font-size-*
```
  (or
```
--text-*
```
  if that prefix is already used)
- shadow →
```
--shadow-*
```
- z-index →
```
--z-*
```
- keyword →
```
--<property>-<value>
```
  (e.g.
```
display: flex
```
  →
```
--display-flex
```
  )
Sanitise the candidate to a valid custom-property identifier: lowercase, replace
```
.
```
and spaces with
```
-
```
, strip any character not in
```
[a-z0-9-]
```
, collapse consecutive hyphens (e.g.
```
1.5rem
```
→
```
space-1-5rem
```
).
Collision handling: if the name already exists with a different value, append
```
-2
```
,
```
-3
```
, … until unique.

当没有匹配的现有变量时，创建一个新变量：

使用项目中检测到的值类别前缀（来自变量发现步骤2）。
如果没有先例，使用该类别的默认语义模板：
- 颜色 →
```
--color-1
```
  、
```
--color-2
```
  …（当属性暗示角色时，使用描述性的
```
--color-<role>
```
  ）
- 长度/间距 →
```
--space-*
```
- 尺寸（
```
width
```
  /
```
height
```
  /
```
min-*
```
  /
```
max-*
```
  ） →
```
--size-*
```
- 圆角 →
```
--radius-*
```
- 字体大小 →
```
--font-size-*
```
  （如果已使用
```
--text-*
```
  前缀，则使用该前缀）
- 阴影 →
```
--shadow-*
```
- z-index →
```
--z-*
```
- 关键字 →
```
--<property>-<value>
```
  （例如
```
display: flex
```
  →
```
--display-flex
```
  ）
清理候选名称为有效的自定义属性标识符：转换为小写，将
```
.
```
和空格替换为
```
-
```
，去除所有不在
```
[a-z0-9-]
```
范围内的字符，合并连续的连字符（例如
```
1.5rem
```
→
```
space-1-5rem
```
）。
冲突处理：如果名称已存在但对应不同的值，追加
```
-2
```
、
```
-3
```
…直到唯一。

Workflow

工作流

Parse input. Check for IDE selection context first, then fall back to prompt text:
- IDE selection — if the user's prompt includes file-context metadata (source path + line range + selected text), use the selected text as input and record the source file path and line range for in-place editing in step 7. Determine the form (HTML attribute, JSX object, or
```
<style>
```
  block) from the selected content using the same detection rules below.
- HTML inline attribute — match
```
style="..."
```
  or
```
style='...'
```
  ; split on
```
;
```
  ; trim; parse
```
property: value
```
  pairs. Extract the surrounding element tag if present.
- JSX style object — match
```
style={{...}}
```
  ; extract the object literal body; split key/value pairs. Convert each camelCase key to kebab-case (insert
```
-
```
  before each uppercase letter, then lowercase the whole key). For numeric literal values, emit a coercion warning: "numeric value — verify unit". For any value that is a JS expression (not a string or number literal), emit a
```
/* unresolved: <expr> */
```
  placeholder.
- <style>
  block — extract content between
```
<style>
```
  and
```
</style>
```
  ; parse rules. If one rule, use its declarations. If multiple rules, ask via
```
AskUserQuestion
```
  : merge all declarations or pick a specific rule.
Determine the class name. Apply the Name rules above. Use the
```
[name]
```
argument if provided. Otherwise apply the auto-name algorithm. If the generated name is ambiguous or ≤ 3 chars, ask via
```
AskUserQuestion
```
with the suggestion pre-filled.
Discover the target stylesheet and existing variables. Follow the Stylesheet discovery and Variable discovery sections. Confirm the chosen file with the user only when the choice is ambiguous.
Build the CSS class block. Emit using the detected syntax flavor and indentation:
- Comment header:
```
/* from: <source summary — e.g. "style attr on <div>", "JSX style object", or "<style> block" */
```
  .
- One property per line.
- Tokenize every value via the Value tokenizing rules: reuse a matching existing variable or create a new one, then emit
```
property: var(--name, <original-literal>);
```
  with the original literal kept as the fallback. Skip values that are already
```
var(...)
```
  references and unresolved expressions.
- Unresolved JSX expressions:
```
/* <property>: unresolved — was JS expression */
```
  .
- Numeric values (no unit): still tokenize, but append a
```
/* verify unit */
```
  inline comment after the declaration.
- For Sass-indented (
```
.sass
```
  ) syntax, omit braces and use the detected indentation.
Declare new variables. For each variable created in step 4, write its
```
--name: value;
```
declaration to the target located in Variable discovery step 3 (a tokens/variables file, an existing
```
:root
```
block, or — if none exists — a new
```
:root { }
```
block inserted at the top of the target stylesheet). Match the file's detected syntax flavor, indentation, and trailing-newline convention; for
```
.sass
```
, omit braces. Reused (already-existing) variables are not re-declared.
Append to the target stylesheet. Use
```
Edit
```
to append the class block, preceded by one blank line. Preserve any trailing newline the file already had.
Emit refactored source. Produce a clean version of the original input with the inline style removed:
- HTML — remove the
```
style="..."
```
  attribute entirely if all declarations migrated; if some were unresolved, keep only unmigrated declarations in the attribute. Add the new class to any existing
```
class
```
  attribute (append to the list); if none exists, add
```
class="<name>"
```
  . Preserve all other attributes unchanged (
```
data-*
```
  ,
```
id
```
  ,
```
aria-*
```
  ).
- JSX — same logic using
```
className
```
  . For partially-migrated objects, preserve remaining key/value pairs in the style prop.
- <style>
  block — emit a comment noting the rule was extracted:
```
/* rule moved to .<name> in <stylesheet path> */
```
  ; do not rewrite the
```
<style>
```
  block automatically.
- In-place editing (IDE selection). When the source file path and line range were captured in step 1, use
```
Edit
```
  to replace the original selected text in the source file with the refactored version. This removes the inline style and adds the class reference directly in the user's file — no manual copy-paste needed. If the edit would be ambiguous (the selected text appears more than once in the file), fall back to emitting the refactored source in chat and note which file and line to update.
Print a summary:
- Class name chosen, whether it was provided or auto-generated, and any coercion warnings.
- Target stylesheet path and confirmation that the class was appended (or a note if no file was found).
- Source file edited in-place (if IDE selection was used) — show the file path and confirmation, or note that the refactored source was emitted to chat instead.
- Number of declarations migrated.
- Variables reused: each
```
value → --name
```
  that matched an existing variable.
- Variables created: each
```
--name: value
```
  and the file it was declared in.
- Number of unresolved JS expressions (if any).
- Numeric-value unit warnings (if any).

解析输入。首先检查IDE选中内容上下文，然后回退到提示文本：
- IDE选中内容——如果用户提示包含文件上下文元数据（源路径+行范围+选中文本），使用选中文本作为输入，并记录源文件路径和行范围用于步骤7中的原地编辑。根据选中内容使用以下相同的检测规则确定形式（HTML属性、JSX对象或
```
<style>
```
  块）。
- HTML内联属性——匹配
```
style="..."
```
  或
```
style='...'
```
  ；按
```
;
```
  拆分；修剪；解析
```
property: value
```
  对。如果存在，提取周围的元素标签。
- JSX样式对象——匹配
```
style={{...}}
```
  ；提取对象字面量主体；拆分键/值对。将每个驼峰式键转换为短横线式（在每个大写字母前插入
```
-
```
  ，然后将整个键转换为小写）。对于数值字面量值，输出强制转换警告："数值型值——请验证单位"。对于任何JS表达式值（非字符串或数字字面量），输出
```
/* unresolved: <expr> */
```
  占位符。
- <style>
  块——提取
```
<style>
```
  和
```
</style>
```
  之间的内容；解析规则。如果只有一个规则，使用其声明。如果有多个规则，通过
```
AskUserQuestion
```
  询问：合并所有声明或选择特定规则。
确定类名。应用上述命名规则。如果提供了
```
[name]
```
参数，则使用该参数。否则应用自动命名算法。如果生成的名称存在歧义或≤3个字符，通过
```
AskUserQuestion
```
询问，并将建议预填。
发现目标样式表和现有变量。遵循样式表发现和变量发现部分的内容。仅当选择存在歧义时，与用户确认所选文件。
构建CSS类块。使用检测到的语法类型和缩进输出：
- 注释头：
```
/* from: <源摘要——例如"style attr on <div>"、"JSX style object"或"<style> block"> */
```
  。
- 每行一个属性。
- 对每个值进行令牌化：通过值令牌化规则，复用匹配的现有变量或创建新变量，然后输出
```
property: var(--name, <original-literal>);
```
  ，保留原始字面量作为回退值。跳过已经是
```
var(...)
```
  引用的值和未解析的表达式。
- 未解析的JSX表达式：
```
/* <property>: unresolved — was JS expression */
```
  。
- 数值型值（无单位）：仍进行令牌化，但在声明后追加
```
/* verify unit */
```
  内联注释。
- 对于Sass缩进（
```
.sass
```
  ）语法，省略大括号并使用检测到的缩进。
声明新变量。对于步骤4中创建的每个变量，将其
```
--name: value;
```
声明写入变量发现步骤3中定位的目标（令牌/变量文件、现有
```
:root
```
块，或者——如果不存在——在目标样式表顶部插入新的
```
:root { }
```
块）。匹配文件检测到的语法类型、缩进和尾随换行符约定；对于
```
.sass
```
，省略大括号。已复用（已存在）的变量不会重新声明。
添加到目标样式表。使用
```
Edit
```
添加类块，前面加一个空行。保留文件已有的任何尾随换行符。
输出重构后的代码。生成原始输入的干净版本，移除内联样式：
- HTML——如果所有声明都已迁移，完全移除
```
style="..."
```
  属性；如果某些声明未解析，仅保留属性中未迁移的声明。将新类添加到任何现有
```
class
```
  属性（追加到列表中）；如果不存在，添加
```
class="<name>"
```
  。保留所有其他属性不变（
```
data-*
```
  、
```
id
```
  、
```
aria-*
```
  ）。
- JSX——使用
```
className
```
  遵循相同逻辑。对于部分迁移的对象，保留样式属性中剩余的键/值对。
- <style>
  块——输出注释注明规则已提取：
```
/* rule moved to .<name> in <stylesheet path> */
```
  ；不会自动重写
```
<style>
```
  块。
- 原地编辑（IDE选中内容）。如果步骤1中捕获了源文件路径和行范围，使用
```
Edit
```
  将源文件中原始选中的文本替换为重构后的版本。这会直接在用户的文件中移除内联样式并添加类引用——无需手动复制粘贴。如果编辑存在歧义（选中的文本在文件中多次出现），回退到在聊天窗口中输出重构后的代码，并注明需要更新的文件和行号。
打印摘要：
- 选择的类名，是用户提供还是自动生成，以及任何强制转换警告。
- 目标样式表路径，以及类已添加的确认（或未找到文件的说明）。
- 原地编辑的源文件（如果使用了IDE选中内容）——显示文件路径和确认，或注明重构后的代码已输出到聊天窗口。
- 迁移的声明数量。
- 复用的变量：每个匹配现有变量的
```
value → --name
```
  。
- 创建的变量：每个
```
--name: value
```
  及其声明的文件。
- 未解析的JS表达式数量（如果有）。
- 数值型值单位警告（如果有）。