I intentionally avoided looking at how similar tools are built. This one was written from scratch in Typescript with, Pug, and TailwindCSS. This makes the Pugify converter a great fit for developers working with Pug templates inside Vue or similar SFC-driven JS frameworks (as I like to do.) This means custom HTML tags will pass the converter and retain their case.Ĭonventional HTMLElement tags will be returned in their lowercase form for consistency. The HTML to Pug converter supports custom HTML elements and mixed-case element tags. That means some HTML that looks like this: What I decided to do with the Pugifier is to present every class or id as literal if possible, otherwise put it inside of the parenthesis in an attribute statement. It contains a slash which would throw an error if attempted in a class literal. For example, take this class from tailwindCSS: w-1/2. Unfortunately, class and id literals do not support special characters.
This helps to make Pug more concise and easier to visually parse. In fact, when there is a valid id or class literal and the element is a div, then the tag name can be dropped entirely. Meaning classes and ids don't always have to be inside a class="." or id="." statement inside parentheses. Pug supports class literals and id literals.
When converting Pug to HTML there are some choices to be made, and I made them.
0 kommentar(er)
