Extractor issues in Livewire Flux #17023
Description
@RobinMalfait hey we are having an issue with Livewire Flux since Tailwind v4.0.10 and I suspect it might be related to this PR. I tried compiling Tailwind locally to see if I could bisect exactly what PR/ commit is causing it, but I'm not smart enough to get it all running in a local repo 😆 so this PR is my best guess at what's causing the issue.
The problem we are having is we have a blade component for the sidebar <flux:sidebar /> and it looks something like this (simplified)
@php
if ($sidebarIsStashable) {
$attributes = $attributes->merge([
'x-init' => '$el.classList.add(\'-translate-x-full\'); $el.classList.add(\'transition-transform\')',
]);
}
@endphp
<div x-data {{ $attributes->class('border-r w-64 p-4 min-h-dvh max-h-dvh top-0 fixed left-0') }}>
{{ $slot }}
</div>Since the changes in Tailwind v4.0.10, the styles -translate-x-full and transition-transform which are inside the conditionally added x-init are not being compiled by Tailwind and our sidebar is not being hidden.
If I add those classes in another file though (or somewhere else in this file), they get compiled correctly and our sidebar is being hidden as expected.
I also experimented removing the backslashes from before the single quotes and everything works and compiles as expected.
'x-init' => "\$el.classList.add('-translate-x-full'); \$el.classList.add('transition-transform')",Would you have any thoughts as to what might be causing that? It's causing issues because the new Laravel Livewire starter kit is using Flux and people's sidebars aren't hiding 😅
Thanks in advance!
Originally posted by @joshhanley in #16306 (comment)