translate styled jsx failed in `next/pages/layout`

JiangWeixian commented 3 years ago

Describe the bug A clear and concise description of what the bug is.

replace code in example/next/pages/layout.jsx with

export default function Layout({ title, children }) {
  return (
-    <div id="layout-wrapper" className="bg-gray-100 text-gray-900 dark:(bg-gray-900 text-gray-100)">
+    <div id="layout-wrapper" className="bg-gray-100 text-gray-900">
      {children}
      <style jsx global>{`
        body {
          @apply m-0 p-0 w-100vw h-100vh overflow-hidden hover:(bg-blue-500 text-xs);
          font-family: '-apple-system', 'BlinkMacSystemFont', 'Segoe UI',
            'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans',
            'Helvetica Neue', 'sans-serif';
          -webkit-font-smoothing: antialiased;
          -moz-osx-font-smoothing: grayscale;
        }
      `}</style>
    </div>
  )
}

To Reproduce Steps to reproduce the behavior:

Clone this repository
Run yarn in root && cd example/next && yarn && yarn dev
See error

Expected behavior css in styled jsx should be translated

Screenshots

JiangWeixian commented 3 years ago

I open a pr https://github.com/windicss/windicss-webpack-plugin/pull/88/files to fix it

harlan-zw commented 3 years ago

Hey @JiangWeixian

Thanks for the contribution! I have merged your PR and wrote a quick test to make sure that this doesn't break in the future.

Fix is available in release 1.4.2

windicss / windicss-webpack-plugin

translate styled jsx failed in `next/pages/layout` #89