1838806 - Merge shared ancestors for nested/grouped rules

Status: NEW

(DevTools :: Inspector: Rules, enhancement, P3)

Description

[Nicolas Chevobbe [:nchevobbe]]

The following CSS:

body {
  #myDiv {
    color: red;
    @media screen {
      background: black;
    }

    &:hover {
      color: blue;
    }
  }
}

will results in 3 rules being displayed in the rule view:

body {
  #myDiv {
    &:hover {
      color: blue;
    }
  }
}

body {
  #myDiv {
    @media screen {
      & {
        background: black;
      }
    }
  }
}

body {
  #myDiv {
    color: red;
  }
}

It would be really nice if we could somehow group those nested rules in their common ancestors like:

body {
  #myDiv {
    &:hover {
      color: blue;
    }

    @media screen {
      & {
        background: black;
      }
    }

    color: blue;
  }
}

or if we're afraid of mixing nested rules and properties, maybe only sharing common ancestors and keeping separate "leaf" rules

body {
  #myDiv {
    &:hover {
      color: blue;
    }
  }

  #myDiv {
    @media screen {
      & {
        background: black;
      }
    }
  }

  #myDiv {
    color: blue;
  }
}

I'm sure there's probably a lot of things that should be taken into consideration here, but it seems to make sense to have a representation that is close to the authored text