@codecademy/variance 0.20.6-alpha.90c336.0 → 0.20.6-alpha.9fa786.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/core.js CHANGED
@@ -1,23 +1,13 @@
1
1
  function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
2
-
3
2
  function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
4
-
5
3
  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); }
6
-
7
4
  function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
8
-
9
5
  function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
10
-
11
6
  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; }
12
-
13
7
  function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
14
-
15
8
  function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
16
-
17
9
  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; }
18
-
19
10
  function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
20
-
21
11
  import { get, identity, isArray, isObject, isUndefined, merge } from 'lodash';
22
12
  import { createScaleLookup } from './scales/createScaleLookup';
23
13
  import { getStaticCss } from './utils/getStaticProperties';
@@ -28,49 +18,42 @@ export var variance = {
28
18
  createParser: function createParser(config) {
29
19
  var propNames = orderPropNames(config);
30
20
  var breakpoints;
31
-
32
21
  var parser = function parser(props) {
33
22
  var styles = {};
34
- var theme = props.theme; // Attempt to cache the breakpoints if we have not yet or if theme has become available.
35
-
23
+ var theme = props.theme;
24
+ // Attempt to cache the breakpoints if we have not yet or if theme has become available.
36
25
  if (breakpoints === undefined || breakpoints === null && theme !== null && theme !== void 0 && theme.breakpoints) {
37
26
  // Save the breakpoints if we can
38
27
  breakpoints = parseBreakpoints(theme === null || theme === void 0 ? void 0 : theme.breakpoints);
39
- } // Loops over all prop names on the configured config to check for configured styles
40
-
28
+ }
41
29
 
30
+ // Loops over all prop names on the configured config to check for configured styles
42
31
  propNames.forEach(function (prop) {
43
32
  var property = config[prop];
44
33
  var value = get(props, prop);
45
-
46
34
  switch (_typeof(value)) {
47
35
  case 'string':
48
36
  case 'number':
49
37
  case 'function':
50
38
  return Object.assign(styles, property.styleFn(value, prop, props));
51
39
  // handle any props configured with the responsive notation
52
-
53
40
  case 'object':
54
41
  if (!breakpoints) {
55
42
  return;
56
- } // If it is an array the order of values is smallest to largest: [_, xs, ...]
57
-
58
-
43
+ }
44
+ // If it is an array the order of values is smallest to largest: [_, xs, ...]
59
45
  if (isMediaArray(value)) {
60
46
  return merge(styles, arrayParser(value, props, property, breakpoints.array));
61
- } // Check to see if value is an object matching the responsive syntax and generate the styles.
62
-
63
-
47
+ }
48
+ // Check to see if value is an object matching the responsive syntax and generate the styles.
64
49
  if (isMediaMap(value)) {
65
50
  return merge(styles, objectParser(value, props, property, breakpoints.map));
66
51
  }
67
-
68
52
  }
69
53
  });
70
54
  return breakpoints ? orderBreakpoints(styles, breakpoints.array) : styles;
71
- }; // return the parser function with the resulting meta information for further composition
72
-
73
-
55
+ };
56
+ // return the parser function with the resulting meta information for further composition
74
57
  return Object.assign(parser, {
75
58
  propNames: propNames,
76
59
  config: config
@@ -80,28 +63,24 @@ export var variance = {
80
63
  // that traverses the properties the function is responsible for.
81
64
  createTransform: function createTransform(prop, config) {
82
65
  var _config$transform = config.transform,
83
- transform = _config$transform === void 0 ? identity : _config$transform,
84
- property = config.property,
85
- _config$properties = config.properties,
86
- properties = _config$properties === void 0 ? [property] : _config$properties,
87
- scale = config.scale;
66
+ transform = _config$transform === void 0 ? identity : _config$transform,
67
+ property = config.property,
68
+ _config$properties = config.properties,
69
+ properties = _config$properties === void 0 ? [property] : _config$properties,
70
+ scale = config.scale;
88
71
  var getScaleValue = createScaleLookup(scale);
89
72
  var alwaysTransform = scale === undefined || isArray(scale);
90
73
  return _objectSpread(_objectSpread({}, config), {}, {
91
74
  prop: prop,
92
75
  styleFn: function styleFn(value, prop, props) {
93
76
  var _scaleValue;
94
-
95
77
  var styles = {};
96
-
97
78
  if (isUndefined(value)) {
98
79
  return styles;
99
80
  }
100
-
101
81
  var useTransform = false;
102
82
  var intermediateValue;
103
83
  var scaleValue;
104
-
105
84
  switch (_typeof(value)) {
106
85
  case 'number':
107
86
  case 'string':
@@ -109,39 +88,32 @@ export var variance = {
109
88
  useTransform = scaleValue !== undefined || alwaysTransform;
110
89
  intermediateValue = (_scaleValue = scaleValue) !== null && _scaleValue !== void 0 ? _scaleValue : value;
111
90
  break;
112
-
113
91
  case 'function':
114
92
  if (props.theme) {
115
93
  intermediateValue = value(props.theme);
116
94
  }
117
-
118
95
  break;
119
-
120
96
  default:
121
97
  return styles;
122
- } // for each property look up the scale value from theme if passed and apply any
123
- // final transforms to the value
124
-
98
+ }
125
99
 
100
+ // for each property look up the scale value from theme if passed and apply any
101
+ // final transforms to the value
126
102
  properties.forEach(function (property) {
127
103
  var styleValue = intermediateValue;
128
-
129
104
  if (useTransform && !isUndefined(styleValue)) {
130
105
  styleValue = transform(styleValue, property, props);
131
106
  }
132
-
133
107
  switch (_typeof(styleValue)) {
134
108
  case 'number':
135
109
  case 'string':
136
110
  return styles[property] = styleValue;
137
-
138
111
  case 'object':
139
112
  return Object.assign(styles, styleValue);
140
-
141
113
  default:
142
114
  }
143
- }); // return the resulting styles object
144
-
115
+ });
116
+ // return the resulting styles object
145
117
  return styles;
146
118
  }
147
119
  });
@@ -150,7 +122,6 @@ export var variance = {
150
122
  for (var _len = arguments.length, parsers = new Array(_len), _key = 0; _key < _len; _key++) {
151
123
  parsers[_key] = arguments[_key];
152
124
  }
153
-
154
125
  return this.createParser(parsers.reduce(function (carry, parser) {
155
126
  return _objectSpread(_objectSpread({}, carry), parser.config);
156
127
  }, {}));
@@ -161,13 +132,13 @@ export var variance = {
161
132
  return function (cssProps) {
162
133
  var cache;
163
134
  var allKeys = Object.keys(cssProps);
164
- /** Any key of the CSSProps that is not a System Prop or a Static CSS Property is treated as a nested selector */
165
135
 
136
+ /** Any key of the CSSProps that is not a System Prop or a Static CSS Property is treated as a nested selector */
166
137
  var selectors = allKeys.filter(function (key) {
167
138
  return !filteredProps.includes(key) && isObject(cssProps[key]);
168
139
  });
169
- /** Static CSS Properties get extracted if they match neither syntax */
170
140
 
141
+ /** Static CSS Properties get extracted if they match neither syntax */
171
142
  var staticCss = getStaticCss(cssProps, ['theme'].concat(_toConsumableArray(selectors), _toConsumableArray(filteredProps)));
172
143
  return function (_ref) {
173
144
  var theme = _ref.theme;
@@ -177,14 +148,13 @@ export var variance = {
177
148
  }));
178
149
  selectors.forEach(function (selector) {
179
150
  var _cssProps$selector;
180
-
181
151
  var selectorConfig = (_cssProps$selector = cssProps[selector]) !== null && _cssProps$selector !== void 0 ? _cssProps$selector : {};
182
152
  css[selector] = _objectSpread(_objectSpread({}, getStaticCss(selectorConfig, filteredProps)), parser(_objectSpread(_objectSpread({}, selectorConfig), {}, {
183
153
  theme: theme
184
154
  })));
185
155
  });
186
- /** Merge the static and generated css and save it to the cache */
187
156
 
157
+ /** Merge the static and generated css and save it to the cache */
188
158
  cache = _objectSpread(_objectSpread({}, staticCss), css);
189
159
  return cache;
190
160
  };
@@ -194,11 +164,11 @@ export var variance = {
194
164
  var css = this.createCss(config);
195
165
  return function (_ref2) {
196
166
  var _ref2$prop = _ref2.prop,
197
- prop = _ref2$prop === void 0 ? 'variant' : _ref2$prop,
198
- defaultVariant = _ref2.defaultVariant,
199
- _ref2$base = _ref2.base,
200
- base = _ref2$base === void 0 ? {} : _ref2$base,
201
- variants = _ref2.variants;
167
+ prop = _ref2$prop === void 0 ? 'variant' : _ref2$prop,
168
+ defaultVariant = _ref2.defaultVariant,
169
+ _ref2$base = _ref2.base,
170
+ base = _ref2$base === void 0 ? {} : _ref2$base,
171
+ variants = _ref2.variants;
202
172
  var baseFn = css(base);
203
173
  var variantFns = {};
204
174
  Object.keys(variants).forEach(function (key) {
@@ -208,9 +178,8 @@ export var variance = {
208
178
  });
209
179
  return function (props) {
210
180
  var _variantFns;
211
-
212
181
  var _props$prop = props[prop],
213
- selected = _props$prop === void 0 ? defaultVariant : _props$prop;
182
+ selected = _props$prop === void 0 ? defaultVariant : _props$prop;
214
183
  var styles = {};
215
184
  if (!selected) return styles;
216
185
  return merge(styles, baseFn(props), variantFns === null || variantFns === void 0 ? void 0 : (_variantFns = variantFns[selected]) === null || _variantFns === void 0 ? void 0 : _variantFns.call(variantFns, props));
@@ -237,15 +206,16 @@ export var variance = {
237
206
  };
238
207
  },
239
208
  create: function create(config) {
240
- var transforms = {}; // Create a transform function for each of the props
209
+ var transforms = {};
241
210
 
211
+ // Create a transform function for each of the props
242
212
  for (var prop in config) {
243
213
  if (typeof prop === 'string') {
244
214
  transforms[prop] = this.createTransform(prop, config[prop]);
245
215
  }
246
- } // Create a parser that handles all the props within the config
247
-
216
+ }
248
217
 
218
+ // Create a parser that handles all the props within the config
249
219
  return this.createParser(transforms);
250
220
  }
251
221
  };
@@ -1,36 +1,25 @@
1
1
  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; }
2
-
3
2
  function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
4
-
5
3
  function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
6
-
7
4
  function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, "prototype", { writable: false }); return Constructor; }
8
-
5
+ function _classPrivateFieldInitSpec(obj, privateMap, value) { _checkPrivateRedeclaration(obj, privateMap); privateMap.set(obj, value); }
6
+ function _checkPrivateRedeclaration(obj, privateCollection) { if (privateCollection.has(obj)) { throw new TypeError("Cannot initialize the same private elements twice on an object"); } }
9
7
  function _classPrivateFieldGet(receiver, privateMap) { var descriptor = _classExtractFieldDescriptor(receiver, privateMap, "get"); return _classApplyDescriptorGet(receiver, descriptor); }
10
-
11
8
  function _classApplyDescriptorGet(receiver, descriptor) { if (descriptor.get) { return descriptor.get.call(receiver); } return descriptor.value; }
12
-
13
9
  function _classPrivateFieldSet(receiver, privateMap, value) { var descriptor = _classExtractFieldDescriptor(receiver, privateMap, "set"); _classApplyDescriptorSet(receiver, descriptor, value); return value; }
14
-
15
10
  function _classExtractFieldDescriptor(receiver, privateMap, action) { if (!privateMap.has(receiver)) { throw new TypeError("attempted to " + action + " private field on non-instance"); } return privateMap.get(receiver); }
16
-
17
11
  function _classApplyDescriptorSet(receiver, descriptor, value) { if (descriptor.set) { descriptor.set.call(receiver, value); } else { if (!descriptor.writable) { throw new TypeError("attempted to set read only private field"); } descriptor.value = value; } }
18
-
19
12
  import { mapValues, merge } from 'lodash';
20
13
  import { flattenScale } from '../utils/flattenScale';
21
14
  import { serializeTokens } from '../utils/serializeTokens';
22
-
23
- var _theme = new WeakMap();
24
-
15
+ var _theme = /*#__PURE__*/new WeakMap();
25
16
  var ThemeBuilder = /*#__PURE__*/function () {
26
17
  function ThemeBuilder(baseTheme) {
27
18
  _classCallCheck(this, ThemeBuilder);
28
-
29
- _theme.set(this, {
19
+ _classPrivateFieldInitSpec(this, _theme, {
30
20
  writable: true,
31
21
  value: {}
32
22
  });
33
-
34
23
  _classPrivateFieldSet(this, _theme, baseTheme);
35
24
  }
36
25
  /**
@@ -38,38 +27,31 @@ var ThemeBuilder = /*#__PURE__*/function () {
38
27
  * @param key A key of the current theme to transform into CSS Variables and Variable References
39
28
  * @example .createScaleVariables('fontSize')
40
29
  */
41
-
42
-
43
30
  _createClass(ThemeBuilder, [{
44
31
  key: "createScaleVariables",
45
32
  value: function createScaleVariables(key) {
46
33
  var _merge;
47
-
48
34
  var _serializeTokens = serializeTokens(_classPrivateFieldGet(this, _theme)[key], key, _classPrivateFieldGet(this, _theme)),
49
- variables = _serializeTokens.variables,
50
- tokens = _serializeTokens.tokens;
51
-
35
+ variables = _serializeTokens.variables,
36
+ tokens = _serializeTokens.tokens;
52
37
  _classPrivateFieldSet(this, _theme, merge({}, _classPrivateFieldGet(this, _theme), (_merge = {}, _defineProperty(_merge, key, tokens), _defineProperty(_merge, "_variables", {
53
38
  root: variables
54
39
  }), _defineProperty(_merge, "_tokens", _defineProperty({}, key, _classPrivateFieldGet(this, _theme)[key])), _merge)));
55
-
56
40
  return this;
57
41
  }
42
+
58
43
  /**
59
44
  *
60
45
  * @param colors A map of color tokens to add to the theme. These tokens are immediately converted to CSS Variables `--color-${key}`.
61
46
  * @example .addColors({ navy: 'navy', hyper: 'purple' })
62
47
  */
63
-
64
48
  }, {
65
49
  key: "addColors",
66
50
  value: function addColors(colors) {
67
51
  var flatColors = flattenScale(colors);
68
-
69
52
  var _serializeTokens2 = serializeTokens(flatColors, 'color', _classPrivateFieldGet(this, _theme)),
70
- variables = _serializeTokens2.variables,
71
- tokens = _serializeTokens2.tokens;
72
-
53
+ variables = _serializeTokens2.variables,
54
+ tokens = _serializeTokens2.tokens;
73
55
  _classPrivateFieldSet(this, _theme, merge({}, _classPrivateFieldGet(this, _theme), {
74
56
  colors: tokens,
75
57
  _variables: {
@@ -79,38 +61,32 @@ var ThemeBuilder = /*#__PURE__*/function () {
79
61
  colors: flatColors
80
62
  }
81
63
  }));
82
-
83
64
  return this;
84
65
  }
66
+
85
67
  /**
86
68
  *
87
69
  * @param initialMode A key of the object passed for modes. This sets the default state for the theme and transforms the correct variables.
88
70
  * @param modes A map of color modes with keys of each possible mode with a value of alias to color keys. This must be called after `addColors`
89
71
  * @example .addColorModes('light', { light: { primary: 'hyper' }, { dark: { primary: 'navy' } } })
90
72
  */
91
-
92
73
  }, {
93
74
  key: "addColorModes",
94
75
  value: function addColorModes(initialMode, modeConfig) {
95
76
  var _classPrivateFieldGet2,
96
- _this = this;
97
-
77
+ _this = this;
98
78
  var modes = mapValues(modeConfig, function (mode) {
99
79
  return flattenScale(mode);
100
80
  });
101
-
102
81
  var _serializeTokens3 = serializeTokens(mapValues(merge({}, (_classPrivateFieldGet2 = _classPrivateFieldGet(this, _theme).modes) === null || _classPrivateFieldGet2 === void 0 ? void 0 : _classPrivateFieldGet2[initialMode], modes[initialMode]), function (color) {
103
- return _classPrivateFieldGet(_this, _theme).colors[color];
104
- }), 'color', _classPrivateFieldGet(this, _theme)),
105
- colors = _serializeTokens3.tokens,
106
- variables = _serializeTokens3.variables;
107
-
82
+ return _classPrivateFieldGet(_this, _theme).colors[color];
83
+ }), 'color', _classPrivateFieldGet(this, _theme)),
84
+ colors = _serializeTokens3.tokens,
85
+ variables = _serializeTokens3.variables;
108
86
  var getColorValue = function getColorValue(color) {
109
87
  var _classPrivateFieldGet3, _classPrivateFieldGet4;
110
-
111
88
  return (_classPrivateFieldGet3 = _classPrivateFieldGet(_this, _theme)._tokens) === null || _classPrivateFieldGet3 === void 0 ? void 0 : (_classPrivateFieldGet4 = _classPrivateFieldGet3.colors) === null || _classPrivateFieldGet4 === void 0 ? void 0 : _classPrivateFieldGet4[color];
112
89
  };
113
-
114
90
  _classPrivateFieldSet(this, _theme, merge({}, _classPrivateFieldGet(this, _theme), {
115
91
  colors: colors,
116
92
  modes: modes,
@@ -125,41 +101,38 @@ var ThemeBuilder = /*#__PURE__*/function () {
125
101
  })
126
102
  }
127
103
  }));
128
-
129
104
  return this;
130
105
  }
106
+
131
107
  /**
132
108
  *
133
109
  * @param key A new key of theme
134
110
  * @param createScale A function that accepts the current theme and returns a new object of scale values.
135
111
  * @example .addScale('fonts', () => ({ basic: 'Gotham', cool: 'Wingdings' }))
136
112
  */
137
-
138
113
  }, {
139
114
  key: "addScale",
140
115
  value: function addScale(key, createScale) {
141
116
  _classPrivateFieldSet(this, _theme, merge({}, _classPrivateFieldGet(this, _theme), _defineProperty({}, key, flattenScale(createScale(_classPrivateFieldGet(this, _theme))))));
142
-
143
117
  return this;
144
118
  }
119
+
145
120
  /**
146
121
  *
147
122
  * @param key A current key of theme to be updated with new or computed values
148
123
  * @param updateFn A function that accepts an argument of the current values at the specified keys an returns a map of new values to merge.
149
124
  * @example .updateScale('fonts', ({ basic }) => ({ basicFallback: `{basic}, Montserrat` }))
150
125
  */
151
-
152
126
  }, {
153
127
  key: "updateScale",
154
128
  value: function updateScale(key, updateFn) {
155
129
  _classPrivateFieldSet(this, _theme, merge({}, _classPrivateFieldGet(this, _theme), _defineProperty({}, key, updateFn(_classPrivateFieldGet(this, _theme)[key]))));
156
-
157
130
  return this;
158
131
  }
132
+
159
133
  /**
160
134
  * This finalizes the theme build and returns the final theme and variables to be provided.
161
135
  */
162
-
163
136
  }, {
164
137
  key: "build",
165
138
  value: function build() {
@@ -169,10 +142,8 @@ var ThemeBuilder = /*#__PURE__*/function () {
169
142
  });
170
143
  }
171
144
  }]);
172
-
173
145
  return ThemeBuilder;
174
146
  }();
175
-
176
147
  export function createTheme(base) {
177
148
  return new ThemeBuilder(base);
178
149
  }
@@ -1,9 +1,6 @@
1
1
  function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
2
-
3
2
  function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
4
-
5
3
  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; }
6
-
7
4
  import { mapValues } from 'lodash';
8
5
  import { createTheme } from './createTheme';
9
6
  describe('createTheme', function () {
@@ -5,19 +5,16 @@ export var createScaleLookup = function createScaleLookup(scale) {
5
5
  return get(props, ['theme', scale, val]);
6
6
  };
7
7
  }
8
-
9
8
  if (isArray(scale)) {
10
9
  return function (val) {
11
10
  return val;
12
11
  };
13
12
  }
14
-
15
13
  if (isObject(scale)) {
16
14
  return function (val) {
17
15
  return get(scale, val);
18
16
  };
19
17
  }
20
-
21
18
  return function () {
22
19
  return undefined;
23
20
  };
@@ -1,25 +1,17 @@
1
1
  function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
2
-
3
2
  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."); }
4
-
5
3
  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); }
6
-
7
4
  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; }
8
-
9
5
  function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
10
-
11
6
  function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
12
-
13
7
  import { isNumber } from 'lodash';
14
8
  export var percentageOrAbsolute = function percentageOrAbsolute(coordinate) {
15
9
  if (coordinate === 0) {
16
10
  return coordinate;
17
11
  }
18
-
19
12
  if (coordinate <= 1 && coordinate >= -1) {
20
13
  return "".concat(coordinate * 100, "%");
21
14
  }
22
-
23
15
  return "".concat(coordinate, "px");
24
16
  };
25
17
  var valueWithUnit = /(-?\d*\.?\d+)(%|\w*)/;
@@ -27,21 +19,17 @@ export var transformSize = function transformSize(value) {
27
19
  if (isNumber(value)) {
28
20
  return percentageOrAbsolute(value);
29
21
  }
30
-
31
22
  if (value.includes('calc')) {
32
23
  return value;
33
24
  }
34
-
35
25
  var _ref = valueWithUnit.exec(value) || [],
36
- _ref2 = _slicedToArray(_ref, 3),
37
- match = _ref2[0],
38
- number = _ref2[1],
39
- unit = _ref2[2];
40
-
26
+ _ref2 = _slicedToArray(_ref, 3),
27
+ match = _ref2[0],
28
+ number = _ref2[1],
29
+ unit = _ref2[2];
41
30
  if (match === undefined) {
42
31
  return value;
43
32
  }
44
-
45
33
  var numericValue = parseFloat(number);
46
34
  return !unit ? percentageOrAbsolute(numericValue) : "".concat(numericValue).concat(unit);
47
35
  };
@@ -1,10 +1,8 @@
1
1
  function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
2
-
3
2
  function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
4
-
5
3
  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; }
6
-
7
4
  import { isObject } from 'lodash';
5
+
8
6
  /**
9
7
  * Returns an exhaustive list of all possible paths of an object T for keys K.
10
8
  * Possibilities are returned as `k1.k2.k3`.
@@ -14,11 +12,9 @@ export function flattenScale(object, path) {
14
12
  return Object.keys(object).reduce(function (carry, key) {
15
13
  var nextKey = path ? "".concat(path).concat(key === '_' ? '' : "-".concat(key)) : key;
16
14
  var current = object[key];
17
-
18
15
  if (isObject(current)) {
19
16
  return _objectSpread(_objectSpread({}, carry), flattenScale(current, nextKey));
20
17
  }
21
-
22
18
  return _objectSpread(_objectSpread({}, carry), {}, _defineProperty({}, nextKey, object[key]));
23
19
  }, {});
24
20
  }
@@ -4,47 +4,40 @@ var SORT = {
4
4
  B_BEFORE_A: 1,
5
5
  EQUAL: 1
6
6
  };
7
-
8
7
  var compare = function compare(a, b) {
9
8
  if (a < b) return SORT.A_BEFORE_B;
10
9
  if (b < a) return SORT.B_BEFORE_A;
11
10
  return SORT.EQUAL;
12
11
  };
12
+
13
13
  /**
14
14
  * Orders all properties by the most dependent props
15
15
  * @param config
16
16
  */
17
-
18
-
19
17
  export var orderPropNames = function orderPropNames(config) {
20
18
  return Object.keys(config).sort(function (a, b) {
21
19
  var aConf = config[a],
22
- bConf = config[b];
20
+ bConf = config[b];
23
21
  var aProp = aConf.property,
24
- _aConf$properties = aConf.properties,
25
- aProperties = _aConf$properties === void 0 ? [] : _aConf$properties;
22
+ _aConf$properties = aConf.properties,
23
+ aProperties = _aConf$properties === void 0 ? [] : _aConf$properties;
26
24
  var bProp = bConf.property,
27
- _bConf$properties = bConf.properties,
28
- bProperties = _bConf$properties === void 0 ? [] : _bConf$properties;
25
+ _bConf$properties = bConf.properties,
26
+ bProperties = _bConf$properties === void 0 ? [] : _bConf$properties;
29
27
  var aIsShorthand = SHORTHAND_PROPERTIES.includes(aProp);
30
28
  var bIsShorthand = SHORTHAND_PROPERTIES.includes(bProp);
31
-
32
29
  if (aIsShorthand && bIsShorthand) {
33
30
  var aNum = aProperties.length;
34
31
  var bNum = bProperties.length;
35
-
36
32
  if (aProp !== bProp) {
37
33
  return compare(SHORTHAND_PROPERTIES.indexOf(aProp), SHORTHAND_PROPERTIES.indexOf(bProp));
38
34
  }
39
-
40
35
  if (aProp === bProp) {
41
36
  if (aNum === 0) return SORT.A_BEFORE_B;
42
37
  if (bNum === 0) return SORT.B_BEFORE_A;
43
38
  }
44
-
45
39
  return compare(bNum, aNum);
46
40
  }
47
-
48
41
  if (aIsShorthand) return SORT.A_BEFORE_B;
49
42
  if (bIsShorthand) return SORT.B_BEFORE_A;
50
43
  return SORT.EQUAL;
@@ -1,38 +1,29 @@
1
+ var _excluded = ["_"];
1
2
  function _toArray(arr) { return _arrayWithHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableRest(); }
2
-
3
3
  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."); }
4
-
5
4
  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); }
6
-
7
5
  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; }
8
-
9
6
  function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
10
-
11
7
  function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
12
-
13
8
  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; }
14
-
15
9
  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; }
16
-
17
10
  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; }
18
-
19
11
  import { intersection, omit } from 'lodash';
20
12
  var BREAKPOINT_KEYS = ['_', 'xs', 'sm', 'md', 'lg', 'xl'];
13
+
21
14
  /**
22
15
  * Destructures the themes breakpoints into an ordered structure to traverse
23
16
  */
24
-
25
17
  export var parseBreakpoints = function parseBreakpoints(breakpoints) {
26
18
  if (breakpoints === undefined) return null;
27
-
28
19
  var _ref = breakpoints !== null && breakpoints !== void 0 ? breakpoints : {},
29
- xs = _ref.xs,
30
- sm = _ref.sm,
31
- md = _ref.md,
32
- lg = _ref.lg,
33
- xl = _ref.xl; // Ensure order for mapping
34
-
20
+ xs = _ref.xs,
21
+ sm = _ref.sm,
22
+ md = _ref.md,
23
+ lg = _ref.lg,
24
+ xl = _ref.xl;
35
25
 
26
+ // Ensure order for mapping
36
27
  return {
37
28
  map: breakpoints,
38
29
  array: [xs, sm, md, lg, xl]
@@ -47,15 +38,14 @@ export var isMediaMap = function isMediaMap(val) {
47
38
  export var objectParser = function objectParser(value, props, config, breakpoints) {
48
39
  var styles = {};
49
40
  var styleFn = config.styleFn,
50
- prop = config.prop;
51
-
41
+ prop = config.prop;
52
42
  var _ = value._,
53
- rest = _objectWithoutProperties(value, ["_"]); // the keyof 'base' is base styles
54
-
43
+ rest = _objectWithoutProperties(value, _excluded);
44
+ // the keyof 'base' is base styles
45
+ if (_) Object.assign(styles, styleFn(_, prop, props));
55
46
 
56
- if (_) Object.assign(styles, styleFn(_, prop, props)); // Map over remaining keys and merge the corresponding breakpoint styles
47
+ // Map over remaining keys and merge the corresponding breakpoint styles
57
48
  // for that property.
58
-
59
49
  Object.keys(breakpoints).forEach(function (breakpointKey) {
60
50
  var bpStyles = rest[breakpointKey];
61
51
  if (typeof bpStyles === 'undefined') return;
@@ -66,16 +56,15 @@ export var objectParser = function objectParser(value, props, config, breakpoint
66
56
  export var arrayParser = function arrayParser(value, props, config, breakpoints) {
67
57
  var styles = {};
68
58
  var styleFn = config.styleFn,
69
- prop = config.prop;
70
-
59
+ prop = config.prop;
71
60
  var _value = _toArray(value),
72
- _ = _value[0],
73
- rest = _value.slice(1); // the first index is base styles
61
+ _ = _value[0],
62
+ rest = _value.slice(1);
63
+ // the first index is base styles
64
+ if (_) Object.assign(styles, styleFn(_, prop, props));
74
65
 
75
-
76
- if (_) Object.assign(styles, styleFn(_, prop, props)); // Map over each value in the array and merge the corresponding breakpoint styles
66
+ // Map over each value in the array and merge the corresponding breakpoint styles
77
67
  // for that property.
78
-
79
68
  rest.forEach(function (val, i) {
80
69
  var breakpointKey = breakpoints[i];
81
70
  if (!breakpointKey || typeof val === 'undefined') return;
@@ -1,32 +1,24 @@
1
+ var _excluded = ["_", "base"];
1
2
  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; }
2
-
3
3
  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; }
4
-
5
4
  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; }
6
-
7
5
  import { isObject, merge } from 'lodash';
8
-
9
6
  var templateBreakpoints = function templateBreakpoints(value, alias, theme) {
10
7
  if (isObject(value)) {
11
8
  var _ = value._,
12
- base = value.base,
13
- rest = _objectWithoutProperties(value, ["_", "base"]);
14
-
9
+ base = value.base,
10
+ rest = _objectWithoutProperties(value, _excluded);
15
11
  var css = _defineProperty({}, alias, _ !== null && _ !== void 0 ? _ : base);
16
-
17
12
  if (theme) {
18
13
  var breakpoints = theme.breakpoints;
19
14
  Object.keys(breakpoints).forEach(function (key) {
20
15
  css[breakpoints[key]] = _defineProperty({}, alias, rest[key]);
21
16
  });
22
17
  }
23
-
24
18
  return css;
25
19
  }
26
-
27
20
  return _defineProperty({}, alias, value);
28
21
  };
29
-
30
22
  export var serializeTokens = function serializeTokens(tokens, prefix, theme) {
31
23
  var tokenReferences = {};
32
24
  var tokenVariables = {};
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@codecademy/variance",
3
3
  "description": "Constraint based CSS in JS for building scalable design systems",
4
- "version": "0.20.6-alpha.90c336.0",
4
+ "version": "0.20.6-alpha.9fa786.0",
5
5
  "keywords": [
6
6
  "emotion",
7
7
  "css",
@@ -42,5 +42,5 @@
42
42
  "react": "18.2.0",
43
43
  "react-test-renderer": "18.2.0"
44
44
  },
45
- "gitHead": "247acab20cfe9f4266103a8505bdaefaa4d20435"
45
+ "gitHead": "bcee3f6691770960bcc8020a319325458666d8c2"
46
46
  }