Add support for CSS anchor positioning rules types

Author: lfantone

.changeset/chilled-lizards-count.md

@@ -0,0 +1,5 @@
+---
+'@vanilla-extract/css': minor
+---
+
+Add support for `CSS anchor positioning` rules types

packages/css/src/types.ts

@@ -1,5 +1,5 @@
 import type { CSSVarFunction, MapLeafNodes } from '@vanilla-extract/private';
-import type { AtRule, Properties } from 'csstype';
+import type { AtRule, Properties, Globals } from 'csstype';
 
 import type { SimplePseudos } from './simplePseudos';
 
@@ -16,8 +16,43 @@ interface ContainerProperties {
   containerName?: string;
 }
 
+interface AnchorProperties {
+  anchorName?: 'none' | `--${string}` | Globals | (string & {});
+  positionAnchor?: 'auto' | `--${string}` | Globals;
+  positionArea?:
+    | 'none'
+    | 'all'
+    | 'bottom'
+    | 'center'
+    | 'end'
+    | 'left'
+    | 'right'
+    | 'self-end'
+    | 'self-start'
+    | 'start'
+    | 'top'
+    | 'x-end'
+    | 'x-start'
+    | 'y-end'
+    | 'y-start'
+    | Globals
+    | (string & {});
+  positionTryFallbacks?: 'none' | Globals | (string & {});
+  positionTry?: 'none' | Globals | (string & {});
+  positionTryOrder?:
+    | 'normal'
+    | 'most-height'
+    | 'most-width'
+    | 'most-block-sise'
+    | 'most-inline-size'
+    | Globals
+    | (string & {});
+  positionVisibility?: 'always' | 'anchors-visible' | 'no-overflow' | Globals;
+}
+
 type CSSTypeProperties = Properties<number | (string & {})> &
-  ContainerProperties;
+  ContainerProperties &
+  AnchorProperties;
 
 export type CSSProperties = {
   [Property in keyof CSSTypeProperties]:
@@ -52,12 +87,18 @@ 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 PositionTryQueries<StyleType> = Query<'@position-try', 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>>,
+    PositionTryQueries<StyleType & AllQueries<StyleType>>,
+    StartingStyleQueries<StyleType> {}
 
 export type WithQueries<StyleType> = StyleType & AllQueries<StyleType>;