Add support for @starting-style rules

.changeset/tender-beans-cheat.md

@@ -0,0 +1,5 @@
+---
+'@vanilla-extract/css': minor
+---
+
+Add support for `@starting-style` rules

fixtures/features/src/features.css.ts

@@ -60,3 +60,11 @@ export const styleVariantsCompositionInSelector = styleVariants({
 globalStyle(`body ${styleVariantsCompositionInSelector.variant}`, {
   fontSize: '24px',
 });
+
+// Style with starting-style
+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"
 }

packages/css/src/transformCss.test.ts

@@ -2500,6 +2500,172 @@ describe('transformCss', () => {
       }
     `);
   });
+
+  it('should handle @starting-style declaration', () => {
+    expect(
+      transformCss({
+        composedClassLists: [],
+        localClassNames: ['testClass'],
+        cssObjs: [
+          {
+            type: 'local',
+            selector: 'testClass',
+            rule: {
+              opacity: 1,
+              top: '100%',
+              '@starting-style': {
+                opacity: 0,
+                top: '50%',
+              },
+            },
+          },
+        ],
+      }).join('\n'),
+    ).toMatchInlineSnapshot(`
+      .testClass {
+        opacity: 1;
+        top: 100%;
+        @starting-style {
+          opacity: 0;
+          top: 50%;
+        }
+      }
+    `);
+  });
+
+  it('should handle @starting-style inside media queries', () => {
+    expect(
+      transformCss({
+        composedClassLists: [],
+        localClassNames: ['testClass'],
+        cssObjs: [
+          {
+            type: 'local',
+            selector: 'testClass',
+            rule: {
+              display: 'flex',
+              '@media': {
+                'screen and (min-width: 700px)': {
+                  top: '0',
+                  '@starting-style': {
+                    top: '100%',
+                  },
+                },
+              },
+            },
+          },
+        ],
+      }).join('\n'),
+    ).toMatchInlineSnapshot(`
+      .testClass {
+        display: flex;
+      }
+      @media screen and (min-width: 700px) {
+        .testClass {
+          top: 0;
+          @starting-style {
+            top: 100%;
+          }
+        }
+      }
+    `);
+  });
+
+  it('should handle @starting-style inside container queries', () => {
+    expect(
+      transformCss({
+        composedClassLists: [],
+        localClassNames: ['testClass'],
+        cssObjs: [
+          {
+            type: 'local',
+            selector: 'testClass',
+            rule: {
+              '@container': {
+                'sidebar (min-width: 700px)': {
+                  top: '0',
+                  '@starting-style': {
+                    top: '100%',
+                  },
+                },
+              },
+            },
+          },
+        ],
+      }).join('\n'),
+    ).toMatchInlineSnapshot(`
+      @container sidebar (min-width: 700px) {
+        .testClass {
+          top: 0;
+          @starting-style {
+            top: 100%;
+          }
+        }
+      }
+    `);
+  });
+
+  it('should handle @starting-style inside a layer', () => {
+    expect(
+      transformCss({
+        composedClassLists: [],
+        localClassNames: ['testClass'],
+        cssObjs: [
+          {
+            type: 'local',
+            selector: 'testClass',
+            rule: {
+              '@layer': {
+                'mock-layer': {
+                  top: '0',
+                  '@starting-style': {
+                    top: '100%',
+                  },
+                },
+              },
+            },
+          },
+        ],
+      }).join('\n'),
+    ).toMatchInlineSnapshot(`
+      @layer mock-layer;
+      @layer mock-layer {
+        .testClass {
+          top: 0;
+          @starting-style {
+            top: 100%;
+          }
+        }
+      }
+    `);
+  });
+
+  it('should throw an error when a at-rule is use inside @starting-style scope', () => {
+    expect(() =>
+      transformCss({
+        composedClassLists: [],
+        localClassNames: ['testClass'],
+        cssObjs: [
+          {
+            type: 'local',
+            selector: 'testClass',
+            rule: {
+              '@starting-style': {
+                // @ts-expect-error - Using a media query inside @starting-style for testing purposes
+                '@media': {
+                  'screen and (min-width: 700px)': {
+                    display: 'grid',
+                  },
+                },
+              },
+            },
+          },
+        ],
+      }),
+    ).toThrowErrorMatchingInlineSnapshot(
+      'Nested at-rules (e.g. "@media") are not allowed inside @starting-style.',
+    );
+  });
 });
 
 endFileScope();

packages/css/src/transformCss.ts

@@ -188,6 +188,7 @@ class Stylesheet {
       this.transformMedia(root, root.rule['@media']);
       this.transformSupports(root, root.rule['@supports']);
       this.transformContainer(root, root.rule['@container']);
+      this.transformStartingStyle(root, root.rule['@starting-style']);
 
       this.transformSimplePseudos(root, root.rule);
       this.transformSelectors(root, root.rule);
@@ -408,6 +409,11 @@ class Stylesheet {
         selectorRule['@container'],
         conditions,
       );
+      this.transformStartingStyle(
+        root,
+        selectorRule!['@starting-style'],
+        conditions,
+      );
     });
   }
 
@@ -445,6 +451,11 @@ class Stylesheet {
         this.transformLayer(root, mediaRule!['@layer'], conditions);
         this.transformSupports(root, mediaRule!['@supports'], conditions);
         this.transformContainer(root, mediaRule!['@container'], conditions);
+        this.transformStartingStyle(
+          root,
+          mediaRule!['@starting-style'],
+          conditions,
+        );
       }
     }
   }
@@ -481,6 +492,11 @@ class Stylesheet {
         this.transformLayer(root, containerRule!['@layer'], conditions);
         this.transformSupports(root, containerRule!['@supports'], conditions);
         this.transformMedia(root, containerRule!['@media'], conditions);
+        this.transformStartingStyle(
+          root,
+          containerRule!['@starting-style'],
+          conditions,
+        );
       });
     }
   }
@@ -516,6 +532,11 @@ class Stylesheet {
         this.transformMedia(root, layerRule!['@media'], conditions);
         this.transformSupports(root, layerRule!['@supports'], conditions);
         this.transformContainer(root, layerRule!['@container'], conditions);
+        this.transformStartingStyle(
+          root,
+          layerRule!['@starting-style'],
+          conditions,
+        );
       });
     }
   }
@@ -550,6 +571,11 @@ class Stylesheet {
         this.transformLayer(root, supportsRule!['@layer'], conditions);
         this.transformMedia(root, supportsRule!['@media'], conditions);
         this.transformContainer(root, supportsRule!['@container'], conditions);
+        this.transformStartingStyle(
+          root,
+          supportsRule!['@starting-style'],
+          conditions,
+        );
       });
     }
   }
@@ -589,6 +615,42 @@ class Stylesheet {
     }
   }
 
+  transformStartingStyle(
+    root: CSSStyleBlock | CSSSelectorBlock,
+    rules: WithQueries<StyleWithSelectors>['@starting-style'],
+    parentConditions: Array<string> = [],
+  ) {
+    if (rules) {
+      // Check if there are any nested at-rule keys inside this block.
+      // The presence of any key starting with '@' indicates nested queries,
+      // which are not allowed for @starting-style.
+      const nestedAtRuleKey = Object.keys(rules).find((key) =>
+        key.startsWith('@'),
+      );
+      if (nestedAtRuleKey) {
+        throw new Error(
+          `Nested at-rules (e.g. "${nestedAtRuleKey}") are not allowed inside @starting-style.`,
+        );
+      }
+
+      const conditions = [...parentConditions, '@starting-style'];
+
+      this.addConditionalRule(
+        {
+          selector: root.selector,
+          rule: omit(rules, specialKeys),
+        },
+        conditions,
+      );
+
+      // Process any simple pseudos or selectors associated with this style.
+      if (root.type === 'local') {
+        this.transformSimplePseudos(root, rules, conditions);
+        this.transformSelectors(root, rules, conditions);
+      }
+    }
+  }
+
   toCss() {
     const css: Array<string> = [];
 

packages/css/src/types.ts

@@ -52,12 +52,16 @@ export type MediaQueries<StyleType> = Query<'@media', StyleType>;
 export type FeatureQueries<StyleType> = Query<'@supports', StyleType>;
 export type ContainerQueries<StyleType> = Query<'@container', StyleType>;
 export type Layers<StyleType> = Query<'@layer', StyleType>;
+export type StartingStyleQueries<StyleType> = {
+  '@starting-style'?: Omit<StyleType, '@starting-style'>;
+};
 
 interface AllQueries<StyleType>
   extends MediaQueries<StyleType & AllQueries<StyleType>>,
     FeatureQueries<StyleType & AllQueries<StyleType>>,
     ContainerQueries<StyleType & AllQueries<StyleType>>,
-    Layers<StyleType & AllQueries<StyleType>> {}
+    Layers<StyleType & AllQueries<StyleType>>,
+    StartingStyleQueries<StyleType> {}
 
 export type WithQueries<StyleType> = StyleType & AllQueries<StyleType>;
 

packages/parcel-transformer/package.json

@@ -19,7 +19,7 @@
   "author": "mattcompiles",
   "license": "MIT",
   "dependencies": {
-    "@parcel/plugin": "^2.7.0",
+    "@parcel/plugin": "^2.15.0",
     "@vanilla-extract/integration": "workspace:^"
   }
 }