Add support for @starting-style rules (#1566)

Co-authored-by: Adam Skoufis <[email protected]>
Co-authored-by: Adam Skoufis <[email protected]>
Co-authored-by: Adam Skoufis <[email protected]>

Author: lfantone

.changeset/tender-beans-cheat.md

@@ -0,0 +1,17 @@
+---
+'@vanilla-extract/css': minor
+---
+
+`style`: Add support for `@starting-style` rules
+
+**EXAMPLE USAGE**:
+
+```ts
+import { style } from '@vanilla-extact/css';
+export const styleWithStartingStyle = style({
+  backgroundColor: 'black',
+  '@starting-style': {
+    backgroundColor: 'white',
+  },
+});
+``

fixtures/features/src/features.css.ts

@@ -60,3 +60,10 @@ export const styleVariantsCompositionInSelector = styleVariants({
 globalStyle(`body ${styleVariantsCompositionInSelector.variant}`, {
   fontSize: '24px',
 });
+
+export const styleWithStartingStyle = style({
+  backgroundColor: 'black',
+  '@starting-style': {
+    backgroundColor: 'white',
+  },
+});

fixtures/features/src/html.ts

@@ -9,6 +9,7 @@ export default `
     <div id="${testNodes.compositionOnly}" class="${styles.compositionOnly}">Composition only</div>
     <div id="${testNodes.styleCompositionInSelector}" class="${styles.styleCompositionInSelector}">Style composition in selector</div>
     <div id="${testNodes.styleVariantsCompositionInSelector}" class="${styles.styleVariantsCompositionInSelector.variant}">Style variants composition in selector</div>
+    <div id="${testNodes.styleWithStartingStyle}" class="${styles.styleWithStartingStyle}">Style with @starting-style rule</div>
   `;
 
 // @ts-expect-error Vite env not defined

fixtures/features/test-nodes.json

@@ -5,5 +5,6 @@
   "styleVariantsWithMappedComposition": "styleVariantsWithMappedComposition",
   "compositionOnly": "compositionOnly",
   "styleCompositionInSelector": "styleCompositionInSelector",
-  "styleVariantsCompositionInSelector": "styleVariantsCompositionInSelector"
+  "styleVariantsCompositionInSelector": "styleVariantsCompositionInSelector",
+  "styleWithStartingStyle": "styleWithStartingStyle"
 }