filamentphp
v4 Some button styles don't render properly when Vite dev server is running
Package
filament/filament
Package Version
4-alpha6
Laravel Version
12
Livewire Version
3
PHP Version
8.4
Problem description
Some button styles aren't rendering properly when using the Vite dev server. I'm not sure if this is a CORS issue that only affects some people. There was an attempted fix a few months ago but people still seem to be having problems: https://github.com/vitejs/vite/issues/19239.
When using npm run dev:
When not using npm run dev:
Expected behavior
All styles should render properly when using npm run dev
Steps to reproduce
-
Clone reproduction repo
-
Run
npm run devto start the Vite dev server -
Go to
Test page. The styling of the toggle buttons and action button are broken. -
Stop the Vite dev server.
-
Go to
Test page. The styling is ok.
Reproduction repository (issue will be closed if this is not valid)
https://github.com/binaryfire/filament4-vite-dev-server-styles
Relevant log output
No. Fixing the build errors got hot reloading working again, but turns out the styling issues were unrelated. They're still there and are happening when running the normal Vite dev server. I also just confirmed it's not CORS-related.
Are you dynamically generating any class names? Vite wouldn't know how to render those. Other than that, I'm not sure what could be causing it. It's probably something in the CSS as opposed to a Vite issue.
Are you able to reproduce the problem?
Additional info:
-
It appears CSS selectors using
+ &(eg.input:checked + &label) aren't processed correctly by Vite's dev server, causing toggle buttons and ring outlines to not display properly. Similar issues: https://github.com/tailwindlabs/tailwindcss/discussions/15524 https://github.com/parcel-bundler/lightningcss/issues/489 -
The following changes to
packages/support/resources/css/components/button.csswork but aren't clean enough to merge: https://gist.github.com/binaryfire/15c2a9b9c08a4358d9ab4cc6318f6d82
In case anyone needs it, I've pushed my internal fix to a package: https://github.com/binaryfire/filament-vite-dev-fix. It loads a stylesheet with CSS overrides that solve the problem. The stylesheet is only loaded in development since builds work fine.
So much time went into this 😢 Basically, the lightningcss transforms are not applied on the dev server, which creates that difference. I believe the Filament's rules had better be updated to align with native browser CSS nested syntax. I couldn't exactly notice what was wrong.
But, before updating the Filament source CSS files, here's a valid workaround, which I think should be mentioned in the docs:
export default defineConfig({
// ...
css: {
transformer: 'lightningcss',
},
// ...
});
Basically, the lightningcss transforms are not applied on the dev server, which creates that difference.
@yusufkandemir It's not that simple. Oxide is powered by Lightning under the hood. Oxide is enabled via the tailwindcss() Vite plugin and is definitely working on the dev server. If it wasn't, nothing would be rendering properly. 99% of Filament's CSS is rendering properly - the problem is specifically with nested + & selectors.
Also, using Lightning directly as a transformer seems to conflict with Oxide. Things might display fine but you'll potentially end up with larger than normal builds. I wouldn't recommend it.
I believe the Filament's rules had better be updated to align with native browser CSS nested syntax.
I'm not a CSS expert, but from what I can tell there isn't anything wrong with the syntax. The fact that it renders correctly in builds and just not on the dev server seems to support that.
So much time went into this 😢. I couldn't exactly notice what was wrong.
That's why so much time went into this. It took a lot of trial end error to narrow down the issue: https://github.com/filamentphp/filament/issues/16257#issuecomment-2998827683
@danharrin If Lightning can parse this properly when used directly, it suggests it's Oxide's implemenatation that's the problem. I'll open an issue in the Tailwind repo. They don't give high priority to issues that only affect @apply but let's see what they say.
Once the Tailwind issue is reported (attach the link here), I am happy to merge a PR into Filament that works around the issue (like the original PR that was submitted). I do not want the issue just to be closed and not reported to Tailwind though, so it should be reported first.
@danharrin Here's the issue. Can you subscribe to it as well?
https://github.com/tailwindlabs/tailwindcss/issues/18681
@danharrin Adam's suggestion seems to work! Looks like it was a syntax issue. I'll push a fix shortly.