juice icon indicating copy to clipboard operation
juice copied to clipboard

Apply @media queries inline

Open mitar opened this issue 8 years ago • 2 comments

It seems this package currently allow only copying over @media queries. But I would prefer that @media tested for and then CSS rules applied, removing @media queries. For example, my CSS contains:

html{
  line-height: 1.5;

  @media only screen and (min-width: 0) {
    font-size: 14px;
  }

  @media only screen and (min-width: $medium-screen) {
    font-size: 14.5px;
  }

  @media only screen and (min-width: $large-screen) {
    font-size: 15px;
  }

  font-family: "Roboto", sans-serif;
  font-weight: normal;
  color: $off-black;
}

I would like to define some way to say that juice should apply media for screen and with min-width 1000. And then font-size: 15px; would be applied inline to html.

mitar avatar Nov 13 '16 10:11 mitar

This is an interesting idea. I'm not sure that I'll have time to do this, but would accept a pull request for this. What is your use case for this?

jrit avatar Nov 17 '16 15:11 jrit

E-mail generation. I would like that instead of my CSS for large screen is applied to my HTML e-mail, a smaller one is applied (because Gmail has a fixed width).

Even more cool it would be if I could use email as a @media selector and then I could have e-mail only CSS rules. Like:

@media only email {
    font-size: 15px;
  }

mitar avatar Feb 04 '17 08:02 mitar