CSS "/*!*/ /*!*/" Incorrectly Processed during Optimize (Tailwind CSS)

[jsmith]

Thanks so much for the new optimize logic. It's super great to be able to optimize for different scenarios and is much faster than the webpack alternative.

Anway, I'm currently using Snowpack v3 and running into a CSS issue during the new optimization process. Tailwind CSS uses /*!*/ /*!*/ in CSS so that minifers resolve that to an empty space. Currently, when optimization is used, this is resolved to a blank string. To be more specific,

--tw-ring-inset: var(--tw-empty,/*!*/ /*!*/);

is being resolved to

--tw-ring-inset: var(--tw-empty,);

but should be resolved to

--tw-ring-inset: var(--tw-empty, );

I think this might be an esbuild issue? I have a reproduction repo and demo that I'll link to below. In the demo, if you open up devtools and switch --tw-ring-inset: var(--tw-empty,); to --tw-ring-inset: var(--tw-empty, ); in the "Styles" pane the focus ring will work as expected.

Reproduction repo: https://github.com/jsmith/esbuild-tailwindcss-ring-bug
Reproduction demo: https://jsmith.github.io/esbuild-tailwindcss-ring-bug

Related to tailwindlabs/tailwindcss#2889

[melissamcewen]

Thanks for reporting this @jsmith . I don't know enough about this to answer myself but I'll pass on to the project lead to investigate.

[jsmith]

Thanks so much @melissamcewen :)