search

withastro / compiler

The Astro compiler. Written in Go. Distributed as WASM.
Other
473 stars 60 forks source link

🐛 BUG: [AST] Style tags get merged into html tag in certain situations #712

Closed Princesseuh closed 1 week ago

Princesseuh commented 1 year ago

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

HummingMind commented 11 months ago

+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!

mks-h commented 11 months ago

At least in my codebase, this issue doesn't break anything. I just let it be, and commit the way it is.

chankruze commented 11 months ago

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>
cprcrack commented 8 months ago

Is there a workaround for this? It's incredibly annoying...

cprcrack commented 8 months ago

Same thing happens with <script> tags by the way, they get moved to the <body>

paidge commented 6 months ago

Hi and happy new year. I met the same problem. For a workaround, I disable Autosave during the edition of the file

yudai-nkt commented 5 months ago

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.

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.