prettier format issue #4390

mybigman · 2022-08-19T14:02:11Z

What version of `astro` are you using?

1.0.6

Are you using an SSR adapter? If so, which one?

None

What package manager are you using?

yarn

What operating system are you using?

Mac

Describe the Bug

Prettier mangles the layout file.

This is on a fresh install.

Before

---
export interface Props {
  title: string;
}

const { title } = Astro.props as Props;
---

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width" />
    <link rel="icon" type="image/x-icon" href="/favicon.ico" />
    <meta name="generator" content={Astro.generator} />
    <title>{title}</title>
  </head>
  <body>
    <slot />
  </body>
</html>
<style>
  :root {
    --font-size-base: clamp(1rem, 0.34vw + 0.91rem, 1.19rem);
    --font-size-lg: clamp(1.2rem, 0.7vw + 1.2rem, 1.5rem);
    --font-size-xl: clamp(2.44rem, 2.38vw + 1.85rem, 3.75rem);

    --color-text: hsl(12, 5%, 4%);
    --color-bg: hsl(10, 21%, 95%);
    --color-border: hsl(17, 24%, 90%);
  }

  html {
    font-family: system-ui, sans-serif;
    font-size: var(--font-size-base);
    color: var(--color-text);
    background-color: var(--color-bg);
  }

  body {
    margin: 0;
  }

  :global(h1) {
    font-size: var(--font-size-xl);
  }

  :global(h2) {
    font-size: var(--font-size-lg);
  }

  :global(code) {
    font-family: Menlo, Monaco, Lucida Console, Liberation Mono,
      DejaVu Sans Mono, Bitstream Vera Sans Mono, Courier New, monospace;
  }
</style>

After

---
export interface Props {
  title: string;
}

const { title } = Astro.props as Props;
---

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width" />
    <link rel="icon" type="image/x-icon" href="/favicon.ico" />
    <meta name="generator" content={Astro.generator} />
    <title>{title}</title>
  </head>
  <body>
    <slot />
    <style>
      :root {
        --font-size-base: clamp(1rem, 0.34vw + 0.91rem, 1.19rem);
        --font-size-lg: clamp(1.2rem, 0.7vw + 1.2rem, 1.5rem);
        --font-size-xl: clamp(2.44rem, 2.38vw + 1.85rem, 3.75rem);

        --color-text: hsl(12, 5%, 4%);
        --color-bg: hsl(10, 21%, 95%);
        --color-border: hsl(17, 24%, 90%);
      }

      html {
        font-family: system-ui, sans-serif;
        font-size: var(--font-size-base);
        color: var(--color-text);
        background-color: var(--color-bg);
      }

      body {
        margin: 0;
      }

      :global(h1) {
        font-size: var(--font-size-xl);
      }

      :global(h2) {
        font-size: var(--font-size-lg);
      }

      :global(code) {
        font-family: Menlo, Monaco, Lucida Console, Liberation Mono,
          DejaVu Sans Mono, Bitstream Vera Sans Mono, Courier New, monospace;
      }
    </style>
  </body>
</html>

Link to Minimal Reproducible Example

Participation

I am willing to submit a pull request for this issue.

The text was updated successfully, but these errors were encountered:

bluwy · 2022-08-19T14:34:55Z

Looks like there are two issues here:

We're using prettier-plugin-astro 0.3.0 where now it's already 0.5.0
The repo use tabs for prettier.

I think we could bump to 0.5.0, re-format and call it a day. I'm not sure how we can enforce tabs for no2 though, unless we setup a default .prettierrc via the template/astro add (both which aren't implemented yet), or prettier 3 (?)

cc @Princesseuh

Princesseuh · 2022-08-19T14:36:46Z

I think the issue they're talking about is more so that the style tag gets moved inside the body tag.

This is caused by a known issue inside the compiler at the moment withastro/compiler#318 and there's also an issue for this in the plugin's repo withastro/prettier-plugin-astro#260 so we can close this one

Thank you for filling this issue!

Princesseuh closed this as not planned Won't fix, can't repro, duplicate, stale Aug 19, 2022

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

prettier format issue #4390

prettier format issue #4390

mybigman commented Aug 19, 2022

bluwy commented Aug 19, 2022

Princesseuh commented Aug 19, 2022 •

edited

Loading

prettier format issue #4390

prettier format issue #4390

Comments

mybigman commented Aug 19, 2022

What version of astro are you using?

Are you using an SSR adapter? If so, which one?

What package manager are you using?

What operating system are you using?

Describe the Bug

Link to Minimal Reproducible Example

Participation

bluwy commented Aug 19, 2022

Princesseuh commented Aug 19, 2022 • edited Loading

What version of `astro` are you using?

Princesseuh commented Aug 19, 2022 •

edited

Loading