Add support for `@starting-style` rules by lfantone · Pull Request #1566 · vanilla-extract-css/vanilla-extract

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: 592b8c5

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.

fixtures/features/src/features.css.ts

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.

.changeset/tender-beans-cheat.md

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

packages/css/src/types.ts

 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!

packages/css/src/transformCss.ts

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.

vceder · 2025-08-15T08:12:14Z

Hi @askoufis, I'm helping luciano with this PR and I've added the tests you asked about and taken a look through the rest, see that we've gotten out of sync with main so will rebase put please take a look at your convince 🙂

askoufis · 2025-09-22T11:04:36Z

@vceder I'm happy with where this PR is currently, though I can't approve a CI run. I think @lfantone might have to enable that in their fork.

.changeset/tender-beans-cheat.md

larrifax · 2025-11-06T12:59:24Z

@lfantone, @vceder what's the status of this? Looks like the PR needs a rebase & then a CI run..

Looking forward to this feature 👍

askoufis · 2025-12-07T23:44:20Z

@lfantone I'm keen to get this PR ready for release if you've got some time. I think you need to change some permissions on your fork in order for me to run CI. Assuming CI passes I'd be happy to merge.

lfantone · 2025-12-08T08:27:50Z

There we go! I enable Actions in the fork and sync it with upstream.

🙏 Sorry for the long waiting

askoufis · 2025-12-14T05:54:45Z

@lfantone Could I have permission to push to master of your fork? I've fixed a bug and would like to push a commit but can't.

Alternatively you can apply this patch with git apply 0003-Fix-incorrect-starting-style-serialization.patch.

0003-Fix-incorrect-starting-style-serialization.patch

lfantone · 2025-12-14T13:46:31Z

@askoufis Yes! Added you as a collaborator in the repo and also apply the given patch

--co-authored-by: Viktor Ceder <viktor.ceder@sas.se> --co-authored-by: Luciano Fantone <luciano.alvarezfantone@sas.se>

…ests --co-authored-by: Adam Skoufis <askoufis@users.noreply.github.com>

askoufis · 2025-12-15T10:56:26Z

packages/css/src/transformCss.test.ts

+  // BUG: This is a long-standing bug with all at-rules, not just starting-style. This should result
+  // in a runtime error as well as a type error.


This is an unrelated bug I found while fixing a bug in this PR. I'll raise a separate issue for it as I don't want it to block this PR.

askoufis · 2025-12-15T10:56:44Z

@lfantone Thanks for all your help on this.

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

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

Closed

Add support for @position-try rules types #1589

Open

askoufis reviewed Jun 15, 2025

View reviewed changes

vceder force-pushed the master branch from c392d65 to 00be31e Compare August 14, 2025 14:53

vceder force-pushed the master branch 3 times, most recently from 49616bc to 1eaa63e Compare August 15, 2025 08:29

askoufis reviewed Sep 22, 2025

View reviewed changes

.changeset/tender-beans-cheat.md Show resolved Hide resolved

lfantone force-pushed the master branch from dca4c7c to ca14e38 Compare December 8, 2025 08:27

lfantone and others added 3 commits December 14, 2025 15:29

Add transform function for @starting-style

e2463ba

--co-authored-by: Viktor Ceder <viktor.ceder@sas.se> --co-authored-by: Luciano Fantone <luciano.alvarezfantone@sas.se>

Apply suggestions from code review

f554892

Refactor @starting-style handling and add nested at-rule support in t…

f98202c

…ests --co-authored-by: Adam Skoufis <askoufis@users.noreply.github.com>

lfantone force-pushed the master branch from 9141465 to f98202c Compare December 14, 2025 14:29

askoufis and others added 2 commits December 15, 2025 20:47

Dedupe lockfile, update snapshot

0a6758a

Update e2e snapshots

592b8c5

askoufis reviewed Dec 15, 2025

View reviewed changes

askoufis approved these changes Dec 15, 2025

View reviewed changes

askoufis merged commit 8b49b35 into vanilla-extract-css:master Dec 15, 2025
10 checks passed

vanilla-extract-ci mentioned this pull request Dec 11, 2025

Version Packages #1667

Merged

		// BUG: This is a long-standing bug with all at-rules, not just starting-style. This should result
		// in a runtime error as well as a type error.

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!

Uh oh!

askoufis Jun 7, 2025

Choose a reason for hiding this comment

Uh oh!

Uh oh!

askoufis Jun 15, 2025

Choose a reason for hiding this comment

Uh oh!

lfantone Jun 19, 2025

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

askoufis Jun 15, 2025

Choose a reason for hiding this comment

Uh oh!

vceder commented Aug 15, 2025

Uh oh!

askoufis commented Sep 22, 2025

Uh oh!

Uh oh!

larrifax commented Nov 6, 2025

Uh oh!

askoufis commented Dec 7, 2025

Uh oh!

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

Uh oh!

Uh oh!

askoufis commented Dec 14, 2025

Uh oh!

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

Uh oh!

Uh oh!

askoufis Dec 15, 2025

Choose a reason for hiding this comment

Uh oh!

askoufis commented Dec 15, 2025

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

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

lfantone commented Dec 8, 2025 •

edited

Loading

lfantone commented Dec 14, 2025 •

edited

Loading