From b2f6ce524ef5848dc2cca2f3f0cd89e27137738b Mon Sep 17 00:00:00 2001 From: Tom Trinca Date: Sun, 17 Sep 2023 21:01:46 +1000 Subject: [PATCH 1/3] Add @container queries to createTextStyle --- packages/vanilla-extract/src/index.ts | 66 +++++++++++++++++++-------- 1 file changed, 46 insertions(+), 20 deletions(-) diff --git a/packages/vanilla-extract/src/index.ts b/packages/vanilla-extract/src/index.ts index 57b50ca4..e26b182a 100644 --- a/packages/vanilla-extract/src/index.ts +++ b/packages/vanilla-extract/src/index.ts @@ -9,34 +9,59 @@ import { precomputeValues } from '@capsizecss/core'; import { ComputedValues, CreateStyleObjectParameters } from './types'; import { capsizeStyle, capsizeVars } from './capsize.css'; -interface MediaQueries { - '@media': Record; +interface ConditionalQueries { + '@media'?: Record; + '@container'?: Record; } +const generateQueryVars = ({ + queryType, + queries, +}: { + queryType: '@media' | '@container'; + queries: Record; +}) => { + const queryVars: StyleRule[typeof queryType] = {}; + + Object.entries(queries).forEach(([query, value]) => { + const builtValues = + 'capHeightTrim' in value + ? (value as ComputedValues) + : precomputeValues(value); + + queryVars[query] = { vars: assignVars(capsizeVars, builtValues) }; + }); + + return queryVars; +}; + const createVanillaStyle = ({ values, - mediaQueries, + conditionalQueries, debugId, }: { values: ComputedValues; - mediaQueries?: MediaQueries; + conditionalQueries?: ConditionalQueries; debugId?: string; }) => { const vars: StyleRule = { vars: assignVars(capsizeVars, values), }; - if (typeof mediaQueries !== 'undefined') { - const mqs: StyleRule['@media'] = {}; - Object.entries(mediaQueries['@media']).forEach(([mq, val]) => { - const builtValues = - 'capHeightTrim' in val - ? (val as ComputedValues) - : precomputeValues(val); + if (typeof conditionalQueries !== 'undefined') { + if (conditionalQueries['@media']) { + vars['@media'] = generateQueryVars({ + queryType: '@media', + queries: conditionalQueries['@media'], + }); + } - mqs[mq] = { vars: assignVars(capsizeVars, builtValues) }; - }); - vars['@media'] = mqs; + if (conditionalQueries['@container']) { + vars['@container'] = generateQueryVars({ + queryType: '@container', + queries: conditionalQueries['@container'], + }); + } } return composeStyles(capsizeStyle, style(vars, debugId)); @@ -48,26 +73,27 @@ function createTextStyle( ): string; function createTextStyle( args: CreateStyleObjectParameters, - mediaQueries?: MediaQueries, + conditionalQueries?: ConditionalQueries, debugId?: string, ): string; function createTextStyle(...args: any[]) { - const hasMediaQueries = + const hasConditionalQueries = typeof args[1] !== 'undefined' && typeof args[1] !== 'string'; - const debugId = hasMediaQueries ? args[2] : args[1]; - const mediaQueries = hasMediaQueries ? args[1] : undefined; + + const debugId = hasConditionalQueries ? args[2] : args[1]; + const conditionalQueries = hasConditionalQueries ? args[1] : undefined; if ('capHeightTrim' in args[0]) { return createVanillaStyle({ values: args[0], - mediaQueries, + conditionalQueries, debugId, }); } return createVanillaStyle({ values: precomputeValues(args[0]), - mediaQueries, + conditionalQueries, debugId, }); } From e1d791d9043f05b0c4d3e2773c7593fcb090541e Mon Sep 17 00:00:00 2001 From: Tom Trinca Date: Sun, 17 Sep 2023 21:03:35 +1000 Subject: [PATCH 2/3] Add @container query story --- packages/vanilla-extract/stories/Text.css.ts | 25 ++++++++++++++++++- packages/vanilla-extract/stories/Text.ts | 16 +++++++++++- .../stories/vanilla-extract.stories.ts | 9 +++++-- 3 files changed, 46 insertions(+), 4 deletions(-) diff --git a/packages/vanilla-extract/stories/Text.css.ts b/packages/vanilla-extract/stories/Text.css.ts index b28c5077..b885cc05 100644 --- a/packages/vanilla-extract/stories/Text.css.ts +++ b/packages/vanilla-extract/stories/Text.css.ts @@ -1,4 +1,8 @@ -import { style, createGlobalTheme } from '@vanilla-extract/css'; +import { + style, + createGlobalTheme, + createContainer, +} from '@vanilla-extract/css'; import { createTextStyle, precomputeValues } from '../src'; const fontMetrics = { @@ -58,6 +62,25 @@ export const responsiveText = createTextStyle( 'responsiveText', ); +const containerName = createContainer(); + +export const container = style({ + containerName, + containerType: 'inline-size', + outline: 'solid 1px blue', +}); + +export const containerText = createTextStyle( + textValues.mobile, + { + '@container': { + [`${containerName} (min-width: 400px)`]: textValues.tablet, + [`${containerName} (min-width: 600px)`]: textValues.desktop, + }, + }, + 'responsiveText', +); + export const responsiveThemedText = createTextStyle( vars.typography.heading.mobile, { diff --git a/packages/vanilla-extract/stories/Text.ts b/packages/vanilla-extract/stories/Text.ts index 0e31e92e..d309267d 100644 --- a/packages/vanilla-extract/stories/Text.ts +++ b/packages/vanilla-extract/stories/Text.ts @@ -15,7 +15,7 @@ export const ThemedText = ({ text, background }: Props) => background ? ` style="background: ${background}"` : '' }>${text}`; -export const ResponsiveText = ({ text, background }: Props) => +export const MediaResponsiveText = ({ text, background }: Props) => `
${text}
`; @@ -24,3 +24,17 @@ export const ResponsiveThemedText = ({ text, background }: Props) => `
${text}
`; + +export const ContainerResponsiveText = ({ text, background }: Props) => + [350, 550, 700] + .map( + (width) => ` +
+
+ ${text} +
+
`, + ) + .join('\n'); diff --git a/packages/vanilla-extract/stories/vanilla-extract.stories.ts b/packages/vanilla-extract/stories/vanilla-extract.stories.ts index 13afc8a8..d38e61e4 100644 --- a/packages/vanilla-extract/stories/vanilla-extract.stories.ts +++ b/packages/vanilla-extract/stories/vanilla-extract.stories.ts @@ -1,8 +1,9 @@ import { BasicText, ThemedText, - ResponsiveText, + MediaResponsiveText, ResponsiveThemedText, + ContainerResponsiveText, } from './Text'; export default { @@ -24,8 +25,12 @@ export const Basic = container(BasicText({ text: 'Heading' })); export const Themed = container(ThemedText({ text: 'Heading' })); -export const Responsive = container(ResponsiveText({ text: 'Heading' })); +export const Responsive = container(MediaResponsiveText({ text: 'Heading' })); export const ResponsiveThemed = container( ResponsiveThemedText({ text: 'Heading' }), ); + +export const Container = container( + ContainerResponsiveText({ text: 'Heading' }), +); From 5444d2149c95290599af73b943299a7bb5d106ac Mon Sep 17 00:00:00 2001 From: Tom Trinca Date: Sun, 17 Sep 2023 21:04:56 +1000 Subject: [PATCH 3/3] Update README Responsive typography content --- packages/vanilla-extract/README.md | 2 ++ 1 file changed, 2 insertions(+) diff --git a/packages/vanilla-extract/README.md b/packages/vanilla-extract/README.md index 59b85c33..2fb51b01 100644 --- a/packages/vanilla-extract/README.md +++ b/packages/vanilla-extract/README.md @@ -137,6 +137,8 @@ export const text = createTextStyle(vars.bodyText.mobile, { }); ``` +As an alternative to passing a media query object, can also provide a vanilla-extract [container query object](https://vanilla-extract.style/documentation/styling/#container-queries). + ### Debug identifiers To improve the developer experience, `createTextStyle` accepts a debug identifier as the last argument.