vanilla-extract-css · lfantone · May 18, 2025
diff --git a/.changeset/minions-chips-cheat.md b/.changeset/minions-chips-cheat.md
@@ -0,0 +1,5 @@
+---
+'@vanilla-extract/css': minor
+---
+
+Add support `@position-try` rules
diff --git a/fixtures/features/src/features.css.ts b/fixtures/features/src/features.css.ts
@@ -60,3 +60,14 @@ export const styleVariantsCompositionInSelector = styleVariants({
 globalStyle(`body ${styleVariantsCompositionInSelector.variant}`, {
   fontSize: '24px',
 });
+
+// Style with position-try
+export const styleWithPositionTry = style({
+  backgroundColor: 'black',
+  '@position-try': {
+    '--custom-left': {
+      width: '100px',
+      margin: '0 10px 0 0',
+    },
+  },
+});
diff --git a/fixtures/features/src/html.ts b/fixtures/features/src/html.ts
@@ -1,5 +1,5 @@
-import * as styles from './features.css';
 import testNodes from '../test-nodes.json';
+import * as styles from './features.css';
 
 export default `
     <div id="${testNodes.mergedStyle}" class="${styles.mergedStyle}">Merged style</div>
@@ -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.styleWithPositionTry}" class="${styles.styleVariantsCompositionInSelector.variant}">Style with @position-try</div>
   `;
 
 // @ts-expect-error Vite env not defined

diff --git a/fixtures/features/test-nodes.json b/fixtures/features/test-nodes.json
@@ -5,5 +5,6 @@
   "styleVariantsWithMappedComposition": "styleVariantsWithMappedComposition",
   "compositionOnly": "compositionOnly",
   "styleCompositionInSelector": "styleCompositionInSelector",
-  "styleVariantsCompositionInSelector": "styleVariantsCompositionInSelector"
+  "styleVariantsCompositionInSelector": "styleVariantsCompositionInSelector",
+  "styleWithPositionTry": "styleWithPositionTry"
 }
diff --git a/fixtures/next-app-router/tsconfig.json b/fixtures/next-app-router/tsconfig.json
@@ -8,7 +8,8 @@
         "name": "next"
       }
     ],
-    "strictNullChecks": true
+    "strictNullChecks": true,
+    "module": "esnext"
   },
   "include": [
     "next-env.d.ts",
@@ -17,5 +18,7 @@
     ".next/types/**/*.ts",
     "dist/types/**/*.ts"
   ],
-  "exclude": ["node_modules"]
+  "exclude": [
+    "node_modules"
+  ]
 }
diff --git a/fixtures/next-pages-router/tsconfig.json b/fixtures/next-pages-router/tsconfig.json
@@ -3,8 +3,16 @@
   "compilerOptions": {
     "forceConsistentCasingInFileNames": true,
     "jsx": "preserve",
-    "strictNullChecks": true
+    "strictNullChecks": true,
+    "module": "esnext",
+    "moduleResolution": "node"
   },
-  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
-  "exclude": ["node_modules"]
+  "include": [
+    "next-env.d.ts",
+    "**/*.ts",
+    "**/*.tsx"
+  ],
+  "exclude": [
+    "node_modules"
+  ]
 }
diff --git a/packages/css/src/transformCss.test.ts b/packages/css/src/transformCss.test.ts
@@ -1,7 +1,7 @@
-import { setFileScope, endFileScope } from './fileScope';
-import { createVar } from './vars';
-import { transformCss } from './transformCss';
+import { endFileScope, setFileScope } from './fileScope';
 import { style } from './style';
+import { transformCss } from './transformCss';
+import { createVar } from './vars';
 
 setFileScope('test');
 
@@ -2500,6 +2500,285 @@ describe('transformCss', () => {
       }
     `);
   });
+
+  it('should handle @position-try declaration', () => {
+    expect(
+      transformCss({
+        composedClassLists: [],
+        localClassNames: ['testClass'],
+        cssObjs: [
+          {
+            type: 'local',
+            selector: 'testClass',
+            rule: {
+              display: 'flex',
+              '@position-try': {
+                '--custom-left': {
+                  width: '100px',
+                  margin: '0 10px 0 0',
+                },
+              },
+            },
+          },
+        ],
+      }).join('\n'),
+    ).toMatchInlineSnapshot(`
+      .testClass {
+        display: flex;
+      }
+      @position-try --custom-left {
+        .testClass {
+          width: 100px;
+          margin: 0 10px 0 0;
+        }
+      }
+    `);
+  });
+
+  it('should multiple custom position inside @position-try declaration', () => {
+    expect(
+      transformCss({
+        composedClassLists: [],
+        localClassNames: ['testClass'],
+        cssObjs: [
+          {
+            type: 'local',
+            selector: 'testClass',
+            rule: {
+              display: 'flex',
+              '@position-try': {
+                '--custom-left': {
+                  width: '100px',
+                  margin: '0 10px 0 0',
+                },
+                '--custom-right': {
+                  width: '100px',
+                  margin: '0 10px 0 0',
+                },
+              },
+            },
+          },
+        ],
+      }).join('\n'),
+    ).toMatchInlineSnapshot(`
+      .testClass {
+        display: flex;
+      }
+      @position-try --custom-left {
+        .testClass {
+          width: 100px;
+          margin: 0 10px 0 0;
+        }
+      }
+      @position-try --custom-right {
+        .testClass {
+          width: 100px;
+          margin: 0 10px 0 0;
+        }
+      }
+    `);
+  });
+
+  it('should handle @position-try inside media queries', () => {
+    expect(
+      transformCss({
+        composedClassLists: [],
+        localClassNames: ['testClass'],
+        cssObjs: [
+          {
+            type: 'local',
+            selector: 'testClass',
+            rule: {
+              display: 'flex',
+              '@media': {
+                'screen and (min-width: 700px)': {
+                  '@position-try': {
+                    '--custom-left': {
+                      width: '100px',
+                      margin: '0 10px 0 0',
+                    },
+                  },
+                },
+              },
+            },
+          },
+        ],
+      }).join('\n'),
+    ).toMatchInlineSnapshot(`
+      .testClass {
+        display: flex;
+      }
+      @media screen and (min-width: 700px) {
+        @position-try --custom-left {
+          .testClass {
+            width: 100px;
+            margin: 0 10px 0 0;
+          }
+        }
+      }
+    `);
+  });
+
+  it('should handle @position-try inside container queries', () => {
+    expect(
+      transformCss({
+        composedClassLists: [],
+        localClassNames: ['testClass'],
+        cssObjs: [
+          {
+            type: 'local',
+            selector: 'testClass',
+            rule: {
+              display: 'flex',
+              '@container': {
+                'sidebar (min-width: 700px)': {
+                  '@position-try': {
+                    '--custom-left': {
+                      width: '100px',
+                      margin: '0 10px 0 0',
+                    },
+                  },
+                },
+              },
+            },
+          },
+        ],
+      }).join('\n'),
+    ).toMatchInlineSnapshot(`
+      .testClass {
+        display: flex;
+      }
+      @container sidebar (min-width: 700px) {
+        @position-try --custom-left {
+          .testClass {
+            width: 100px;
+            margin: 0 10px 0 0;
+          }
+        }
+      }
+    `);
+  });
+
+  it('should handle @position-try inside a layer', () => {
+    expect(
+      transformCss({
+        composedClassLists: [],
+        localClassNames: ['testClass'],
+        cssObjs: [
+          {
+            type: 'local',
+            selector: 'testClass',
+            rule: {
+              '@layer': {
+                'mock-layer': {
+                  '@position-try': {
+                    '--custom-left': {
+                      width: '100px',
+                      margin: '0 10px 0 0',
+                    },
+                  },
+                },
+              },
+            },
+          },
+        ],
+      }).join('\n'),
+    ).toMatchInlineSnapshot(`
+      @layer mock-layer;
+      @layer mock-layer {
+        @position-try --custom-left {
+          .testClass {
+            width: 100px;
+            margin: 0 10px 0 0;
+          }
+        }
+      }
+    `);
+  });
+
+  it('should throw an error when not using a <dashed-ident> type in @position-try scope', () => {
+    expect(() =>
+      transformCss({
+        composedClassLists: [],
+        localClassNames: ['testClass'],
+        cssObjs: [
+          {
+            type: 'local',
+            selector: 'testClass',
+            rule: {
+              display: 'flex',
+              '@position-try': {
+                // @ts-expect-error This test is to cover the error for non-allowed properties inside @position-try scope
+                invalidName: {
+                  backgroundColor: 'blue',
+                },
+              },
+            },
+          },
+        ],
+      }),
+    ).toThrowErrorMatchingInlineSnapshot(
+      'Invalid @position-try name: "invalidName". Position names must follow the <dashed-ident> type (--custom-name).',
+    );
+  });
+
+  it('should throw an error when using a non allowed property inside @position-try scope', () => {
+    expect(() =>
+      transformCss({
+        composedClassLists: [],
+        localClassNames: ['testClass'],
+        cssObjs: [
+          {
+            type: 'local',
+            selector: 'testClass',
+            rule: {
+              display: 'flex',
+              '@position-try': {
+                '--custom-left': {
+                  // @ts-expect-error This test is to cover the error for non-allowed properties inside @position-try scope
+                  backgroundColor: 'blue',
+                },
+              },
+            },
+          },
+        ],
+      }),
+    ).toThrowErrorMatchingInlineSnapshot(
+      'Invalid properties in @position-try --custom-left rule: backgroundColor. Only inset, margin, sizing, self-alignment, position-anchor, and position-area properties are allowed.',
+    );
+  });
+
+  it('should throw an error when a at-rule is use inside @position-try scope', () => {
+    expect(() =>
+      transformCss({
+        composedClassLists: [],
+        localClassNames: ['testClass'],
+        cssObjs: [
+          {
+            type: 'local',
+            selector: 'testClass',
+            rule: {
+              display: 'flex',
+              '@position-try': {
+                '--custom-left': {
+                  width: '100px',
+                  margin: '0 10px 0 0',
+                  // @ts-expect-error This test is to cover the error when a at-rule is used inside @position-try scope
+                  '@media': {
+                    'screen and (min-width: 700px)': {
+                      display: 'grid',
+                    },
+                  },
+                },
+              },
+            },
+          },
+        ],
+      }),
+    ).toThrowErrorMatchingInlineSnapshot(
+      'Nested at-rules (e.g. "@media") are not allowed inside @position-try block.',
+    );
+  });
 });
 
 endFileScope();