compiler
compiler copied to clipboard
withastro
🐛 BUG: [AST] Style tags get merged into html tag in certain situations
What version of @astrojs/compiler are you using?
1.0.1
What package manager are you using?
pnpm
What operating system are you using?
macOS
Describe the Bug
In some cases, style tags gets merged into html. It seems to depends on the content of head, normal content works, but having a component there cause an issue. Cause the following issue in the Prettier plugin: https://github.com/withastro/prettier-plugin-astro/issues/316
Minimum repro:
<html lang="en">
<head>
<BaseHead />
</head>
</html>
<style>
@use "../styles/global.scss";
</style>
gets formatted into:
<html lang="en">
<head>
<BaseHead />
</head>
<style>
@use "../styles/global.scss";
</style>
</html>
Result AST: https://gist.github.com/Princesseuh/7ac0827647d2ff540a7bcadc7e8c11dc
Link to Minimal Reproducible Example
See description
+1. Same issue. Since I have "format on save" emabled, this happens every single save of the main layout. I almost checked it into source control that way once. 😢
Hoping for a fix soon! 🍻 Thank you!
At least in my codebase, this issue doesn't break anything. I just let it be, and commit the way it is.
It's still happening.
---
import BaseHead from "../components/BaseHead.astro";
import Header from "../components/Header.astro";
import { SITE_DESCRIPTION, SITE_TITLE } from "../consts";
interface Props {
title: string;
}
const { title } = Astro.props;
---
<!doctype html>
<html lang="en">
<head>
<BaseHead title={SITE_TITLE} description={SITE_DESCRIPTION} />
</head>
<body>
<Header title={SITE_TITLE} />
<slot />
<style is:global>
:root {
--accent: 136, 58, 234;
--accent-light: 224, 204, 250;
--accent-dark: 49, 10, 101;
--accent-gradient: linear-gradient(
45deg,
rgb(var(--accent)),
rgb(var(--accent-light)) 30%,
white 60%
);
}
html {
font-family: system-ui, sans-serif;
background: #13151a;
background-size: 224px;
}
code {
font-family:
Menlo,
Monaco,
Lucida Console,
Liberation Mono,
DejaVu Sans Mono,
Bitstream Vera Sans Mono,
Courier New,
monospace;
}
</style>
</body>
</html>
Same thing happens with <script> tags by the way, they get moved to the <body>
Hi and happy new year. I met the same problem. For a workaround, I disable Autosave during the edition of the file
In some cases, style tags gets merged into
html. It seems to depends on the content ofhead, normal content works, but having a component there cause an issue.
It looks like we can reproduce this without <head> element involved. Below is a reproduction taken from withastro/prettier-plugin-astro#408, where I've mistakenly submitted a duplicate:
import { format } from "prettier";
const source = `
<div>
</div>
<style>
</style>
`;
console.log(
await format(source, { parser: "astro", plugins: ["prettier-plugin-astro"] })
);
console.log(
await format(source.replace("div", "html"), {
parser: "astro",
plugins: ["prettier-plugin-astro"],
})
);
I hope this smaller reproduction helps troubleshooting the problem.
