mnussbaumer / cssex

An Elixir based and opinionated way to write CSS
MIT License
20 stars 0 forks source link

Nested media queries #50

Closed mnussbaumer closed 6 months ago

mnussbaumer commented 6 months ago

As of now there's a bug when traversing back the selector chain with media queries, if the depth of the media query is higher than 1 - the selector gets botched.

Usually I also prefer to leave all media queries at either the top level of a sheet or at depth 1 of a selector, but it's just weird that it won't work and sometimes it's also very annoying to copy a selector chain with several depth levels, into a top-level/level1 media query so to target that specific chain in that media query - as it would be much easier to just had the media query inside the original chain that we want to be targeting.

Example:

.a {
  .b {
    .c {
       some-rule: some-value;
    }
  }
  @media (...) { 
    .b {
      .c {
        some-rule: some-value;
      }
    }
  }
}

Where we could instead just have:

.a {
  .b {
    .c {
       some-rule: some-value;
       @media (...) {
         some-rule: other-value;
       }
    }
  }
}
mnussbaumer commented 6 months ago

Solved by https://github.com/mnussbaumer/cssex/pull/53