CSS gets mangled correctly, but not the HTML when using Template literals

MilesPernicious commented 1 year ago

Describe the bug

When using a component using template literals, only the CSS will be mangled but not the HTML.

Reproduction

Minimal reproduction code sandbox:

https://codesandbox.io/p/sandbox/stupefied-chebyshev-z7vfqd?file=%252Fsrc%252Fcomponents%252FButton.astro

The HTML output:

<!DOCTYPE html>
<html lang="en">
    <head><script type="text/javascript" src="https://codesandbox.io/p/preview-protocol.js"></script>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width">
        <title>Astro</title>
    <style type="text/css" data-astro-dev-id="/project/sandbox/src/styles/stylify.css">.a{
    color: white
}
.b{
    font-size: 2rem
}
.c{
    padding: 2rem
}
.d{
    background-color: green
}
.e{
    cursor: pointer
}
</style><script type="module" src="/@vite/client"></script>
<script type="module" src="/@fs/project/sandbox/node_modules/astro/dist/runtime/client/hmr.js?v=c8b5b8ab"></script>
<script type="module" src="/src/styles/stylify.css"></script></head>
    <body>
        The button is green <b>only</b> with mangleSelectors false.<br>
        <button class="
        color:white
        font-size:2rem
        padding:2rem
        background-color:green
        cursor:pointer
    ">this should be green</button>
    </body></html>

Logs

No response

System Info

Astro 0.5.29

Machy8 commented 1 year ago

Huh, interesting. I had no idea, that something like the dynamic tag can work in JS frameworks. Seems like astro is the only one that can do that.

I will check the issue with the class though. Thanks for the report!

Machy8 commented 1 year ago

@MilesPernicious It should be fixed in 0.5.30 via https://github.com/stylify/packages/commit/51185e693de731b6439cabf37800919a463fe29b. Please try it out and let me know.

MilesPernicious commented 1 year ago

It's fixed, yes, thanks!

stylify / packages