postcss / postcss-nested

PostCSS plugin to unwrap nested rules like how Sass does it.
MIT License
1.15k stars 66 forks source link

Unwrap media rules #141

Closed adamalfredsson closed 2 years ago

adamalfredsson commented 2 years ago

Given this input:

@media screen {
  html {
    background-color: blue;
  }
  @media (min-width: 640px) {
    html {
      background-color: red;
    }
  }
}

The output is unchanged. I would like to unwrap the media rules, like so:

@media screen {
  html {
    background-color: blue;
  }
}

@media screen and (min-width: 640px) {
  html {
    background-color: red;
  }
}

I've also tried without success to explicitly add media to the unwrap options, resulting in the following .postcssrc configuration:

{
  "plugins": {
    "postcss-nested": { "unwrap": ["media"] }
  }
}

I know that nested media queries is valid css, but I'm struggling with IE11 which doesn't support it.

Using:

"postcss": "^8.3.11",
"postcss-nested": "^5.0.6",
ai commented 2 years ago

We doesn’t do @media joining since it is hard. I think it better to do in CSS minifier.

Does this CSS is invalid? Looks like valid for me:

@media screen {
  html {
    background-color: blue;
  }
  @media (min-width: 640px) {
    html {
      background-color: red;
    }
  }
}
adamalfredsson commented 2 years ago

Yes, however it is unfortunately not supported with IE11

ai commented 2 years ago

It is another reason to make media joining in minificator or in postcss-preset-env (compatibility with old browsers).

adamalfredsson commented 2 years ago

Thanks, I'll look into that!

Do you think it would be helpful to add to documentation that it does not unwrap @media at-rules?

ai commented 2 years ago

Do we really need to care about IE 11 for mainstream development?

adamalfredsson commented 2 years ago

Probably this issue will suffice as documentation, I suppose.