Invalid output from 'image' mixin with background-size: cover

[chrisfrancis27]

The image mixin generates invalid syntax when using either the cover or contain keyword. For example (using Stylus):

image '/images/kittens.png' cover
background-size cover

Becomes:

background-image: url("/images/kittens.png");
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;

@media all and (-webkit-min-device-pixel-ratio: 1.5) {
  body {
    background-image: url("\images\kittens@2x.png");
    -webkit-background-size: cover auto;
    -moz-background-size: cover auto;
    background-size: cover auto;
  }
}

You can see that the CSS outside the media query is correct, using the cover keyword on its own. However, the media query rule takes cover as the first argument and then appends auto as the second, which is invalid. Similarly, specifying cover cover would also be invalid, as the keyword must only appear on its own.

It would be good if the parser could detect when either the cover or contain keyword is used and omit the second argument.

See this MDN article for more info.

Cheers, Chris

[notslang]

as a temporary fix, you could pass an empty string as the 2nd param. but I agree, this needs to be fixed

[chrisfrancis27]

Ha, I never even thought of passing an empty string! That would work as a workaround for now. Thanks!