[FEATURE] "Inline" all classes to better work with tailwindcss

[rowild]

Hi!

first of all: thank you for your very helpful tool! Highly appreciated!

I only switched to pug yesterday (coming from ejs, all in a webpack context), but so far I am very happy with it. I only observe one thing that I would like to mention, and maybe you find a moment to share your opinion on that.

I use html pre-processors mainly to develop an initial webpage layout that will later be implemented in a CMS (TYPO3, the templates there are called "Fluid templates"). That means I have to rebuild the templates again in the CMS, which is ok by me, since lots of things are simply copy and paste.
Now, with pug however, that changes a bit, especially when in comes to classes and using tailwind. When converting html to pug, html2pug extracts css in dot notation, except where it encounters tailwindcss specials like md:w-1/2 or similar. Then the converter creates a class attribute, which is great.

But eventually I end up with 2 ways of css notation in the new pug file, which look like this, e.g.:

.gallery-unit.relative.inline-block.bg-gray-100.ml-2.whitespace-normal.align-top.h-60.rounded.shadow-simple.transition-shadow.duration-300(class='w-2/3 sm:w-1/2 md:w-1/3 lg:w-1/4 md:ml-6 lg:ml-8 lg:h-72 hover:shadow-simpleHover')

It would be way simpler to have everything in the class attribute like this:

.(class='gallery-unit relative inline-block bg-gray-100 ml-2 whitespace-normal align-top h-60 rounded shadow-simple transition-shadow duration-300 w-2/3 sm:w-1/2 md:w-1/3 lg:w-1/4 md:ml-6 lg:ml-8 lg:h-72 hover:shadow-simpleHover')

That would make it easier to copy classes over to another template system, and, IMO, it is also easier to read in the editor.

I wonder if it would be possible to have a configuration option available? E.g.:

Inline all CSS

Would love to know your opinion about that! Thank you!

[dimensi]

Hmm, I use the html2jade library for transformation. It is no longer supported by the author. But I think I can finalize this feature myself.

[dimensi]

@rowild, I added a new feature. Here you go.
Close the issue if it's okay.

[rowild]

@dimensi This is amazing! Thank you very, very much!