Styled-jsx: Throws `Unfortunately nesting is not supported by styled-jsx` when using CSS comments before @media queries

Created on 13 Dec 2017 · 11Comments · Source: vercel/styled-jsx

Added failing test here https://github.com/antonj/styled-jsx/commit/c357234a331dc971f88ca667a8291822a18c703b

div { color: red; }
/* CSS Comment */
@media screen and (min-width: 480px) {
  div { color: red; }
}

Throws Unfortunately nesting is not supported by styled-jsx if /* CSS Comment */ is removed the tests pass.

bug

Source

antonj

👍5

Most helpful comment

styled-jsx
@giuseppeg OK, for me, I simply had to remove the spacing that was on the line break immediately preceding the media query declaration. That fixed it, although no idea why yet. Hopefully that helps somewhat.

jabacchetta on 21 Dec 2017

👍4

All 11 comments

Tried to include a local styled-jsx plugin but even (css, options) => css which does not transform the css gives the nesting error

Pro542 on 14 Dec 2017

Has anyone figured out a fix for this yet? I just did a fresh npm i and now I can't get back to a working state at all.

jabacchetta on 20 Dec 2017

I'm using styled-jsx with stylus plugin and there are no problems with comments in styles. Maybe this could be a workaround until it gets fixed.

P.S. If you don't want to use stylus or other preprocessors you can try to use postcss-discard-comments with postcss plugin just to discard comments ;)

a-ignatov-parc on 20 Dec 2017

will look into this in the following days

giuseppeg on 20 Dec 2017

@giuseppeg Just FYI, I had a few minutes to play around with this today. I don't believe it has anything to do with comments.

I copy/pasted what @antonj had without the comments and it did work. But then I attempted to modify my own media query (which did not have any comments but was failing), and I had it down to exactly what he had, yet it still failed. Then I started copy pasting in bits from his code and messing with spacing and eventually got it to work.

So it seems as though spacing has something to do with it. I'll try to experiment more tonight if I have the time.

jabacchetta on 21 Dec 2017

👍4

Yes, it worked . Just remove extra spaces before media query.!!

pritambinbill on 21 Dec 2017

@antonj I tried to add that css to the tests but they still pass. Do you mind creating a pull request with your code? Do you use tabs for indentation?

@jabacchetta same with your code.

giuseppeg on 21 Dec 2017

@giuseppeg Seems like the CSS-comment has nothing to do with it, a line with either a space or a TAB in it will fail the tests. https://github.com/thysultan/stylis.js/issues/59 might be relevant?

antonj on 22 Dec 2017

@jabacchetta, @cpugirl thanks, removing the newline before @media worked for me