Reverse order of styles & scripts

[TheOtterlord]

Changes

• Fixes Astro reverses the order of <style> tags in a page/component astro#12264 (See Astro reverses the order of <style> tags in a page/component astro#12264 (comment) for more info)

For example, with component like the follow:

<style>
  body {
    background-color: red;
  }
</style>
<style>
  body {
    background-color: yellow;
  }
</style>

The current compiler output would render red last, even though yellow was the last style-tag defined.

<style>
  body {
    background-color: yellow;
  }
  body {
    background-color: red;
  }
</style>

Enabling the experimentalScriptOrder flag will respect the order style & script tags are defined.

<style>
  body {
    background-color: red;
  }
  body {
    background-color: yellow;
  }
</style>

Testing

• Updated existing styles test
• Added test for scripts order

Docs

• Will require a section for the new experimental flag once implemented in withastro/astro.

[changeset-bot]

🦋 Changeset detected

Latest commit: 188fe2e

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package

Name	Type
@astrojs/compiler	Minor

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[MoustaphaDev]

Changes look good to me, I just have a suggestion on a test

[MoustaphaDev]

Not sure why the go lint job is failing, but for the js one, running pnpm check:writeshould be able to fix it.

[TheOtterlord]

It's also failing on main, so probably worth a separate PR

[TheOtterlord]

ohh, only lint fails on main. I'll fix the js one now

[MoustaphaDev]

Anything needed to get this merged?

[TheOtterlord]

Nope. I think this can merge!

[MoustaphaDev]

Just realized applying this as a patch might break users' sites that rely on the current behavior. Should we maybe treat this as a major change or wait for the next major version? 🤔

[ematipico]

I would also argue that the changeset is very cryptic and doesn't explain the fix well. What was the bug? How are styles and scripts ordered after the fix?

[denisavitski]

is there a chance that this will be merged soon? the issue with styles arises not only when there are two <style> tags in a component but also when you use the component in other components, and these components, in turn, are used on different pages. it seems to me that this problem has been around for a very long time, and I constantly have to check after the build to ensure everything is displayed as intended and adjust the specificity of the selectors.