Style and scripts moved into body tag in certain cases #316

ChrisSki · 2023-01-20T16:45:14Z

What version of `astro` are you using?

1.9.2

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

None

What package manager are you using?

npm

What operating system are you using?

Mac

Describe the Bug

Per the docs for importing CSS:

Tip: A common pattern in Astro is to import global CSS inside a Layout component. Be sure to import the Layout component before other imports so that it has the lowest precedence.

I tried using a <style lang="scss"> outside of <html> like so:

src/layouts/BlogPostLayout.astro

But was left with this:

@aFuzzyBear suggested I log this in hope that the Astro Prettier plugin could allow for this and not confuse anyone else 🙂

Link to Minimal Reproducible Example

na

Participation

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

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

Princesseuh · 2023-01-20T23:09:52Z

Hello, thank you for reporting this issue! I'm pretty sure we had this fixed already in the past, I'll do a proper investigation on Monday, but it is possible that you're using an outdated version of the plugin?

ChrisSki · 2023-01-21T01:09:05Z

I'm on 0.7.2 which I think is the latest?

Princesseuh · 2023-01-23T18:41:26Z

Hello! After further investigation, this is caused by an issue in the compiler. The previous fix fixed this in most situations, but it seems like there's still an issue when the content of head is a component. I'm sorry for the inconvenience!

ChrisSki · 2023-01-23T18:49:37Z

All good! I just wanted to bring it up since the Astro docs suggest importing global css into a layout, and done like this it's just a formatting issue. The workaround was simply to build a GlobalStyles component and import that into the Head in my layout, which the docs also suggest. So nothing really wrong here :)

HiDeoo · 2023-03-31T04:41:09Z

there's still an issue when the content of head is a component

Another workaround is using this syntax:

<head>
  {/* https://github.com/withastro/prettier-plugin-astro/issues/316#issuecomment-1400808708 */}
  {() => <Head />}
</head>

mks-h · 2023-06-29T12:54:20Z

Formatting the file twice puts styles inside the body element. Trying to prettier-ignore the styles triggers #338, which eats the styles (except for the lang=scss attribute, weirdly enough).

Princesseuh · 2023-06-29T13:27:52Z

Both issues are unfortunately still blocked upstream. You can keep an eye out on this issue for the style tag moving: withastro/compiler#712

shardbearer-shri · 2023-07-02T05:59:43Z

Still facing this issue and i was wondering why my styles intellisense was not working

jmegs · 2024-01-19T20:28:49Z

just ran across this same issue in 2.6.2 of the extension, just to provide more evidence it's still happening. I did notice it after putting <ViewTransitions /> into the <head> section of this layout, if that helps.

firxworx · 2024-01-24T19:53:26Z

I'm running latest everything and can confirm this issue remains: astro-prettier-plugin v5.1.3 + astro 4.2.4.

I note the comment above that things are currently blocked upstream per withastro/compiler#712.

@jmegs note that this happens with any component in the head not just <ViewTransition> (in case that helps you).

I can also confirm that this plugin appears to ignore prettier-ignore directives as documented in https://prettier.io/docs/en/ignore.html.

No combinations of  or  +  that I tried could get prettier to leave this alone.

I also tried moving my <style>...</style> to its own Astro component and the issue still appears, so whatever underlying pattern/regex is not specifically limited to <style> and <script>` tags.

I'm surprised this isn't tripping people up all over the place!!

raae · 2024-03-04T21:11:44Z

I also see this when adding to the head.

Astro extension v2.7.5

cprcrack · 2024-03-07T19:20:35Z

Can I suggest this bug to be considered as higher priority? P3 / minor bug / edge case doesn't seem to make it justice.

Princesseuh · 2024-03-07T19:24:15Z

There's already a PR in flight to fix this issue, bumping the priority at this point wouldn't change anything.

MiguelJAS · 2024-04-18T20:36:45Z

Can we bump the priority for this? Thanks!

Princesseuh · 2024-04-19T04:14:50Z

Can we bump the priority for this? Thanks!

Please read the comment right above yours.

rbsummers · 2024-05-16T09:09:15Z

Hi, I think I may have found a workaround for the time being, at least with that JSX block with just the comment now both vscode plugin stopped complaining and the cli linter passes without warnings:

<html>
  <head>
    // ...head, title, & other stuff...
  </head>

  <body>
    // ...layout code...
    {
      /*
       * For some reason,without this comment here prettier forces incorrect formatting.
       * See https://github.com/withastro/prettier-plugin-astro/issues/316
       */
    }
  </body>
</html>

<style lang="scss">
  // ...styles...
</style>

Can anyone double check?

MoltenCoffee · 2024-06-02T19:45:39Z

The workaround by @rbsummers seems to work for me as well!

thedanbaird · 2024-07-12T02:56:50Z

The workaround from @rbsummers works for me too - would be great to bump the priority of this up though.

Princesseuh · 2024-07-18T21:11:13Z

This was fixed in the last version!

ChrisSki changed the title ~~Astro Prettier plugin needs heavier hands in .astro files~~ Astro Prettier plugin needs heavier hands in .astro layout files Jan 20, 2023

Princesseuh transferred this issue from withastro/astro Jan 20, 2023

Princesseuh added bug ecosystem: compiler Issue is caused by a bug in the Astro compiler labels Jan 23, 2023

Princesseuh mentioned this issue Jan 23, 2023

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

Closed

Princesseuh mentioned this issue Jan 24, 2023

🐛 BUG: <style> is moved inside <body> where applicable #260

Closed

Princesseuh mentioned this issue Sep 16, 2023

🐛 BUG: Astro's <ViewTransitions /> routing component formatting breaks withastro/language-tools#651

Closed

Princesseuh mentioned this issue Oct 30, 2023

🐛 BUG: Moving global style tag into different tags automatically withastro/language-tools#675

Closed

Princesseuh removed the bug label Nov 28, 2023

Princesseuh changed the title ~~Astro Prettier plugin needs heavier hands in .astro layout files~~ Style and scripts moved into body tag in certain cases Nov 29, 2023

Princesseuh added the - P3: minor bug An edge case that only affects very specific usage (priority) label Nov 29, 2023

Princesseuh mentioned this issue Feb 19, 2024

🐛 BUG: Adding components into head tag breaks the astro file layout (view transitions) #406

Closed

yudai-nkt mentioned this issue Feb 25, 2024

🐛 BUG: Positioning of <style> tag is inconsistent depending on the element exported by a component #408

Closed

Princesseuh mentioned this issue Feb 25, 2024

🐛 BUG: ViewTransitions component breaks head tag on format #409

Closed

Princesseuh mentioned this issue Mar 28, 2024

🐛 BUG: Formatting Layout components gives unexpected reults withastro/language-tools#846

Closed

Princesseuh closed this as completed Jul 18, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Style and scripts moved into body tag in certain cases #316

Style and scripts moved into body tag in certain cases #316

ChrisSki commented Jan 20, 2023

Princesseuh commented Jan 20, 2023

ChrisSki commented Jan 21, 2023

Princesseuh commented Jan 23, 2023

ChrisSki commented Jan 23, 2023

HiDeoo commented Mar 31, 2023

mks-h commented Jun 29, 2023

Princesseuh commented Jun 29, 2023

shardbearer-shri commented Jul 2, 2023

jmegs commented Jan 19, 2024 •

edited

Loading

firxworx commented Jan 24, 2024

raae commented Mar 4, 2024

cprcrack commented Mar 7, 2024

Princesseuh commented Mar 7, 2024

MiguelJAS commented Apr 18, 2024

Princesseuh commented Apr 19, 2024

rbsummers commented May 16, 2024 •

edited

Loading

MoltenCoffee commented Jun 2, 2024

thedanbaird commented Jul 12, 2024

Princesseuh commented Jul 18, 2024

Style and scripts moved into body tag in certain cases #316

Style and scripts moved into body tag in certain cases #316

Comments

ChrisSki commented Jan 20, 2023

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

Princesseuh commented Jan 20, 2023

ChrisSki commented Jan 21, 2023

Princesseuh commented Jan 23, 2023

ChrisSki commented Jan 23, 2023

HiDeoo commented Mar 31, 2023

mks-h commented Jun 29, 2023

Princesseuh commented Jun 29, 2023

shardbearer-shri commented Jul 2, 2023

jmegs commented Jan 19, 2024 • edited Loading

firxworx commented Jan 24, 2024

raae commented Mar 4, 2024

cprcrack commented Mar 7, 2024

Princesseuh commented Mar 7, 2024

MiguelJAS commented Apr 18, 2024

Princesseuh commented Apr 19, 2024

rbsummers commented May 16, 2024 • edited Loading

MoltenCoffee commented Jun 2, 2024

thedanbaird commented Jul 12, 2024

Princesseuh commented Jul 18, 2024

What version of `astro` are you using?

jmegs commented Jan 19, 2024 •

edited

Loading

rbsummers commented May 16, 2024 •

edited

Loading