prettier-plugin-astro
prettier-plugin-astro copied to clipboard
withastro
Style and scripts moved into body tag in certain cases
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.
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?
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!
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 :)
there's still an issue when the content of
headis a component
Another workaround is using this syntax:
<head>
{/* https://github.com/withastro/prettier-plugin-astro/issues/316#issuecomment-1400808708 */}
{() => <Head />}
</head>
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).
Both issues are unfortunately still blocked upstream. You can keep an eye out on this issue for the style tag moving: https://github.com/withastro/compiler/issues/712
Still facing this issue and i was wondering why my styles intellisense was not working
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.
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 https://github.com/withastro/compiler/issues/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 <!-- prettier-ignore --> or <!-- prettier-ignore-start --> + <!-- prettier-ignore-end --> 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
I'm surprised this isn't tripping people up all over the place!!
I also see this when adding <ViewTransitions /> to the head.
Astro extension v2.7.5
Can I suggest this bug to be considered as higher priority? P3 / minor bug / edge case doesn't seem to make it justice.
There's already a PR in flight to fix this issue, bumping the priority at this point wouldn't change anything.
Can we bump the priority for this? Thanks!
Please read the comment right above yours.
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?
The workaround from @rbsummers works for me too - would be great to bump the priority of this up though.
