@import statements (such as those used for google fonts aren't positioned at the top of the css)

[akaspick]

Expected behavior

When using Sprockets 3.x, any @import statements used for @import'ing other css would be placed at the top of the compiled css. This is required according to the spec: https://developer.mozilla.org/en-US/docs/Web/CSS/@import

An @import rule must be defined at the top of stylesheet, before any other at-rule (except @charset and @layer) and style declaration, else it will be ignored.

Actual behavior

Using Sprockets 4, the @import statements are left in the location they are found in the file compilation order, so they can end up anywhere in the final compiled CSS.

System configuration

• Sprockets version 4.20
• Ruby version 3.2.1

[akaspick]

So my only possible solution so far is to include the @import statement in my app/assets/stylesheets/application.css after all the usual comments and putting the require_self call before any other require statements.

ie.

 /*
 *= require_self
 *= require_tree ./site
 */

@import url(//fonts.googleapis.com/css?family=Open+Sans+Condensed:300,700);

I used to be able to put the @import in any of the scss files in ./site and the resulting .css would put the @import at the beginning of the compiled css.