Styled-jsx: Faulty nesting detection with at-rules

[cheeaun]

I upgraded to the latest version of styled-jsx at 1.0.1 and been getting this error:

[Error: Nesting detected at 0:80. Unfortunately nesting is not supported by styled-jsx.]

Did a little research, ran tests on both styled-jsx and stylis, found that:

test("doesn't throw when using media queries", t => {
  t.notThrows(() =>
    transform('', '@media (min-width: 480px) { div { color: red } }')
  )
})

This is the current test and it passes ✅

test("doesn't throw when using media queries", t => {
  t.notThrows(() =>
    transform('', 'span {} @media (min-width: 480px) { div { color: red } }')
  )
})

Added a faux span and this passes too ✅

BUT...

test("doesn't throw when using media queries", t => {
  t.notThrows(() =>
    transform('', `span {}
      @media (min-width: 480px) { div { color: red } }`)
  )
})

Add a newline and this fails ❌

test("doesn't throw when using media queries", t => {
  t.notThrows(() =>
    transform('', `@media (min-width: 480px) { div { color: red } }
      span {}`)
  )
})

If the lines are flipped around, this passes ✅ 😅

I suspect this is relevant to thedisableNestingPlugin method in style-transform.js and the cascade: false option passed into stylis. This applies to @keyframes too.

[giuseppeg]

@cheeaun thanks for the amazing and detailed bug report! You are correct the bug should be in disableNestingPlugin or Stylis itself.

Would you have time to further debug disableNestingPlugin? If not I will take a look at it tonight or tomorrow. You can find the relevant docs here https://github.com/thysultan/stylis.js#plugins

[cheeaun]

@giuseppeg I've also tried to replicate the bug on stylis, with the exact same CSS code and even the same config {cascade: false, compress: true}. It passes ✅ there.

I suspect that when cascade: false, the context becomes different (2) or something (I console.log-ed everything in the disableNestingPlugin method). So I'm not sure if it needs special handling in the method or context is wrongly handled here 🤔

[thysultan]

This happens because div { color: red } is a parent of @media (min-width: 480px) so you may need to take that into account by allowing @at-rules as valid nesting parents, e.x making an exception when the first character is @

[giuseppeg]

@thysultan yep that indeed fixes @cheeaun's issue. Mind taking a look at the PR #216 ?

However there seem to be a bug in Stylis and media queries are prefixed

span {}
      @media (min-width: 480px) { div { color: red } }

/* @media[prefix](min-width[prefix]:480px[prefix]) div[prefix]{color:red} */

:hover {}
      @media (min-width: 480px) { div { color: red } }

/* @media[prefix](min-width[prefix]:480px[prefix]) div[prefix]{color:red} */

:hover { color: green }
  @media (min-width: 480px) { div { color: red } }

/* [prefix]:hover{color:green}@media[prefix](min-width[prefix]:480px[prefix]) div[prefix]{color:red} */

[thysultan]

@giuseppeg Interesting, i see what could be the issue there.

[giuseppeg]

published 1.0.2 to npm @cheeaun @thysultan thanks for your help! <3

[zhangfaliang]

Will also appear
error info ‘Unfortunately nesting is not supported by styled-jsx.
at Function.disableNestingPlugin’
code

 .changeSp{
              position:absolute;
              right:30px;
              top:30px;
              width:0;  
              height:0;  
              margin:0 auto;  
              border:10px solid transparent;  
              animation: animations 5s cubic-bezier(0, 0, 0.48, 0.45) forwards;

            }

            @keyframes animations{
                0%{opacity:0;}
                100%{opacity:1;}
            }

[giuseppeg]

@thysultan could it be a parsing issue? Or do you think that is our plugin's fault?

[thysultan]

@giuseppeg The latter, specifically related to https://github.com/zeit/styled-jsx/pull/313#pullrequestreview-69415889.

[giuseppeg]

@thysultan awesome thank you!