dialectlabs/react

@parcel/transformer-css: Unexpected token Function("screen")

kirksgithub opened this issue · 5 comments

kirksgithub commented

First I would like to say congrats on a fantastic protocol!
I am having the following issue which I have been trying to debug on our builds nevertheless have not been able to resolve what the culprit is, we did move our builds over to Parcel from Craco the past week which as I understand parcel has it's own postcss lib - any insight would be much appreciated for us to add support for dialect in Grape

[PATH]node_modules/@dialectlabs/react-ui/index.css:55:7
    54 | 
  > 55 | @media screen(sm) {

The repo (without dialect) can be found here:
https://github.com/Grape-Labs/grape-art

cbosborn commented

Hey @kirksgithub thanks for posting the issue. This is something we've seen before with partners of ours who use parcel. Tagging @Kiryous who has some experience addressing this issue

  • ❤️1
Kiryous commented

@kirksgithub hey! Actually this directive is from tailwind and only used in development mode, the compiled version of the css located at lib/index.css only contain the compilled @media (min-width:640px).

Could you please show how you importing dialect styles, please? Maybe a PR in your repo or gist

kirksgithub commented

Thank you for your reply,

Importing just as the demos have it import '@dialectlabs/react-ui/index.css

https://github.com/Grape-Labs/grape-art/blob/main/src/Messages/Messages.tsx

Kiryous commented

@kirksgithub got it! it maybe something in the way parcel resolves the paths, please try to use
import '@dialectlabs/react-ui/lib/index.css instead

  • ❤️1
kirksgithub commented

@Kiryous I cannot thank you more for your feedback and how incredibly simple it was to fix, I can confirm that this is now working with Parcel and this was the correct fix. Cannot wait until we announce this integration, again fantastic work on Dialect