Incorrect pseudo-selector output

Input:
```css
:root
{
--XXX: 15px;
}

#test li
{
font-size: var(--XXX);
}

#test:not(.class)
{
--XXX: 8px;
}

#test2 li
{
font-size: var(--XXX);
}

#test2:hover
{
--XXX: 8px;
}
```

Expected:
```css
#test li
{
font-size: 15px;
}

#test:not(.class) li
{
font-size: 8px;
}

#test2 li
{
font-size: 15px;
}

#test2:hover li
{
font-size: 8px;
}
```

Actual:
```css
#test li
{
font-size: 15px;
}

#test li:not(.class)
{
font-size: 8px;
}

#test2 li
{
font-size: 15px;
}

#test2 li:hover
{
font-size: 8px;
}
```

Start by tracing how the plugin handles pseudo-selectors and CSS custom-property scope. Add a regression case using the issue's input CSS, then verify the output places :not(.class) and :hover on the parent selector before the descendant selector, as shown in the expected output.

Written by the indexing model from the issue text.