Skip to content

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

@MilesPernicious

Description

@MilesPernicious

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

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