search

11ty / webc

Single File Web Components
MIT License
1.3k stars 36 forks source link

HTML entities in <style> tags are being encoded #208

Open d3v1an7 opened 1 week ago

d3v1an7 commented 1 week ago

Hi there! Sorry, I'm not sure if this is for eleventy-plugin-bundle or here!

test.webc

<script webc:setup>
  const cssString = "article > h1 { background: red; }";
</script>
<style webc:keep @text="cssString"></style>
<style webc:keep @raw="cssString"></style>
<style webc:keep @html="cssString"></style>

output

<style>article &amp;gt; h1 { background: red; }</style>
<style>article &gt; h1 { background: red; }</style>
<style>article &gt; h1 { background: red; }</style>

Does not seem to be an issue with other tags:

<div webc:keep @html="cssString"></div>
<div>article > h1 { background: red; }</div>

Workarounds I've found so far:

Add style attribute to body

<html webc:keep :style="cssString"></html>

Tiny transform in 11ty config (for html stuff only)

eleventyConfig.addTransform('fixInlineStyle', async function (content) {
  return this.outputPath.split('.').pop() === 'html' ? content.replace(/&gt;/g, '>') : content;
});

Am using:

"@11ty/eleventy": "3.0.0-alpha.13",