Add support for `@starting-style` rules #1566

lfantone · 2025-04-05T18:55:27Z

This pull request adds complete support for CSS Anchor positioning.
The update includes implementing all necessary types for rules as well as incorporating the new queries "@starting-style" and "@position-try", allowing for a better experience when using CSS anchor positioning rules

Closes #1521

EDIT: This PR will add support only for @starting-style rule. CSS Anchor position will be supported in a separate PR.

changeset-bot · 2025-04-06T20:13:16Z

🦋 Changeset detected

Latest commit: c392d65

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 10 packages

Name	Type
@vanilla-extract/css	Minor
@vanilla-extract/compiler	Patch
@vanilla-extract/integration	Patch
@vanilla-extract/rollup-plugin	Patch
@vanilla-extract/vite-plugin	Patch
@vanilla-extract/esbuild-plugin	Patch
@vanilla-extract/jest-transform	Patch
@vanilla-extract/parcel-transformer	Patch
@vanilla-extract/webpack-plugin	Patch
@vanilla-extract/next-plugin	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

mjanner · 2025-04-30T11:12:50Z

Is this getting any attention?

mettson · 2025-05-07T14:05:12Z

I would love to get this merged as soon as possible! Anyone who can review this PR?

askoufis · 2025-05-08T00:40:55Z

@lfantone Thanks for the PR! I have a couple of requests for this PR:

I would prefer the @starting-style feature be implemented in a separate PR to the @position-try feature, primarily to facilitate an easier review
I appreciate that we don't have a contribution guide to make it easier to find where tests should be added, but we generally add new syntax to the fixtures/features/src/features.css.ts file in order to test it out, and update our snapshot tests accordingly. These are our E2E tests.
The CSS generated by your implementation of @position-try doesn't align with the syntax defined in the spec. Specifically, your implementation results in selectors being placed inside the @position-try rule, whereas the spec dictates that only declarations are valid inside @position-try.
Additionally, while it's not mentioned in the spec that @position-try rules can be nested inside other at-rules (e.g. @media), it makes sense that this should be possible, and [css-anchor-position] Be more nuanced about last @position-try winning w3c/csswg-drafts#11080 seems to suggest this. Honestly given that this spec is still in draft and doesn't even seem complete makes me hesitant to ship support for it in VE just yet. Happy to work through these issues in another PR though.
Additionally, VE doesn't currently have an API for generating bare dashed-idents (createVar only generates custom properties wrapped in var()). With CSS APIs appearing that use dashed-idents such as @font-palette-values and @color-profile, we'll need to look at how best to integrate dashed-idents into VE.

lfantone · 2025-05-11T14:03:17Z

Thanks for the comment @askoufis, yeah you are right about splitting this into two different PR. I will convert this one to be the @starting-style implementation and then work on a another one 💪

Regarding the name for this properties, do you think we should go with @startingStyle and @posititonTry?

lfantone · 2025-05-11T18:11:41Z

I think I manage to get the e2e test with Playwright but all the parcel cases fails with:

    {
      origin: '@parcel/transformer-css',
      message: 'Unknown at rule: @starting-style',
      name: 'SyntaxError',
      stack: undefined,
      codeFrames: undefined
    }

Which makes me wonder if parcel has support for this new css rule or if I'm missing something in some config.

askoufis · 2025-05-12T06:53:01Z

I think I manage to get the e2e test with Playwright but all the parcel cases fails with:
    {
      origin: '@parcel/transformer-css',
      message: 'Unknown at rule: @starting-style',
      name: 'SyntaxError',
      stack: undefined,
      codeFrames: undefined
    }
Which makes me wonder if parcel has support for this new css rule or if I'm missing something in some config.

It should, though parcel uses lightningcss for its CSS bundling. Feel free to bump the parcel dep to the latest version (2.15.0) as I'd be very surprised if newer versions don't support @starting-style.

lfantone · 2025-05-12T07:37:24Z

PR updated!

There were two different parcel versions installed, one in the test-cases packages and another from the parcel-transformer. Once I upgraded both, it worked!

Let me know if there is anything else that should be addressed

askoufis · 2025-05-16T00:43:04Z

@lfantone It looks like there's still some anchor positioning code lying around. Additionally it looks like you've accidentally deleted the starting-styles changeset instead of the anchor positioning changeset.

.zed/settings.json

lfantone · 2025-05-18T12:27:09Z

Added two more PRs (#1589 & #1587) that implements the initial discussion about splitting the functionalities to make it easier to review.

askoufis

We're pretty close on this. A few tweaks and some unit tests and it should be ready to merge.

askoufis · 2025-05-26T11:31:24Z

fixtures/features/src/features.css.ts

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


Suggested change

// Style with starting-style

askoufis · 2025-06-07T14:00:44Z

tests/e2e/themed.playwright.ts-snapshots/themed-parcel--production.css

Looks like the newer version of parcel is re-ordering and deduplicating CSS, resulting in these changes. They're not incorrect changes though, just calling them out.

askoufis · 2025-06-15T23:16:26Z

.changeset/tender-beans-cheat.md

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


Suggested change

Add support for `@starting-style` rules

`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',

},

});

```

askoufis · 2025-06-15T23:20:53Z

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> = {


Thoughts on the StartingStyleQueries name? While the Queries suffix aligns with most of the other types, it doesn't really make sense since @starting-style isn't a query like @media or @container. It's more similar to @layer in that it declares something. Maybe it should just be called StartingStyle?

Sounds like a good suggestion!

askoufis · 2025-06-15T23:41:27Z

packages/css/src/transformCss.ts

+      // 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.


Just flagging that this is actually valid CSS. @media inside @starting-style is valid (example), but it relies on your browser supporting CSS nesting.

Actually, looking at the CSS output of your implementation, it generates nested CSS (@starting-style inside a selector). However, @starting-style is baseline, and it's newer than CSS nesting, so all browsers that support @starting-style support CSS nesting, so I think this is fine. However, I think for the sake of simplicity, disallowing further nested CSS within @starting-style is the right move for now. We can always remove this restriction in the future if necessary.

askoufis · 2025-06-15T23:43:28Z

packages/css/src/transformCss.ts

+      this.transformStartingStyle(
+        root,
+        selectorRule!['@starting-style'],
+        conditions,
+      );


This transformation inside selectors needs a unit test.

askoufis · 2025-06-15T23:43:45Z

packages/css/src/transformCss.ts

+        this.transformStartingStyle(
+          root,
+          supportsRule!['@starting-style'],
+          conditions,
+        );


This transformation inside @supports needs a unit test.

askoufis · 2025-06-15T23:45:01Z

packages/css/src/transformCss.ts

+      if (root.type === 'local') {
+        this.transformSimplePseudos(root, rules, conditions);
+        this.transformSelectors(root, rules, conditions);
+      }


This logic should have a unit test too.

lfantone force-pushed the master branch from aa278a6 to 7d8a2de Compare April 6, 2025 20:13

lfantone force-pushed the master branch 2 times, most recently from ec4bbd9 to efc89b4 Compare May 12, 2025 07:34

askoufis reviewed May 16, 2025

View reviewed changes

.zed/settings.json Outdated Show resolved Hide resolved

Add transform function for @starting-style

c392d65

lfantone force-pushed the master branch from efc89b4 to c392d65 Compare May 16, 2025 18:51

lfantone changed the title ~~Add support for CSS anchor positioning rules~~ Add support for @starting-style rules May 16, 2025

This was referenced May 17, 2025

Add support for CSS anchor positioning rules types #1587

Open

Add support for @position-try rules types #1589

Open

askoufis reviewed Jun 15, 2025

View reviewed changes

-Add support for `@starting-style` rules
+`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',
+  },
+});
+```

Add support for @starting-style rules #1566

Are you sure you want to change the base?

Add support for @starting-style rules #1566

Uh oh!

Conversation

lfantone commented Apr 5, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

changeset-bot bot commented Apr 6, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🦋 Changeset detected

Uh oh!

mjanner commented Apr 30, 2025

Uh oh!

mettson commented May 7, 2025

Uh oh!

askoufis commented May 8, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

lfantone commented May 11, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

lfantone commented May 11, 2025

Uh oh!

askoufis commented May 12, 2025

Uh oh!

lfantone commented May 12, 2025

Uh oh!

askoufis commented May 16, 2025

Uh oh!

Uh oh!

lfantone commented May 18, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

askoufis left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Add support for `@starting-style` rules #1566

Add support for `@starting-style` rules #1566

lfantone commented Apr 5, 2025 •

edited

Loading

changeset-bot bot commented Apr 6, 2025 •

edited

Loading

askoufis commented May 8, 2025 •

edited

Loading

lfantone commented May 11, 2025 •

edited

Loading

lfantone commented May 18, 2025 •

edited

Loading