Cssnano: mergeRules incorrectly merges placeholder selectors

[maxlapides]

For example, consider this CSS file:

input:-ms-input-placeholder {
  font-size: 14px;
}
input::-ms-input-placeholder {
  font-size: 14px;
}

(Note: different numbers of colons)

If you run cssnano against this file with the default preset, you get:

input:-ms-input-placeholder,input::-ms-input-placeholder{font-size:14px}

Unfortunately, this won't work with Internet Explorer. These rules cannot be safely merged. When I disable the mergeRules optimization, this issue is resolved.

This issue may be related to https://github.com/ben-eb/cssnano/issues/297

[chriseppstein]

@maxlapides That's the same selector twice, did you mean to use two different vendor prefixes?

[maxlapides]

@chriseppstein The first selector is a pseudo-class (one colon), the second selector is a pseudo-element (two colons).

The reason this issue cropped up for me is I'm running Autoprefixer before cssnano in my webpack workflow. For example, if you go to https://autoprefixer.github.io/ and, with the default browsers filter, enter:

input::placeholder {
  color: pink;
}

Autoprefixer will return:

input::-webkit-input-placeholder {
  color: pink;
}
input::-moz-placeholder {
  color: pink;
}
input:-ms-input-placeholder {
  color: pink;
}
input::-ms-input-placeholder {
  color: pink;
}
input::placeholder {
  color: pink;
}

And then cssnano combines the two ms-input-placeholder selectors, which unfortunately breaks IE support.

[chriseppstein]

@maxlapides ah, I missed that thanks for clarifying.

When I disable the mergeRules optimization

TBH, this should be the default for the current implementation.

[benstaker]

Any update on this? I've also had to disable the mergeRules optimisation. It would be great if we could configure this to ignore specified selectors.

[alexander-akait]

@maxlapides which IE versions don't work?

[maxlapides]

@evilebottnawi I believe it's an issue with IE 10 and IE 11

[alexander-akait]

@maxlapides thanks!