Snowpack 2 + Emotion + TypeScript

[pix2D]

Has anyone gotten this to work with Twin? The example is (I think?) not made for Snowpack 2.

[pix2D]

Ah nevermind, it turned out to be pretty simple. Just change the snowpack.config.js file to:

module.exports = {
  extends: '@snowpack/app-scripts-react',
  packageOptions: {
    knownEntrypoints: [
      '@emotion/react',
      '@emotion/styled',
    ],
  },
}

The rest of the example is fine.

[ben-rogerson]

I removed base.min.css from the example recently as that's not needed anymore + I've updated the examples.

[pix2D]

So while everything technically "works" styled components do not "fast refresh". I have to reload manually to get them to show. If I edit a normal React component everything refreshes on-the-fly just fine (including tw= etc). Still trying to debug this...

[ben-rogerson]

Perhaps we need to add the plugin-react-refresh plugin?

Seems like it's added already by app-scripts-react.

See if adding this helps - https://github.com/ben-rogerson/twin.examples/blob/master/snowpack-react-emotion-typescript/src/index.tsx#L17

[pix2D]

I have this added already. Everything fast refreshes except styled components. When I change one the CLI does show:

[snowpack] File changed...

and in the browser console it shows this:

[ESM-HMR] message: update Object { type: "update", url: "/dist/components/StepTitle.js", bubbled: false }

But the UI is not updated. I guess because bubbled is false? I'm not sure how to force it to re-render though.

Here is the StepTitle.jsx component (just a super simple dummy example):

import tw, { styled } from 'twin.macro'

const StepTitle = styled.h3(() => [tw`font-bold text-xl`])

export default StepTitle

[ben-rogerson]

I think this question may be one for Snowpack, perhaps post an issue with them?

[pix2D]

@ben-rogerson I tried to setup Snowpack + React + Emotion from scratch and it seemed to work there. I'm not sure where particularly the issue lies so I'll hold off on submitting issues. FYI the issue also happens with the official example in this repo. Styled components using styled.a`...` work, but those using styled.a(...) do not (or rather they do work, but they just don't fast refresh).

As a alternative I tried using styled components instead of emotion and that refreshes properly in both instances so I have switched to it for now. I submitted a PR with a new example for it here #41 (I just copied the emotion one and edited it).

[ben-rogerson]

Thanks for reporting back on this issue
I've gotta take a closer look at this - I have no idea right now what would cause the lack of fast refresh!
Thanks for the example, I'll check it out 👍