-
Notifications
You must be signed in to change notification settings - Fork 273
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Support style compositions in selectors (#259)
- Loading branch information
1 parent
c3d9d78
commit b8a6441
Showing
30 changed files
with
1,103 additions
and
612 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,29 @@ | ||
--- | ||
'@vanilla-extract/css': minor | ||
'@vanilla-extract/esbuild-plugin': minor | ||
'@vanilla-extract/integration': minor | ||
'@vanilla-extract/snowpack-plugin': minor | ||
'@vanilla-extract/vite-plugin': minor | ||
'@vanilla-extract/webpack-plugin': minor | ||
--- | ||
|
||
Allow the result of `composeStyles` to be used in selectors | ||
|
||
When style compositions are used in selectors, they are now assigned an additional class so they can be uniquely identified. When selectors are processed internally, the composed classes are removed, only leaving behind the unique identifier classes. This allows you to treat them as if they were a single class within vanilla-extract selectors. | ||
|
||
```ts | ||
import { | ||
style, | ||
globalStyle, | ||
composeStyles | ||
} from '@vanilla-extract/css'; | ||
|
||
const background = style({ background: 'mintcream' }); | ||
const padding = style({ padding: 12 }); | ||
|
||
export const container = composeStyles(background, padding); | ||
|
||
globalStyle(`${container} *`, { | ||
boxSizing: 'border-box' | ||
}); | ||
``` |
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,21 @@ | ||
--- | ||
'@vanilla-extract/sprinkles': minor | ||
--- | ||
|
||
Allow the result of calling `atoms` to be used in selectors | ||
|
||
Sprinkles now uses vanilla-extract’s updated [`composeStyles`](https://github.com/seek-oss/vanilla-extract#composestyles) function internally, which means that atomic styles can be treated as if they were a single class within vanilla-extract selectors. | ||
|
||
```ts | ||
// styles.css.ts | ||
import { globalStyle } from '@vanilla-extract/css'; | ||
import { atoms } from './sprinkles.css.ts'; | ||
|
||
export const container = atoms({ | ||
padding: 'small', | ||
}); | ||
|
||
globalStyle(`${container} *`, { | ||
boxSizing: 'border-box' | ||
}); | ||
``` |
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
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.