
Ask HN: Usefulness of CSS Framework agnostic html tags transpiler? - superasn
I was wondering how useful it would be to create a HTML tag transpiler to create a CSS framework agnostic HTML files.<p>So instead of writing code like this for say, a Panel<p>Boostrap:
   &lt;div class=&quot;panel panel-default&quot;&gt;
     &lt;div class=&quot;panel-heading&quot;&gt;Title&lt;&#x2F;div&gt;
     &lt;div class=&quot;panel-body&quot;&gt;A Basic Panel&lt;&#x2F;div&gt;
   &lt;&#x2F;div&gt;<p>Bulma:
   &lt;nav class=&quot;panel&quot;&gt;
     &lt;p class=&quot;panel-heading&quot;&gt;Title&lt;&#x2F;p&gt;
     &lt;div class=&quot;panel-block&quot;&gt;A Basic Panel&lt;&#x2F;div&gt;
   &lt;&#x2F;div&gt;<p>We can just write code like this<p><pre><code>   &lt;panel&gt;
     &lt;panel-heading&gt;Title&lt;&#x2F;panel-heading&gt;
     &lt;panel-body&gt;Body&lt;&#x2F;panel-body&gt;
   &lt;&#x2F;panel&gt;
</code></pre>
So now the transpiler can automatically create HTML files in the dist directory (via Webpack)?<p>This way you can switch CSS frameworks and you also don&#x27;t need to learn classes, etc for each framework? Just an idea.. wondering what the pros and cons are?
======
lioeters
I've been using variations of HTML traspilers for a couple of years now. First
versions were in PHP with native DOMDocument parser; more recently implemented
in Node.js.

The core engine is really small. There's a registry of custom tags, and it
walks the parsed tree of tags, runs callbacks, building the final HTML string.
The rest of the functionality depends on registered tags.

A tag can render HTML, CSS classes, styles (combined in head), generate JS
(combined at end of document), fetch stuff from database.. In your submission
history, I found the following gem. If this is possible, then I think your
idea of a framework-agnostic style system based on HTML tags is not too crazy.
;)

    
    
      <database name="bookstore" defaultIdMethod="native">
        <table name="book" description="Book Table">
          <column name="id" type="integer" primaryKey="true" autoIncrement="true" />
          <column name="title" type="varchar" required="true" primaryString="true" />
          <column name="isbn" required="true" type="varchar" size="24" phpName="ISBN" />
          <column name="author_id" type="integer" />
          <foreign-key foreignTable="author" onDelete="setnull" onUpdate="cascade">
            <reference local="author_id" foreign="id" />
          </foreign-key>
        </table>
        <table name="author">
          <column name="id" type="integer" primaryKey="true" autoIncrement="true" />
          <column name="first_name" type="varchar" />
          <column name="last_name" type="varchar" />
        </table>
      </database>
    

(From: [https://cameronspear.com/blog/a-different-and-better-
approac...](https://cameronspear.com/blog/a-different-and-better-approach-to-
database-migrations-in-php/))

~~~
superasn
Thanks. I would be willing to try writing a webpack plugin to do the same for
Html files om a weekend then :) although I'd only do it as proof of concept
for now.

It's crazy that something like this doesn't already exists.. Seems like such a
simple idea that can save a ton of headache for all devs.

~~~
lioeters
Yes..I think it's a deep topic, the history of XML/HTML-like "languages" and
its variants. That includes template syntaxes in Angular, Vue, React, and also
Bootstrap/Bulma and other CSS frameworks with "atomic" classes like margin,
padding.. Whole application frameworks can be based on this concept.

Here's a small and smart parser for HTML <-> JSON that I've been using:
[https://github.com/andrejewski/himalaya](https://github.com/andrejewski/himalaya)

