Javascript CSS@media查询（和其他嵌套选择器）的正则表达式解析

我正在开发一个使用正则表达式解析CSS文件的节点脚本，它工作得非常好。。。处理@media查询时除外。这个问题是由于嵌套的花括号，这给了我适合。基本上，我想创建一个媒体查询中所有内容的捕获组：以下是我到目前为止得到的内容

@media[^{]+\{（[^}]+）}\s*}

这适用于以下简单的情况：

@media (max-width: 868px) {
  aside .size-toggle {
    display: none;
  }
}

但无法拾取多个嵌套规则，如下所示：

@media (max-width: 767px) {
  #wrapper.sidebar-display aside {
    left: 0;
    transition: all 0.5s ease;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -ms-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
  }
  #wrapper.sidebar-display #top-nav {
    left: 0;
    right: -194px;
  }
}

我需要如何修改我的正则表达式，以便捕获组包含每个@media查询中的所有选择器和规则？

试试这个正则表达式：

/@media[^{]+\{([\s\S]+?})\s*}/g

演示

---

您使用的是什么语言/平台？这听起来很危险。解析器如何处理特定于internet explorer的图像过滤器？它们有非常不同的模式，这在CSS中很常见，并且可能很容易破坏解析器。据我所知，它能处理IE特有的垃圾。代码使用

（[^@{}]+）}

捕获每个选择器的全部内容，然后根据

：

将每个规则分解为基本上的键/值对。是双人房{这导致它在媒体查询的情况下发生故障，这正是我需要帮助的地方。我的计划是捕获媒体查询的全部内容，然后通过脚本的常规部分运行该内容，基本上将其视为一个自包含的CSS文件。请参阅此相关问题，答案是用PHP编写的，但应该是e易于移植到JS。您的问题缺少您想要实现的具体内容的上下文，但通常使用正则表达式编写您自己的“解析器”是个坏主意。您可能应该使用一些成熟的模块，如。