根据属性计数将 CSS 格式化为单行或多行

Question

考虑以下 CSS：

.foo {
 color: red;
}

.bar {
 color: blue;
 font-size: 14px;
}

.baz { color: pink }

我的奇异问题是：什么正则表达式会按如下方式格式化该代码 - 所有带有一个属性 (.foo) 的声明都应该在一行。任何包含多个属性 (.bar) 的声明都应保留在多行中。已经恰好在一行 (.baz) 上的一项声明规则应保持原样。

.foo { color: red }

.bar {
 color: blue;
 font-size: 14px;
}

.baz { color: pink }

我曾尝试将 Notepad++ 作为一个明显而强大的选择，但我无法找到确切的正则表达式。

我具体试过的：

我尝试使用通配符进行搜索替换：

搜索：

{*\r\n}

替换：

{  }

Answer 1

即使 media queries:

这也行得通

正则表达式

{\s*+([^:{}]+:[^:{}]+?)\s*}

{\s*+ - 检测左大括号并贪婪地捕获空格
([^:{}]+:[^:{}]+?) - 找到一个属性并将其保存到捕获组 1
\s*+} - 贪婪地捕获空格和右花括号

替换

{  }

将输出格式化为所需的无换行样式

https://regex101.com/r/j5NPQH/1

Answer 2

Ctrl+H
查找内容：{\s+(.+)\s+}
替换为：{ }
检查环绕
检查 正则表达式
取消选中 . matches newline
全部替换

解释：

{           # literally
\s+         # 1 or more spaces
(.+)        # group 1, 1 or more any character but newline
\s+         # 1 or more spaces
}           # literally

截图（之前）：

截图（之后）：

根据属性计数将 CSS 格式化为单行或多行

Formatting CSS into single or multiple lines based on property count

css

regex

notepad++

code-formatting

根据 属性 计数将 CSS 格式化为单行或多行

Formatting CSS into single or multiple lines based on property count

css

regex

notepad++

code-formatting

根据属性计数将 CSS 格式化为单行或多行