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

Question

我正在开发一个 Node 脚本，它使用正则表达式来解析 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/1