正则表达式 - 复制 CSS 选择器并替换为新的选择器

Question

为了限制大型项目中不同方使用的 css 库的范围（从而减少冲突），我成功地创建了一个正则表达式代码，该代码在所有 css 选择器前面加上给定的选择器（在这种情况下 # test-id，例如：https://regex101.com/r/SNJZx2/1)。

为了让这项工作更有用，我想

1. 复制所有前缀选择器（选择器具有前面的#test-id 并以, 或{ 结尾）
2. 用另一个选择器替换#test-id 的重复值（比如说section#test-id-1）

---

示例 CSS：

#test-id .breadcrumb,
#test-id .button {
  user-select: none;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif
}

@media screen and (min-width:769px), print {
  #test-id .is-size-1-tablet {
    font-size: 3rem !important
  }
}

想要的结果：

section#test-id-1 .breadcrumb, 
#test-id .breadcrumb,
section#test-id-1 .button, 
#test-id .button {
  user-select: none;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif
}

@media screen and (min-width:769px), print {
  section#test-id-1 .is-size-1-tablet,
  #test-id .is-size-1-tablet {
    font-size: 3rem !important
  }
}

注意：现实世界的文件可能会被缩小，这意味着匹配换行符^ 作为一个可靠的起点可能不起作用。

---

这样我们现在已经成功地限制了 CSS 文件的范围，并且还允许它应用于多个“部分”。

有哪些 RegEx 方法在这里会有所帮助？

干杯！

Answer 1

这应该可行：

s = s.replace(/(#test-id.+),/g, "$1,\nsection$1,")
s = s.replace(/(#test-id.+){/g, "$1,\nsection$1{")

我们需要两个正则表达式来表示两个选项： 1. 如果定义不是最后一个（即以逗号结尾） 2. 如果是最后一个（以花括号结尾）。

这是一个小提琴：https://jsfiddle.net/vs0mrcfa/9/