@stitches/core - npm Package Compare versions

Comparing version 0.0.3-canary.1 to 0.0.3-canary.2

dist/core.cjs.dev.js

@@ -188,2 +188,8 @@ 'use strict';
 
+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; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(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 _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
@@ -368,2 +374,10 @@
 });
+var gap = createPropertyParser(function (tokens, css, value, index) {
+  if (index === 0) {
+    css.rowGap = tokens.space[value] || value;
+    css.columnGap = tokens.space[value] || value;
+  } else {
+    css.columnGap = tokens.space[value] || value;
+  }
+});
 var margin = createPropertyParser(function (tokens, css, value, index) {
@@ -538,8 +552,36 @@ if (index === 0) {
 });
+var flex = function flex(tokens, value) {
+  var parsedValue = tokenizeValue(value)[0];
 
-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; }
+  if (parsedValue.length === 2) {
+    return _objectSpread({
+      flexGrow: parsedValue[0]
+    }, isNaN(Number(parsedValue[1])) ? {
+      flexShrink: '1',
+      flexBasis: parsedValue[1]
+    } : {
+      flexShrink: parsedValue[1],
+      flexBasis: '0%'
+    });
+  }
 
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+  if (parsedValue.length === 3) {
+    return {
+      flexGrow: parsedValue[0],
+      flexShrink: parsedValue[1],
+      flexBasis: parsedValue[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; }
+  return isNaN(Number(parsedValue[0])) ? {
+    flexGrow: '1',
+    flexShrink: '1',
+    flexBasis: parsedValue[0]
+  } : {
+    flexGrow: parsedValue[0],
+    flexShrink: '1',
+    flexBasis: '0%'
+  };
+};
+
 var MAIN_BREAKPOINT_ID = 'initial';
@@ -704,29 +746,2 @@ var cssPropToToken = {
   boxShadow: boxShadow,
-  flex: function flex(tokens, value) {
-    if (Array.isArray(value)) {
-      if (value.length === 2) {
-        return _objectSpread({
-          flexGrow: value[0]
-        }, isNaN(value[1]) ? {
-          flexBasis: value[1]
-        } : {
-          flexShrink: value[1]
-        });
-      }
-
-      if (value.length === 3) {
-        return {
-          flexGrow: value[0],
-          flexShrink: value[1],
-          flexBasis: value[2]
-        };
-      }
-    }
-
-    return isNaN(value) ? {
-      flexBasis: value
-    } : {
-      flexGrow: value
-    };
-  },
   overflow: function overflow(tokens, value) {
@@ -752,3 +767,5 @@ return {
   borderRight: borderRight,
-  textDecoration: textDecoration
+  textDecoration: textDecoration,
+  gap: gap,
+  flex: flex
 };
@@ -812,27 +829,25 @@ var getVendorPrefixAndProps = function getVendorPrefixAndProps(env) {
 
-function _slicedToArray$1(arr, i) { return _arrayWithHoles$1(arr) || _iterableToArrayLimit$1(arr, i) || _unsupportedIterableToArray$1(arr, i) || _nonIterableRest$1(); }
+function _defineProperty$1(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 _nonIterableRest$1() { 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 _createForOfIteratorHelper(o, allowArrayLike) { var it; if (typeof Symbol === "undefined" || o[Symbol.iterator] == null) { if (Array.isArray(o) || (it = _unsupportedIterableToArray$1(o)) || allowArrayLike && o && typeof o.length === "number") { if (it) o = it; var i = 0; var F = function F() {}; return { s: F, n: function n() { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }, e: function e(_e) { throw _e; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var normalCompletion = true, didErr = false, err; return { s: function s() { it = o[Symbol.iterator](); }, n: function n() { var step = it.next(); normalCompletion = step.done; return step; }, e: function e(_e2) { didErr = true; err = _e2; }, f: function f() { try { if (!normalCompletion && it["return"] != null) it["return"](); } finally { if (didErr) throw err; } } }; }
 
-function _iterableToArrayLimit$1(arr, i) { if (typeof Symbol === "undefined" || !(Symbol.iterator in Object(arr))) return; var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_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; }
+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); }
 
-function _arrayWithHoles$1(arr) { if (Array.isArray(arr)) return arr; }
+function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray$1(arr) || _nonIterableSpread(); }
 
-function _defineProperty$1(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 _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."); }
 
-function _createForOfIteratorHelper(o, allowArrayLike) { var it; if (typeof Symbol === "undefined" || o[Symbol.iterator] == null) { if (Array.isArray(o) || (it = _unsupportedIterableToArray$1(o)) || allowArrayLike && o && typeof o.length === "number") { if (it) o = it; var i = 0; var F = function F() {}; return { s: F, n: function n() { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }, e: function e(_e2) { throw _e2; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var normalCompletion = true, didErr = false, err; return { s: function s() { it = o[Symbol.iterator](); }, n: function n() { var step = it.next(); normalCompletion = step.done; return step; }, e: function e(_e3) { didErr = true; err = _e3; }, f: function f() { try { if (!normalCompletion && it["return"] != null) it["return"](); } finally { if (didErr) throw err; } } }; }
+function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray$1(arr); }
 
-function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray$1(arr) || _nonIterableSpread(); }
+function _toArray(arr) { return _arrayWithHoles$1(arr) || _iterableToArray(arr) || _unsupportedIterableToArray$1(arr) || _nonIterableRest$1(); }
 
-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."); }
+function _nonIterableRest$1() { 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$1(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray$1(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$1(o, minLen); }
 
+function _arrayLikeToArray$1(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 _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray$1(arr); }
-
-function _arrayLikeToArray$1(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 _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); }
+function _arrayWithHoles$1(arr) { if (Array.isArray(arr)) return arr; }
 var _ATOM = ATOM;
@@ -852,3 +867,3 @@ var hotReloadingCache = new Map();
   var cssRuleClassName = className ? ".".concat(className) : '';
-  if (selector && selector.includes('&')) return selector.replace(/&/gi, cssRuleClassName);
+  if (selector && selector.includes('%')) return selector.replace(/\%/gi, cssRuleClassName);
 
@@ -885,2 +900,76 @@ if (selector) {
 /**
+ * Merges two selectors together while also handling pseudos correctly
+ */
+
+
+var mergeSelectors = function mergeSelectors(firstSelector, secondSelector) {
+  // a pseudo class and starts with &, normalize it:
+  var normalizedSelector = secondSelector[0] === '&' && secondSelector[1] === ':' ? secondSelector.substr(1) : secondSelector;
+
+  if (!firstSelector && normalizedSelector.indexOf('&') > -1) {
+    return normalizedSelector.replace(/&/g, "%".concat(firstSelector));
+  }
+
+  if (normalizedSelector.indexOf('&') > -1) {
+    return normalizedSelector.replace(/&/g, firstSelector);
+  }
+
+  if (normalizedSelector[0] === ':') {
+    return normalizedSelector.replace(':', "".concat(firstSelector, ":"));
+  }
+
+  return "".concat(firstSelector, " ").concat(normalizedSelector.trim());
+}; // this is hacky as hell.
+// we should experiment handling pseudo classes
+// specificity via buckets in the sheet
+
+
+var fixSpecificity = function fixSpecificity(selectorString) {
+  var _selectorString = selectorString; // We want certain pseudo selectors to take precedence over other pseudo
+  // selectors, so we increase specificity
+
+  if (_selectorString[0] === '%' || !_selectorString.match('%')) {
+    var _selectorString2, _selectorString3, _selectorString4, _selectorString5, _selectorString6;
+
+    if ((_selectorString2 = _selectorString) === null || _selectorString2 === void 0 ? void 0 : _selectorString2.match(/\:hover/)) {
+      _selectorString = "%".concat(_selectorString);
+    } else if ((_selectorString3 = _selectorString) === null || _selectorString3 === void 0 ? void 0 : _selectorString3.match(/\:active/)) {
+      _selectorString = "%%".concat(_selectorString);
+    } else if ((_selectorString4 = _selectorString) === null || _selectorString4 === void 0 ? void 0 : _selectorString4.match(/\:focus|\:focus-visible/)) {
+      _selectorString = "%%%".concat(_selectorString);
+    } else if ((_selectorString5 = _selectorString) === null || _selectorString5 === void 0 ? void 0 : _selectorString5.match(/\:read-only/)) {
+      _selectorString = "%%%%".concat(_selectorString);
+    } else if ((_selectorString6 = _selectorString) === null || _selectorString6 === void 0 ? void 0 : _selectorString6.match(/\:disabled/)) {
+      _selectorString = "%%%%%".concat(_selectorString);
+    }
+  }
+
+  return _selectorString;
+};
+
+var allPossibleCases = function allPossibleCases(_ref) {
+  var _ref2 = _toArray(_ref),
+      first = _ref2[0],
+      rest = _ref2.slice(1);
+
+  if (rest.length === 0) {
+    if (first) {
+      return first;
+    }
+
+    return [];
+  } else {
+    var result = [];
+    var allCasesOfRest = allPossibleCases(rest);
+
+    for (var i = 0; i < allCasesOfRest.length; i++) {
+      for (var j = 0; j < first.length; j++) {
+        result.push(mergeSelectors(first[j], allCasesOfRest[i]));
+      }
+    }
+
+    return result;
+  }
+};
+/**
  * iterates over a style object keys and values,
@@ -899,5 +988,8 @@ * resolving them to their final form then calls the value callback with the prop, value
 var processStyleObject = function processStyleObject(obj, config, valueMiddleware) {
-  var currentNestingPath = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : [];
-  var shouldHandleUtils = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : true;
-  var shouldHandleSpecificityProps = arguments.length > 5 && arguments[5] !== undefined ? arguments[5] : true;
+  var nestingPath = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : '%';
+  var selectors = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : [];
+  var breakpoint = arguments.length > 5 && arguments[5] !== undefined ? arguments[5] : MAIN_BREAKPOINT_ID;
+  var mediaQueries = arguments.length > 6 && arguments[6] !== undefined ? arguments[6] : [];
+  var shouldHandleUtils = arguments.length > 7 && arguments[7] !== undefined ? arguments[7] : true;
+  var shouldHandleSpecificityProps = arguments.length > 8 && arguments[8] !== undefined ? arguments[8] : true;
 
@@ -909,15 +1001,13 @@ // key: css prop or override or a selector
     var val = obj[key];
-    var isUtilProp = shouldHandleUtils && key in config.utils;
-    var isSpecificityProp = shouldHandleSpecificityProps && !isUtilProp && key in specificityProps;
-    /** Nested styles: */
+    /** Breakpoint */
 
-    if (_typeof(val) === 'object' && !isSpecificityProp && !isUtilProp) {
-      // Atom value:
-      if (val[ATOM]) {
-        valueMiddleware(key, val, currentNestingPath);
-        continue;
-      } // handle the value object
+    if (key in config.breakpoints) {
+      processStyleObject(val, config, valueMiddleware, nestingPath, selectors, key, mediaQueries);
+      continue;
+    }
+    /** Media query */
 
 
-      processStyleObject(val, config, valueMiddleware, [].concat(_toConsumableArray(currentNestingPath), [key]));
+    if (key[0] === '@') {
+      processStyleObject(val, config, valueMiddleware, nestingPath, selectors, breakpoint, [].concat(_toConsumableArray(mediaQueries), [key]));
       continue;
@@ -928,60 +1018,78 @@ }
 
-    if (isUtilProp) {
+    if (shouldHandleUtils && key in config.utils) {
       // Resolve the util from the util function:
-      var resolvedUtils = config.utils[key](val, config);
-      processStyleObject(resolvedUtils, config, valueMiddleware, _toConsumableArray(currentNestingPath), false);
+      var resolvedUtils = config.utils[key](val, config); // prettier-ignore
+
+      processStyleObject(resolvedUtils, config, valueMiddleware, nestingPath, selectors, breakpoint, mediaQueries, false);
       continue;
     }
-    /** Specificity Props: */
-    // shorthand css props or css props that has baked in handling:
-    // see specificityProps in ./utils
+    /**
+     * Specificity Props:
+     * shorthand css props or css props that has baked in handling:
+     * see specificityProps in ./utils
+     */
 
 
-    if (isSpecificityProp) {
-      var resolvedSpecificityProps = specificityProps[key](config.tokens, val);
-      processStyleObject(resolvedSpecificityProps, config, valueMiddleware, _toConsumableArray(currentNestingPath), false, false);
+    if (!(key in config.utils) && shouldHandleSpecificityProps && key in specificityProps) {
+      var resolvedSpecificityProps = specificityProps[key](config.tokens, val); // prettier-ignore
+
+      processStyleObject(resolvedSpecificityProps, config, valueMiddleware, nestingPath, selectors, breakpoint, mediaQueries, false, false);
       continue;
     }
+    /** Nested styles: */
 
+
+    if (_typeof(val) === 'object') {
+      // Atom value:
+      if (val[ATOM]) {
+        valueMiddleware(key, val, breakpoint, mediaQueries, nestingPath);
+        continue;
+      }
+      /**
+       * handle path merging:
+       */
+
+      /** Current key is a comma separated rule */
+
+
+      if (key.indexOf(',') > -1) {
+        // split by comma and then merge it with he current nesting path
+        var newSelectors = [].concat(_toConsumableArray(selectors), [key.split(',').map(function (el) {
+          return mergeSelectors(nestingPath, el);
+        })]); // reset the nesting path to '' as it's already no part of selectors
+
+        processStyleObject(val, config, valueMiddleware, '', newSelectors, breakpoint, mediaQueries);
+        continue;
+      }
+      /** Current key is a normal css selector */
+
+
+      processStyleObject(val, config, valueMiddleware, // merging normal selectors
+      // this is the case when we have no comma separated rules
+      mergeSelectors(nestingPath, key), selectors, breakpoint, mediaQueries);
+      continue;
+    }
+    /**
+     * if we've reached this far, this means that we've reached a value
+     * which we would then use inside the valueMiddleware
+     */
+
+
+    var stuff = nestingPath ? [].concat(_toConsumableArray(selectors), [[nestingPath]]) : selectors;
+    var finalSelector = allPossibleCases(stuff).map(fixSpecificity).join(',');
+    /** Unitless handling: */
+
     if (typeof val === 'number') {
       // handle unitless numbers:
       valueMiddleware(key, // tslint:disable-next-line: prefer-template
-      "".concat(unitlessKeys[key] ? val : val + 'px'), currentNestingPath);
-    } else if (val !== undefined) {
-      valueMiddleware(key, resolveTokens(key, val, config.tokens), currentNestingPath);
+      "".concat(unitlessKeys[key] ? val : val + 'px'), breakpoint, mediaQueries, finalSelector);
+      continue;
     }
-  }
-};
-/**
- * Resolves a css prop nesting path to a css selector and the breakpoint the css prop is meant to be injected to
- */
+    /** Anything else other than undefined values */
 
 
-var resolveBreakpointAndSelectorAndInlineMedia = function resolveBreakpointAndSelectorAndInlineMedia(nestingPath, config) {
-  return nestingPath.reduce(function (acc, breakpointOrSelector, i) {
-    // breakpoints handling:
-    if (breakpointOrSelector in config.breakpoints || breakpointOrSelector === MAIN_BREAKPOINT_ID) {
-      acc.breakpoint = breakpointOrSelector;
-      return acc;
+    if (val !== undefined) {
+      valueMiddleware(key, resolveTokens(key, val, config.tokens), breakpoint, mediaQueries, finalSelector);
     }
-
-    if (breakpointOrSelector[0] === '@') {
-      acc.inlineMediaQueries.push(breakpointOrSelector);
-      return acc;
-    } // Normal css nesting selector:
-
-
-    acc.nestingPath = acc.nestingPath + ( // If you manually prefix with '&' we remove it for identity consistency
-    // only for pseudo selectors and nothing else
-    breakpointOrSelector[0] === '&' && breakpointOrSelector[1] === ':' ? breakpointOrSelector.substr(1) : // pseudo elements/class
-    // don't prepend with a whitespace
-    breakpointOrSelector[0] === ':' ? breakpointOrSelector : // else just nest with a space
-    // tslint:disable-next-line: prefer-template
-    ' ' + breakpointOrSelector);
-    return acc;
-  }, {
-    breakpoint: MAIN_BREAKPOINT_ID,
-    nestingPath: '',
-    inlineMediaQueries: []
-  });
+  }
 };
@@ -1169,8 +1277,8 @@ /**
 
-  var _ref = env ? getVendorPrefixAndProps(env) : {
+  var _ref3 = env ? getVendorPrefixAndProps(env) : {
     vendorPrefix: '-node-',
     vendorProps: []
   },
-      vendorPrefix = _ref.vendorPrefix,
-      vendorProps = _ref.vendorProps;
+      vendorPrefix = _ref3.vendorPrefix,
+      vendorProps = _ref3.vendorProps;
 
@@ -1244,3 +1352,3 @@ if (env && hotReloadingCache.has(prefix)) {
   var createAtom = function createAtom(cssProp, value) {
-    var _selectorString, _atom;
+    var _atom;
 
@@ -1269,22 +1377,4 @@ var breakpoint = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : MAIN_BREAKPOINT_ID;
 
-    var cssHyphenProp = hyphenAndVendorPrefixCssProp(cssProp, vendorProps, vendorPrefix); // We want certain pseudo selectors to take presedence over other pseudo
-    // selectors, so we increase specificity
+    var cssHyphenProp = hyphenAndVendorPrefixCssProp(cssProp, vendorProps, vendorPrefix); // Create a new atom
 
-    if (!((_selectorString = selectorString) === null || _selectorString === void 0 ? void 0 : _selectorString.match('&'))) {
-      var _selectorString2, _selectorString3, _selectorString4, _selectorString5, _selectorString6;
-
-      if ((_selectorString2 = selectorString) === null || _selectorString2 === void 0 ? void 0 : _selectorString2.match(/\:hover/)) {
-        selectorString = "&&".concat(selectorString);
-      } else if ((_selectorString3 = selectorString) === null || _selectorString3 === void 0 ? void 0 : _selectorString3.match(/\:active/)) {
-        selectorString = "&&&".concat(selectorString);
-      } else if ((_selectorString4 = selectorString) === null || _selectorString4 === void 0 ? void 0 : _selectorString4.match(/\:focus|\:focus-visible/)) {
-        selectorString = "&&&&".concat(selectorString);
-      } else if ((_selectorString5 = selectorString) === null || _selectorString5 === void 0 ? void 0 : _selectorString5.match(/\:read-only/)) {
-        selectorString = "&&&&&".concat(selectorString);
-      } else if ((_selectorString6 = selectorString) === null || _selectorString6 === void 0 ? void 0 : _selectorString6.match(/\:disabled/)) {
-        selectorString = "&&&&&&".concat(selectorString);
-      }
-    } // Create a new atom
-
-
     var atom = (_atom = {
@@ -1364,9 +1454,4 @@ id: id,
       } else {
-        processStyleObject(definitions[x], config, function (prop, value, path) {
-          var _resolveBreakpointAnd = resolveBreakpointAndSelectorAndInlineMedia(path, config),
-              nestingPath = _resolveBreakpointAnd.nestingPath,
-              breakpoint = _resolveBreakpointAnd.breakpoint,
-              inlineMediaQueries = _resolveBreakpointAnd.inlineMediaQueries;
-
-          args[index++] = createAtom(prop, value, breakpoint, nestingPath, inlineMediaQueries);
+        processStyleObject(definitions[x], config, function (prop, value, breakpoint, mediaQueries, path) {
+          args[index++] = createAtom(prop, value, breakpoint, path, mediaQueries);
         });
@@ -1414,9 +1499,4 @@ }
     var atoms = [];
-    processStyleObject(definitions, config, function (prop, value, path) {
-      var _resolveBreakpointAnd2 = resolveBreakpointAndSelectorAndInlineMedia(path, config),
-          nestingPath = _resolveBreakpointAnd2.nestingPath,
-          breakpoint = _resolveBreakpointAnd2.breakpoint,
-          inlineMediaQueries = _resolveBreakpointAnd2.inlineMediaQueries;
-
-      if (!nestingPath.length) {
+    processStyleObject(definitions, config, function (prop, value, breakpoint, mediaQueries, path) {
+      if (path === '%') {
         throw new Error('Global styles need to be nested within a selector');
@@ -1427,3 +1507,3 @@ } // Create a global atom and call toString() on it directly to inject it
 
-      atoms.push(createAtom(prop, value, breakpoint, nestingPath, inlineMediaQueries, true));
+      atoms.push(createAtom(prop, value, breakpoint, path, mediaQueries, true));
     });
@@ -1438,6 +1518,3 @@ return function () {
     var currentTimeProp = '';
-    processStyleObject(definition, config, function (key, value, _ref3) {
-      var _ref4 = _slicedToArray$1(_ref3, 1),
-          timeProp = _ref4[0];
-
+    processStyleObject(definition, config, function (key, value, _, __, timeProp) {
       if (timeProp !== currentTimeProp) {
@@ -1449,3 +1526,3 @@ if (cssRule) {
         currentTimeProp = timeProp;
-        cssRule += "".concat(timeProp, " {");
+        cssRule += "".concat(timeProp.substr(2), " {");
       }
@@ -1452,0 +1529,0 @@

dist/core.cjs.prod.js

@@ -107,2 +107,34 @@ "use strict";
 
+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;
+}
+
+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;
+}
+
+function _defineProperty(obj, key, value) {
+  return key in obj ? Object.defineProperty(obj, key, {
+    value: value,
+    enumerable: !0,
+    configurable: !0,
+    writable: !0
+  }) : obj[key] = value, obj;
+}
+
 function _slicedToArray(arr, i) {
@@ -238,2 +270,4 @@ return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest();
   })) === index ? css.transitionDuration = setChainedValue(css.transitionDuration, value) : css.transitionDelay = setChainedValue(css.transitionDelay, value) : matchString(value, easingMatch) ? css.transitionTimingFunction = setChainedValue(css.transitionTimingFunction, value) : css.transitionProperty = setChainedValue(css.transitionProperty, value);
+})), gap = createPropertyParser((function(tokens, css, value, index) {
+  0 === index ? (css.rowGap = tokens.space[value] || value, css.columnGap = tokens.space[value] || value) : css.columnGap = tokens.space[value] || value;
 })), margin = createPropertyParser((function(tokens, css, value, index) {
@@ -288,37 +322,26 @@ 0 === index ? (css.marginTop = tokens.space[value] || value, css.marginRight = tokens.space[value] || value,
   css.textDecorationColor = value, css.textDecorationThickness = value) : matchString(value, /solid|double|dotted|dashed|wavy/) ? css.textDecorationStyle = value : matchString(value, /none|underline|overline|line-through|blink/) ? css.textDecorationLine = setChainedValue(css.textDecorationLine, value, " ") : matchString(value, unitMatch) || matchString(value, /auto|from-font/) ? css.textDecorationThickness = value : css.textDecorationColor = tokens.colors[value] || value;
-}));
-
-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;
-}
-
-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;
-}
-
-function _defineProperty(obj, key, value) {
-  return key in obj ? Object.defineProperty(obj, key, {
-    value: value,
-    enumerable: !0,
-    configurable: !0,
-    writable: !0
-  }) : obj[key] = value, obj;
-}
-
-var MAIN_BREAKPOINT_ID = "initial", cssPropToToken = {
+})), flex = function(tokens, value) {
+  var parsedValue = tokenizeValue(value)[0];
+  return 2 === parsedValue.length ? _objectSpread({
+    flexGrow: parsedValue[0]
+  }, isNaN(Number(parsedValue[1])) ? {
+    flexShrink: "1",
+    flexBasis: parsedValue[1]
+  } : {
+    flexShrink: parsedValue[1],
+    flexBasis: "0%"
+  }) : 3 === parsedValue.length ? {
+    flexGrow: parsedValue[0],
+    flexShrink: parsedValue[1],
+    flexBasis: parsedValue[2]
+  } : isNaN(Number(parsedValue[0])) ? {
+    flexGrow: "1",
+    flexShrink: "1",
+    flexBasis: parsedValue[0]
+  } : {
+    flexGrow: parsedValue[0],
+    flexShrink: "1",
+    flexBasis: "0%"
+  };
+}, MAIN_BREAKPOINT_ID = "initial", cssPropToToken = {
   gap: "space",
@@ -458,23 +481,2 @@ gridGap: "space",
   boxShadow: boxShadow,
-  flex: function(tokens, value) {
-    if (Array.isArray(value)) {
-      if (2 === value.length) return _objectSpread({
-        flexGrow: value[0]
-      }, isNaN(value[1]) ? {
-        flexBasis: value[1]
-      } : {
-        flexShrink: value[1]
-      });
-      if (3 === value.length) return {
-        flexGrow: value[0],
-        flexShrink: value[1],
-        flexBasis: value[2]
-      };
-    }
-    return isNaN(value) ? {
-      flexBasis: value
-    } : {
-      flexGrow: value
-    };
-  },
   overflow: function(tokens, value) {
@@ -500,3 +502,5 @@ return {
   borderRight: borderRight,
-  textDecoration: textDecoration
+  textDecoration: textDecoration,
+  gap: gap,
+  flex: flex
 }, getVendorPrefixAndProps = function(env) {
@@ -523,33 +527,2 @@ var styles = env.getComputedStyle(env.document.documentElement), vendorProps = Array.from(styles).filter((function(prop) {
 
-function _slicedToArray$1(arr, i) {
-  return _arrayWithHoles$1(arr) || _iterableToArrayLimit$1(arr, i) || _unsupportedIterableToArray$1(arr, i) || _nonIterableRest$1();
-}
-
-function _nonIterableRest$1() {
-  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 _iterableToArrayLimit$1(arr, i) {
-  if ("undefined" != typeof Symbol && Symbol.iterator in Object(arr)) {
-    var _arr = [], _n = !0, _d = !1, _e = void 0;
-    try {
-      for (var _s, _i = arr[Symbol.iterator](); !(_n = (_s = _i.next()).done) && (_arr.push(_s.value), 
-      !i || _arr.length !== i); _n = !0) ;
-    } catch (err) {
-      _d = !0, _e = err;
-    } finally {
-      try {
-        _n || null == _i.return || _i.return();
-      } finally {
-        if (_d) throw _e;
-      }
-    }
-    return _arr;
-  }
-}
-
-function _arrayWithHoles$1(arr) {
-  if (Array.isArray(arr)) return arr;
-}
-
 function _defineProperty$1(obj, key, value) {
@@ -580,4 +553,4 @@ return key in obj ? Object.defineProperty(obj, key, {
         },
-        e: function(_e2) {
-          throw _e2;
+        e: function(_e) {
+          throw _e;
         },
@@ -598,4 +571,4 @@ f: F
     },
-    e: function(_e3) {
-      didErr = !0, err = _e3;
+    e: function(_e2) {
+      didErr = !0, err = _e2;
     },
@@ -612,2 +585,10 @@ f: function() {
 
+function _typeof(obj) {
+  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;
+  })(obj);
+}
+
 function _toConsumableArray(arr) {
@@ -621,2 +602,14 @@ return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray$1(arr) || _nonIterableSpread();
 
+function _arrayWithoutHoles(arr) {
+  if (Array.isArray(arr)) return _arrayLikeToArray$1(arr);
+}
+
+function _toArray(arr) {
+  return _arrayWithHoles$1(arr) || _iterableToArray(arr) || _unsupportedIterableToArray$1(arr) || _nonIterableRest$1();
+}
+
+function _nonIterableRest$1() {
+  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$1(o, minLen) {
@@ -630,10 +623,2 @@ if (o) {
 
-function _iterableToArray(iter) {
-  if ("undefined" != typeof Symbol && Symbol.iterator in Object(iter)) return Array.from(iter);
-}
-
-function _arrayWithoutHoles(arr) {
-  if (Array.isArray(arr)) return _arrayLikeToArray$1(arr);
-}
-
 function _arrayLikeToArray$1(arr, len) {
@@ -645,10 +630,10 @@ (null == len || len > arr.length) && (len = arr.length);
 
-function _typeof(obj) {
-  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;
-  })(obj);
+function _iterableToArray(iter) {
+  if ("undefined" != typeof Symbol && Symbol.iterator in Object(iter)) return Array.from(iter);
 }
 
+function _arrayWithHoles$1(arr) {
+  if (Array.isArray(arr)) return arr;
+}
+
 var _ATOM = ATOM, hotReloadingCache = new Map, cleanSSRClass = function(s) {
@@ -660,3 +645,3 @@ return s.replace(/(\/\*X\*\/|\\([^-_a-zA-Z\d]*))/g, "$2");
   var cssRuleClassName = className ? ".".concat(className) : "";
-  return selector && selector.includes("&") ? selector.replace(/&/gi, cssRuleClassName) : selector ? "".concat(cssRuleClassName).concat(selector) : cssRuleClassName;
+  return selector && selector.includes("%") ? selector.replace(/\%/gi, cssRuleClassName) : selector ? "".concat(cssRuleClassName).concat(selector) : cssRuleClassName;
 }, resolveTokens = function(cssProp, value, tokens) {
@@ -667,30 +652,41 @@ var token = cssPropToToken[cssProp];
   })) : token && tokens[token] && tokens[token][value] ? tokens[token][value] : value : value;
+}, mergeSelectors = function(firstSelector, secondSelector) {
+  var normalizedSelector = "&" === secondSelector[0] && ":" === secondSelector[1] ? secondSelector.substr(1) : secondSelector;
+  return !firstSelector && normalizedSelector.indexOf("&") > -1 ? normalizedSelector.replace(/&/g, "%".concat(firstSelector)) : normalizedSelector.indexOf("&") > -1 ? normalizedSelector.replace(/&/g, firstSelector) : ":" === normalizedSelector[0] ? normalizedSelector.replace(":", "".concat(firstSelector, ":")) : "".concat(firstSelector, " ").concat(normalizedSelector.trim());
+}, fixSpecificity = function(selectorString) {
+  var _selectorString2, _selectorString3, _selectorString4, _selectorString5, _selectorString6, _selectorString = selectorString;
+  "%" !== _selectorString[0] && _selectorString.match("%") || ((null === (_selectorString2 = _selectorString) || void 0 === _selectorString2 ? void 0 : _selectorString2.match(/\:hover/)) ? _selectorString = "%".concat(_selectorString) : (null === (_selectorString3 = _selectorString) || void 0 === _selectorString3 ? void 0 : _selectorString3.match(/\:active/)) ? _selectorString = "%%".concat(_selectorString) : (null === (_selectorString4 = _selectorString) || void 0 === _selectorString4 ? void 0 : _selectorString4.match(/\:focus|\:focus-visible/)) ? _selectorString = "%%%".concat(_selectorString) : (null === (_selectorString5 = _selectorString) || void 0 === _selectorString5 ? void 0 : _selectorString5.match(/\:read-only/)) ? _selectorString = "%%%%".concat(_selectorString) : (null === (_selectorString6 = _selectorString) || void 0 === _selectorString6 ? void 0 : _selectorString6.match(/\:disabled/)) && (_selectorString = "%%%%%".concat(_selectorString)));
+  return _selectorString;
+}, allPossibleCases = function allPossibleCases(_ref) {
+  var _ref2 = _toArray(_ref), first = _ref2[0], rest = _ref2.slice(1);
+  if (0 === rest.length) return first || [];
+  for (var result = [], allCasesOfRest = allPossibleCases(rest), i = 0; i < allCasesOfRest.length; i++) for (var j = 0; j < first.length; j++) result.push(mergeSelectors(first[j], allCasesOfRest[i]));
+  return result;
 }, processStyleObject = function processStyleObject(obj, config, valueMiddleware) {
-  for (var currentNestingPath = arguments.length > 3 && void 0 !== arguments[3] ? arguments[3] : [], shouldHandleUtils = !(arguments.length > 4 && void 0 !== arguments[4]) || arguments[4], shouldHandleSpecificityProps = !(arguments.length > 5 && void 0 !== arguments[5]) || arguments[5], _i = 0, _Object$keys = Object.keys(obj); _i < _Object$keys.length; _i++) {
-    var key = _Object$keys[_i], val = obj[key], isUtilProp = shouldHandleUtils && key in config.utils, isSpecificityProp = shouldHandleSpecificityProps && !isUtilProp && key in specificityProps;
-    if ("object" !== _typeof(val) || isSpecificityProp || isUtilProp) if (isUtilProp) {
+  for (var nestingPath = arguments.length > 3 && void 0 !== arguments[3] ? arguments[3] : "%", selectors = arguments.length > 4 && void 0 !== arguments[4] ? arguments[4] : [], breakpoint = arguments.length > 5 && void 0 !== arguments[5] ? arguments[5] : MAIN_BREAKPOINT_ID, mediaQueries = arguments.length > 6 && void 0 !== arguments[6] ? arguments[6] : [], shouldHandleUtils = !(arguments.length > 7 && void 0 !== arguments[7]) || arguments[7], shouldHandleSpecificityProps = !(arguments.length > 8 && void 0 !== arguments[8]) || arguments[8], _i = 0, _Object$keys = Object.keys(obj); _i < _Object$keys.length; _i++) {
+    var key = _Object$keys[_i], val = obj[key];
+    if (key in config.breakpoints) processStyleObject(val, config, valueMiddleware, nestingPath, selectors, key, mediaQueries); else if ("@" !== key[0]) if (shouldHandleUtils && key in config.utils) {
       var resolvedUtils = config.utils[key](val, config);
-      processStyleObject(resolvedUtils, config, valueMiddleware, _toConsumableArray(currentNestingPath), !1);
-    } else if (isSpecificityProp) {
+      processStyleObject(resolvedUtils, config, valueMiddleware, nestingPath, selectors, breakpoint, mediaQueries, !1);
+    } else if (!(key in config.utils) && shouldHandleSpecificityProps && key in specificityProps) {
       var resolvedSpecificityProps = specificityProps[key](config.tokens, val);
-      processStyleObject(resolvedSpecificityProps, config, valueMiddleware, _toConsumableArray(currentNestingPath), !1, !1);
-    } else "number" == typeof val ? valueMiddleware(key, "".concat(unitlessKeys[key] ? val : val + "px"), currentNestingPath) : void 0 !== val && valueMiddleware(key, resolveTokens(key, val, config.tokens), currentNestingPath); else {
+      processStyleObject(resolvedSpecificityProps, config, valueMiddleware, nestingPath, selectors, breakpoint, mediaQueries, !1, !1);
+    } else if ("object" !== _typeof(val)) {
+      var stuff = nestingPath ? [].concat(_toConsumableArray(selectors), [ [ nestingPath ] ]) : selectors, finalSelector = allPossibleCases(stuff).map(fixSpecificity).join(",");
+      "number" != typeof val ? void 0 !== val && valueMiddleware(key, resolveTokens(key, val, config.tokens), breakpoint, mediaQueries, finalSelector) : valueMiddleware(key, "".concat(unitlessKeys[key] ? val : val + "px"), breakpoint, mediaQueries, finalSelector);
+    } else {
       if (val[ATOM]) {
-        valueMiddleware(key, val, currentNestingPath);
+        valueMiddleware(key, val, breakpoint, mediaQueries, nestingPath);
         continue;
       }
-      processStyleObject(val, config, valueMiddleware, [].concat(_toConsumableArray(currentNestingPath), [ key ]));
-    }
+      if (key.indexOf(",") > -1) {
+        var newSelectors = [].concat(_toConsumableArray(selectors), [ key.split(",").map((function(el) {
+          return mergeSelectors(nestingPath, el);
+        })) ]);
+        processStyleObject(val, config, valueMiddleware, "", newSelectors, breakpoint, mediaQueries);
+        continue;
+      }
+      processStyleObject(val, config, valueMiddleware, mergeSelectors(nestingPath, key), selectors, breakpoint, mediaQueries);
+    } else processStyleObject(val, config, valueMiddleware, nestingPath, selectors, breakpoint, [].concat(_toConsumableArray(mediaQueries), [ key ]));
   }
-}, resolveBreakpointAndSelectorAndInlineMedia = function(nestingPath, config) {
-  return nestingPath.reduce((function(acc, breakpointOrSelector, i) {
-    return breakpointOrSelector in config.breakpoints || breakpointOrSelector === MAIN_BREAKPOINT_ID ? (acc.breakpoint = breakpointOrSelector, 
-    acc) : "@" === breakpointOrSelector[0] ? (acc.inlineMediaQueries.push(breakpointOrSelector), 
-    acc) : (acc.nestingPath = acc.nestingPath + ("&" === breakpointOrSelector[0] && ":" === breakpointOrSelector[1] ? breakpointOrSelector.substr(1) : ":" === breakpointOrSelector[0] ? breakpointOrSelector : " " + breakpointOrSelector), 
-    acc);
-  }), {
-    breakpoint: MAIN_BREAKPOINT_ID,
-    nestingPath: "",
-    inlineMediaQueries: []
-  });
 }, hyphenAndVendorPrefixCssProp = function(cssProp, vendorProps, vendorPrefix) {
@@ -771,6 +767,6 @@ var isVendorPrefixed = cssProp[0] === cssProp[0].toUpperCase(), cssHyphenProp = cssProp.split(/(?=[A-Z])/).map((function(g) {
   }));
-  var tokens = config.tokens, breakpoints = config.breakpoints, showFriendlyClassnames = "boolean" == typeof config.showFriendlyClassnames && config.showFriendlyClassnames, prefix = config.prefix || "", _ref = env ? getVendorPrefixAndProps(env) : {
+  var tokens = config.tokens, breakpoints = config.breakpoints, showFriendlyClassnames = "boolean" == typeof config.showFriendlyClassnames && config.showFriendlyClassnames, prefix = config.prefix || "", _ref3 = env ? getVendorPrefixAndProps(env) : {
     vendorPrefix: "-node-",
     vendorProps: []
-  }, vendorPrefix = _ref.vendorPrefix, vendorProps = _ref.vendorProps;
+  }, vendorPrefix = _ref3.vendorPrefix, vendorProps = _ref3.vendorProps;
   if (env && hotReloadingCache.has(prefix)) {
@@ -807,8 +803,6 @@ var instance = hotReloadingCache.get(prefix);
   }, createAtom = function(cssProp, value) {
-    var _selectorString, _atom, breakpoint = arguments.length > 2 && void 0 !== arguments[2] ? arguments[2] : MAIN_BREAKPOINT_ID, selectorString = arguments.length > 3 ? arguments[3] : void 0, inlineMediaQueries = arguments.length > 4 ? arguments[4] : void 0, isGlobal = arguments.length > 5 ? arguments[5] : void 0, inlineMediasAsString = inlineMediaQueries ? inlineMediaQueries.join("") : "", id = cssProp.toLowerCase() + selectorString + (inlineMediaQueries ? inlineMediaQueries.join("") : "") + breakpoint, uid = id + value;
+    var _atom, breakpoint = arguments.length > 2 && void 0 !== arguments[2] ? arguments[2] : MAIN_BREAKPOINT_ID, selectorString = arguments.length > 3 ? arguments[3] : void 0, inlineMediaQueries = arguments.length > 4 ? arguments[4] : void 0, isGlobal = arguments.length > 5 ? arguments[5] : void 0, inlineMediasAsString = inlineMediaQueries ? inlineMediaQueries.join("") : "", id = cssProp.toLowerCase() + selectorString + (inlineMediaQueries ? inlineMediaQueries.join("") : "") + breakpoint, uid = id + value;
     if (atomCache.has(uid)) return inlineMediasAsString.match(/@media.*\((min|max)?.*(width|height).*\)/) && console.warn('The property "'.concat(cssProp, '" with media query ').concat(inlineMediasAsString, " can cause a specificity issue. You should create a breakpoint")), 
     atomCache.get(uid);
-    var _selectorString2, _selectorString3, _selectorString4, _selectorString5, _selectorString6, cssHyphenProp = hyphenAndVendorPrefixCssProp(cssProp, vendorProps, vendorPrefix);
-    (null === (_selectorString = selectorString) || void 0 === _selectorString ? void 0 : _selectorString.match("&")) || ((null === (_selectorString2 = selectorString) || void 0 === _selectorString2 ? void 0 : _selectorString2.match(/\:hover/)) ? selectorString = "&&".concat(selectorString) : (null === (_selectorString3 = selectorString) || void 0 === _selectorString3 ? void 0 : _selectorString3.match(/\:active/)) ? selectorString = "&&&".concat(selectorString) : (null === (_selectorString4 = selectorString) || void 0 === _selectorString4 ? void 0 : _selectorString4.match(/\:focus|\:focus-visible/)) ? selectorString = "&&&&".concat(selectorString) : (null === (_selectorString5 = selectorString) || void 0 === _selectorString5 ? void 0 : _selectorString5.match(/\:read-only/)) ? selectorString = "&&&&&".concat(selectorString) : (null === (_selectorString6 = selectorString) || void 0 === _selectorString6 ? void 0 : _selectorString6.match(/\:disabled/)) && (selectorString = "&&&&&&".concat(selectorString)));
-    var atom = (_defineProperty$1(_atom = {
+    var cssHyphenProp = hyphenAndVendorPrefixCssProp(cssProp, vendorProps, vendorPrefix), atom = (_defineProperty$1(_atom = {
       id: id,
@@ -833,5 +827,4 @@ cssHyphenProp: cssHyphenProp,
     for (var args = [], index = 0, _len2 = arguments.length, definitions = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) definitions[_key2] = arguments[_key2];
-    for (var x = 0; x < definitions.length; x++) definitions[x] && ("string" == typeof definitions[x] || definitions[x][ATOM] ? args[index++] = definitions[x] : processStyleObject(definitions[x], config, (function(prop, value, path) {
-      var _resolveBreakpointAnd = resolveBreakpointAndSelectorAndInlineMedia(path, config), nestingPath = _resolveBreakpointAnd.nestingPath, breakpoint = _resolveBreakpointAnd.breakpoint, inlineMediaQueries = _resolveBreakpointAnd.inlineMediaQueries;
-      args[index++] = createAtom(prop, value, breakpoint, nestingPath, inlineMediaQueries);
+    for (var x = 0; x < definitions.length; x++) definitions[x] && ("string" == typeof definitions[x] || definitions[x][ATOM] ? args[index++] = definitions[x] : processStyleObject(definitions[x], config, (function(prop, value, breakpoint, mediaQueries, path) {
+      args[index++] = createAtom(prop, value, breakpoint, path, mediaQueries);
     })));
@@ -858,6 +851,5 @@ var composition = compose.apply(void 0, args);
     var atoms = [];
-    return processStyleObject(definitions, config, (function(prop, value, path) {
-      var _resolveBreakpointAnd2 = resolveBreakpointAndSelectorAndInlineMedia(path, config), nestingPath = _resolveBreakpointAnd2.nestingPath, breakpoint = _resolveBreakpointAnd2.breakpoint, inlineMediaQueries = _resolveBreakpointAnd2.inlineMediaQueries;
-      if (!nestingPath.length) throw new Error("Global styles need to be nested within a selector");
-      atoms.push(createAtom(prop, value, breakpoint, nestingPath, inlineMediaQueries, !0));
+    return processStyleObject(definitions, config, (function(prop, value, breakpoint, mediaQueries, path) {
+      if ("%" === path) throw new Error("Global styles need to be nested within a selector");
+      atoms.push(createAtom(prop, value, breakpoint, path, mediaQueries, !0));
     })), function() {
@@ -868,6 +860,5 @@ return compose.apply(void 0, atoms).toString();
     var cssRule = "", currentTimeProp = "";
-    processStyleObject(definition, config, (function(key, value, _ref3) {
-      var timeProp = _slicedToArray$1(_ref3, 1)[0];
+    processStyleObject(definition, config, (function(key, value, _, __, timeProp) {
       timeProp !== currentTimeProp && (cssRule && (cssRule += "}"), currentTimeProp = timeProp, 
-      cssRule += "".concat(timeProp, " {")), cssRule += "".concat(hyphenAndVendorPrefixCssProp(key, vendorProps, vendorPrefix), ": ").concat(resolveTokens(key, value, tokens), ";");
+      cssRule += "".concat(timeProp.substr(2), " {")), cssRule += "".concat(hyphenAndVendorPrefixCssProp(key, vendorProps, vendorPrefix), ": ").concat(resolveTokens(key, value, tokens), ";");
     }));
@@ -874,0 +865,0 @@ var hash = hashString(cssRule += "}"), cachedAtom = keyFramesCache.get(hash);

dist/core.esm.js

@@ -184,2 +184,8 @@ var tokenTypes = ['colors', 'space', 'fontSizes', 'fonts', 'fontWeights', 'lineHeights', 'letterSpacings', 'sizes', 'borderWidths', 'borderStyles', 'radii', 'shadows', 'zIndices', 'transitions']; // Note: when running Jest tests, make sure that the test file is running in node env
 
+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; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(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 _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
@@ -364,2 +370,10 @@
 });
+var gap = createPropertyParser(function (tokens, css, value, index) {
+  if (index === 0) {
+    css.rowGap = tokens.space[value] || value;
+    css.columnGap = tokens.space[value] || value;
+  } else {
+    css.columnGap = tokens.space[value] || value;
+  }
+});
 var margin = createPropertyParser(function (tokens, css, value, index) {
@@ -534,8 +548,36 @@ if (index === 0) {
 });
+var flex = function flex(tokens, value) {
+  var parsedValue = tokenizeValue(value)[0];
 
-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; }
+  if (parsedValue.length === 2) {
+    return _objectSpread({
+      flexGrow: parsedValue[0]
+    }, isNaN(Number(parsedValue[1])) ? {
+      flexShrink: '1',
+      flexBasis: parsedValue[1]
+    } : {
+      flexShrink: parsedValue[1],
+      flexBasis: '0%'
+    });
+  }
 
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+  if (parsedValue.length === 3) {
+    return {
+      flexGrow: parsedValue[0],
+      flexShrink: parsedValue[1],
+      flexBasis: parsedValue[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; }
+  return isNaN(Number(parsedValue[0])) ? {
+    flexGrow: '1',
+    flexShrink: '1',
+    flexBasis: parsedValue[0]
+  } : {
+    flexGrow: parsedValue[0],
+    flexShrink: '1',
+    flexBasis: '0%'
+  };
+};
+
 var MAIN_BREAKPOINT_ID = 'initial';
@@ -700,29 +742,2 @@ var cssPropToToken = {
   boxShadow: boxShadow,
-  flex: function flex(tokens, value) {
-    if (Array.isArray(value)) {
-      if (value.length === 2) {
-        return _objectSpread({
-          flexGrow: value[0]
-        }, isNaN(value[1]) ? {
-          flexBasis: value[1]
-        } : {
-          flexShrink: value[1]
-        });
-      }
-
-      if (value.length === 3) {
-        return {
-          flexGrow: value[0],
-          flexShrink: value[1],
-          flexBasis: value[2]
-        };
-      }
-    }
-
-    return isNaN(value) ? {
-      flexBasis: value
-    } : {
-      flexGrow: value
-    };
-  },
   overflow: function overflow(tokens, value) {
@@ -748,3 +763,5 @@ return {
   borderRight: borderRight,
-  textDecoration: textDecoration
+  textDecoration: textDecoration,
+  gap: gap,
+  flex: flex
 };
@@ -808,27 +825,25 @@ var getVendorPrefixAndProps = function getVendorPrefixAndProps(env) {
 
-function _slicedToArray$1(arr, i) { return _arrayWithHoles$1(arr) || _iterableToArrayLimit$1(arr, i) || _unsupportedIterableToArray$1(arr, i) || _nonIterableRest$1(); }
+function _defineProperty$1(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 _nonIterableRest$1() { 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 _createForOfIteratorHelper(o, allowArrayLike) { var it; if (typeof Symbol === "undefined" || o[Symbol.iterator] == null) { if (Array.isArray(o) || (it = _unsupportedIterableToArray$1(o)) || allowArrayLike && o && typeof o.length === "number") { if (it) o = it; var i = 0; var F = function F() {}; return { s: F, n: function n() { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }, e: function e(_e) { throw _e; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var normalCompletion = true, didErr = false, err; return { s: function s() { it = o[Symbol.iterator](); }, n: function n() { var step = it.next(); normalCompletion = step.done; return step; }, e: function e(_e2) { didErr = true; err = _e2; }, f: function f() { try { if (!normalCompletion && it["return"] != null) it["return"](); } finally { if (didErr) throw err; } } }; }
 
-function _iterableToArrayLimit$1(arr, i) { if (typeof Symbol === "undefined" || !(Symbol.iterator in Object(arr))) return; var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_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; }
+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); }
 
-function _arrayWithHoles$1(arr) { if (Array.isArray(arr)) return arr; }
+function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray$1(arr) || _nonIterableSpread(); }
 
-function _defineProperty$1(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 _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."); }
 
-function _createForOfIteratorHelper(o, allowArrayLike) { var it; if (typeof Symbol === "undefined" || o[Symbol.iterator] == null) { if (Array.isArray(o) || (it = _unsupportedIterableToArray$1(o)) || allowArrayLike && o && typeof o.length === "number") { if (it) o = it; var i = 0; var F = function F() {}; return { s: F, n: function n() { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }, e: function e(_e2) { throw _e2; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var normalCompletion = true, didErr = false, err; return { s: function s() { it = o[Symbol.iterator](); }, n: function n() { var step = it.next(); normalCompletion = step.done; return step; }, e: function e(_e3) { didErr = true; err = _e3; }, f: function f() { try { if (!normalCompletion && it["return"] != null) it["return"](); } finally { if (didErr) throw err; } } }; }
+function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray$1(arr); }
 
-function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray$1(arr) || _nonIterableSpread(); }
+function _toArray(arr) { return _arrayWithHoles$1(arr) || _iterableToArray(arr) || _unsupportedIterableToArray$1(arr) || _nonIterableRest$1(); }
 
-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."); }
+function _nonIterableRest$1() { 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$1(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray$1(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$1(o, minLen); }
 
+function _arrayLikeToArray$1(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 _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray$1(arr); }
-
-function _arrayLikeToArray$1(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 _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); }
+function _arrayWithHoles$1(arr) { if (Array.isArray(arr)) return arr; }
 var _ATOM = ATOM;
@@ -848,3 +863,3 @@ var hotReloadingCache = new Map();
   var cssRuleClassName = className ? ".".concat(className) : '';
-  if (selector && selector.includes('&')) return selector.replace(/&/gi, cssRuleClassName);
+  if (selector && selector.includes('%')) return selector.replace(/\%/gi, cssRuleClassName);
 
@@ -881,2 +896,76 @@ if (selector) {
 /**
+ * Merges two selectors together while also handling pseudos correctly
+ */
+
+
+var mergeSelectors = function mergeSelectors(firstSelector, secondSelector) {
+  // a pseudo class and starts with &, normalize it:
+  var normalizedSelector = secondSelector[0] === '&' && secondSelector[1] === ':' ? secondSelector.substr(1) : secondSelector;
+
+  if (!firstSelector && normalizedSelector.indexOf('&') > -1) {
+    return normalizedSelector.replace(/&/g, "%".concat(firstSelector));
+  }
+
+  if (normalizedSelector.indexOf('&') > -1) {
+    return normalizedSelector.replace(/&/g, firstSelector);
+  }
+
+  if (normalizedSelector[0] === ':') {
+    return normalizedSelector.replace(':', "".concat(firstSelector, ":"));
+  }
+
+  return "".concat(firstSelector, " ").concat(normalizedSelector.trim());
+}; // this is hacky as hell.
+// we should experiment handling pseudo classes
+// specificity via buckets in the sheet
+
+
+var fixSpecificity = function fixSpecificity(selectorString) {
+  var _selectorString = selectorString; // We want certain pseudo selectors to take precedence over other pseudo
+  // selectors, so we increase specificity
+
+  if (_selectorString[0] === '%' || !_selectorString.match('%')) {
+    var _selectorString2, _selectorString3, _selectorString4, _selectorString5, _selectorString6;
+
+    if ((_selectorString2 = _selectorString) === null || _selectorString2 === void 0 ? void 0 : _selectorString2.match(/\:hover/)) {
+      _selectorString = "%".concat(_selectorString);
+    } else if ((_selectorString3 = _selectorString) === null || _selectorString3 === void 0 ? void 0 : _selectorString3.match(/\:active/)) {
+      _selectorString = "%%".concat(_selectorString);
+    } else if ((_selectorString4 = _selectorString) === null || _selectorString4 === void 0 ? void 0 : _selectorString4.match(/\:focus|\:focus-visible/)) {
+      _selectorString = "%%%".concat(_selectorString);
+    } else if ((_selectorString5 = _selectorString) === null || _selectorString5 === void 0 ? void 0 : _selectorString5.match(/\:read-only/)) {
+      _selectorString = "%%%%".concat(_selectorString);
+    } else if ((_selectorString6 = _selectorString) === null || _selectorString6 === void 0 ? void 0 : _selectorString6.match(/\:disabled/)) {
+      _selectorString = "%%%%%".concat(_selectorString);
+    }
+  }
+
+  return _selectorString;
+};
+
+var allPossibleCases = function allPossibleCases(_ref) {
+  var _ref2 = _toArray(_ref),
+      first = _ref2[0],
+      rest = _ref2.slice(1);
+
+  if (rest.length === 0) {
+    if (first) {
+      return first;
+    }
+
+    return [];
+  } else {
+    var result = [];
+    var allCasesOfRest = allPossibleCases(rest);
+
+    for (var i = 0; i < allCasesOfRest.length; i++) {
+      for (var j = 0; j < first.length; j++) {
+        result.push(mergeSelectors(first[j], allCasesOfRest[i]));
+      }
+    }
+
+    return result;
+  }
+};
+/**
  * iterates over a style object keys and values,
@@ -895,5 +984,8 @@ * resolving them to their final form then calls the value callback with the prop, value
 var processStyleObject = function processStyleObject(obj, config, valueMiddleware) {
-  var currentNestingPath = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : [];
-  var shouldHandleUtils = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : true;
-  var shouldHandleSpecificityProps = arguments.length > 5 && arguments[5] !== undefined ? arguments[5] : true;
+  var nestingPath = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : '%';
+  var selectors = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : [];
+  var breakpoint = arguments.length > 5 && arguments[5] !== undefined ? arguments[5] : MAIN_BREAKPOINT_ID;
+  var mediaQueries = arguments.length > 6 && arguments[6] !== undefined ? arguments[6] : [];
+  var shouldHandleUtils = arguments.length > 7 && arguments[7] !== undefined ? arguments[7] : true;
+  var shouldHandleSpecificityProps = arguments.length > 8 && arguments[8] !== undefined ? arguments[8] : true;
 
@@ -905,15 +997,13 @@ // key: css prop or override or a selector
     var val = obj[key];
-    var isUtilProp = shouldHandleUtils && key in config.utils;
-    var isSpecificityProp = shouldHandleSpecificityProps && !isUtilProp && key in specificityProps;
-    /** Nested styles: */
+    /** Breakpoint */
 
-    if (_typeof(val) === 'object' && !isSpecificityProp && !isUtilProp) {
-      // Atom value:
-      if (val[ATOM]) {
-        valueMiddleware(key, val, currentNestingPath);
-        continue;
-      } // handle the value object
+    if (key in config.breakpoints) {
+      processStyleObject(val, config, valueMiddleware, nestingPath, selectors, key, mediaQueries);
+      continue;
+    }
+    /** Media query */
 
 
-      processStyleObject(val, config, valueMiddleware, [].concat(_toConsumableArray(currentNestingPath), [key]));
+    if (key[0] === '@') {
+      processStyleObject(val, config, valueMiddleware, nestingPath, selectors, breakpoint, [].concat(_toConsumableArray(mediaQueries), [key]));
       continue;
@@ -924,60 +1014,78 @@ }
 
-    if (isUtilProp) {
+    if (shouldHandleUtils && key in config.utils) {
       // Resolve the util from the util function:
-      var resolvedUtils = config.utils[key](val, config);
-      processStyleObject(resolvedUtils, config, valueMiddleware, _toConsumableArray(currentNestingPath), false);
+      var resolvedUtils = config.utils[key](val, config); // prettier-ignore
+
+      processStyleObject(resolvedUtils, config, valueMiddleware, nestingPath, selectors, breakpoint, mediaQueries, false);
       continue;
     }
-    /** Specificity Props: */
-    // shorthand css props or css props that has baked in handling:
-    // see specificityProps in ./utils
+    /**
+     * Specificity Props:
+     * shorthand css props or css props that has baked in handling:
+     * see specificityProps in ./utils
+     */
 
 
-    if (isSpecificityProp) {
-      var resolvedSpecificityProps = specificityProps[key](config.tokens, val);
-      processStyleObject(resolvedSpecificityProps, config, valueMiddleware, _toConsumableArray(currentNestingPath), false, false);
+    if (!(key in config.utils) && shouldHandleSpecificityProps && key in specificityProps) {
+      var resolvedSpecificityProps = specificityProps[key](config.tokens, val); // prettier-ignore
+
+      processStyleObject(resolvedSpecificityProps, config, valueMiddleware, nestingPath, selectors, breakpoint, mediaQueries, false, false);
       continue;
     }
+    /** Nested styles: */
 
+
+    if (_typeof(val) === 'object') {
+      // Atom value:
+      if (val[ATOM]) {
+        valueMiddleware(key, val, breakpoint, mediaQueries, nestingPath);
+        continue;
+      }
+      /**
+       * handle path merging:
+       */
+
+      /** Current key is a comma separated rule */
+
+
+      if (key.indexOf(',') > -1) {
+        // split by comma and then merge it with he current nesting path
+        var newSelectors = [].concat(_toConsumableArray(selectors), [key.split(',').map(function (el) {
+          return mergeSelectors(nestingPath, el);
+        })]); // reset the nesting path to '' as it's already no part of selectors
+
+        processStyleObject(val, config, valueMiddleware, '', newSelectors, breakpoint, mediaQueries);
+        continue;
+      }
+      /** Current key is a normal css selector */
+
+
+      processStyleObject(val, config, valueMiddleware, // merging normal selectors
+      // this is the case when we have no comma separated rules
+      mergeSelectors(nestingPath, key), selectors, breakpoint, mediaQueries);
+      continue;
+    }
+    /**
+     * if we've reached this far, this means that we've reached a value
+     * which we would then use inside the valueMiddleware
+     */
+
+
+    var stuff = nestingPath ? [].concat(_toConsumableArray(selectors), [[nestingPath]]) : selectors;
+    var finalSelector = allPossibleCases(stuff).map(fixSpecificity).join(',');
+    /** Unitless handling: */
+
     if (typeof val === 'number') {
       // handle unitless numbers:
       valueMiddleware(key, // tslint:disable-next-line: prefer-template
-      "".concat(unitlessKeys[key] ? val : val + 'px'), currentNestingPath);
-    } else if (val !== undefined) {
-      valueMiddleware(key, resolveTokens(key, val, config.tokens), currentNestingPath);
+      "".concat(unitlessKeys[key] ? val : val + 'px'), breakpoint, mediaQueries, finalSelector);
+      continue;
     }
-  }
-};
-/**
- * Resolves a css prop nesting path to a css selector and the breakpoint the css prop is meant to be injected to
- */
+    /** Anything else other than undefined values */
 
 
-var resolveBreakpointAndSelectorAndInlineMedia = function resolveBreakpointAndSelectorAndInlineMedia(nestingPath, config) {
-  return nestingPath.reduce(function (acc, breakpointOrSelector, i) {
-    // breakpoints handling:
-    if (breakpointOrSelector in config.breakpoints || breakpointOrSelector === MAIN_BREAKPOINT_ID) {
-      acc.breakpoint = breakpointOrSelector;
-      return acc;
+    if (val !== undefined) {
+      valueMiddleware(key, resolveTokens(key, val, config.tokens), breakpoint, mediaQueries, finalSelector);
     }
-
-    if (breakpointOrSelector[0] === '@') {
-      acc.inlineMediaQueries.push(breakpointOrSelector);
-      return acc;
-    } // Normal css nesting selector:
-
-
-    acc.nestingPath = acc.nestingPath + ( // If you manually prefix with '&' we remove it for identity consistency
-    // only for pseudo selectors and nothing else
-    breakpointOrSelector[0] === '&' && breakpointOrSelector[1] === ':' ? breakpointOrSelector.substr(1) : // pseudo elements/class
-    // don't prepend with a whitespace
-    breakpointOrSelector[0] === ':' ? breakpointOrSelector : // else just nest with a space
-    // tslint:disable-next-line: prefer-template
-    ' ' + breakpointOrSelector);
-    return acc;
-  }, {
-    breakpoint: MAIN_BREAKPOINT_ID,
-    nestingPath: '',
-    inlineMediaQueries: []
-  });
+  }
 };
@@ -1165,8 +1273,8 @@ /**
 
-  var _ref = env ? getVendorPrefixAndProps(env) : {
+  var _ref3 = env ? getVendorPrefixAndProps(env) : {
     vendorPrefix: '-node-',
     vendorProps: []
   },
-      vendorPrefix = _ref.vendorPrefix,
-      vendorProps = _ref.vendorProps;
+      vendorPrefix = _ref3.vendorPrefix,
+      vendorProps = _ref3.vendorProps;
 
@@ -1240,3 +1348,3 @@ if (env && hotReloadingCache.has(prefix)) {
   var createAtom = function createAtom(cssProp, value) {
-    var _selectorString, _atom;
+    var _atom;
 
@@ -1265,22 +1373,4 @@ var breakpoint = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : MAIN_BREAKPOINT_ID;
 
-    var cssHyphenProp = hyphenAndVendorPrefixCssProp(cssProp, vendorProps, vendorPrefix); // We want certain pseudo selectors to take presedence over other pseudo
-    // selectors, so we increase specificity
+    var cssHyphenProp = hyphenAndVendorPrefixCssProp(cssProp, vendorProps, vendorPrefix); // Create a new atom
 
-    if (!((_selectorString = selectorString) === null || _selectorString === void 0 ? void 0 : _selectorString.match('&'))) {
-      var _selectorString2, _selectorString3, _selectorString4, _selectorString5, _selectorString6;
-
-      if ((_selectorString2 = selectorString) === null || _selectorString2 === void 0 ? void 0 : _selectorString2.match(/\:hover/)) {
-        selectorString = "&&".concat(selectorString);
-      } else if ((_selectorString3 = selectorString) === null || _selectorString3 === void 0 ? void 0 : _selectorString3.match(/\:active/)) {
-        selectorString = "&&&".concat(selectorString);
-      } else if ((_selectorString4 = selectorString) === null || _selectorString4 === void 0 ? void 0 : _selectorString4.match(/\:focus|\:focus-visible/)) {
-        selectorString = "&&&&".concat(selectorString);
-      } else if ((_selectorString5 = selectorString) === null || _selectorString5 === void 0 ? void 0 : _selectorString5.match(/\:read-only/)) {
-        selectorString = "&&&&&".concat(selectorString);
-      } else if ((_selectorString6 = selectorString) === null || _selectorString6 === void 0 ? void 0 : _selectorString6.match(/\:disabled/)) {
-        selectorString = "&&&&&&".concat(selectorString);
-      }
-    } // Create a new atom
-
-
     var atom = (_atom = {
@@ -1360,9 +1450,4 @@ id: id,
       } else {
-        processStyleObject(definitions[x], config, function (prop, value, path) {
-          var _resolveBreakpointAnd = resolveBreakpointAndSelectorAndInlineMedia(path, config),
-              nestingPath = _resolveBreakpointAnd.nestingPath,
-              breakpoint = _resolveBreakpointAnd.breakpoint,
-              inlineMediaQueries = _resolveBreakpointAnd.inlineMediaQueries;
-
-          args[index++] = createAtom(prop, value, breakpoint, nestingPath, inlineMediaQueries);
+        processStyleObject(definitions[x], config, function (prop, value, breakpoint, mediaQueries, path) {
+          args[index++] = createAtom(prop, value, breakpoint, path, mediaQueries);
         });
@@ -1410,9 +1495,4 @@ }
     var atoms = [];
-    processStyleObject(definitions, config, function (prop, value, path) {
-      var _resolveBreakpointAnd2 = resolveBreakpointAndSelectorAndInlineMedia(path, config),
-          nestingPath = _resolveBreakpointAnd2.nestingPath,
-          breakpoint = _resolveBreakpointAnd2.breakpoint,
-          inlineMediaQueries = _resolveBreakpointAnd2.inlineMediaQueries;
-
-      if (!nestingPath.length) {
+    processStyleObject(definitions, config, function (prop, value, breakpoint, mediaQueries, path) {
+      if (path === '%') {
         throw new Error('Global styles need to be nested within a selector');
@@ -1423,3 +1503,3 @@ } // Create a global atom and call toString() on it directly to inject it
 
-      atoms.push(createAtom(prop, value, breakpoint, nestingPath, inlineMediaQueries, true));
+      atoms.push(createAtom(prop, value, breakpoint, path, mediaQueries, true));
     });
@@ -1434,6 +1514,3 @@ return function () {
     var currentTimeProp = '';
-    processStyleObject(definition, config, function (key, value, _ref3) {
-      var _ref4 = _slicedToArray$1(_ref3, 1),
-          timeProp = _ref4[0];
-
+    processStyleObject(definition, config, function (key, value, _, __, timeProp) {
       if (timeProp !== currentTimeProp) {
@@ -1445,3 +1522,3 @@ if (cssRule) {
         currentTimeProp = timeProp;
-        cssRule += "".concat(timeProp, " {");
+        cssRule += "".concat(timeProp.substr(2), " {");
       }
@@ -1448,0 +1525,0 @@

dist/declarations/src/shorthand-parser/index.d.ts

@@ -5,2 +5,3 @@ export declare const background: (tokens: any, value: any) => {};
 export declare const transition: (tokens: any, value: any) => {};
+export declare const gap: (tokens: any, value: any) => {};
 export declare const margin: (tokens: any, value: any) => {};
@@ -21,1 +22,6 @@ export declare const padding: (tokens: any, value: any) => {};
 export declare const textDecoration: (tokens: any, value: any) => {};
+export declare const flex: (tokens: any, value: any) => {
+    flexShrink: string;
+    flexBasis: string;
+    flexGrow: string;
+};

package.json

 {
   "name": "@stitches/core",
-  "version": "0.0.3-canary.1",
+  "version": "0.0.3-canary.2",
   "description": "The modern CSS-in-JS library",
@@ -36,4 +36,4 @@ "main": "dist/core.cjs.js",
     "format": "prettier '**/*.{md,js,jsx,json,ts,tsx}' --write",
-    "test": "jest --env=jsdom --coverage",
-    "test:watch": "node ../../node_modules/jest/bin/jest.js --env=jsdom --watch --updateSnapshot",
+    "test": "jest",
+    "test:watch": "jest --watch --updateSnapshot",
     "posttest": "npm run typecheck && npm run lint",
@@ -52,7 +52,7 @@ "preversion": "npm test",
   ],
-  "dependencies": {
+  "devDependencies": {
     "@types/node": "^13.11.1",
     "tslib": "^1.11.1"
   },
-  "gitHead": "60ef24464cb5d1eef7f4be01add51c5d9d43ed70"
+  "gitHead": "ee0a38532fc8c5904fc59be9530cf37e17829bf8"
 }

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

Improved metrics

Total package byte prevSize

564473

increased by0.61%

Dependency count

0

decreased by-100%

Lines of code

10789

increased by1.06%

Worsened metrics

Dev dependency count

2

increased byInfinity%

Dependency changes

• - Removed@types/node@^13.11.1

• - Removedtslib@^1.11.1

• - Removed@types/node@13.13.52(transitive)

• - Removedtslib@1.14.1(transitive)