@codecademy/variance 0.22.2-alpha.edc783.0 → 0.23.0-alpha.1d3482.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;
@@ -23,6 +28,11 @@ export interface MediaQueryArray<T> {
     3?: T;
     4?: T;
     5?: T;
+    6?: T;
+    7?: T;
+    8?: T;
+    9?: T;
+    10?: T;
 }
 export interface MediaQueryMap<T> {
     _?: T;
@@ -31,6 +41,11 @@ export interface MediaQueryMap<T> {
     md?: T;
     lg?: T;
     xl?: T;
+    c_xs?: T;
+    c_sm?: T;
+    c_md?: T;
+    c_lg?: T;
+    c_xl?: T;
 }
 export type ResponsiveProp<T> = T | MediaQueryMap<T> | MediaQueryArray<T>;
 export interface CSSObject {

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.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.edc783.0",
+  "version": "0.23.0-alpha.1d3482.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": "790363bc3db5e34cda303431ae31ff746f5b4dc8"
+  "gitHead": "e63a36a8e4ce71b6162fc68925a70e3fdd478e2f"
 }