In some cases px fallbacks for rem units are stripped during minification

[dotherightthing]

Hi, I've tried to add clean-css into my Grunt build via grunt-contrib-cssmin, but it is failing as follows:

When using rem (root relative ems) it is good practice to provide a px fallback for MSIE8:

div {
    padding-top: 16px; /* MSIE8 */
    padding-top: 1rem; /* modern browsers */
}

• MSIE8 doesn't understand rem units so it ignores the second rule.
• Modern browsers do understand rem units so they ignore the first rule.

With certain properties (eg padding is affected, but font-size is ok), clean-css removes the px fallback during minification. The result is a sub-standard aesthetic in MSIE8.

Here's my Grunt configuration object:

{
    "styles": {
        "options": {
            "keepSpecialComments": 0
        },
        "files": [{
            "expand": true,
            "cwd": "<%= project.build.styles %>/",
            "src": [
                "*.css"
            ],
            "dest": "<%= project.build.styles %>/",
            "ext": ".css"
        }]
    }
}

Thanks,
Dan

[XhmikosR]

@dotherightthing: have you tried specifying the compatibility option?

compatibility: "ie8"

Also, please check your local node_modules and make sure you are using the latest clean-css module (you can remove the whole folder and do npm install again).

[dotherightthing]

Hi @XhmikosR,

I've added the compatibility option thanks, sorry for missing that.

npm list clean-css gives me:

├─┬ [email protected]
│ └── [email protected] 
└─┬ [email protected]
  └─┬ [email protected]
    ├── [email protected] 
    └─┬ [email protected]
      └── [email protected] 

The task is still stripping px rules in IE8.

Thanks,
Dan

[XhmikosR]

Ok, then I guess this is really a bug.

/CC @jakubpawlowicz

[jakubpawlowicz]

Oddly I haven't received a single notification yesterday.

@dotherightthing I think the new, advanced optimiser messes up the merging. Let me take a closer look. In the meantime please use noAdvanced: true option if possible.