Fix: Ensure @import rules are always inserted at the top of the stylesheet

[parvez]

This PR addresses an issue in the createGlobalCssFunction where @import rules might not always be inserted at the top of the stylesheet. According to the CSS specification, all @import rules must appear before any other rules in a stylesheet. Failing to comply with this requirement results in the browser ignoring the @import rules.

Problem:

Previously, the @import rules were being inserted just before the themed.group marker using the following logic:

let importIndex = [].indexOf.call(sheet.sheet.cssRules, sheet.rules.themed.group) - 1;

This logic did not guarantee compliance with the CSS requirement for @import to always be at the top, as it depended on the position of the themed.group.

Reference:

https://developer.mozilla.org/en-US/docs/Web/CSS/@import

Solution:

The importIndex is now explicitly set to 0, ensuring that all @import rules are added to the top of the stylesheet:

let importIndex = 0; // Always insert @import rules at the top

This guarantees that all @import rules comply with the CSS specification, regardless of other rules or markers in the stylesheet.

---

Reason for Change:

• CSS Specification:

  • The CSS standard requires @import rules to be placed at the top of the stylesheet, before any other types of rules (e.g., style declarations, media queries, keyframes).
  • If @import rules appear later in the stylesheet, they are ignored by the browser.

• Practical Implication:

  • Placing @import rules at the top ensures that external stylesheets are loaded and applied correctly, maintaining the intended style order and cascade.