@codecademy/variance - npm Package Compare versions

Comparing version 0.0.2-alpha.3b7149.0 to 0.0.2-alpha.508a47.0

CHANGELOG.md

@@ -6,4 +6,4 @@ # Change Log
 
-### 0.0.2-alpha.3b7149.0 (2021-02-16)
+### 0.0.2-alpha.508a47.0 (2021-02-19)
 
 **Note:** Version bump only for package @codecademy/variance

dist/__tests__/component-test.js

 function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 
 function _templateObject() {
-  var data = _taggedTemplateLiteral(["\n    background: yellow;\n  "]);
+  var data = _taggedTemplateLiteral(["\n      background: yellow;\n    "]);
 
@@ -16,2 +16,3 @@ _templateObject = function _templateObject() {
 import { matchers } from '@emotion/jest';
+import { ThemeProvider } from '@emotion/react';
 import styled from '@emotion/styled';
@@ -21,71 +22,158 @@ import React from 'react';
 import { variance } from '../core';
+import { parseSize } from '../transforms';
 expect.extend(matchers);
-describe('Variant integration', function () {
-  var _variance$withTheme$c = variance.withTheme().createStatic({
-    bg: {
-      property: 'background'
-    }
-  }),
-      variant = _variance$withTheme$c.variant;
-
-  var Test = styled.div(_templateObject());
-  var Div = styled.div(variant({
-    hi: {
-      bg: 'blue',
-      '&:hover': {
-        bg: 'green'
-      }
-    },
-    ho: _defineProperty({
-      bg: 'blue'
-    }, "> *", {
-      bg: 'navy'
-    })
-  }));
-  it('generates pseudo selector styles', function () {
-    var renderView = renderer.create( /*#__PURE__*/React.createElement(Div, {
-      variant: "hi"
-    }, /*#__PURE__*/React.createElement(Test, null, "Hello"))).toJSON();
-    expect(renderView).toHaveStyleRule('background', 'blue');
-    expect(renderView).toHaveStyleRule('background', 'green', {
-      target: ':hover'
+var theme = {
+  breakpoints: {
+    xs: 'XS',
+    sm: 'SM',
+    md: 'MD',
+    lg: 'LG',
+    xl: 'XL'
+  },
+  spacing: {
+    0: 0,
+    4: '0.25rem',
+    8: '0.5rem',
+    12: '0.75rem',
+    16: '1rem',
+    24: '1.5rem',
+    32: '2rem',
+    48: '3rem',
+    64: '4rem'
+  }
+};
+var testVariance = variance.withTheme();
+var space = testVariance.create({
+  margin: {
+    property: 'margin',
+    scale: 'spacing'
+  },
+  padding: {
+    property: 'padding',
+    scale: 'spacing'
+  }
+});
+var layout = testVariance.create({
+  width: {
+    property: 'width',
+    transform: parseSize
+  },
+  height: {
+    property: 'height',
+    transform: parseSize
+  }
+});
+describe('style props', function () {
+  it('adds style props to components', function () {
+    var Test = styled.div(space);
+    var renderView = renderer.create( /*#__PURE__*/React.createElement(ThemeProvider, {
+      theme: theme
+    }, /*#__PURE__*/React.createElement(Test, {
+      margin: [4, 8, 16]
+    }, "Hello"))).toJSON();
+    expect(renderView).toHaveStyleRule('margin', '0.25rem');
+    expect(renderView).toHaveStyleRule('margin', '0.5rem', {
+      target: 'XS'
     });
+    expect(renderView).toHaveStyleRule('margin', '1rem', {
+      target: 'SM'
+    });
   });
-  it('generates selector styles', function () {
-    var renderView = renderer.create( /*#__PURE__*/React.createElement(Div, {
-      variant: "ho"
-    }, /*#__PURE__*/React.createElement(Test, null, "Hello"))).toJSON();
-    expect(renderView).toHaveStyleRule('background', 'blue');
-    expect(renderView).toHaveStyleRule('background', 'navy', {
-      target: '*'
+  it('transforms style props', function () {
+    var Test = styled.div(layout);
+    var renderView = renderer.create( /*#__PURE__*/React.createElement(ThemeProvider, {
+      theme: theme
+    }, /*#__PURE__*/React.createElement(Test, {
+      width: "50"
+    }, "Hello"))).toJSON();
+    expect(renderView).toHaveStyleRule('width', '50px');
+  });
+  it('composes props', function () {
+    var Test = styled.div(testVariance.compose(layout, space));
+    var renderView = renderer.create( /*#__PURE__*/React.createElement(ThemeProvider, {
+      theme: theme
+    }, /*#__PURE__*/React.createElement(Test, {
+      margin: [16, 32],
+      width: ['50', '75']
+    }, "Hello"))).toJSON();
+    expect(renderView).toHaveStyleRule('width', '50px');
+    expect(renderView).toHaveStyleRule('margin', '1rem');
+    expect(renderView).toHaveStyleRule('width', '75px', {
+      target: 'XS'
     });
+    expect(renderView).toHaveStyleRule('margin', '2rem', {
+      target: 'XS'
+    });
   });
 });
-describe('CSS integration', function () {
-  var _variance$withTheme$c2 = variance.withTheme().createStatic({
-    bg: {
-      property: 'background'
-    }
-  }),
-      css = _variance$withTheme$c2.css;
+describe('static styles', function () {
+  describe('Variant integration', function () {
+    var _testVariance$createS = testVariance.createStatic({
+      bg: {
+        property: 'background'
+      }
+    }),
+        variant = _testVariance$createS.variant;
 
-  var Div = styled.div(css({
-    bg: 'blue',
-    '&:hover': {
-      bg: 'green'
-    },
-    '> *': {
-      bg: 'navy'
-    }
-  }));
-  it('generates pseudo selector styles', function () {
-    var renderView = renderer.create( /*#__PURE__*/React.createElement(Div, null, "Hello")).toJSON();
-    expect(renderView).toHaveStyleRule('background', 'blue');
-    expect(renderView).toHaveStyleRule('background', 'green', {
-      target: ':hover'
+    var Test = styled.div(_templateObject());
+    var Div = styled.div(variant({
+      hi: {
+        bg: 'blue',
+        '&:hover': {
+          bg: 'green'
+        }
+      },
+      ho: _defineProperty({
+        bg: 'blue'
+      }, "> *", {
+        bg: 'navy'
+      })
+    }));
+    it('generates pseudo selector styles', function () {
+      var renderView = renderer.create( /*#__PURE__*/React.createElement(Div, {
+        variant: "hi"
+      }, /*#__PURE__*/React.createElement(Test, null, "Hello"))).toJSON();
+      expect(renderView).toHaveStyleRule('background', 'blue');
+      expect(renderView).toHaveStyleRule('background', 'green', {
+        target: ':hover'
+      });
     });
-    expect(renderView).toHaveStyleRule('background', 'navy', {
-      target: '*'
+    it('generates selector styles', function () {
+      var renderView = renderer.create( /*#__PURE__*/React.createElement(Div, {
+        variant: "ho"
+      }, /*#__PURE__*/React.createElement(Test, null, "Hello"))).toJSON();
+      expect(renderView).toHaveStyleRule('background', 'blue');
+      expect(renderView).toHaveStyleRule('background', 'navy', {
+        target: '*'
+      });
     });
   });
+  describe('CSS integration', function () {
+    var _variance$withTheme$c = variance.withTheme().createStatic({
+      bg: {
+        property: 'background'
+      }
+    }),
+        css = _variance$withTheme$c.css;
+
+    var Div = styled.div(css({
+      bg: 'blue',
+      '&:hover': {
+        bg: 'green'
+      },
+      '> *': {
+        bg: 'navy'
+      }
+    }));
+    it('generates pseudo selector styles', function () {
+      var renderView = renderer.create( /*#__PURE__*/React.createElement(Div, null, "Hello")).toJSON();
+      expect(renderView).toHaveStyleRule('background', 'blue');
+      expect(renderView).toHaveStyleRule('background', 'green', {
+        target: ':hover'
+      });
+      expect(renderView).toHaveStyleRule('background', 'navy', {
+        target: '*'
+      });
+    });
+  });
 });

dist/__tests__/variance-test.js

@@ -1,3 +0,3 @@
-import { parseSize } from '@codecademy/gamut-system/src/transforms';
 import { variance } from '../core';
+import { parseSize } from '../transforms/';
 var theme = {
@@ -44,3 +44,3 @@ breakpoints: {
 });
-describe('css props', function () {
+describe('style props', function () {
   describe('parsers', function () {
@@ -231,3 +231,3 @@ it('has the correct config', function () {
 });
-describe('static css', function () {
+describe('static styles', function () {
   describe('css', function () {
@@ -234,0 +234,0 @@ var marginTransform = jest.fn();

dist/core.d.ts

 import { AbstractParser, AbstractPropTransformer, CSS, Parser, Prop, PropTransformer, TransformerMap, Variant } from './types/config';
-import { AbstractTheme, BreakpointCache, ThemeProps } from './types/props';
+import { AbstractTheme } from './types/props';
 import { AllUnionKeys, KeyFromUnion } from './types/utils';
 export declare const variance: {
     withTheme: <T extends AbstractTheme>() => {
-        getBreakpoints: (props: {
-            theme?: T | undefined;
-        }) => BreakpointCache<T>;
-        getPropNames: (config: Record<string, AbstractPropTransformer<T>>) => string[];
         createParser: <Config extends Record<string, AbstractPropTransformer<T>>>(config: Config) => Parser<T, Config>;
@@ -19,2 +15,5 @@ createTransform: <P extends string, Config_1 extends Prop<T>>(prop: P, config: Config_1) => PropTransformer<T, P, Config_1>;
             };
+            bgColor: {
+                readonly property: "backgroundColor";
+            };
             backgroundColor: {
@@ -21,0 +20,0 @@ readonly property: "backgroundColor";

dist/core.js

@@ -0,1 +1,5 @@
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+
 function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
@@ -9,20 +13,4 @@
 
-function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
-
-function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
-
 function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 
-function _toArray(arr) { return _arrayWithHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableRest(); }
-
-function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
-
-function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
-
-function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
-
-function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && Symbol.iterator in Object(iter)) return Array.from(iter); }
-
-function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
-
 function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
@@ -32,55 +20,24 @@
 import { baseProps } from './props';
-import { isMediaArray, isMediaMap } from './utils';
+import { orderPropNames } from './utils/propNames';
+import { arrayParser, isMediaArray, isMediaMap, objectParser, parseBreakpoints } from './utils/responsive';
 export var variance = {
   withTheme: function withTheme() {
     return {
-      // Destructures the themes breakpoints into an ordered structure to traverse
-      getBreakpoints: function getBreakpoints(props) {
-        var _props$theme;
-
-        var breakpoints = props === null || props === void 0 ? void 0 : (_props$theme = props.theme) === null || _props$theme === void 0 ? void 0 : _props$theme.breakpoints;
-        if (!breakpoints) return null;
-        var xs = breakpoints.xs,
-            sm = breakpoints.sm,
-            md = breakpoints.md,
-            lg = breakpoints.lg,
-            xl = breakpoints.xl;
-        return {
-          map: breakpoints,
-          array: [xs, sm, md, lg, xl]
-        };
-      },
-      // Get each prop name and sort it by the number of properties it handles, most props first, least props last
-      getPropNames: function getPropNames(config) {
-        return Object.keys(config).sort(function (a, b) {
-          var aProps = config === null || config === void 0 ? void 0 : config[a].properties;
-          var bProps = config === null || config === void 0 ? void 0 : config[b].properties;
-
-          if (aProps && bProps) {
-            return bProps.length - aProps.length;
-          } else if (aProps) {
-            return -1;
-          } else if (bProps) {
-            return 1;
-          }
-
-          return 0;
-        });
-      },
       // Parser to handle any set of configured props
       createParser: function createParser(config) {
-        var _this = this;
-
         var breakpoints;
-        var propNames = this.getPropNames(config);
+        var propNames = orderPropNames(config);
 
         var parser = function parser(props) {
-          var _breakpoints;
+          var _ref, _breakpoints;
 
           var styles = {}; // Get the themes configured breakpoints
 
-          breakpoints = (_breakpoints = breakpoints) !== null && _breakpoints !== void 0 ? _breakpoints : _this.getBreakpoints(props); // Loops over all prop names on the configured config to check for configured styles
+          breakpoints = (_ref = (_breakpoints = breakpoints) !== null && _breakpoints !== void 0 ? _breakpoints : parseBreakpoints(props === null || props === void 0 ? void 0 : props.theme)) !== null && _ref !== void 0 ? _ref : {};
+          var _breakpoints2 = breakpoints,
+              map = _breakpoints2.map,
+              array = _breakpoints2.array; // Loops over all prop names on the configured config to check for configured styles
 
           propNames.forEach(function (prop) {
-            var transform = config[prop].styleFn;
+            var property = config[prop];
             var value = get(props, prop);
@@ -91,26 +48,10 @@
               case 'number':
-                Object.assign(styles, transform(value, prop, props));
-                break;
+                return Object.assign(styles, property.styleFn(value, prop, props));
               // handle any props configured with the responsive notation
 
               case 'object':
-                if (!breakpoints) return;
-                var breakpointStyles = {}; // If it is an array the order of values is smallest to largest: [base, xs, ...]
+                if (!map && !array) return; // If it is an array the order of values is smallest to largest: [base, xs, ...]
 
                 if (isMediaArray(value)) {
-                  var _value = _toArray(value),
-                      base = _value[0],
-                      rest = _value.slice(1); // the first index is base styles
-
-
-                  if (base) Object.assign(styles, transform(base, prop, props)); // Map over each value in the array and merge the corresponding breakpoint styles
-                  // for that property.
-
-                  rest.forEach(function (val, i) {
-                    var _breakpoints2;
-
-                    var breakpointKey = (_breakpoints2 = breakpoints) === null || _breakpoints2 === void 0 ? void 0 : _breakpoints2.array[i];
-                    if (!breakpointKey) return;
-                    merge(breakpointStyles, _defineProperty({}, breakpointKey, transform(val, prop, props)));
-                  });
+                  return merge(styles, arrayParser(value, props, property, array));
                 } // If it is an object with keys
@@ -120,20 +61,5 @@
                 if (isMediaMap(value)) {
-                  var _value$base = value.base,
-                      _base = _value$base === void 0 ? undefined : _value$base,
-                      _rest = _objectWithoutProperties(value, ["base"]); // the keyof 'base' is base styles
-
-
-                  if (_base) Object.assign(styles, transform(_base, prop, props)); // Map over remaining keys and merge the corresponding breakpoint styles
-                  // for that property.
-
-                  Object.keys(_rest).forEach(function (bp) {
-                    var _breakpoints3, _breakpoints3$map;
-
-                    var breakpointKey = (_breakpoints3 = breakpoints) === null || _breakpoints3 === void 0 ? void 0 : (_breakpoints3$map = _breakpoints3.map) === null || _breakpoints3$map === void 0 ? void 0 : _breakpoints3$map[bp];
-                    if (!breakpointKey) return;
-                    merge(breakpointStyles, _defineProperty({}, breakpointKey, transform(_rest[bp], prop, props)));
-                  });
+                  return merge(styles, objectParser(value, props, property, map));
                 }
 
-                merge(styles, breakpointStyles);
             }
@@ -160,7 +86,9 @@ });
           styleFn: function styleFn(value, prop, props) {
-            var styles = {}; // for each property look up the scale value from theme if passed and apply any
+            var styles = {};
+            var path = "theme.".concat(config.scale, ".").concat(value);
+            var scaleVal = get(props, path, value); // for each property look up the scale value from theme if passed and apply any
             // final transforms to the value
 
             properties.forEach(function (property) {
-              styles[property] = transform(get(props, "theme.".concat(config.scale, ".").concat(value), value), prop, props);
+              styles[property] = transform(scaleVal, prop, props);
             }); // return the resulting styles object
@@ -200,4 +128,4 @@
           });
-          return function (_ref) {
-            var theme = _ref.theme;
+          return function (_ref2) {
+            var theme = _ref2.theme;
             // If cache has been set escape
@@ -244,8 +172,8 @@ if (cache) return cache; // Omit any props that are selector styles and generate the base CSS
 
-          return function (_ref2) {
+          return function (_ref3) {
             var _variantFns, _variantFns2;
 
-            var _ref2$prop = _ref2[prop],
-                selected = _ref2$prop === void 0 ? defaultVariant : _ref2$prop,
-                props = _objectWithoutProperties(_ref2, [prop].map(_toPropertyKey));
+            var _ref3$prop = _ref3[prop],
+                selected = _ref3$prop === void 0 ? defaultVariant : _ref3$prop,
+                props = _objectWithoutProperties(_ref3, [prop].map(_toPropertyKey));
 
@@ -252,0 +180,0 @@ // Call the correct css function with our defaulted key or return an empty object

dist/props/colors.d.ts

@@ -5,2 +5,5 @@ export declare const color: {
     };
+    readonly bgColor: {
+        readonly property: "backgroundColor";
+    };
     readonly backgroundColor: {
@@ -7,0 +10,0 @@ readonly property: "backgroundColor";

dist/props/colors.js

@@ -5,2 +5,5 @@ export var color = {
   },
+  bgColor: {
+    property: 'backgroundColor'
+  },
   backgroundColor: {
@@ -7,0 +10,0 @@ property: 'backgroundColor'

dist/props/index.d.ts

@@ -5,2 +5,5 @@ export declare const baseProps: {
     };
+    bgColor: {
+        readonly property: "backgroundColor";
+    };
     backgroundColor: {
@@ -7,0 +10,0 @@ readonly property: "backgroundColor";

dist/props/index.js

@@ -11,3 +11,2 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
 import { flex } from './flex';
-import { global } from './global';
 import { grid } from './grid';
@@ -18,4 +17,5 @@ import { layout } from './layout';
 import { spacing } from './spacing';
+import { staticProps } from './staticProps';
 import { typography } from './typography';
-export var baseProps = _objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread({}, global), background), border), flex), grid), layout), positioning), shadow), spacing), typography), color);
+export var baseProps = _objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread({}, staticProps), background), border), flex), grid), layout), positioning), shadow), spacing), typography), color);
 export * from './typography';
@@ -22,0 +22,0 @@ export * from './spacing';

dist/transforms/index.d.ts

 export declare const percentageOrAbsolute: (coordinate: number) => string | 0;
 export declare const parseSize: (value: string | number) => string | 0;
+export declare const identity: <T extends string | number>(val: T) => T;

dist/transforms/index.js

@@ -47,2 +47,5 @@ function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
   return !unit ? percentageOrAbsolute(numericValue) : "".concat(numericValue).concat(unit);
+};
+export var identity = function identity(val) {
+  return val;
 };

dist/types/properties.d.ts

@@ -1,11 +0,3 @@
-import { Globals, LineStyle, Properties } from 'csstype';
-declare type UnitOrPx = `${number}` | `${number}${string}`;
-declare type Unit = `${number} ${UnitOrPx}`;
-declare type Flex = UnitOrPx | Unit | `${number} ${Unit}`;
-declare type Border = `${LineStyle | Globals}` | `${number}${string} ${LineStyle}` | `${LineStyle} ${string}` | `${string} ${LineStyle} ${string}`;
-export interface PropertyTypes<TLength = never> extends Properties<TLength> {
-    border?: Border;
-    flex?: Flex;
-    content?: '""' | `"${string}"`;
+import { StandardProperties } from 'csstype';
+export interface PropertyTypes<Overrides = never> extends StandardProperties<Overrides> {
 }
-export {};

dist/types/props.d.ts

@@ -5,17 +5,19 @@ export declare type AbstractProps = Record<string, unknown>;
 }
+interface BreakpointKeys<T = string> {
+    xs: T;
+    sm: T;
+    md: T;
+    lg: T;
+    xl: T;
+}
+export interface BreakpointCache {
+    map: BreakpointKeys;
+    array: string[];
+}
 export interface AbstractTheme extends BaseTheme {
-    breakpoints?: {
-        xs: string;
-        sm: string;
-        md: string;
-        lg: string;
-        xl: string;
-    };
+    breakpoints?: BreakpointKeys;
 }
-export declare type ThemeProps<T extends AbstractTheme, Props extends AbstractProps = {}> = {
+export declare type ThemeProps<T extends AbstractTheme = AbstractTheme, Props extends AbstractProps = {}> = {
     theme?: T;
 } & Props;
-export interface CSSObject {
-    [key: string]: string | number | CSSObject | undefined;
-}
 export interface MediaQueryArray<T> {
@@ -38,6 +40,2 @@ 0?: T;
 export declare type ResponsiveProp<T> = T | MediaQueryMap<T> | MediaQueryArray<T>;
-export declare type BreakpointCache<T extends AbstractTheme> = {
-    map: T['breakpoints'];
-    array: string[];
-} | null;
 export declare type Chained = `&` | `>` | '~' | '+';
@@ -49,1 +47,5 @@ export declare type SelectorLiterals = `[${string}]` | `&:${string}` | `${Chained} ${string}` | `${string} ${Chained} ${string}`;
 };
+export interface CSSObject {
+    [key: string]: string | number | CSSObject | undefined;
+}
+export {};

package.json

 {
   "name": "@codecademy/variance",
   "description": "Constraint based CSS in JS for building scalable design systems",
-  "version": "0.0.2-alpha.3b7149.0",
+  "version": "0.0.2-alpha.508a47.0",
   "keywords": [
@@ -40,5 +40,6 @@ "emotion",
     "@emotion/react": "^11.1.5",
-    "@emotion/styled": "^11.1.5"
+    "@emotion/styled": "^11.1.5",
+    "@types/react-test-renderer": "^17.0.1"
   },
-  "gitHead": "cf43e25aac470205658d0f2b03e162d0c81feb73"
+  "gitHead": "cea34db5bd67ec52fff721140b33d99951fd96b9"
 }

tsconfig.json

@@ -10,3 +10,3 @@ {
   },
-  "include": ["src/**/*.ts"]
+  "include": ["src/**/*.ts", "src/**/*.tsx"]
 }

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

129684

increased by8.67%

Number of package files

75

increased by7.14%

Lines of code

2859

increased by4.84%

Number of medium supply chain risk alerts

0

decreased by-100%

Worsened metrics

Dev dependency count

4

increased by33.33%

No dependency changes