Condition to trigger Custom CSS aggregation?

  • Resolved Sparanoid

    (@sparanoid)


    7 years, 4 months ago

    Hi, I just found a weird issue with Jetpack Custom CSS (Additional CSS), when the total content of Custom CSS is relatively small, Autoptimize can aggregate it into the main CSS, but if the content of Custom CSS is large, like 200-300 lines, Autoptimize will leave it unaggregated. Is this by design or just a bug?

    Thanks!

Viewing 4 replies - 16 through 19 (of 19 total)
1 2
  • Plugin Author Optimizing Matters

    (@optimizingmatters)

    7 years, 4 months ago

    If Additional CSS I use is smaller than n length (the exact length is not sure at the moment), WordPress just outputs the CSS inline itself:

    But that’s not WordPress core behavior? Or is it (I can’t seem to trigger it)?

    So actually AO does not support aggregating Additional CSS?

    Not if it’s located in an linked stylesheet that is dynamically generated, no.

    Plugin Author Optimizing Matters

    (@optimizingmatters)

    7 years, 4 months ago

    I don’t use any plugin, I use Customize -> additional CSS as well. That’s my point: I have never seen it output CSS in an linked dynamic stylesheet.

    Thread Starter Sparanoid

    (@sparanoid)

    7 years, 4 months ago

    Ok, I got the root cause of it: Jetpack Custom CSS: https://jetpack.com/support/custom-css/

    After disabling Jetpack completely, Additional CSS generates “static” CSS so AO can work on it. If Jetpack is activated, Additional CSS will generate “dynamic” CSS because Jetpack adds CSS preprocessors support for it that need some dynamic processing for Sass and Less to get the plain CSS that browser can parse.

    After some further investigation, you can disable the Custom CSS feature by Jetpack by using debug mode. It’s hard to find in the latest version of Jetpack.

    I think you can add some notice for users willing to aggregate custom CSS like me.

    And thank you so much for helping me debug this tricky problem, thanks!

    • This reply was modified 7 years, 4 months ago by Sparanoid.
    Plugin Author Optimizing Matters

    (@optimizingmatters)

    7 years, 4 months ago

    wow, that’s a great find! the jetpack page confirms:

    Jetpack will include the custom CSS as an in-line stylesheet inside the document by default. However, if the custom CSS exceeds 2000 characters in length, Jetpack will generate an external stylesheet and link to it.

    Now looking at JetPack’s source-code you might be able to enforce the CSS being inlined with a filter;

    add_filter( 'safecss_embed_style', '__return_true', 11 );

    thanks for having persevered @sparanoid !

    frank

Viewing 4 replies - 16 through 19 (of 19 total)
1 2

The topic ‘Condition to trigger Custom CSS aggregation?’ is closed to new replies.