Use variable only from last pseudo-element

Nobody has claimed this yet.

Input

```css
.bar {
--color: pink;
color: var(--color);
}

.bar:active {
--color: blue;
}

.bar:hover {
--color: red;
}

.bar:focus {
--color: green;
}
```

Expected

```css
.bar {
color: pink;
}

.bar:active {
color: blue;
}

.bar:hover {
color: red;
}

.bar:focus {
color: green;
}
```

Will be transformed to (Actual)

😞

```css
.bar {
color: pink;
}

.bar:focus {
color: green;
}

.bar:hover {
color: green;
}

.bar:active {
color: green;
}
```

Start with the CSS reproduction in the issue and trace the plugin's custom-property transformation behavior. Compare the generated output with the expected output for :active, :hover, and :focus, then verify that each state retains its own variable value and add regression coverage for the example.

Written by the indexing model from the issue text.