将React内联样式转换为CSS规则

Question

是否有工具将React内联样式描述转换为CSS规则？

示例输入：

{
    minHeight: 200,
    position: 'relative',
    flexGrow: 1,
    flexShrink: 1,
    display: 'flex',
    flexDirection: 'column',
}

示例输出：

{
    min-height: 200px;
    position: relative;
    flex-grow: 1;
    flex-shrink: 1;
    display: flex;
    flex-flow: column;
}

换句话说，我想要一个与此完全相反的工具：https://github.com/raphamorim/native-css

我想手动使用它，因此最好使用命令行或基于Web。

Answer 1

是的，有一个工具可以做到这一点！

https://glitch.com/~convert-css-js

如果将示例输入粘贴到JS端（必须用括号括起来），则会得到指定的CSS输出（减去最后的分号）。

Answer 2

您是否尝试过“JSS的命令行工具”https://github.com/cssinjs/cli

Answer 3

  

是否有工具可将React内联样式描述转换为CSS   规则？

是一个工具，是的。它是正则表达式（或 RegEx ）。

如果您想转换以下内容：

• nH =＆gt; n-h （minHeight =＆gt; min-height）
• xG =＆gt; x-g （flexGrow =＆gt; flex-grow）
• xS =＆gt; x-s （flexShrink =＆gt; flex-shrink）
• xD =＆gt; x-d （flexDirection =＆gt; flex-direction）

每次都是相同的Regex操作。

模式匹配是：

/([a-z])([A-Z])/

即。一个小写字母后跟一个大写字母，捕获每个字母。

替换是：

$1-\L$2

ie。

• 保留捕获的小写字母
• 使用连字符
跟踪捕获的小写字母
• 使用捕获的大写字母的小写版本跟随连字符