Невозможно установить стиль границы из пользовательского свойства CSS ⇐ CSS

[Anonymous]

У меня есть простое приложение для реагирования
(проект Vite)
app.tsx

Код: Выделить всё

import "./common-styles.css";

export default function App() {
return (


content content


)
}

только с 1 файлом CSS
common-styles.css

Код: Выделить всё

@property --interactive-color {
syntax: "";
inherits: true;
initial-value: green;
}
@property --interactive-text-color {
syntax: "";
inherits: true;
initial-value: white;
}
@property --interactive-border-top-style {
syntax: "";
inherits: true;
initial-value: dotted;
}
@property --interactive-border-top-width {
syntax: "";
inherits: true;
initial-value: 5px;
}
@property --interactive-border-top-color {
syntax: "";
inherits: true;
initial-value: red;
}

.interactive {
background-color: var(--interactive-color);
color: var(--interactive-text-color);

border-top-style: var(--interactive-border-top-style);
border-top-width: var(--interactive-border-top-width);
border-top-color: var(--interactive-border-top-color);

padding-top: var(--interactive-padding-top, 1vw);
padding-bottom: var(--interactive-padding-bottom, 1vw);
padding-right: var(--interactive-padding-right, 3vw);
padding-left: var(--interactive-padding-left, 3vw);
border-top-right-radius: var(--interactive-border-top-right-radius, 5px);
border-top-left-radius: var(--interactive-border-top-left-radius, 5px);
border-bottom-right-radius: var(--interactive-border-bottom-right-radius, 5px);
border-bottom-left-radius: var(--interactive-border-bottom-left-radius, 5px);
}

(нижний, правый и левый реквизиты были удалены, чтобы сократить вопрос, но они ведут себя одинаково)
Поскольку я не переопределял ни один из свойств, я ожидаю, что компонент имеет указанное значение начального значения для всех свойств.

Это так, за исключением стиля границы, который ведет себя так, как будто у него не указано значение.< /p>
Я знаю, что ширина и цвет границы установлены правильно, указав стиль вручную

Код: Выделить всё

border-top-style: solid;

Цветные реквизиты также устанавливаются правильно. p>
Я пробовал:

Код: Выделить всё

syntax: "";

Код: Выделить всё

syntax: "";

Код: Выделить всё

initial-value: "dotted";

Код: Выделить всё

initial-value: dotted;

Код: Выделить всё

syntax: "'none' | 'solid' | 'dotted' | 'dashed'";

Указание резервного значения для ссылки на реквизит:

Код: Выделить всё

border-top-style: var(--interactive-border-top-style, dashed);

принимает это резервное значение.

Подробнее здесь: https://stackoverflow.com/questions/790 ... s-property