Hacker News Reader

Comment by nielsbot | Hacker News Reader

Anyone making a new syntax for writing HTML/XML should at least look at HAML. I really wish I could use HAML for my Typescript React projects.

View on HN

Yeah, that was my first thought. The author thinks they are extending CSS, but actually reinvented HAML with CSS syntax.

CSS as a language is supposed to apply to an existing DOM tree, not synthesize an entirely new one. The selector syntax alone is too ambiguous to actually do that, because it is a search lookup, not a tree structure (even though SASS/LESS can make it look like one). If you specify, say, three `svg path` selectors with rules in them, you aren't asking for three separate paths in an SVG node. You're asking for all paths in all SVG elements, including grandchildren and great-grandchildren, to be handed all of the rules in all matching selectors.

If we wanted to make this idea work while not redefining CSS selectors, we'd have to ban the descendent combinator (because it would create infinite node hierarchies), and use the child combinator and nth-child everywhere exclusively. So instead of `svg path` you'd have `svg > path:nth-child(1)`. And probably a `::synthesize()` selector for saying, "yes I want this CSS rule to create a DOM node".

I use Pug for markup in my Svelte + TS projects and I adore it: https://github.com/pugjs/pug

I love Pug for Vue projects, especially when writing SVG components. Way cleaner markup, feels more like the other languages in my stack, and integrates perfectly with modern frameworks!

Seems easy enough:

HAML structure is really easy to understand. It attempts to strip out as much of the annoying HTML repetition as possible. For example to write paragraph tag you could use:

%p This is HTML paragraph. HAML will convert that to:

<p>This is HTML paragraph</p>

You can also pass more attributes to the tag you want:

.banners(id="top-banner", title="Your ad here") Your text here Will be rendered like this:

You don't need to close <p> tag, it closes automatically.

Also supporting something as simple as </> (close current tag) would significantly reduce HTML boilerplate without inventing new language. I agree that shortcuts for id and class are nice too.

My proposal:

  <div.content>
    <form#login>
      <input name=username>
      <input name=password>
    </>
  </>

That's almost SGML, except for the short form syntax for IDs:

    <div content>
      <form id=login>
        <input name=username>
        <input name=password>
      </>
    </>

Note though that including markup declarations for enumerating custom class names and for the input element having declared content EMPTY is required (the latter declaration actually part of HTML DTDs [1]):

   <!attlist div class (content) #implied>
   <!element input - - empty>

Moreover, in SGML you can have tag omission/inference, like on the p element or the html element itself.

Your "</>" Close current tag syntax is actually part of SGML (as is "<>" which is treated as start element tag for the most recently closed element), known as FEATURES MINIMIZE SHORTTAG ENDTAG EMPTY and FEATURES MINIMIZE SHORTTAG STARTTAG EMPTY features, resp. ([2]).

[1]: http://sgmljs.net/docs/w3c-html52-dtd.html

[2]: http://sgmljs.net/docs/sgmlrefman.html

  .banners(id="top-banner", title="Your ad here")

Minor correction: the comma there isn't valid Haml syntax, when you use parenthesis for attributes it expects the same format as inside a regular HTML tag (i.e. attributes separated by whitespace).

But you can also rewrite that as:

  #top-banner.banners(title="Your ad here")

IDK how closely HAML hews to valid HTML elements/attrs/etc., but DMark (https://denisdefreyne.github.io/d-mark/) is syntactically similar and very extensible.

Take a look at Jadelet. It also supports SVG.

https://github.com/STRd6/jadelet

Reply on news.ycombinator.com