Support @property #41417
Description
Describe the new feature:
https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/At-rules/@property
The two big things this somewhat minor addition brings over "regular" CSS vars are inherits (which can be set to false – also, uhhhhh, shouldn't it be called "cascades"? They're not called Inheriting Style Sheets…) and initial-value, which is an alternative to initially setting it on ::root or html that is quite useful when it doesn't casc– inherit.
syntax is mainly used for animations and transitions (e.g. you can animate a variable independent of it being assigned to a property, if it has a syntax of <angle> or another animatable datatype).
Test case:
<!doctype html>
<div class="A">AAA<div>BBB</div></div>
<style>
.A{
border-color:red;
border-style: var(--tw-border-style);
}
@property --tw-border-style {
initial-value: solid;
inherits: false;
syntax: '*';
}
</style>