Mediaquery and maven variable

[yvanavermaet]

Hi

We've encountered a small issue with our current set-up.

• We use Akamai to cache our images
• Some HTML-elements have a background-image
• If we update these images (in our /img-folder), we also need to update a fingerprint (parameter 'c' in the examples below), so that these new images are picked up by Akamai (otherwise it'll return the old cached version)
• The fingerprint is automatically replaced by Maven, our build tool

In the code below this works great

body {
    background: transparent url('../img/image-small.jpg?c=${buildNumber}') 50% top no-repeat;
    background-size: cover;
}

Output

body {
    background: transparent url("../img/image-small.jpg?c=${buildNumber}") 50% top no-repeat;
    background-size: cover;
}

If we now add a media query, this doesn't work

body {
    background: transparent url('../img/image-small.jpg?c=${buildNumber}') 50% top no-repeat;
    background-size: cover;

    @media only screen and (min-width: 600px) {
        background-image: url('../img/image-medium.jpg?c=${buildNumber}');
        background-position: left top;
    }
}

Output

body {
    background: transparent url("../img/image-small.jpg?c=${buildNumber}") 50% top no-repeat;
    background-size: cover;
}
    body {
        background-image: url("../img/image-medium.jpg?c=${buildNumber}");
        background-position: left top;
    }
}

Expected output

body {
    background: transparent url("../img/image-small.jpg?c=${buildNumber}") 50% top no-repeat;
    background-size: cover;
}

@media only screen and (min-width: 600px) {
    body {
        background-image: url("../img/image-medium.jpg?c=${buildNumber}");
        background-position: left top;
    }
}

Notice the missing media query
It's not possible to replace ${buildNumber} with another string/value.

Gulp-bless version 3.0.1, bless version 3.0.3.
At first I thought it was related to node-sass, but after further investigation, it seems it's related to (gulp-)bless

Thanks in advance.

Kind regards,
Yannick

[aabenoja]

body {
    background: transparent url('../img/image-small.jpg?c=${buildNumber}') 50% top no-repeat;
    background-size: cover;

    @media only screen and (min-width: 600px) {
        background-image: url('../img/image-medium.jpg?c=${buildNumber}');
        background-position: left top;
    }
}

1. This is a known limitation of bless v3.
2. Bless is not a preprocessor. Your media query example is not valid css. Feeding such into v4 will cause the parser to throw on your media query. Here's a fiddle.

[yvanavermaet]

@aabenoja I should have stated that my code example was written in scss, my bad. A good css example is

body {
    background: transparent url("../img/image-small.jpg?c=${buildNumber}") 50% top no-repeat;
    background-size: cover;
}

@media only screen and (min-width: 200px) {
    body {
        background-image: url("../img/image-medium.jpg?c=${buildNumber}");
        background-position: left top;
    }
}

Aha, it's a limitation of v3. Will it be possible in v4 of bless?

[aabenoja]

Correct.