[pug-lexer] Tailwind classes support

[FlameArt]

Support for Tailwind classes syntax like .lg:w-[555px], .hover:border etc
Test added

The only confilct I saw: colon : is used for block expansion, but only with space symbol between a blocks, Tailwind no need spaces in class names, so i just add negative lookahead for colon-space combination in regexp

[rollingversions]

There is no change log for this pull request yet.

Create a changelog

[resincode]

is this work already ? I uses Tailwind with Pug FYI, and it's kinda nice to have this.

[webdiscus]

@FlameArt

you can use Tailwind classes in class attribute:

//- instead of this non-standard syntax
a.focus:border.lg:w-[555px]
//- can be used clear standard syntax
a(class="focus:border lg:w-[555px]")

P.S.: Please don't pollute Pug with tailwind's non-standard syntax ;-)
Please note that several IDE linters give display errors and this syntax will not be supported in IDEs.

[Shinigami92]

@FlameArt

you can use Tailwind classes in class attribute:

//- instead of this non-standard syntax
a.focus:border.lg:w-[555px]
//- can be used clear standard syntax
a(class="focus:border lg:w-[555px]")

P.S.: Please don't pollute Pug with tailwind's non-standard syntax ;-) Please note that several IDE linters give display errors and this syntax will not be supported in IDEs.

I think you see it from the wrong perspective 🤔
It's not supported, because it was not added / handled by pug
But this repo IS pug and this PR adds support for it!
Linter, formatter and syntax highlighter would need to be updated accordingly to support this new handling of classes after this PR gets released

[kaceo]

P.S.: Please don't pollute Pug with tailwind's non-standard syntax

I think you see it from the wrong perspective 🤔

Hear hear. Pug has not progressed feature-wise in past year but CSS frameworks like Tailwindcss has.

Pug needs to evolve:

• support extended class names including symbols like colon, slash, percent.
• expect tags to have dozens of class literals, and these may spread over multiple lines
• support a flexible multi-line quoting strategy for strings.
• also allow attributes to have multiple same names, don't treat them as errors, just warnings.

[orenmizr]

status on this ?
by a pug/vue user :/

I had to let it go as jade (pug) became more and more esoteric.

[jpg]

Tailwindcss + Pug should be a match made in heaven; we just need pug to allow colons & slashes 🙏

I know we can put tailwind utility classes in the class attribute (I use the responsive utilities on every page, like lg:), but that undoes the syntactic beauty that brought us to pug in the first place