Feature Request: add escape support to class/id literal

caikan commented 2 years ago

Pug Version: 3.0.2

Node Version: 14

Input Pug

.w-1\/2.hover\:text-\#00f test

Expected HTML

<div class="w-1/2 hover:text-#00f">test</div>

Actual HTML

parser error

Additional Comments

This will be very useful when using pug with TailwindCSS/WindiCSS.

cerv0077 commented 2 years ago

Any progress in this problem?

blazmrak commented 2 years ago

Doesn't the escaping kill the readability? wouldn't div(class='w-1/2 text-#00f') be better?

tgrelka commented 2 years ago

Doesn't the escaping kill the readability? wouldn't div(class='w-1/2 text-#00f') be better?

If you have a lot of escaped class literals, yes.

But in simpler cases it helps avoid clutter imho. Compare these two definitions of the same div:

.my-3rem.mx-auto.w-60\%
div(class="my-3rem mx-auto w-60%")

The only problem is the %-Symbol, and a \ there doesn’t hurt readability in any significant way.

Part of what makes pug great for me is being able to quickly differentiate between classes/styling and functional parts of tags, as well as structural and functional components. This is mostly accomplished by the class literals syntax.

.h-csreen.flex.justify-center
    .max-w-25rem.w-full
        .my-3rem.mx-auto.w-60%
            img(:src="logo")
            button.btn.btn-primary(@click="visitPage()") Take me there!

Here I can quickly tell what parts are there just for layout and styling, and what is actual content, mostly due to syntax highlighting. Most of the time, I use this deliberately, too. If I have a div which also serves some kind of purpose other than layouting, I use div.class-1.class-2 to indicate its function.

tl;dr - I support escaping of class literals, when used sparingly it can greatly improve readability and discoverability of code over using attributes on elements.

blazmrak commented 2 years ago

@tgrelka couldn't you solve the issue by just being explicit about what the div is?

.base-layout(class='h-csreen flex justify-center')
    .content-layout(class='max-w-25rem w-full')
        .card(class='my-3rem mx-auto w-60%')
            img(:src="logo")
            button(class='btn btn-primary' @click="visitPage()") Take me there!

tgrelka commented 2 years ago

@blazmrak I appreciate your input.

It does not solve anything in my view however, as I have said previously:

I lose the advantage of quickly being able to tell what is styling and what is functional. That was the whole point of my example. The syntax highlighting makes elements with only classname literals and the div shorthand visually distinct from elements which also include attributes or tags. I find that very comfortable when coding.
I end up adding a bunch of, mostly made-up, classnames just so each element is explicitly named, but with highly dynamic code (which in my use cases these elements typically are) they quickly lose any meaning or would constantly need to be changed. While it is not much, it definitely is mental overhead, taking a second here and there to think about names when there is no need quickly adds up.

I think our workflows simply are different. I work with a mix of Bootstrap (for styling components) and atomic CSS for utilities. Elements which carry any semantic value are named appropriately, like card - which is an actual bootstrap card, but the whole point of atomic CSS is to not be explicit about what an element is.

What I don’t understand is why you are arguing agains the option to escape characters in pug - would that harm your workflows in any way?

kaceo commented 1 year ago

I support this proposal for extending "class literals" syntax, as it will solve a common headache for developers using Tailwindcss:

Tailwindcss' strategy of utility classes require every html element to be tagged with more than one css class. This is a trend, and so Pug should make writing classes as simple as writing attributes.
Colons/slash/percent are valid class names, and Pug must allow these symbols to be used in class names. Other css frameworks are also beginning to allow these symbols.
Currently Pug disallows attributes to be defined multiple times, but allows multiple dot class literals. Pug should allow both to be multiple, and allow multi-line syntax (either as delimited strings, or as list of symbols).

pugjs / pug