Skip to content

Commit

Permalink
Merge remote-tracking branch 'origin/master'
Browse files Browse the repository at this point in the history
  • Loading branch information
z4o4z committed Sep 29, 2024
2 parents 7601c86 + 5916ea4 commit 53ec657
Show file tree
Hide file tree
Showing 3 changed files with 61 additions and 0 deletions.
5 changes: 5 additions & 0 deletions .changeset/angry-rules-tease.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
"@vanilla-extract/babel-plugin-debug-ids": minor
---

Add support for `createVar` calls with property definitions
28 changes: 28 additions & 0 deletions .changeset/modern-cobras-sort.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,28 @@
---
"@vanilla-extract/css": minor
---

Add support for a `vars` property to steps within `keyframes` declarations

Example usage:

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

const angleKeyframes = keyframes({
'0%': {
vars: {
[angle]: '0deg'
}
},
'100%': {
vars: {
[angle]: '360deg'
}
}
});
```
28 changes: 28 additions & 0 deletions .changeset/poor-mirrors-care.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,28 @@
---
"@vanilla-extract/babel-plugin-debug-ids": minor
---

Add support for property definitions to `createVar`

When a property definition is provided to `createVar`, a `@property` CSS rule will be generated.

Example usage:

```ts
import { createVar } from '@vanilla-extract/css';

export myVar = createVar({
syntax: '<number>',
inherits: false,
initialValue: '0.5',
});
```

This will generate the following CSS:
```css
@property --myVar__jteyb14 {
syntax: "<number>";
inherits: false;
initial-value: 0.5;
}
```

0 comments on commit 53ec657

Please sign in to comment.