Add support for @position-try rules types

[lfantone]

The CSS Anchor Positioning specification defines specific requirements for the @position-try at-rule.

1. Position names must use the <dashed-ident> format with double dash prefix (--custom-name)
2. Only specific properties are allowed within @position-try blocks

Changes

Type improvements

• Updated PositionTryProperties type to explicitly list allowed properties according to the spec:
  • Inset properties (top, right, bottom, left, inset)
  • Margin properties (margin, marginTop, etc.)
  • Sizing properties (width, height, minWidth, etc.)
  • Self-alignment properties (alignSelf, justifySelf)
  • Anchor positioning properties (positionAnchor, positionArea)
• Added a PositionTryQuery type that enforces position names must start with double dash (--)

Runtime validation

• Added validation in transformPositionTry to ensure position names start with double dash (--)
• Improved validation of properties to only allow those specified in the CSS Anchor Positioning spec
• Enhanced error messages to be more descriptive and helpful

// Valid usage:
'@position-try': {
  '--custom-left': {
    width: '100px',
    margin: '0 10px 0 0',
  },
},

// Invalid - name doesn't start with double dash:
'@position-try': {
  'custom-left': { /* ... */ }, // Error!
},

// Invalid - contains disallowed properties:
'@position-try': {
  '--custom-left': {
    backgroundColor: 'blue', // Error!
  },
},

Relates to #1566 and full implementation depends on #1587.

[changeset-bot]

🦋 Changeset detected

Latest commit: e57d693

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

[phaux]

why is this API so different from keyframes or fontFace?

[askoufis]

why is this API so different from keyframes or fontFace?

I was going to do a proper review and bring up the same issue. This should really be a proper API like keyframes and fontFace since it's generating a dashed-ident that needs to be scoped, just like classnames, css vars, etc.