Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Media Queries partially removed #38

Open
bluerouse opened this issue Jul 1, 2014 · 19 comments
Open

Media Queries partially removed #38

bluerouse opened this issue Jul 1, 2014 · 19 comments

Comments

@bluerouse
Copy link

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
Copy link
Contributor

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

@bluerouse
Copy link
Author

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

@paulyoung
Copy link
Contributor

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
Copy link
Author

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

@t22james
Copy link

t22james commented Oct 6, 2014

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
Copy link
Member

aabenoja commented Oct 6, 2014

@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
Copy link

t22james commented Oct 6, 2014

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
Copy link
Contributor

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
Copy link

t22james commented Oct 6, 2014

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

@jkrehm
Copy link

jkrehm commented Oct 28, 2014

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
Copy link

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

@paulyoung
Copy link
Contributor

@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
Copy link

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
Copy link
Member

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

@pongells
Copy link

@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
Copy link
Member

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

@BrandonNoad
Copy link

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
Copy link
Contributor

@BrandonNoad have you tried the v4 alpha?

v4 should be released and on NPM as a result of #89.

@BrandonNoad
Copy link

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

8 participants