Checkbox display issue with CSP enabled

[vhscom]

What version of @tailwindcss/forms are you using?

v0.4.0

What version of Node.js are you using?

v17.3.0

What browser are you using?

Ungoogled Chromium

What operating system are you using?

Arch Linux

Reproduction repository

https://github.com/vhscom/repro-tailwind-forms-checkbox-issue

Describe your issue

Dependent on CSP settings checkboxes do not display correctly due to use of data scheme.

Here's what the checkbox looks like with strict CSP enabled:

Issue occurs because tailwindcss-forms checkbox uses a base64-encoded SVG background image. To validate this is the case simply build the repro with pnpm i && pnpm dev -- --open then open svelte.config.js and remove the CSP setting (browser will auto-reload showing the checkbox).

Is it possible to add a fallback experience for apps blocking unsafe evaluation of data attributes?

[vhscom]

I found a reasonable workaround for the display issue which is to save the SVG graphic to a file and add a style rule to use the image as the background (allowed under strict CSP) as opposed to attempting to inline a data uri . Doing so causes the browser to skip attempting to use data:.

[theonelucas]

I found a reasonable workaround for the display issue which is to save the SVG graphic to a file and add a style rule to use the image as the background (allowed under strict CSP) as opposed to attempting to inline a data uri . Doing so causes the browser to skip attempting to use data:.

The SVG file:

<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='white'><path 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' /></svg>

The rule:

.form-checkbox:checked {
    background-image: url("/site/assets/icons/checkbox.svg");
}