馃悰 BUG: [AST] Style tags get merged into html tag in certain situations #712
Comments
This checks in the input from #712 that moves the component from the head. The way I've written this test is kinda painful for generating the unit test snapshots though...
This checks in the input from #712 that moves the component from the head. The way I've written this test is kinda painful for generating the unit test snapshots though...
natemoo-re
added
the
downstream-blocker
|
+1. Same issue. Hoping for a fix soon! 馃嵒 |
|
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> |
Princesseuh
added
the
- P4: important
|
Is there a workaround for this? It's incredibly annoying... |
|
Same thing happens with |
|
Hi and happy new year. I met the same problem. For a workaround, I disable Autosave during the edition of the file |
It looks like we can reproduce this without 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. |
What version of
@astrojs/compilerare 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 ofhead, normal content works, but having a component there cause an issue. Cause the following issue in the Prettier plugin: withastro/prettier-plugin-astro#316Minimum repro:
gets formatted into:
Result AST: https://gist.github.com/Princesseuh/7ac0827647d2ff540a7bcadc7e8c11dc
Link to Minimal Reproducible Example
See description
The text was updated successfully, but these errors were encountered: