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

Question

我正在研究一个节点脚本,它使用正则表达式来解析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查询中的所有选择器和规则？

Answer 1

试试这个正则表达式:

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

演示

http://regex101.com/r/iT2eR5