Unexpected double semicolon (;) in generated CSS from flowbite/plugin causes build errors with Vite (@tailwindcss/vite:generate:serve)

[odyu]

Describe the bug
When using Flowbite with Vite and Tailwind CSS, the following error appears during the build:

[plugin:@tailwindcss/vite:generate:serve] Unexpected semicolon

After importing Flowbite’s CSS with

@import "flowbite/dist/flowbite.css";

there is a line with double semicolons:

input:checked + .toggle-bg:after {
  transform: translateX(100%);;
  border-color: white;
}

This double semicolon causes the build to fail.

To Reproduce
Steps to reproduce the behavior:

1. Install Flowbite in a Vite + Tailwind CSS project.
2. Add @import "flowbite/dist/flowbite.css"; to your main CSS.
3. Run the dev server (npm run dev or equivalent).
4. You will see an "Unexpected semicolon" error from Vite.

Expected behavior
Build should complete without syntax errors and the CSS should not contain unnecessary double semicolons.

Screenshots
N/A

Desktop (please complete the following information):

• OS: macOS 14.6.1
• Browser: chrome
• Version: 138.0.7204.184

Smartphone (please complete the following information):

• Device: N/A
• OS: N/A
• Browser: N/A
• Version: N/A

Additional context
The issue appears to be caused by an extra semicolon in the generated CSS.

I suspect the root cause might be here (but I'm not completely sure):
https://github.com/themesberg/flowbite/blob/main/plugin.js#L484

[['input:checked + .toggle-bg:after']]: {
    transform: 'translateX(100%);',
    'border-color': 'white',
},

It seems that the value for transform already includes a semicolon, which might result in double semicolons (;;) in the output CSS.

Request
Please remove the extra semicolon from the plugin source to prevent build failures with Vite and other modern toolchains. Thank you!

[odyu]

For now, I am able to work around the issue and keep things stable by adding the following to my package.json scripts:

"postinstall": "sed -i '' 's/transform: translateX(100%);;/transform: translateX(100%);/g' ./node_modules/flowbite/dist/flowbite.css"

This script removes the double semicolon after transform: translateX(100%) in flowbite.css after each install.
It's a temporary solution, but it allows my builds to succeed until the upstream fix is released.