mergeRules should not merge unknown pseudo selectors

[fracmak]

It appears that if a browser (tested in Chrome 69, Firefox 60, Safari 12, Edge 16) does not recognize a pseudo selector, it drops the entire selector, including any combined selectors.

Example:

https://codepen.io/anon/pen/ZqxNEq

[saulhardman]

I've recently come across this issue myself and I'm wondering if it's currently possible to disable optimisations on a line-by-line basis? E.g. like ESLint's // eslint-disable-line comment format.

[alexander-akait]

@saulhardman no, it is hard to implement using comments, but PR welcome

[saulhardman]

@evilebottnawi I figured as much, thanks for your response 👍

[ben-eb]

@evilebottnawi We have a system for handling mergeable pseudo elements here:

https://github.com/cssnano/cssnano/blob/master/packages/postcss-merge-rules/src/lib/ensureCompatibility.js#L13

Perhaps this should be changed; currently this list prevents a merge for known pseudo selectors, but allows unknown ones through. If we only allow a merge on known pseudo selectors, we will have less bug reports on broken behaviour and hopefully more reports of acceptable pseudo selector merging.

In any case this is a matter of adding ':focus-visible': 'css-focus-visible' to that list.

[alexander-akait]

Good idea, can you take care about this?

[ben-eb]

@evilebottnawi Probably easier if we fix the immediate bug and then can look into changing behaviour later?

[alexander-akait]

Sounds good, need open issue about this or update currently

[felixfbecker]

:focus-visible is now on the list (so rules using it will be merged), but not supported by any browsers other than Firefox, meaning CSSNano currently breaks Chrome when e.g. using a focus-visible polyfill that creates duplicate rules for :focus-visible and a polyfilled .focus-visible class. Is there a way to instruct CSSNano to not consider :focus-visible "supported"?

[anikethsaha]

are you using the nightly ?

cause this has been fixed in #882 but not released yet.

[anikethsaha]

:focus-visible is now on the list (so rules using it will be merged)

no it wont (in the master). ref this https://github.com/cssnano/cssnano/blob/a4b38cbfaf/packages/postcss-merge-rules/src/__tests__/index.js#L790

[felixfbecker]

Ah, I was confused, I understand the issue now (before all unknown selectors were merged, and :focus-visible was unknown, but now both unknown selectors are no longer merged and :focus-visible is known now, but will still not be merged depending on CanIUse/browserslist data). Thanks.
Is there an ETA for the release?

[anikethsaha]

once #954 is done.

In the meantime use cssnano@nightly. that is up to date with the master and pretty stable.