@property not accept length in em unit

NOTE: The MRE might not work in some browsers due to the poor support table.

@property --width1 {
  syntax: '<length>';
  inherits: false;
  initial-value: 20em;
}

@property --width2 {
  syntax: '<length>';
  inherits: false;
  initial-value: 200px;
}

div {
  margin: 30px;
  height: 30px;
  background: black;
  color: white;
  text-align: center;
}

#div1 { width: var(--width1); }
#div2 { width: 20em;          }
#div3 { width: var(--width2); }
#div4 { width: 200px;         }

<div id="div1">var(--width1) = 20em</div>
<div id="div2">20em</div>
<div id="div3">var(--width2) = 200px</div>
<div id="div4">200px</div>

In px, width of div3 is same as div4 as expected.

In em, div2's width was as expected. But in div1, it is almost as if the var(--width1) is ignored and the width is set to auto. Any way for the var(--width1) to work as expected?

From the specification:

The initial-value must be computationally independent.

and

A property value is computationally independent if it can be converted into a computed value using only the value of the property on the element, and "global" information that cannot be changed by CSS.

In your case, em depend on the font-size value so it's not computationally independent