Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Blade compilation issues with Tailwind container queries #50171

Closed
agentphoenix opened this issue Feb 21, 2024 · 10 comments
Closed

Blade compilation issues with Tailwind container queries #50171

agentphoenix opened this issue Feb 21, 2024 · 10 comments

Comments

@agentphoenix
Copy link

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

Screenshot 2024-02-20 at 9 16 08 PM

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)

Screenshot 2024-02-20 at 9 16 36 PM

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)

Screenshot 2024-02-20 at 9 16 21 PM

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

Copy link

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
Copy link
Member

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
Copy link
Author

@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
Copy link
Author

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
Copy link

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

@altamisatmaja
Copy link

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

@agentphoenix
Copy link
Author

@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?

@loughlincodes
Copy link

@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
Copy link

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.

@driesvints
Copy link
Member

Hi all. Since there's no action on this issue any more we're closing this. We'd still appreciate a PR that could potentially fix this one. Thanks

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

8 participants