Support html and css literal transformation

[LasseRosenow]

Many modern frameworks like Lit use template literals for inline html and css.

For example:

import { LitElement, html, css } from "lit";
import { customElement } from "lit/decorators.js";

@customElement('simple-greeting')
export class SimpleGreeting extends LitElement {
  static styles = css`p { color: blue }`; // <--------------- This

  render() {
    return html`<p>Hello, ${this.name}!</p>`; // <----------- And this
  }
}

It would be really nice if parcel could identify these constructs and applies minification and also running parcelcss over it to support modern css features.

[devongovett]

Interesting idea. Presumably those tagged template literals are imported from somewhere? Not sure we can make assumptions based only on the name. There would probably need to be a way to explicitly enable this for certain imports maybe?

[LasseRosenow]

Yes that's correct, the html and css would be importet from the Lit framework. And other frameworks like FAST would export their own html and css tags. But there are also many framworks that would be based on lit-html thus using the same html and css tag as Lit.

But usually the assumption that you could always make is that tagged template literals would contain HTML code, if their tag is html and CSS code if their tag is css. I would say.

But having this feature as opt in would also be fine for me, if you think that would be the way to go :)

[LasseRosenow]

Maybe make it possible to configure parcel so that one could say: If parcel finds a template string that starts with the tax a, then treat it as programming language b
So a config like:

(I have no knowledge of parcels configuration structure, so this is very random just to express what I mean) :)

languageDetection: {
  customStringLiteralTags: [
    {
      tag: "css",
      lang: "CSS", // Or maybe an enum like Parcel.langs.CSS ?
    },
    {
      tag: "html",
      lang: "HTML",
    }
  ]
}

[aidan-casey]

@LasseRosenow - Check out @anteris/parcel-transformer-html-literals as a working proof of concept for this. I'm still looking into whether there would be a better way to track these literals, but I have had no issues with Lit and this setup so far.

[LasseRosenow]

The issue I have with this, that it seems this package also only relies of this one other "minify" package and does not make parcel minify it.

So also no support for modern features like "lab" color space etc. would work.

What I want is some way to let parcel treat the inline css the same as the css files, so that parcel would minify it and also add support for modern css features.

[mischnic]

Here's a PoC how this works with the Parcel API: https://github.com/mischnic/parcel-transformer-js-literals

There's currently one assertion I had to patch out of Parcel core, and the transformer is very bare bones.

[LasseRosenow]

@mischnic Seems really nice, will this become an official parcel transformer in the future?