@codecademy/variance - npm Package Compare versions

Comparing version 0.0.2-alpha.508a47.0 to 0.0.2-alpha.58d4b9.0

babel.config.js

 module.exports = {
   presets: ['codecademy', '@babel/preset-typescript'],
   include: ['./src/**/*'],
-  ignore: ['__tests__', './**/*.d.ts'],
+  ignore: ['**/__tests__', './**/*.d.ts'],
 };

CHANGELOG.md

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

dist/core.d.ts

@@ -1,434 +0,11 @@
-import { AbstractParser, AbstractPropTransformer, CSS, Parser, Prop, PropTransformer, TransformerMap, Variant } from './types/config';
+import { AbstractParser, AbstractPropTransformer, Parser, Prop, PropTransformer, TransformerMap } from './types/config';
 import { AbstractTheme } from './types/props';
 import { AllUnionKeys, KeyFromUnion } from './types/utils';
 export declare const variance: {
-    withTheme: <T extends AbstractTheme>() => {
-        createParser: <Config extends Record<string, AbstractPropTransformer<T>>>(config: Config) => Parser<T, Config>;
-        createTransform: <P extends string, Config_1 extends Prop<T>>(prop: P, config: Config_1) => PropTransformer<T, P, Config_1>;
-        compose: <Args extends AbstractParser<T>[]>(...parsers: Args) => Parser<T, { [K in AllUnionKeys<Args[number]["config"]>]: KeyFromUnion<Args[number]["config"], K>; }>;
-        createStatic: <Config_2 extends Record<string, Prop<T>>, Options extends {
-            withBase: boolean;
-        }, MergeConfig extends Options["withBase"] extends true ? {
-            textColor: {
-                readonly property: "color";
-            };
-            bgColor: {
-                readonly property: "backgroundColor";
-            };
-            backgroundColor: {
-                readonly property: "backgroundColor";
-            };
-            borderColor: {
-                readonly property: "borderColor";
-            };
-            borderColorX: {
-                readonly property: "borderColor";
-                readonly properties: readonly ["borderLeftColor", "borderRightColor"];
-            };
-            borderColorY: {
-                readonly property: "borderColorY";
-                readonly properties: readonly ["borderTopColor", "borderBottomColor"];
-            };
-            borderColorLeft: {
-                readonly property: "borderLeftColor";
-            };
-            borderColorRight: {
-                readonly property: "borderRightColor";
-            };
-            borderColorTop: {
-                readonly property: "borderTopColor";
-            };
-            borderColorBottom: {
-                readonly property: "borderBottomColor";
-            };
-            fontFamily: {
-                readonly property: "fontFamily";
-            };
-            fontWeight: {
-                readonly property: "fontWeight";
-            };
-            lineHeight: {
-                readonly property: "lineHeight";
-            };
-            fontSize: {
-                readonly property: "fontSize";
-            };
-            letterSpacing: {
-                readonly property: "letterSpacing";
-            };
-            textAlign: {
-                readonly property: "textAlign";
-            };
-            fontStyle: {
-                readonly property: "fontStyle";
-            };
-            textDecoration: {
-                readonly property: "textDecoration";
-            };
-            m: {
-                readonly property: "margin";
-            };
-            mX: {
-                readonly property: "margin";
-                readonly properties: readonly ["marginLeft", "marginRight"];
-            };
-            mY: {
-                readonly property: "margin";
-                readonly properties: readonly ["marginTop", "marginBottom"];
-            };
-            mL: {
-                readonly property: "marginLeft";
-            };
-            mR: {
-                readonly property: "marginRight";
-            };
-            mT: {
-                readonly property: "marginTop";
-            };
-            mB: {
-                readonly property: "marginBottom";
-            };
-            margin: {
-                readonly property: "margin";
-            };
-            marginX: {
-                readonly property: "margin";
-                readonly properties: readonly ["marginLeft", "marginRight"];
-            };
-            marginY: {
-                readonly property: "margin";
-                readonly properties: readonly ["marginTop", "marginBottom"];
-            };
-            marginLeft: {
-                readonly property: "marginLeft";
-            };
-            marginRight: {
-                readonly property: "marginRight";
-            };
-            marginTop: {
-                readonly property: "marginTop";
-            };
-            marginBottom: {
-                readonly property: "marginBottom";
-            };
-            p: {
-                readonly property: "padding";
-            };
-            pX: {
-                readonly property: "padding";
-                readonly properties: readonly ["paddingLeft", "paddingRight"];
-            };
-            pY: {
-                readonly property: "padding";
-                readonly properties: readonly ["paddingTop", "paddingBottom"];
-            };
-            pL: {
-                readonly property: "paddingLeft";
-            };
-            pR: {
-                readonly property: "paddingRight";
-            };
-            pT: {
-                readonly property: "paddingTop";
-            };
-            pB: {
-                readonly property: "paddingBottom";
-            };
-            padding: {
-                readonly property: "padding";
-            };
-            paddingX: {
-                readonly property: "padding";
-                readonly properties: readonly ["paddingLeft", "paddingRight"];
-            };
-            paddingY: {
-                readonly property: "padding";
-                readonly properties: readonly ["paddingTop", "paddingBottom"];
-            };
-            paddingLeft: {
-                readonly property: "paddingLeft";
-            };
-            paddingRight: {
-                readonly property: "paddingRight";
-            };
-            paddingTop: {
-                readonly property: "paddingTop";
-            };
-            paddingBottom: {
-                readonly property: "paddingBottom";
-            };
-            boxShadow: {
-                readonly property: "boxShadow";
-            };
-            textShadow: {
-                readonly property: "textShadow";
-            };
-            position: {
-                readonly property: "position";
-            };
-            top: {
-                readonly property: "top";
-                readonly transform: (value: string | number) => string | 0;
-            };
-            right: {
-                readonly property: "right";
-                readonly transform: (value: string | number) => string | 0;
-            };
-            bottom: {
-                readonly property: "bottom";
-                readonly transform: (value: string | number) => string | 0;
-            };
-            left: {
-                readonly property: "left";
-                readonly transform: (value: string | number) => string | 0;
-            };
-            zIndex: {
-                readonly property: "zIndex";
-            };
-            display: {
-                readonly property: "display";
-            };
-            overflow: {
-                readonly property: "overflow";
-            };
-            overflowX: {
-                readonly property: "overflowX";
-            };
-            overflowY: {
-                readonly property: "overflowY";
-            };
-            width: {
-                readonly property: "width";
-                readonly transform: (value: string | number) => string | 0;
-            };
-            minWidth: {
-                readonly property: "minWidth";
-                readonly transform: (value: string | number) => string | 0;
-            };
-            maxWidth: {
-                readonly property: "maxWidth";
-                readonly transform: (value: string | number) => string | 0;
-            };
-            height: {
-                readonly property: "height";
-                readonly transform: (value: string | number) => string | 0;
-            };
-            minHeight: {
-                readonly property: "minHeight";
-                readonly transform: (value: string | number) => string | 0;
-            };
-            maxHeight: {
-                readonly property: "maxHeight";
-                readonly transform: (value: string | number) => string | 0;
-            };
-            verticalAlign: {
-                readonly property: "verticalAlign";
-            };
-            gridAutoColumns: {
-                readonly property: "gridAutoColumns";
-            };
-            gridAutoRows: {
-                readonly property: "gridAutoRows";
-            };
-            gridTemplateColumns: {
-                readonly property: "gridTemplateColumns";
-            };
-            gridTemplateRows: {
-                readonly property: "gridTemplateRows";
-            };
-            gridAutoFlow: {
-                readonly property: "gridAutoFlow";
-            };
-            rowGap: {
-                readonly property: "rowGap";
-            };
-            columnGap: {
-                readonly property: "columnGap";
-            };
-            gridColumn: {
-                readonly property: "gridColumn";
-            };
-            gridRow: {
-                readonly property: "gridRow";
-            };
-            gridColumnStart: {
-                readonly property: "gridColumnStart";
-            };
-            gridRowStart: {
-                readonly property: "gridRowStart";
-            };
-            gridColumnEnd: {
-                readonly property: "gridColumnEnd";
-            };
-            gridRowEnd: {
-                readonly property: "gridRowEnd";
-            };
-            flex: {
-                readonly property: "flex";
-            };
-            flexBasis: {
-                readonly property: "flexBasis";
-            };
-            flexDirection: {
-                readonly property: "flexDirection";
-            };
-            flexWrap: {
-                readonly property: "flexWrap";
-            };
-            flexShrink: {
-                readonly property: "flexShrink";
-            };
-            flexGrow: {
-                readonly property: "flexGrow";
-            };
-            order: {
-                readonly property: "order";
-            };
-            justifySelf: {
-                readonly property: "justifySelf";
-            };
-            justifyContent: {
-                readonly property: "justifyContent";
-            };
-            justifyItems: {
-                readonly property: "justifyItems";
-            };
-            alignSelf: {
-                readonly property: "alignSelf";
-            };
-            alignItems: {
-                readonly property: "alignItems";
-            };
-            alignContent: {
-                readonly property: "alignContent";
-            };
-            border: {
-                readonly property: "border";
-            };
-            borderX: {
-                readonly property: "border";
-                readonly properties: readonly ["borderLeft", "borderRight"];
-            };
-            borderY: {
-                readonly property: "border";
-                readonly properties: readonly ["borderTop", "borderBottom"];
-            };
-            borderTop: {
-                readonly property: "borderTop";
-            };
-            borderRight: {
-                readonly property: "borderRight";
-            };
-            borderBottom: {
-                readonly property: "borderBottom";
-            };
-            borderLeft: {
-                readonly property: "borderLeft";
-            };
-            borderWidth: {
-                readonly property: "borderWidth";
-            };
-            borderWidthX: {
-                readonly property: "borderWidth";
-                readonly properties: readonly ["borderLeftWidth", "borderRightWidth"];
-            };
-            borderWidthY: {
-                readonly property: "borderWidth";
-                readonly properties: readonly ["borderTopWidth", "borderBottomWidth"];
-            };
-            borderWidthLeft: {
-                readonly property: "borderLeftWidth";
-            };
-            borderWidthRight: {
-                readonly property: "borderRightWidth";
-            };
-            borderWidthTop: {
-                readonly property: "borderTopWidth";
-            };
-            borderWidthBottom: {
-                readonly property: "borderBottomWidth";
-            };
-            borderRadius: {
-                readonly property: "borderRadius";
-            };
-            borderRadiusLeft: {
-                readonly property: "borderRadius";
-                readonly properties: readonly ["borderTopLeftRadius", "borderBottomLeftRadius"];
-            };
-            borderRadiusTop: {
-                readonly property: "borderRadius";
-                readonly properties: readonly ["borderTopLeftRadius", "borderTopRightRadius"];
-            };
-            borderRadiusBottom: {
-                readonly property: "borderRadius";
-                readonly properties: readonly ["borderBottomLeftRadius", "borderBottomRightRadius"];
-            };
-            borderRadiusRight: {
-                readonly property: "borderRadius";
-                readonly properties: readonly ["borderTopRightRadius", "borderBottomRightRadius"];
-            };
-            borderRadiusTopLeft: {
-                readonly property: "borderTopLeftRadius";
-            };
-            borderRadiusTopRight: {
-                readonly property: "borderTopRightRadius";
-            };
-            borderRadiusBottomRight: {
-                readonly property: "borderBottomRightRadius";
-            };
-            borderRadiusBottomLeft: {
-                readonly property: "borderBottomLeftRadius";
-            };
-            borderStyle: {
-                readonly property: "borderStyle";
-            };
-            borderStyleX: {
-                readonly property: "borderStyle";
-                readonly properties: readonly ["borderLeftStyle", "borderRightStyle"];
-            };
-            borderStyleY: {
-                readonly property: "borderStyle";
-                readonly properties: readonly ["borderTopStyle", "borderBottomStyle"];
-            };
-            borderStyleLeft: {
-                readonly property: "borderLeftStyle";
-            };
-            borderStyleRight: {
-                readonly property: "borderRightStyle";
-            };
-            borderStyleTop: {
-                readonly property: "borderTopStyle";
-            };
-            borderStyleBottom: {
-                readonly property: "borderBottomStyle";
-            };
-            bg: {
-                readonly property: "background";
-            };
-            backgroundImage: {
-                readonly property: "backgroundImage";
-            };
-            backgroundSize: {
-                readonly property: "backgroundSize";
-            };
-            backgroundRepeat: {
-                readonly property: "backgroundRepeat";
-            };
-            backgroundPosition: {
-                readonly property: "backgroundPosition";
-            };
-            content: {
-                readonly property: "content";
-            };
-        } : {}, P_1 extends Parser<T, TransformerMap<T, MergeConfig & Config_2>>>(config: Config_2, options?: Options | undefined) => {
-            variant: Variant<T, P_1>;
-            css: CSS<T, P_1>;
-        };
-        createCss: <Config_3 extends Record<string, Prop<T>>, P_2 extends Parser<T, TransformerMap<T, Config_3>>>(config: Config_3) => CSS<T, P_2>;
-        /** Creates a higher order function that accepts a set of keyed static props to return a
-         * function that accepts theme and a prop of any key on thee configuration object
-         */
-        createVariant: <Config_4 extends Record<string, Prop<T>>, P_3 extends Parser<T, TransformerMap<T, Config_4>>, StyleFunc extends CSS<T, P_3>>(css: StyleFunc) => Variant<T, P_3>;
-        create: <Config_5 extends Record<string, Prop<T>>>(config: Config_5) => Parser<T, TransformerMap<T, Config_5>>;
+    withTheme<T extends AbstractTheme>(): {
+        createParser<Config extends Record<string, AbstractPropTransformer<T>>>(config: Config): Parser<T, Config>;
+        createTransform<P extends string, Config_1 extends Prop<T>>(prop: P, config: Config_1): PropTransformer<T, P, Config_1>;
+        compose<Args extends AbstractParser<T>[]>(...parsers: Args): Parser<T, { [K in AllUnionKeys<Args[number]["config"]>]: KeyFromUnion<Args[number]["config"], K>; }>;
+        create<Config_2 extends Record<string, Prop<T>>>(config: Config_2): Parser<T, TransformerMap<T, Config_2>>;
     };
 };

dist/core.js

@@ -1,9 +0,1 @@
-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); }
-
-function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
-
 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; }
@@ -17,4 +9,5 @@
 
-import { get, identity, isObject, merge, omit } from 'lodash';
-import { baseProps } from './props';
+import get from 'lodash/get';
+import identity from 'lodash/identity';
+import merge from 'lodash/merge';
 import { orderPropNames } from './utils/propNames';
@@ -84,8 +77,26 @@ import { arrayParser, isMediaArray, isMediaMap, objectParser, parseBreakpoints } from './utils/responsive';
             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
+            var scaleVal;
+
+            switch (_typeof(config.scale)) {
+              case 'string':
+                {
+                  var path = "theme.".concat(config.scale, ".").concat(value);
+                  scaleVal = get(props, path, value);
+                  break;
+                }
+
+              case 'object':
+                {
+                  scaleVal = get(config.scale, "".concat(value));
+                  break;
+                }
+
+              default:
+                scaleVal = 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(scaleVal, prop, props);
+              styles[property] = transform(scaleVal, property, props);
             }); // return the resulting styles object
@@ -106,76 +117,2 @@
       },
-      // Single function to create variant and css
-      createStatic: function createStatic(config, options) {
-        var css = this.createCss(Object.assign((options === null || options === void 0 ? void 0 : options.withBase) ? baseProps : {}, config));
-        var variant = this.createVariant(css);
-        return {
-          css: css,
-          variant: variant
-        };
-      },
-      // Creates a higher order function that accepts static variance props and returns a function that can be called with theme
-      createCss: function createCss(config) {
-        // Create a parser from the passed configuration of props
-        var parser = this.create(config);
-        return function (cssProps) {
-          var cache; // Check any key that may match a selector and extract them
-
-          var selectors = Object.keys(cssProps).filter(function (key) {
-            return key.match(/(&|\>|\+|~)/g);
-          });
-          return function (_ref2) {
-            var theme = _ref2.theme;
-            // If cache has been set escape
-            if (cache) return cache; // Omit any props that are selector styles and generate the base CSS
-
-            var css = parser(_objectSpread(_objectSpread({}, omit(cssProps, selectors)), {}, {
-              theme: theme
-            })); // For every key that matches a selector call the parser with the value of that key
-
-            selectors.forEach(function (selector) {
-              var selectorConfig = cssProps[selector];
-
-              if (isObject(selectorConfig)) {
-                // Set the key on our returned object to the generated CSS
-                css[selector] = parser(Object.assign(selectorConfig, {
-                  theme: theme
-                }));
-              }
-            }); // Set CSS to the cache
-
-            cache = css;
-            return cache;
-          };
-        };
-      },
-
-      /** Creates a higher order function that accepts a set of keyed static props to return a
-       * function that accepts theme and a prop of any key on thee configuration object
-       */
-      createVariant: function createVariant(css) {
-        return function (variants, options) {
-          // Set the default prop signature to variant if none has been configuraed.
-          var prop = (options === null || options === void 0 ? void 0 : options.prop) || 'variant';
-          var defaultVariant = options === null || options === void 0 ? void 0 : options.defaultVariant;
-          var variantFns = {}; // For each of the variants create a CSS function from the configured props to be called when
-          // the return function is invoked.
-
-          Object.keys(variants).forEach(function (key) {
-            var variantKey = key;
-            var cssProps = variants[variantKey];
-            variantFns[variantKey] = css(cssProps);
-          }); // Return the initialed final props
-
-          return function (_ref3) {
-            var _variantFns, _variantFns2;
-
-            var _ref3$prop = _ref3[prop],
-                selected = _ref3$prop === void 0 ? defaultVariant : _ref3$prop,
-                props = _objectWithoutProperties(_ref3, [prop].map(_toPropertyKey));
-
-            // Call the correct css function with our defaulted key or return an empty object
-            return (_variantFns = variantFns === null || variantFns === void 0 ? void 0 : (_variantFns2 = variantFns[selected]) === null || _variantFns2 === void 0 ? void 0 : _variantFns2.call(variantFns, props)) !== null && _variantFns !== void 0 ? _variantFns : {};
-          };
-        };
-      },
       create: function create(config) {
@@ -185,3 +122,5 @@ var transforms = {}; // Create a transform function for each of the props
         for (var prop in config) {
-          transforms[prop] = this.createTransform(prop, config[prop]);
+          if (typeof prop === 'string') {
+            transforms[prop] = this.createTransform(prop, config[prop]);
+          }
         } // Create a parser that handles all the props within the config
@@ -188,0 +127,0 @@

dist/index.d.ts

@@ -1,2 +0,2 @@
-export * from './core';
+export { variance } from './core';
 export * from './types/props';

dist/index.js

@@ -1,2 +0,2 @@
-export * from './core';
+export { variance } from './core';
 export * from './types/props';

dist/types/config.d.ts

 import { PropertyTypes } from './properties';
-import { AbstractProps, AbstractTheme, CSSObject, ResponsiveProp, SelectorMap, ThemeProps } from './props';
+import { AbstractProps, AbstractTheme, CSSObject, ResponsiveProp, ThemeProps } from './props';
 import { Key } from './utils';
+export declare type LiteralScale = Record<string | number, string | number>;
 export interface BaseProperty {
@@ -9,3 +10,3 @@ property: keyof PropertyTypes;
 export interface Prop<T extends AbstractTheme> extends BaseProperty {
-    scale?: keyof T;
+    scale?: keyof T | LiteralScale;
     transform?: (val: string | number, prop?: string, props?: AbstractProps) => string | number;
@@ -22,3 +23,3 @@ }
 }
-export declare type Scale<T extends AbstractTheme, Config extends Prop<T>> = ResponsiveProp<Config['scale'] extends keyof T ? keyof T[Config['scale']] : PropertyTypes[Config['property']]>;
+export declare type Scale<T extends AbstractTheme, Config extends Prop<T>> = ResponsiveProp<Config['scale'] extends keyof T ? keyof T[Config['scale']] : Config['scale'] extends LiteralScale ? keyof Config['scale'] : PropertyTypes[Config['property']]>;
 export interface TransformFn<T extends AbstractTheme, P extends string, Config extends Prop<T>> {
@@ -44,14 +45,1 @@ (value: Scale<T, Config>, prop: P, props: ThemeProps<T, {
 }
-export interface Variant<T extends AbstractTheme, Parser extends AbstractParser<T>> {
-    <Props extends Record<string, AbstractProps>, Keys extends keyof Props, PropKey extends Readonly<string> = 'variant'>(variants: {
-        [P in Keys]: SelectorMap<Props[P], Parameters<Parser>[0]>;
-    }, options?: {
-        prop?: PropKey;
-        defaultVariant?: Keys;
-    }): <FinalProps extends ThemeProps<T, {
-        [X in PropKey]?: Key<Keys>;
-    }>>(props: FinalProps) => CSSObject;
-}
-export interface CSS<T extends AbstractTheme, P extends AbstractParser<T>> {
-    <Props extends AbstractProps>(config: SelectorMap<Props, Parameters<P>[0]>): <FinalProps extends ThemeProps<T>>(props: FinalProps) => CSSObject;
-}

dist/types/props.d.ts

@@ -39,8 +39,2 @@ export declare type AbstractProps = Record<string, unknown>;
 export declare type ResponsiveProp<T> = T | MediaQueryMap<T> | MediaQueryArray<T>;
-export declare type Chained = `&` | `>` | '~' | '+';
-export declare type SelectorLiterals = `[${string}]` | `&:${string}` | `${Chained} ${string}` | `${string} ${Chained} ${string}`;
-export declare type Selectors<T> = T extends SelectorLiterals ? T : never;
-export declare type SelectorMap<Config extends AbstractProps, Props extends AbstractProps> = {
-    [K in keyof Config]: K extends Selectors<K> ? Props : K extends keyof Props ? Props[K] : never;
-};
 export interface CSSObject {
@@ -47,0 +41,0 @@ [key: string]: string | number | CSSObject | undefined;

dist/utils/responsive.js

@@ -19,3 +19,3 @@ function _toArray(arr) { return _arrayWithHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableRest(); }
 
-import { intersection } from 'lodash';
+import intersection from 'lodash/intersection';
 var BREAKPOINT_KEYS = ['base', 'xs', 'sm', 'md', 'lg', 'xl'];
@@ -22,0 +22,0 @@ /**

package.json

 {
   "name": "@codecademy/variance",
   "description": "Constraint based CSS in JS for building scalable design systems",
-  "version": "0.0.2-alpha.508a47.0",
+  "version": "0.0.2-alpha.58d4b9.0",
   "keywords": [
@@ -16,2 +16,3 @@ "emotion",
   "module": "dist/index.js",
+  "types": "dist/index.d.ts",
   "publishConfig": {
@@ -32,15 +33,15 @@ "access": "public"
   "peerDependencies": {
-    "csstype": ">=3.0.0",
     "typescript": ">=4.1.0"
   },
   "dependencies": {
+    "csstype": "^3.0.7",
     "lodash": "^4.17.5"
   },
   "devDependencies": {
-    "@emotion/jest": "^11.2.0",
-    "@emotion/react": "^11.1.5",
-    "@emotion/styled": "^11.1.5",
+    "@emotion/jest": "^11.1.0",
+    "@emotion/react": "^11.1.4",
+    "@emotion/styled": "^11.0.0",
     "@types/react-test-renderer": "^17.0.1"
   },
-  "gitHead": "cea34db5bd67ec52fff721140b33d99951fd96b9"
+  "gitHead": "6297920a45d03ac4cdf645de1a71eae9a8900466"
 }

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

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

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

Worsened metrics

Total package byte prevSize

26967

decreased by-79.21%

Number of package files

30

decreased by-60%

Lines of code

333

decreased by-88.35%

Number of medium supply chain risk alerts

1

increased byInfinity%

Dependency changes

• + Addedcsstype@^3.0.7