Skip to content

🐛 BUG: <script> & <style> issues in astro@next--compiler #1679

@jonathantneal

Description

@jonathantneal

What package manager are you using?

npm

What operating system are you using?

Mac

Describe the Bug

<script hoist> renders as [object Object]

input.astro: <script hoist>console.log(globalThis)</script>.
output.html: [object Object] placed before the closing </head>.

empty <script> throws Astro

input.astro: <script hoist></script>.
output.html: Status 500, panic: runtime error: nil pointer dereference at Go._resume.

empty <style></style> throws Astro

👍 working:
input.astro: <style global define:vars={{ color: 'Gainsboro' }} />.
output.html: <style>:root { --color: Gainsboro }</style> hoisted.

👎 not working:
input.astro: <style global define:vars={{ color: 'Gainsboro' }}></style>.
output.html: Status 500, panic: runtime error: nil pointer dereference at Go._resume.

second <style> causes the the first <style> not to be processed

input.astro: <style>:global(test-1) {}</style><style>:global(test-2) {}</style>.
result.html: <style>:global(test-2) {}</style><style>test-1{}</style>.

self-closing <style/> removes any <style> or <style /> afterward

input.astro: <style /><style>test-1{}</style>.
result.html: <style></style> and all later <style> are removed.

global attribute on <style> breaks in a spread

👍 working:
input.astro: <style global>p {}</style>.
output.html: <style>p {}</style>.

input.astro: <style global={true}>p {}</style>.
output.html: <style>p {}</style>.

input.astro: <style global={false}>p {}</style>.
output.html: <style>p.astro-UJGM3ZEU{}</style>.

👎 not working:
input.astro: <style global={1}>p {}</style>.
output.html: <style>p.astro-UJGM3ZEU{}</style>.

input.astro: <style {...{ global: true }}>p {}</style>.
output.html: <style>p.astro-UJGM3ZEU{}</style>.

braced <script /> or <style /> is not closed

input.astro: {`<script />`} or {`<style />`}.
output.html: literally <script /> or <style />.

hoist attribute is accepted but ignored on <style>

input.astro: <style hoist happy="joyful" /> or <style happy="joyful" />.
output.html: <style happy="joyful"></style>, both hoisted & without the hoist attribute.

Steps to Reproduce

  1. npm init astro using template minimal.
  2. use the aforementioned code.
  3. Error! One of the aforementioned issues.

Link to Minimal Reproducible Example (Optional)

No response

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions