[IntelliSense] Add support for Laravel Blade @class directive and for Laravel Blade component attributes functions

[alexmandrikdev]

Please make this extension work with @class directive and with attributes functions.

[ph7jack]

UP

[ph7jack]

Would be great to have class syntax in the laravel blade @.class directive

[TimvdHorst]

@alexmandrikdev maybe change the title and start it with [IntelliSense] to make it more clearer what it is about? Would also love this to work in the IntelliSense VSCode extension.

[czernika]

This is not entirely my solution but I don't remember where I've found original article

You can add custom class-pattern in extension settings. Add these lines into settings.json

"tailwindCSS.experimental.classRegex": [
     ["@class\\(([^]*)\\)", "'([^']*)'"]
 ]

It should work (custom values and variants included)

[czernika]

Ah yes, good catch. I've edited answer - instead of "@class\\(([^)]*)\\)" it should be "@class\\(([^]*)\\) (one extra bracket was removed)

[alexmandrikdev]

Thank you!

[alexmandrikdev]

If you remove the @, it became works with the $attributes->class() method too.

"tailwindCSS.experimental.classRegex": [
     ["class\\(([^]*)\\)", "'([^']*)'"]
]

[czernika]

Thanks didn't know about that! You may put ? sign after @ (like @ may or may not be present) so regex should be ["@?class\\(([^]*)\\)", "'([^']*)'"] - this way both @class and $attributes->class() should work as expected

[tobia]

Thank you. Here is an updated version:

"tailwindCSS.experimental.classRegex": [
    ["class\\((.*)\\)", "'([^']*)'"],
    ["class\\((.*)\\)", "\"([^\"]*)\""],
]

This recognizes both single-quoted and double-quoted PHP strings. But it's still incomplete, because it will break when a single-quoted string contains an escaped single-quote, and other edge cases.

Unfortunately a full solution is not possible without a full PHP parser, or at least a Regex engine with support for recursive patterns (like (?1) in Perl or PCRE) which AFAIK is not present in Node's default Regex.