add support for css `@property`

[z4o4z]

This PR adds support for CSS @property feature.

• createVar - creates a @property definition, returns property var format var(--propertyName)
• createGlobalVar - same as createVar but with a predefined name
• getVarName - accepts a property var format and returns just a property name var(--propertyName) -> --propertyName

example:

import { style, createVar, keyframes, getVarName, fallbackVar } from '@vanilla-extract/css';

const color = createVar();
const angle = createVar({
  syntax: '<angle>',
  inherits: false,
  initialValue: '0deg',
});

const angleKeyframes = keyframes({
  '100%': {
    [getVarName(angle)]: '360deg',
  },
});

export const root = style({
  background: 'pink',
  color: 'blue',
  padding: '16px',
  transition: `opacity .1s ease, color .1s ease`, // Testing autoprefixer
  backgroundImage: `linear-gradient(${angle}, rgba(153, 70, 198, 0.35) 0%, rgba(28, 56, 240, 0.46) 100%)`,
  animation: `${angleKeyframes} 7s infinite ease-in-out both`,


  ':hover': {
    opacity: 0.8,
    color: color,
  },
  
  vars: {
    [color]: '#fef',
    [angle]: fallbackVar(angle, '138deg'),
  }
});

[changeset-bot[bot]]

⚠️ No Changeset found

Latest commit: b25683084e3b39c7a55db8373c521d327e3f3ba0

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

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

[markdalgleish]

Thanks for the PR! This looks really great.

To me this is just an extension of our current createVar API. The fact that it's natively called @property definitely challenges our current naming, but I think for now VE needs to be consistent in calling them "vars". If we rename them to properties, we'd do this across the whole library in a future major version. I think it's okay that internals refer to it as "property" though since this future-proofs the integration package against API changes.

So I think we'd need to make the following changes for now:

• Overload createVar so the API is createVar({ syntax: '<color>', inherits: false, initialValue: '#fff' }).
• Rename createGlobalProperty to createGlobalVar.
• Replace getPropertyName with getVarName (which already exists in our private package). This would need to be exposed from css and dynamic packages since you'd want this at both build time and run time.

[z4o4z]

Thanks for the PR! This looks really great.

To me this is just an extension of our current createVar API. The fact that it's natively called @property definitely challenges our current naming, but I think for now VE needs to be consistent in calling them "vars". If we rename them to properties, we'd do this across the whole library in a future major version. I think it's okay that internals refer to it as "property" though since this future-proofs the integration package against API changes.

So I think we'd need to make the following changes for now:

• Overload createVar so the API is createVar({ syntax: '<color>', inherits: false, initialValue: '#fff' }).
• Rename createGlobalProperty to createGlobalVar.
• Replace getPropertyName with getVarName (which already exists in our private package). This would need to be exposed from css and dynamic packages since you'd want this at both build time and run time.

hey @markdalgleish, thanks for your feedback! Updated the code, pls let me know if I need to change something else

[z4o4z]

@markdalgleish thanks for cleaning this up! is there something I should address before merging?

[z4o4z]

@markdalgleish any updates here, i'm really waiting for this feature?

[erwinsmit]

@markdalgleish any updates here, i'm really waiting for this feature?

This would be a nice addition. Currently I can only use properties using globalStyle with a @ts-ignore. That feels a bit dirty

globalStyle(`@property --headerBackground1`, {
  // @ts-ignore
  syntax: `'<color>'`,
  initialValue: colorPrimitives.neutrals.whites.W100,
  inherits: false,
});

[8bit-echo]

I'd like to bump this and see it land! 🙏 This would be a great feature for our design system to use.

[mikaalnaik]

Need this as well, any update to this PRs future @markdalgleish?

[lukelarsen]

I am also needing this in our current library. Any update?