Fix nested style tags break compilation

[giuseppeg]

iirc we don't allow nested style tags like:

<div>
  <span>
      <style jsx>{...}</style>
  </span>
</div>

With this PR we ignore them because otherwise compilation breaks when there is one.

[giuseppeg]

@rauchg should we instead throw an error when we detect nested style tags?

[nkzawa]

I think we should support this since scoped style tag works like that (as far as I know).

[giuseppeg]

@nkzawa for the record I found the issue #42

[giuseppeg]

@nkzawa , @rauchg can I merge this?

[rauchg]

I don't think ignoring is the right solution. Throwing an error until we fully support it would be ideal

[a-ignatov-parc]

Any news on this PR? It's been a while since last activity :)

[andrechalella]

Hi, first of all thanks for the great product!

I just lost a couple hours of work (and I'm on a tight schedule) because Next.js threw up with a cryptic error when I made a simple nested style.

I'd been searching the web for more than 1 hour when I finally understood (from several issues/bug reports) that styled-jsx does not allow this kind of nesting.

It was frustrating to learn that, instead of throwing early and clearly, the team decided to simply ignore invalid code.

With this PR we ignore them because otherwise compilation breaks when there is one.

It seems obvious to me that compilation should not succeed when there is invalid code.

Could someone explain the rationale behind this? Maybe no one thought that users might be confused, was that the case? In case there's no good explanation, maybe this decision could be reversed, so styled-jsx would throw with a clear message (as per @rauchg's comment)?

Also, nowhere in the docs I couldn't find that we weren't supposed to do such nesting. Maybe that needs fixing too?

---

I'll leave some details below for people that might run into the same problem as I did.

Error:

wait  - compiling...
thread '<unnamed>' panicked at 'called `Option::unwrap()` on a `None` value', crates/styled_jsx/src/lib.rs:531:44
error - ./pages/test.js
Error: failed to process

pages/test.js:

export default function Home() {
  return (
    <div>
      blue
      <p>
        red
        <style jsx>{` p { color: red; } `}</style>
      </p>
      <style jsx>{` div { color: blue; } `}</style>
    </div>
  )
}

I was able to solve it with resolve. I don't like defining fixed class names, because they might clash with the global styles.

import css from 'styled-jsx/css';

const { className, styles } = css.resolve`
  p { color: red }                                                                                  
`;

export default function Home() {
  return (
    <div>
      blue
      <p className={className}>red</p>
      <style jsx>{` div { color: blue; } `}</style>
      {styles}
    </div>
  )
}