Improper handling of combination of pseudo elements and pseudo classes

[Wiktor102]

Problem

There are 2 related issues:

1. Pseudoclasses don't work properly on pseudo-elements (ex. .element::after:hover).
2. No support for "direct" pseudo-elements with pseudo-classes. Only pseudo-elements that have a "parent" are currently supported (ex. ::before,::after).

Identified cause

Regardless of the intent, all pseudo-elements are moved to the end of the composed selector:

webpack-scoped-css/src/cssScopeLoader.js

Line 163 in a402641

[pseudoElement] = selector.children.splice(pseudoElementPos, 1);

Moreover, pseudo-classes attached to them are left in their old position. This relates to the above issues in the following way:

1. Selectors like .myParent .myChild::after:hover get computed as .myParent[scope=scope1] .myChild:hover:not(*scope magic✨*)::after. Notice the place of the :hover.
2. Selectors like .myParent ::picker(select):popover-open get computed as .myParent :popover-open:not(*scope magic✨*)::picker(select).