Media Queries partially removed

[bluerouse]

Hi I just tested blesscss to get my css splitted to multiple files. I remarked then, using a diff-tool, that there are 3 lines for media-queries just deleted: @media all and (min-width: 41.3125em) and (max-width: 50em) { @media all and (max-width: 41.25em) { @media all and (min-width: 41.3125em) and (max-width: 50em) { => As there is the opening bracket missing, but not the closing one, the css is really broken completely, not only the code inside the mediaquery. All other lines of code are perfectly splitted into 2 files and this would work really great!

Any idea where the problem could be? Is it possible to fix this?

Thanks!

[paulyoung]

Could be related to #23. This will most likely be fixed when v4 lands.

[bluerouse]

Thanks for the fast answer! So there is no chance, that this is fixed in the current version, right?

[paulyoung]

It's not impossible, just that my time is limited at the moment and v4 is pretty close to a release candidate.

The current version relies on a regular expression which is probably where the issue lies, but I'm hesitant to make changes to that this point.

Version 4 does away with the regular expression and will be much easier to maintain.

Having a failing spec that reproduces the issue in isolation would be a good start.

Pull requests welcome!

[bluerouse]

Perfect, thanks! I'll be happy to test your v4 release candidate, when it's ready then. Thanks!

[t22james]

Somewhat related to this, I'm just wondering Paul if Bless is written so that it will not split INSIDE a media query? other css splitters we have tried have unfortunately split at 'x' selector, regardless of whether that selector is inside a media query. This means the media query is unclosed at the end of the first file, and never opened at the top of the second.... ? thanks!

[aabenoja]

@t22james This is addressed in the v4 changes. If the media query has enough selectors to reach the selector limit a new stylesheet is created and the media query is pushed to that instead.

[t22james]

thanks for the quick reply- am I to infer that presently (in builds <4) Bless WILL split inside a media query? dam- that's a killer bug! is there an estimate for V4 release?

[paulyoung]

Hi @t22james

v3 should not split media queries. I remember accounting for that case, however there may be bugs.

v4 should handle handles this more elegantly.

[t22james]

ok great- will however need to keep eyes open for op's problem..

[jkrehm]

I had a similar problem to this and it was because we had a @keyframes statement inside the media query. When I moved it out of the media query the problem was resolved, so I'll bet it is the regex that is to blame. Great to hear v4 is moving to a non-regex model (those things are impossible to decipher).

[Harrisonbro]

Hey @paulyoung. Is there an expected timeline for v4? Anything we can do to help get you there?

[paulyoung]

@Harrisonbro I might be able to chip away at it in the meantime, but likely not able to focus on it until late June.

I'd love to get things to a place where things are stable and I feel that others can contribute, which might be sooner.

[pongells]

I just noticed that if the @media contains a @keyframes, the @media gets removed (not the entire block, only the declaration, leaving the closing brackets after the block)

[aabenoja]

@pongells Do you have an example from a blessed file?

[pongells]

@aabenoja, sure: https://www.dropbox.com/s/lmthj9ik1jy0yus/example.css?dl=0 (I only added a media query in the example file), with blessc example.css test.css in file test-blessed3.css you will see:

#test { background-color: red; }
    width: 200px;
    animation: test 1s ease forwards;

    @keyframes test {
        10% {
            width: 0;
        }
    }
}
#test { background-color: red; }

[aabenoja]

@pongells Thanks, I'll start looking into it when I get the chance later today.

[BrandonNoad]

Any updates on this issue? I have some @media print statements missing after I use bless.

Also, is there an ETA on v4?

Thanks.

[paulyoung]

@BrandonNoad have you tried the v4 alpha?

v4 should be released and on NPM as a result of https://github.com/BlessCSS/bless/issues/89.

[BrandonNoad]

Awesome....good timing. I'm actually using gulp-bless, so I'll ping them to see if they can update to use v4.