New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

mergeRules incorrectly merges placeholder selectors #419

Closed
maxlapides opened this Issue Oct 30, 2017 · 7 comments

Comments

Projects
None yet
5 participants
@maxlapides

maxlapides commented Oct 30, 2017

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 #297

@chriseppstein

This comment has been minimized.

Collaborator

chriseppstein commented Nov 14, 2017

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

@maxlapides

This comment has been minimized.

maxlapides commented Nov 14, 2017

@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

This comment has been minimized.

Collaborator

chriseppstein commented Nov 15, 2017

@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

This comment has been minimized.

benstaker commented Feb 26, 2018

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.

@andyjansson andyjansson added the bug label Apr 19, 2018

@evilebottnawi

This comment has been minimized.

Member

evilebottnawi commented Apr 19, 2018

@maxlapides which IE versions don't work?

@maxlapides

This comment has been minimized.

maxlapides commented Apr 19, 2018

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

@evilebottnawi

This comment has been minimized.

Member

evilebottnawi commented Apr 20, 2018

@maxlapides thanks!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment