CSS Order Changed for @import Statements

  • Resolved KratosGemini

    (@kratosgemini)


    2 years, 9 months ago

    First, I love Autoptimize. But I have run into a snag recently.

    I’m using @import statements in my theme style.css to include other CSS files in the theme directory (for organization). I have “Aggregate CSS-files” and “Also aggregate inline CSS” checked. My understanding is that the order of the CSS is intended to be maintained when aggregated. However, I’m seeing that the CSS from the @import statements is at the very top of the aggregated file. Oddly enough, the rest of the style.css file is in the place I would expect (after the parent theme CSS). I would expect the @import CSS to be just above the theme style.css since it is imported at the top of the theme style.css. But it is far above everything else instead (including the parent theme CSS).

    Here’s a visual of the order without Autoptimize:
    * parent_theme.css
    * style.css (contains @import statements)

    Here’s a visual of the order with Autoptimize (all aggregated into one file):
    * CSS from @import statements
    * parent_theme.css
    * style.css (just the rest of the file, not the @imports)

    I’ve only noticed this change in order to be a problem recently, but it’s possible that it was working before because of a random fluke.

    Is this working as intended? It would be nice to be able to keep the order of the @import statements during aggregation.

Viewing 8 replies - 1 through 8 (of 8 total)
  • Plugin Author Optimizing Matters

    (@optimizingmatters)

    Imports should only be at the top of the aggregated CSS if AO was not able to get the contents of the file (as imported rules must precede all other types of rules), is that the case in your setup kratosgemini ?

    Thread Starter KratosGemini

    (@kratosgemini)

    If I understand what you are saying… No, that is not the case here. The imported files are included inline in the aggregated file. So the aggregated file has just straight CSS, no import statements. But where the CSS is located is acting as if it needs to be at the top, as you say.

    Plugin Author Optimizing Matters

    (@optimizingmatters)

    that is … unexpected. can you share the URL so I can have a look?

    Thread Starter KratosGemini

    (@kratosgemini)

    I set up a test site with minimal plugins installed to make sure it isn’t something specific to my setup. I’m using GeneratePress with a child theme and a similar CSS import setup.

    Page without AO enabled

    Page with AO enabled

    You will see that the page with AO has the default h1 font-size. The page without AO has a smaller h1 font-size from being overridden with child theme CSS. To make it easy to tell where the “inline” style.css falls compared to the imported CSS, I added a CSS rule for .theme-style-css-inline to the child’s style.css.

    This test site will be up for 7 days, but I can remake it if needed. I can send you login credentials to the test site if needed.

    Thanks!

    Plugin Author Optimizing Matters

    (@optimizingmatters)

    I’ve been able to reproduce locally, I’ll investigate on my own machine (easier to add debug output ?? )

    Plugin Author Optimizing Matters

    (@optimizingmatters)

    OK, I just committed what *think* is a fix, can you download the beta version from Github and install that instead of 2.9.5.1 to test?

    Thread Starter KratosGemini

    (@kratosgemini)

    I installed the beta on the test site, and it did fix the issue. Just for good measure, I added another import file to see if the order is preserved between the two imports. It is!

    Thanks for the quick response. I look forward to the production release.

    Plugin Author Optimizing Matters

    (@optimizingmatters)

    great, thanks for the feedback! ??

Viewing 8 replies - 1 through 8 (of 8 total)
  • The topic ‘CSS Order Changed for @import Statements’ is closed to new replies.