Skip to content

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

Open
@d3v1an7

Description

@d3v1an7

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",

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions