Radio and Checkbox lose styling in prod mode about tailwindcss-forms HOT 10 CLOSED

@chasegiunta thanks, upgrading cssnano did the trick!

from tailwindcss-forms.

I'm seeing an issue that might be related to this, but am not 100% sure.

When building for production specifically, checkboxes lose their SVG background due to what looks like an invalid data URI. The following is what I see in the browser style inspector...

In development:

[type='checkbox']:checked {
    background-image: url(data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e);
}

In production:

[type=checkbox]:checked {
    background-image: url(data:image/svg+xml;charset=utf-8,%3Csvg viewBox='0 0 16 16' fill='%23fff' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12.207 4.793a1 1 0 10 1.414 NaN NaNlNaN NaNa1 1 0 1-1.414 NaN NaNlNaN NaNa1 1 0 11.414-1.414 NaN NaNlNaN NaN NaN NaNa1 1 0 11.414 0 NaN NaNz'/%3E%3C/svg%3E);
}

No other styles are affected, from what I can tell. The NaNs in the data URI seem to be the problem to me, but I'm not sure where they would be coming from.

This was tested using @tailwindcss/jit 0.1.18 and @tailwindcss/forms 0.3.1. For context, I also have @tailwindcss/ui 0.7.2 and @tailwindcss/aspect-ratio 0.2.0 installed and in use. I'm happy to provide more information if needed!

from tailwindcss-forms.

I'm seeing this same NaN issue on my production build as well. I have also nailed this down to being something with cssnano. Curious if you were able to dig into what's happening or if there's a fix?

tailwind "version": "2.0.3"
forms "version": "0.2.1"

from tailwindcss-forms.

I fixed it with the release of tailwind-jit https://github.com/jacekschae/shadow-cljs-tailwindcss

from tailwindcss-forms.

I experience this issue with strategy class, but fine with the default strategy.

from tailwindcss-forms.

@jtormey @crenwick @jasonlimantoro If you were seeing this with the class strategy, and were using something like cssnano somewhere in your pipeline, it was probably combining your form- style declarations in production and breaking on a typo I made in the original class strategy PR (sorry).

I've opened a PR for it here #72 .

from tailwindcss-forms.

Having the same NaN issue with checkboxes on our production as well. Does anybody know about a fix or workaround for this yet?

from tailwindcss-forms.

@adamwathan @chasegiunta i think this is still an issue. i am using forms 0.3.3 and am experiencing it. can this be re-opened?

from tailwindcss-forms.

@cc1776 0.3.3 fixed the issue i was seeing with with a misspelled :checked selector . The NaN issue in SVGs is completely separate and sounds like it may be stemming from something else in the pipeline like cssnano. If it's not a direct dependency of your project, you may want to try explicitly adding the latest version, as another dependency may be using an older version.

from tailwindcss-forms.

cssnano is used by css-loader updating css-loader which uses cssnano fixed this for me.

from tailwindcss-forms.