When I beautify my code the <style is:global> part gets moved into my <html> part, beautifying another time then moves it into the <body> element. How do I prevent this?
#Beautifying code breaks html body and style part
worn zenith
nimble vineBOT
Hi @worn zenith. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
The issue you're experiencing seems to be related to how your code beautifier is handling the <style is:global> tag in Astro. This issue has been reported in the Astro GitHub repository before, where moving the <style is:global> above the HTML in the layout caused the style to shift from the head to the body (source (https://github.com/withastro/astro/issues/5659)).
Astro's <style is:global> directive is used to apply styles globally on the page when the component is included, disabling Astro’s CSS scoping system (source (https://docs.astro.build/en/reference/directives-reference#script--style-directives)).
To prevent this issue, you might want to check your code beautifier's settings or rules regarding handling of custom HTML attributes or Astro-specific syntax. If the issue persists, consider raising an issue in the Astro GitHub repository or the repository of your code beautifier.
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
worn zenith
@nimble vine Even when only using the Astro extension this breaks the code. How do I need to modify the Astro extension to prevent this?
nimble vineBOT
Let me check the knowledge base for you. One moment! :books:
Based on the provided knowledge sources, there isn't specific information on how to modify the Astro extension to prevent the issue you're experiencing with the <style is:global> tag being moved during code beautification.
However, the Astro extension for VS Code provides syntax highlighting and autocompletions for Astro code (source (https://docs.astro.build/en/tutorial/1-setup/2#open-your-project-in-vs-code)). If the issue is occurring with this extension, it might be due to how the extension is parsing or formatting Astro-specific syntax.
You might want to consider the following steps:
- Check if there are any settings in the Astro extension that control how it formats or beautifies Astro code.
- If the issue persists, consider reporting it to the Astro extension's maintainers. You can do this by creating an issue in the Astro GitHub repository, providing details about the issue and any steps to reproduce it.
Remember, modifying an extension can have unintended side effects and should be done with caution. Always backup your work before making any changes.
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
worn zenith
In case anyone else sees this: It's getting worked on: https://github.com/withastro/prettier-plugin-astro/issues/316 Currently no fix?