Blade compilation issues with Tailwind container queries

[agentphoenix]

Laravel Version

10.45.0

PHP Version

8.3.1

Database Driver & Version

No response

Description

When using Tailwind's container queries plugin with the @class directive, Blade either throws exceptions about unexpected endif or simply doesn't compile the classes correct. Using Arr::toCssClasses directly works as expected.

The following examples are in the reproduction repo. (Note: Tailwind isn't installed and configured, but it isn't necessary to show the issues with the Blade compiler.)

Code that works

/success shows everything working as expected with the Arr::toCssClasses

I suspect this is working due to Blade wrapping everything in e().

Here's a snippet of the code that works (full example in the repo):

@if (filled($heading))
    <h1
        class="{{
            Illuminate\Support\Arr::toCssClasses([
                'font-bold tracking-tight text-gray-900 @xs:text-4xl @md:text-6xl',
                'mt-10' => filled($callout),
                '@xs:mt-24 @md:mt-32 @xl:mt-16' => blank($callout)
            ])
        }}"
    >
        {{ $heading }}
    </h1>
@endif

@if (filled($description))
    <div
        class="{{
            Illuminate\Support\Arr::toCssClasses([
                'text-lg/8 text-gray-600',
                'mt-6' => filled($heading),
                'mt-10' => filled($callout) && blank($heading),
                '@xs:mt-24 @md:mt-32 @xl:mt-16' => blank($callout) && blank($heading),
            ])
        }}"
    >
        {{ $description }}
    </div>
@endif

Code that throws an exception

/failure shows the exception (though this may be compounded by wrapping the HTML in conditionals)

Here's a snippet of the code that throws an exception (full example in the repo):

@if (filled($heading))
    <h1
        @class([
            'font-bold tracking-tight text-gray-900 @xs:text-4xl @md:text-6xl',
            'mt-10' => filled($callout),
            '@xs:mt-24 @md:mt-32 @xl:mt-16' => blank($callout)
        ])
    >
        {{ $heading }}
    </h1>
@endif

@if (filled($description))
    <div
        @class([
            'text-lg/8 text-gray-600',
            'mt-6' => filled($heading),
            'mt-10' => filled($callout) && blank($heading),
            '@xs:mt-24 @md:mt-32 @xl:mt-16' => blank($callout) && blank($heading),
        ])
    >
        {{ $description }}
    </div>
@endif

Code that compiles incorrectly

/incorrect is the same thing as /failure but without the conditionals (you can see that the content of the @class call is simply output on the page)

Here's a snippet of the code that compiles incorrectly (full example in the repo):

<h1
    @class([
        'font-bold tracking-tight text-gray-900 @xs:text-4xl @md:text-6xl',
        'mt-10' => filled($callout),
        '@xs:mt-24 @md:mt-32 @xl:mt-16' => blank($callout)
    ])
>
    {{ $heading }}
</h1>

<div
    @class([
        'text-lg/8 text-gray-600',
        'mt-6' => filled($heading),
        'mt-10' => filled($callout) && blank($heading),
        '@xs:mt-24 @md:mt-32 @xl:mt-16' => blank($callout) && blank($heading),
    ])
>
    {{ $description }}
</div>

Steps To Reproduce

https://github.com/agentphoenix/class-directive-bug

[github-actions]

Thank you for reporting this issue!

As Laravel is an open source project, we rely on the community to help us diagnose and fix issues as it is not possible to research and fix every issue reported to us via GitHub.

If possible, please make a pull request fixing the issue you have described, along with corresponding tests. All pull requests are promptly reviewed by the Laravel team.

Thank you!

[timacdonald]

I've hit a similar issue in the past where there was a directive defined in the Laravel app that matched one of Tailwinds @ things, e.g, an @container blade directive interfering with Tailwind's @container CSS thing.

I had to use Blade's escaping mechanism @@container when referencing the Tailwind version.

Not sure what exactly is causing the issue here, though.

[agentphoenix]

@timacdonald thanks for the suggestion! I gave it a try and unfortunately no change. The compiled output still has the same issues.

I even tried changing the compileClass method to wrap everything in the e function (since that's what happens when echoing out the Arr::toCssClasses in the successful test) and it still breaks. I'm just not sure where the actual problem is coming from to even start working on a PR that fixes the issue.

[agentphoenix]

I've narrowed this down to the following regex in the compileStatements method of the BladeCompiler.

preg_match_all('/\B@(@?\w+(?:::\w+)?)([ \t]*)(\( ( [\S\s]*? ) \))?/x', $template, $matches);

I've been trying to work on tweaking this regex to ignore anything that has a single colon, but retains the double colons. If anyone has any suggestions for ways to accomplish that, I'd love the input.

[aguingand]

It seems to be related to #45490 and further updates of BladeCompiler::compileStatements()

[altamisatmaja]

i'm using the Tailwind CSS CDN to address that issue

[agentphoenix]

@aguingand thanks for the heads up on that one. Not sure that changes the fix that I have, but I'll give it another pass and see.

@altamisatmaja curious how the Tailwind CDN is addressing the issue for you?

[milkbottlelough]

@agentphoenix I tweaked the regex so that it ignores anything with a single colon but retains the double colons:

preg_match_all('/\B@(@?\w+(?:[ \t]*::[ \t]*\w+)?)([ \t]*)(\( ( [\S\s]*? ) \))?/x', $template, $matches);

Not tested but might help?

[sebastiaodomingos]

I believe the regex is fine. I suspect the issue could be related to vite/tailwind installation because if you change the last @XL to @lg it works without errors. That's where I stopped for now.