Bug: CSS parameters using variables are sometimes ignored

[calebjacob]

Create the following component in the sandbox:

import s from './styles.module.css';

function MyComponent() {
  return (
    <div className={s.wrapper}>
      Hello
    </div>
  );
}

export default MyComponent as BWEComponent;

Then add the following CSS:

.wrapper {
  border: 1px solid var(--color-danger);
}

You'll see that a red border appears around the entire div - this is working as expected so far.

Now update your CSS to this:

.wrapper {
  border: 1px solid var(--color-danger);
  border-top: 1px solid green;
}

The expected behavior would be that a red border is on the left, bottom, and right with a green border on top. However, the red border totally disappears and we only have a green border on top. If you inspect the CSS in the dev tools, you'll see the border parameter is totally missing now. This is super weird and unexpected.

To make things weirder, update your CSS to this:

.wrapper {
  border: 1px solid red;
  border-top: 1px solid green;
}

Now everything works as expected since we're not using a var(--x) value in the border parameter.