cfware / babel-plugin-template-html-minifier

Minify HTML in tagged template strings using html-minifier
MIT License
63 stars 4 forks source link

lit-html bind to properties is case sensitive #11

Closed shaman-apprentice closed 5 years ago

shaman-apprentice commented 5 years ago

Binding of properties is case sensitive in lit-html, but babel-plugin-template-html-minifier makes the property attributes lower case.

Here is a link to a demo repo, which works as expected with babel-plugin-template-html-minifier disabled and "buggy as expected" with it enabled.


In general: Thanks a lot for sharing your work! :)

coreyfarrell commented 5 years ago

You need to use caseSensitive: true in your htmlMinifier options for this to work. See https://github.com/kangax/html-minifier#options-quick-reference

shaman-apprentice commented 5 years ago

löl. My apologies and thanks again!

coreyfarrell commented 5 years ago

Not a problem. Glad this is useful to you.

LarsDenBakker commented 5 years ago

@coreyfarrell sounds like quite a footgun here. maybe it's a good idea to add this to the readme?

coreyfarrell commented 5 years ago

:+1: PR's welcome, my time is a occupied by other projects currently.

Worth noting I believe this issue is specific to lit-html, I'm not aware of other JS tagged literal templating systems which use case sensitive property names (this is a deviation from HTML specs). This can be problematic with html-minifier which by default only supports standard HTML. Might be other issues that apply to lit-html templates, might be worth someone who knows lit-html better than I to review the html-minifier defaults to see if any other options can be problematic.

shaman-apprentice commented 5 years ago

at my work "caseSensitive": true was the only pitfall. In case some more will pop up I created a test/playground repo just for fun with Jest tests