样式革新：CSS To JavaScript对象 — Numio

使用 postcss-js 将普通 CSS 转换为 JavaScript 对象（CSS-in-JS）。属性名变为 camelCase，选择器和 at 规则变为键，同一规则中重复出现的属性会变为值数组。

把 .css 文件中的样式迁移到 styled-system、JSS、Emotion 或 Radium 对象中，无需逐个重写属性。

CSS

JavaScript Object

适用场景

把 .css 文件中的样式迁移到 styled-system、JSS、Emotion 或 Radium 对象中，无需逐个重写属性。
把从设计工具或浏览器 DevTools 复制的 CSS 片段转换为对象，用于内联样式或 style prop。

使用方法

将 CSS 粘贴到 CSS 编辑器，或将 .css 文件拖入其中。
在 JavaScript Object 面板中查看结果；它被赋值给 `const converted`，并由 Prettier 格式化（不带分号）。
复制该对象，重命名 `converted`，挑出需要的选择器键。此页面没有可调整的设置。

CSS 输入

.card {
  display: flex;
  background-color: #fff;
  -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
  margin: 0 auto;
}

.card:hover .title {
  color: tomato;
}

@media (max-width: 600px) {
  .card { flex-direction: column; }
}

JavaScript 对象

const converted = {
  ".card": {
    display: "flex",
    backgroundColor: "#fff",
    WebkitBoxShadow: "0 1px 2px rgba(0, 0, 0, 0.1)",
    margin: "0 auto",
  },
  ".card:hover .title": { color: "tomato" },
  "@media (max-width: 600px)": { ".card": { flexDirection: "column" } },
}

功能与限制

转换在浏览器的 Web Worker 中运行（PostCSS 解析 + postcss-js objectify），CSS 不会发送到服务器。

带厂商前缀的属性以 PascalCase 保留前缀（例如 -webkit-box-shadow 变为 WebkitBoxShadow）。--main-color 等自定义属性保留原名。

值保持为字符串，但 z-index 这类无单位的数值属性会变为数字。注释会被丢弃。

输出不能直接用于 React Native：选择器、:hover 和 @media 块会保留为嵌套键，简写值也不会展开。

FAQ

同一个选择器出现两次会怎样？

相同选择器的规则会合并到一个键中。如果同一属性声明了两次，例如 color: red !important; color: blue，该键的值为数组：["red !important", "blue"]。

支持 @media 查询和嵌套选择器吗？

支持。@media 块会变成 "@media (max-width: 600px)" 这样的键，其值是包含内部规则的对象。后代选择器和伪类选择器保持为完整的字符串键。

为什么会出现 "Unclosed block" 错误？

输入必须是有效的 CSS。PostCSS 遇到缺少右花括号之类的语法错误时会停止，并报告行号和列号；这里不会编译 Sass 或 Less 语法（变量、嵌套）。

规范与参考资料

postcss-js on GitHub