@codecademy/variance - npm Package Compare versions

Comparing version 0.0.2-alpha.508a47.0 to 0.0.2-alpha.6752ee.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.6752ee.0 (2021-02-24)
 
 **Note:** Version bump only for package @codecademy/variance

dist/core.d.ts

@@ -1,10 +0,10 @@
-import { AbstractParser, AbstractPropTransformer, CSS, Parser, Prop, PropTransformer, TransformerMap, Variant } from './types/config';
+import { AbstractParser, AbstractPropTransformer, CSS, 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 {
+    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;
@@ -423,13 +423,10 @@ }, MergeConfig extends Options["withBase"] extends true ? {
             };
-        } : {}, 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>;
+        } : {}, P_1 extends Parser<T, TransformerMap<T, MergeConfig & Config_2>>>(config: Config_2, options?: Options | undefined): never;
+        createCss<Config_3 extends Record<string, Prop<T>>, P_2 extends Parser<T, TransformerMap<T, Config_3>>>(config: Config_3): never;
         /** 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>>;
+        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): never;
+        create<Config_5 extends Record<string, Prop<T>>>(config: Config_5): Parser<T, TransformerMap<T, Config_5>>;
     };
 };

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';
@@ -107,43 +100,44 @@ import { arrayParser, isMediaArray, isMediaMap, objectParser, parseBreakpoints } from './utils/responsive';
       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
-        };
+        throw new Error('Not implemented'); // const css = this.createCss(
+        //   Object.assign(options?.withBase ? baseProps : {}, config)
+        // );
+        // const variant = this.createVariant(css);
+        // return {
+        //   css,
+        //   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;
-          };
-        };
+        throw new Error('Not implemented'); // // Create a parser from the passed configuration of props
+        // const parser = this.create(config);
+        // return (cssProps) => {
+        //   let cache: CSSObject;
+        //   // Check any key that may match a selector and extract them
+        //   const selectors = Object.keys(cssProps).filter((key) =>
+        //     key.match(/(&|\>|\+|~)/g)
+        //   );
+        //   return ({ theme }) => {
+        //     // If cache has been set escape
+        //     if (cache) return cache;
+        //     // Omit any props that are selector styles and generate the base CSS
+        //     const css = parser({
+        //       ...(omit(cssProps, selectors) as Parameters<P>[0]),
+        //       theme,
+        //     });
+        //     // For every key that matches a selector call the parser with the value of that key
+        //     selectors.forEach((selector) => {
+        //       const selectorConfig = cssProps[selector];
+        //       if (isObject(selectorConfig)) {
+        //         // Set the key on our returned object to the generated CSS
+        //         css[selector] = parser(
+        //           Object.assign(selectorConfig, { theme })
+        //         );
+        //       }
+        //     });
+        //     // Set CSS to the cache
+        //     cache = css;
+        //     return cache;
+        //   }
+        // };
       },
@@ -155,26 +149,24 @@
       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 : {};
-          };
-        };
+        throw new Error('Not implemented'); // return (variants, options) => {
+        //   type Keys = keyof typeof variants;
+        //   // Set the default prop signature to variant if none has been configuraed.
+        //   const prop = options?.prop || 'variant';
+        //   const defaultVariant = options?.defaultVariant;
+        //   const variantFns = {} as Record<
+        //     Keys,
+        //     (props: ThemeProps<T>) => CSSObject
+        //   >;
+        //   // 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((key) => {
+        //     const variantKey = key as Keys;
+        //     const cssProps = variants[variantKey];
+        //     variantFns[variantKey] = css(cssProps);
+        //   });
+        //   // Return the initialed final props
+        //   return ({ [prop]: selected = defaultVariant, ...props }) => {
+        //     // Call the correct css function with our defaulted key or return an empty object
+        //     return variantFns?.[selected as Keys]?.(props) ?? {};
+        //   };
+        // };
       },
@@ -185,3 +177,5 @@ create: function create(config) {
         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 +182,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/transforms/index.js

@@ -13,3 +13,3 @@ function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
 
-import { isNumber } from 'lodash';
+import isNumber from 'lodash/isNumber';
 export var percentageOrAbsolute = function percentageOrAbsolute(coordinate) {
@@ -26,3 +26,3 @@ if (coordinate === 0) {
 };
-var valueWithUnit = /(\-?\d*\.?\d+)(%|\w*)/;
+var valueWithUnit = /(-?\d*\.?\d+)(%|\w*)/;
 export var parseSize = function parseSize(value) {
@@ -29,0 +29,0 @@ if (isNumber(value)) {

dist/types/props.d.ts

@@ -48,2 +48,6 @@ export declare type AbstractProps = Record<string, unknown>;
 }
+declare type PathImpl<T, Key extends keyof T> = Key extends string ? T[Key] extends Record<string, any> ? `${Key}.${PathImpl<T[Key], Exclude<keyof T[Key], keyof any[]>> & string}` | `${Key}.${Exclude<keyof T[Key], keyof any[]> & string}` : never : never;
+declare type PathImpl2<T> = PathImpl<T, keyof T> | keyof T;
+export declare type Path<T> = PathImpl2<T> extends string | keyof T ? PathImpl2<T> : keyof T;
+export declare type PathValue<T, P extends Path<T>> = P extends `${infer Key}.${infer Rest}` ? Key extends keyof T ? Rest extends Path<T[Key]> ? PathValue<T[Key], Rest> : never : never : P extends keyof T ? T[P] : never;
 export {};

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.6752ee.0",
   "keywords": [
@@ -16,2 +16,3 @@ "emotion",
   "module": "dist/index.js",
+  "types": "dist/index.d.ts",
   "publishConfig": {
@@ -44,3 +45,3 @@ "access": "public"
   },
-  "gitHead": "cea34db5bd67ec52fff721140b33d99951fd96b9"
+  "gitHead": "8cfff65ffb9596c4cd52515755147e998b9af8e7"
 }

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

Worsened metrics

Total package byte prevSize

95003

decreased by-26.74%

Number of package files

69

decreased by-8%

Lines of code

2190

decreased by-23.4%

No dependency changes