CSS optimizing removes necessary spaces from calc-function

This workaround actually works, thanks.

Why do you think this is a W3TC issue? For me it clearly comes from Autoptimize inline CSS collection. My original CSS is this:

background-position: calc(100% – 1em) calc(100% + 4em);

And Autoptimize transforms it to this:

background-position:calc(100% – 1em) calc(100%+4em)

Are you running with “also aggregate inline CSS” on or off @m02ph3u5?

Hey there,

inline aggregation is active and my snippet is from inline CSS.

Best Regards

OK, I just tested on my local dev-machine and

<style type="text/css">
justtesting {
    background-position: calc(100% - 1em) calc(100% + 4em);
}
</style>

became:

justtesting{background-position:calc(100% - 1em) calc(100% + 4em)}

which is correct.

The reason why this is related to W3TC (or possibly another CSS optimizing plugin) is that AO will check if a CSS-optimizer is loaded already and it will only load it’s own if that is not the case (to avoid errors due to the same class being re-iniated);

                if (!class_exists('CSSmin')) {
                    @include(AUTOPTIMIZE_PLUGIN_DIR.'classes/external/php/yui-php-cssmin-2.4.8-4_fgo.php');
                }

So what is very likely happening is that in your context CSSmin already exists (as it is loaded by another plugin) and that version of CSSmin is removing the spaces. The version that comes with AO however, does not remove those spaces (cfr. e.g. this commit).

hope this clarifies,
frank

Hi Frank,

thanks for your reply.
Indeed I found W3TC minification checked (although I was sure I disabled it + there was no minification happening before installing AO). So I disabled it and made sure that AO handle HTML+CSS+JS optimization. I purged W3TC and AO caches as well as my local browser cache and removed the *1 “hack”.
Sadly, the same thing is happening.

I cannot give you access to our wp instance, I could only name you the page where it happens.
Under W3TC -> Minify everything’s unchecked ‘cept rewriting URLs.
AO’s version is 2.2.2.

I added a debug output to the above mentioned snippet and it shows that AO’s cssmin is loaded.

if (!class_exists('CSSmin')) {
    var_dump('AO CSSmin LOADED');
    @include(AUTOPTIMIZE_PLUGIN_DIR.'classes/external/php/yui-php-cssmin-2.4.8-4_fgo.php');
}

PS: For you to verify, page is this: https://web2017.softgarden.io/danke/ – the image with the two arms at the top should be placed right but isn’t due to the messed up bg position.

pretty weird; when adding

.m02ph3u5 {
        background-position: calc(100% - 1em) calc(100% + 4em);
    }

in appearance -> customize -> additional CSS I get:

.m02ph3u5{background-position:calc(100% - 1em) calc(100% + 4em)}

as you can see at the end of https://static-blog.futtta.be/wp-content/cache/autoptimize/css/autoptimize_f93ddf3ba0e579e1ce4ec1e817d69d62.css.

When trying to add your inline CSS in the same customizer-window, I got an ugly error about unclosed comments;

There are 20 unclosed code comments. Close each comment with */.

So no idea if this is related, but;
* the spaces are kept on my blog
* I can’t add your css due to comment-errors

So next step; why don’t you try adding the following css to appearance -> customize -> additional CSS;

    .us-page-section.thank-you-message .us-inset {
        background-repeat: no-repeat;
        background-position: calc(100% - 1em) calc(100% + 4em) !important;
    }

Happy bug-hunting! ??

Hey, thanks for the reply.

I wonder why there are any comments at all. Shouldn’t they get filtered out?

/*///////////////// More Infos //////////////////////////////*/ seems to become /*/*/

I’ma remove those comments and see if that changes anything. ??

Btw, how do you handle @charset "UTF-8"; stuff? W3C validator says it’s only allowed at the top. But when merging separate sheets it may happen that it ends up somewhere inbetween.

• This reply was modified 7 years, 7 months ago by m02ph3u5.

to be clear; I’m not sure the comments are related to your problem, I just noticed wordpress’ ‘custom css’ functionality complained about them. have you tried adding the CSS from my previous answer to your won ‘custom css’-field?

Hi Frank,

I added the rule to the “additional CSS” and it’s fine. No spaces stripped.
What does this tell us?

well it tells us that:
* AO does indeed not strip out those spaces by default
* and that either the full inline CSS is confusing for the CSS minification tool AO or that something else is messing with that CSS somehow?

Is there some CLI for debugging? I’d like to nail down where the stripping happens.
I couldn’t find any tests in the repo – how do you test AO / how can I debug AO (efficiently)? It’d be cumbersome to fiddle with output buffering.

all is done through ob_*, no easy way to test i’m afraid.

what I would do, if I were you, is playing with your inline CSS vs “custom css” moving more code from inline to custom to try to confirm if / which CSS in your current “inline css” is making the minifier choke?

Alright. Thanks for your support. I’ll have to go with the workaround for now.