🐛 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. |
* chore: `only` helper for json test * fix: remove divergence from html spec * test: add test for #712 * `addLoc` before popping the stack of oe * test: add test * literal parsing after `body` and `html` * test: add test for style tag after body * test: add tsx tests * test: add missing semicolon in test * test: add more tests from duplicates * nit: formatting * chore: changeset * test: add AST tests --------- Co-authored-by: Nate Moore <[email protected]> Co-authored-by: Erika <[email protected]>
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: