Incorrect pseudo-selector output

[siilike]

Input:

: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:

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

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

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

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

Actual:

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

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

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

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

[DevT0ny]

same applies for pseduo-class input :

.classname:focus{
  --bg-opacity: 1;
  background-color: rgba(183, 148, 244, var(--bg-opacity));
}

output:

.classname:focus{
  background-color: undefined;
}
.classname:focus:focus {
  background-color: rgba(183, 148, 244, 1);
}

expected :

.classname:focus {
  background-color: rgba(183, 148, 244, 1);
}

[vithar]

I have the same problem in 0.18.0 version.

Input:

.a::before {
    --color-l-text: red;

    color: var(--color-l-text);
}

Output:

.a::before {
    --color-l-text: red;

    color: undefined;

    color: var(--color-l-text);
}
.a::before::before {

    color: red;

    color: var(--color-l-text);
}

Expected

.a::before {
    --color-l-text: red;

    color: red;

    color: var(--color-l-text);
}