Add container query support #807
Conversation
🦋 Changeset detectedLatest commit: 96305e6 The changes in this PR will be included in the next version bump. This PR includes changesets to release 9 packages
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 |
|
Should the blurb on the docs home page be updated? Here's a suggested change: -Write maintainable CSS at scale without sacrificing platform features. Variables, selectors, pseudo‑classes, media/feature queries, keyframes, font‑face fules and global styles are all supported.
+Write maintainable CSS at scale without sacrificing platform features. Variables, selectors, pseudo‑classes, media/feature/container queries, keyframes, font‑face and global styles are all supported.Note I changed |
Co-authored-by: Mark Dalgleish <[email protected]>
…ct into container-queries
| const containerQuery = `@container ${query}`; | ||
|
|
||
| const conditions = [...parentConditions, containerQuery]; |
There was a problem hiding this comment.
Minor: Noticed that containerQuery is not used, as a hangover from transformMedia. But given this is now a carbon copy of transformSupports should we look at sharing code here? Or are we deliberately preferring verbosity for readability?
There was a problem hiding this comment.
I think I like these being separate even though they are basically the same. Not sure there's much to gain by merging them outside of less lines of code.
| ```ts compiled | ||
| // sidebar.css.ts | ||
| import { | ||
| style, | ||
| createContainer | ||
| } from '@vanilla-extract/css'; | ||
|
|
||
| export const sidebarContainer = createContainer(); | ||
|
|
||
| export const sidebar = style({ | ||
| containerName: sidebarContainer | ||
| }); | ||
|
|
||
| // navigation.css.ts | ||
| import { | ||
| style, | ||
| createContainer | ||
| } from '@vanilla-extract/css'; | ||
| import { sidebarContainer } from './sidebar.css.ts'; | ||
|
|
||
| export const navigation = style({ | ||
| '@container': { | ||
| [`${sidebarContainer} (min-width: 400px)`]: { | ||
| display: 'flex' | ||
| } | ||
| } | ||
| }); | ||
| ``` |
Co-authored-by: Michael Taranto <[email protected]>
Co-authored-by: Michael Taranto <[email protected]>
This PR adds support for container queries via the new
@containerkey. It also adds a new top-level API calledcreateContainerto allow for local scoping of container names.Example usage: