@codecademy/variance 0.22.2-alpha.eb27ba.0 → 0.23.0-alpha.11964f.0

package/dist/types/props.d.ts

@@ -8,6 +8,11 @@ interface BreakpointKeys<T = string> {
     md: T;
     lg: T;
     xl: T;
+    c_xs: T;
+    c_sm: T;
+    c_md: T;
+    c_lg: T;
+    c_xl: T;
 }
 export interface BreakpointCache {
     map: BreakpointKeys;
@@ -16,13 +21,18 @@ export interface BreakpointCache {
 export type ThemeProps<Props = {}> = Props & {
     theme?: Theme;
 };
-export interface MediaQueryArray<T> {
+export interface BreakpointArray<T> {
     0?: T;
     1?: T;
     2?: T;
     3?: T;
     4?: T;
     5?: T;
+    6?: T;
+    7?: T;
+    8?: T;
+    9?: T;
+    10?: T;
 }
 export interface MediaQueryMap<T> {
     _?: T;
@@ -32,7 +42,15 @@ export interface MediaQueryMap<T> {
     lg?: T;
     xl?: T;
 }
-export type ResponsiveProp<T> = T | MediaQueryMap<T> | MediaQueryArray<T>;
+export interface ContainerQueryMap<T> {
+    c_xs?: T;
+    c_sm?: T;
+    c_md?: T;
+    c_lg?: T;
+    c_xl?: T;
+}
+export type BreakpointMap<T> = ContainerQueryMap<T> & MediaQueryMap<T>;
+export type ResponsiveProp<T> = T | BreakpointMap<T> | BreakpointArray<T>;
 export interface CSSObject {
     [key: string]: string | number | CSSObject | undefined;
 }

package/dist/types/theme.d.ts

@@ -4,6 +4,11 @@ export interface Breakpoints<T = string> {
     md: T;
     lg: T;
     xl: T;
+    c_xs: T;
+    c_sm: T;
+    c_md: T;
+    c_lg: T;
+    c_xl: T;
 }
 export interface BaseTheme {
     breakpoints: Breakpoints;

package/dist/utils/responsive.d.ts

@@ -1,16 +1,16 @@
 import { AbstractPropTransformer } from '../types/config';
-import { BreakpointCache, CSSObject, MediaQueryMap, ThemeProps } from '../types/props';
+import { BreakpointCache, BreakpointMap, CSSObject, ThemeProps } from '../types/props';
 import { Breakpoints } from '../types/theme';
 /**
  * Destructures the themes breakpoints into an ordered structure to traverse
  */
 export declare const parseBreakpoints: (breakpoints?: Breakpoints | undefined) => BreakpointCache | null;
 export declare const isMediaArray: (val: unknown) => val is (string | number)[];
-export declare const isMediaMap: (val: object) => val is MediaQueryMap<string | number>;
-interface ResponsiveParser<Bp extends MediaQueryMap<string | number> | (string | number)[]> {
+export declare const isMediaMap: (val: object) => val is BreakpointMap<string | number>;
+interface ResponsiveParser<Bp extends BreakpointMap<string | number> | (string | number)[]> {
     <C extends AbstractPropTransformer>(value: Bp, props: ThemeProps, config: C, breakpoints: Bp): CSSObject;
 }
-export declare const objectParser: ResponsiveParser<MediaQueryMap<string | number>>;
+export declare const objectParser: ResponsiveParser<BreakpointMap<string | number>>;
 export declare const arrayParser: ResponsiveParser<(string | number)[]>;
 export declare const orderBreakpoints: (styles: CSSObject, breakpoints: string[]) => CSSObject;
 export {};

package/dist/utils/responsive.js

@@ -1,6 +1,6 @@
 import intersection from 'lodash/intersection';
 import omit from 'lodash/omit';
-const BREAKPOINT_KEYS = ['_', 'xs', 'sm', 'md', 'lg', 'xl'];
+const BREAKPOINT_KEYS = ['_', 'xs', 'sm', 'md', 'lg', 'xl', 'c_xs', 'c_sm', 'c_md', 'c_lg', 'c_xl'];
 
 /**
  * Destructures the themes breakpoints into an ordered structure to traverse
@@ -12,13 +12,18 @@ export const parseBreakpoints = breakpoints => {
     sm,
     md,
     lg,
-    xl
+    xl,
+    c_xs,
+    c_sm,
+    c_md,
+    c_lg,
+    c_xl
   } = breakpoints ?? {};
 
-  // Ensure order for mapping
+  // Ensure order for mapping - media queries first, then container queries
   return {
     map: breakpoints,
-    array: [xs, sm, md, lg, xl]
+    array: [xs, sm, md, lg, xl, c_xs, c_sm, c_md, c_lg, c_xl]
   };
 };
 export const isMediaArray = val => Array.isArray(val);

package/dist/utils/serializeTokens.js

@@ -20,9 +20,13 @@ const templateBreakpoints = (value, alias, theme) => {
         breakpoints
       } = theme;
       Object.keys(breakpoints).forEach(key => {
-        css[breakpoints[key]] = {
-          [alias]: rest[key]
-        };
+        const breakpointValue = rest[key];
+        // Only create CSS rules for breakpoints that have defined values
+        if (breakpointValue !== undefined) {
+          css[breakpoints[key]] = {
+            [alias]: breakpointValue
+          };
+        }
       });
     }
     return css;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@codecademy/variance",
   "description": "Constraint based CSS in JS for building scalable design systems",
-  "version": "0.22.2-alpha.eb27ba.0",
+  "version": "0.23.0-alpha.11964f.0",
   "author": "codecaaron <aaron@codecademy.com>",
   "dependencies": {
     "csstype": "^3.0.7",
@@ -32,5 +32,5 @@
     "build": "nx build @codecademy/variance"
   },
   "types": "dist/index.d.ts",
-  "gitHead": "f6078b7f21f4e5c382396fba1e681ec6dc2b8eb3"
+  "gitHead": "d1b63e6197d02d0edf8726e86715636ce1efad36"
 }