Issue CSS Nesting in Next.js 14 + Turbo + Styled JSX

• Git Repository
• Demo

In the Turbopack docs it says that it supports PostCSS nested which allows you to nest CSS selectors.

This would be very useful for us since we are currently using Sass just to be able to nest selectors. We would like to move off Sass / Babel and use Turbo.

But I think Turbopack doesn't apply the PostCSS plugins to the CSS generated by Styled JSX.

For example, the following code:

export default function Home() {
  return (
    <>
      <div className={'container'}>
        container (should be blue)

        <div className="inner">
          container + inner (should be yellow)
        </div>
      </div>

      <style jsx>{`
        .container {
          color: blue;
          padding: 3rem;

          .inn {
            &er {
              color: yellow;
            }
          }
        }
      `}</style>
    </>
  )
}

Gives me this CSS:

.container {
    color: blue;
    padding: 3rem;

    .inn {
        &er {
            color: yellow
        }
    }
}

Where I would expect:

.container {
    color: blue;
    padding: 3rem;
}

.container .inner {
    color: yellow;
}