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

【问题标题】：Formatting CSS into single or multiple lines based on property count根据属性计数将 CSS 格式化为单行或多行
【发布时间】：2022-01-04 18:12:19
【问题描述】：

考虑以下 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}

替换：

{ $1 }

【问题讨论】：

结束投票。你无法弥补。如果不是下面两个人花时间，并运用他们的专业知识提供帮助，我会立即放弃这个网站。我不明白的一件事是，如果一个问题值得一个（非常好的）答案，那么这个问题本身不应该得到赞成吗？答案的努力不是暗示这是一个好问题吗？
很抱歉你有这种感觉。在 Stack Overflow 上，特别是在正则表达式标签中，您应该展示您尝试过的内容。完全错误或仅差 1 个字符都没关系，它可以提示我们您已经理解了哪些概念，还可以提供对预期边缘情况的见解。就目前而言，您的问题归结为“为我做这件事”。我认为您的问题对我个人来说是一个有趣的挑战，所以我确实提供了答案；我没有投反对票，也没有提供接近投票。
@MonkeyZeus - 感谢您的澄清。公平地说，我确实对我的想法提供了一个非常粗略的大纲。我会尝试编辑问题，虽然如何......我不知道。
我已将您的问题编辑为必需品。在这个网站上任何好的贡献者都不关心吹嘘。只需轻松识别您的问题、目标并展示您的尝试即可。 Stack Overflow 是一头善变的野兽……
好的。在虚空中大喊一秒钟感觉很好：）保重。

标签： css regex notepad++ code-formatting

【解决方案1】：

即使media queries 也可以：

正则表达式

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

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

替换

{ $1 }

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

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

【讨论】：

非常感谢！开箱即用。考虑媒体查询的额外荣誉。事实上，我在 SCSS 上使用了它，以及各种其他边缘情况（包括、变量、mixin），然后它完美地编译。再次感谢队友，非常感谢。
@mayersdesign 很高兴你喜欢它！我还编码的一个极端情况是在换行符上有一个属性和值。所以color: {newline} blue如果出现在你的源文本中也会被处理。

【解决方案2】：

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

说明：

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

屏幕截图（之前）：

截图（之后）：

【讨论】：

非常感谢，我相信这和上面的答案一样有效，只是把你打败了。非常感谢。
@mayersdesign：不客气，很高兴它有帮助。