-
Notifications
You must be signed in to change notification settings - Fork 296
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
add support for css
@property
(#1092)
Co-authored-by: markdalgleish <[email protected]> Co-authored-by: Adam Skoufis <[email protected]>
- Loading branch information
1 parent
4abfc0b
commit fd673f6
Showing
25 changed files
with
543 additions
and
35 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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 that declare `@property` rules |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,30 @@ | ||
--- | ||
"@vanilla-extract/css": minor | ||
--- | ||
|
||
`keyframes`: Add support for a `vars` property to steps within `keyframes` declarations | ||
|
||
Example usage: | ||
|
||
```ts | ||
import { createVar, keyframes } from '@vanilla-extract/css'; | ||
|
||
const angle = createVar({ | ||
syntax: '<angle>', | ||
inherits: false, | ||
initialValue: '0deg' | ||
}); | ||
|
||
export const angleKeyframes = keyframes({ | ||
'0%': { | ||
vars: { | ||
[angle]: '0deg' | ||
} | ||
}, | ||
'100%': { | ||
vars: { | ||
[angle]: '360deg' | ||
} | ||
} | ||
}); | ||
``` |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,29 @@ | ||
--- | ||
"@vanilla-extract/css": minor | ||
--- | ||
|
||
`createVar`: Add support for defining [`@property`] rules | ||
|
||
Example usage: | ||
|
||
```ts | ||
import { createVar } from '@vanilla-extract/css'; | ||
|
||
export const 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; | ||
} | ||
``` | ||
|
||
[`@property`]: https://developer.mozilla.org/en-US/docs/Web/CSS/@property |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,11 +1,34 @@ | ||
import { style } from '@vanilla-extract/css'; | ||
import { style, createVar, keyframes, fallbackVar } from '@vanilla-extract/css'; | ||
|
||
const color = createVar(); | ||
const angle = createVar({ | ||
syntax: '<angle>', | ||
inherits: false, | ||
initialValue: '0deg', | ||
}); | ||
|
||
const angleKeyframes = keyframes({ | ||
'100%': { | ||
vars: { | ||
[angle]: '360deg', | ||
}, | ||
}, | ||
}); | ||
|
||
export const root = style({ | ||
background: 'pink', | ||
color: 'blue', | ||
padding: '16px', | ||
transition: 'opacity .1s ease', // Testing autoprefixer | ||
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'), | ||
}, | ||
}); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.