You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
I have an app that uses theme-ui/core to enable an sx prop for css-in-js component styling; this requires configuring a jsxImportSource.
Theme UI delegates to Emotion for the actual css generation and injection. Emotion highly recommends configuring a plugin for some build-time optimizations to the generated css. I'm using the "official swc plugin"—which, sadly doesn't seem to be mentioned in the core babel-plugin docs anywhere.
Possibly related to #50
I have an app that uses theme-ui/core to enable an
sx
prop for css-in-js component styling; this requires configuring ajsxImportSource
.Theme UI delegates to Emotion for the actual css generation and injection. Emotion highly recommends configuring a plugin for some build-time optimizations to the generated css. I'm using the "official swc plugin"—which, sadly doesn't seem to be mentioned in the core babel-plugin docs anywhere.
Here is my complete
vite.config.js
:With
@vitejs/plugin-react-swc
@3.0.1
, thebuild
output looked like the following and resulted in a functional react app:After upgrading to
3.1.0
without modifying the config, thebuild
output now looks like:Note some pretty dramatic differences in "# of modules transformed" and the bundle size for
dist/assets/index
.The built site, when run under
yarn preview
produces a script error:ReferenceError: React is not defined
.If I comment out
plugins: [['@swc/plugin-emotion', {}]]
, the build output stats are closer to the3.0.1
version, and it produces a functional build:The text was updated successfully, but these errors were encountered: