disappearing border width when using CSS variables

[jlowcs]

Input:

.foobar1a {
    border: solid red 1px;
}
.foobar1b {
    border: 1px green solid;
}
.foobar2a {
    border: solid var(--test1) 1px;
}
.foobar2b {
    border: 1px var(--test1) solid;
}
.foobar3 {
    border: 1px solid var(--test1);
}

Output (with cleancss testfile.css -b):

.foobar1a{border:1px solid red}
.foobar1b{border:1px solid green}
.foobar2a{border:var(--test1) solid}
.foobar2b{border:1px var(--test1) solid}
.foobar3{border:1px solid var(--test1)}

On .foobar2a, the border width has disappeared. Probably a parsing issue.

Work around is to put the variable at the end (see .foobar3).

[jakubpawlowicz]

It's the way break-up.js tries to determine border components, which is tricky when it comes to variables. I wonder if we should try hard to match or just mark such properties as unoptimizable.

[jakubpawlowicz]

Let's skip optimizing such properties for now. In theory one could optimize cases where all 3 border values are given and one of them is a variable, but it's an additional complexity probably not worth the hassle.

[jakubpawlowicz]

Due in 4.0.