Add @container query support to the createTextStyle function

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.

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<string, CreateStyleObjectParameters>;
+interface ConditionalQueries {
+  '@media'?: Record<string, CreateStyleObjectParameters>;
+  '@container'?: Record<string, CreateStyleObjectParameters>;
 }
 
+const generateQueryVars = ({
+  queryType,
+  queries,
+}: {
+  queryType: '@media' | '@container';
+  queries: Record<string, any>;
+}) => {
+  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,
   });
 }

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,
   {

packages/vanilla-extract/stories/Text.ts

@@ -15,7 +15,7 @@ export const ThemedText = ({ text, background }: Props) =>
     background ? ` style="background: ${background}"` : ''
   }>${text}</div>`;
 
-export const ResponsiveText = ({ text, background }: Props) =>
+export const MediaResponsiveText = ({ text, background }: Props) =>
   `<div class="${styles.fontFamily} ${styles.responsiveText}"${
     background ? ` style="background: ${background}"` : ''
   }>${text}</div>`;
@@ -24,3 +24,17 @@ export const ResponsiveThemedText = ({ text, background }: Props) =>
   `<div class="${styles.fontFamily} ${styles.responsiveThemedText}"${
     background ? ` style="background: ${background}"` : ''
   }>${text}</div>`;
+
+export const ContainerResponsiveText = ({ text, background }: Props) =>
+  [350, 550, 700]
+    .map(
+      (width) => `
+      <div style="width: ${width}px;" class="${styles.container}">
+        <div class="${styles.fontFamily} ${styles.containerText}"${
+        background ? ` style="background: ${background}"` : ''
+      }>
+          ${text}
+        </div>
+      </div>`,
+    )
+    .join('\n');

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' }),
+);