@css-system/use-css - npm Package Compare versions

Comparing version 0.2.0 to 0.3.0

dist/index.es.js

@@ -18,2 +18,13 @@ import React, { useContext, useMemo } from 'react';
 
+var __assign = function() {
+    __assign = Object.assign || function __assign(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+
 function __spreadArrays() {
@@ -27,217 +38,2 @@ for (var s = 0, i = 0, il = arguments.length; i < il; i++) s += arguments[i].length;
 
-function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-
-// based on https://github.com/developit/dlv
-var get = function get(obj, key, def, p, undef) {
-  key = key && key.split ? key.split('.') : [key];
-
-  for (p = 0; p < key.length; p++) {
-    obj = obj ? obj[key[p]] : undef;
-  }
-
-  return obj === undef ? def : obj;
-};
-var defaultBreakpoints = [40, 52, 64].map(function (n) {
-  return n + 'em';
-});
-var defaultTheme = {
-  space: [0, 4, 8, 16, 32, 64, 128, 256, 512],
-  fontSizes: [12, 14, 16, 20, 24, 32, 48, 64, 72]
-};
-var aliases = {
-  bg: 'backgroundColor',
-  m: 'margin',
-  mt: 'marginTop',
-  mr: 'marginRight',
-  mb: 'marginBottom',
-  ml: 'marginLeft',
-  mx: 'marginX',
-  my: 'marginY',
-  p: 'padding',
-  pt: 'paddingTop',
-  pr: 'paddingRight',
-  pb: 'paddingBottom',
-  pl: 'paddingLeft',
-  px: 'paddingX',
-  py: 'paddingY'
-};
-var multiples = {
-  marginX: ['marginLeft', 'marginRight'],
-  marginY: ['marginTop', 'marginBottom'],
-  paddingX: ['paddingLeft', 'paddingRight'],
-  paddingY: ['paddingTop', 'paddingBottom'],
-  size: ['width', 'height']
-};
-var scales = {
-  color: 'colors',
-  backgroundColor: 'colors',
-  borderColor: 'colors',
-  margin: 'space',
-  marginTop: 'space',
-  marginRight: 'space',
-  marginBottom: 'space',
-  marginLeft: 'space',
-  marginX: 'space',
-  marginY: 'space',
-  padding: 'space',
-  paddingTop: 'space',
-  paddingRight: 'space',
-  paddingBottom: 'space',
-  paddingLeft: 'space',
-  paddingX: 'space',
-  paddingY: 'space',
-  top: 'space',
-  right: 'space',
-  bottom: 'space',
-  left: 'space',
-  gridGap: 'space',
-  gridColumnGap: 'space',
-  gridRowGap: 'space',
-  gap: 'space',
-  columnGap: 'space',
-  rowGap: 'space',
-  fontFamily: 'fonts',
-  fontSize: 'fontSizes',
-  fontWeight: 'fontWeights',
-  lineHeight: 'lineHeights',
-  letterSpacing: 'letterSpacings',
-  border: 'borders',
-  borderTop: 'borders',
-  borderRight: 'borders',
-  borderBottom: 'borders',
-  borderLeft: 'borders',
-  borderWidth: 'borderWidths',
-  borderStyle: 'borderStyles',
-  borderRadius: 'radii',
-  borderTopRightRadius: 'radii',
-  borderTopLeftRadius: 'radii',
-  borderBottomRightRadius: 'radii',
-  borderBottomLeftRadius: 'radii',
-  borderTopWidth: 'borderWidths',
-  borderTopColor: 'colors',
-  borderTopStyle: 'borderStyles',
-  borderBottomWidth: 'borderWidths',
-  borderBottomColor: 'colors',
-  borderBottomStyle: 'borderStyles',
-  borderLeftWidth: 'borderWidths',
-  borderLeftColor: 'colors',
-  borderLeftStyle: 'borderStyles',
-  borderRightWidth: 'borderWidths',
-  borderRightColor: 'colors',
-  borderRightStyle: 'borderStyles',
-  outlineColor: 'colors',
-  boxShadow: 'shadows',
-  textShadow: 'shadows',
-  zIndex: 'zIndices',
-  width: 'sizes',
-  minWidth: 'sizes',
-  maxWidth: 'sizes',
-  height: 'sizes',
-  minHeight: 'sizes',
-  maxHeight: 'sizes',
-  flexBasis: 'sizes',
-  size: 'sizes',
-  // svg
-  fill: 'colors',
-  stroke: 'colors'
-};
-
-var positiveOrNegative = function positiveOrNegative(scale, value) {
-  if (typeof value !== 'number' || value >= 0) {
-    return get(scale, value, value);
-  }
-
-  var absolute = Math.abs(value);
-  var n = get(scale, absolute, absolute);
-  if (typeof n === 'string') return '-' + n;
-  return n * -1;
-};
-
-var transforms = ['margin', 'marginTop', 'marginRight', 'marginBottom', 'marginLeft', 'marginX', 'marginY', 'top', 'bottom', 'left', 'right'].reduce(function (acc, curr) {
-  var _extends2;
-
-  return _extends({}, acc, (_extends2 = {}, _extends2[curr] = positiveOrNegative, _extends2));
-}, {});
-var responsive = function responsive(styles) {
-  return function (theme) {
-    var next = {};
-    var breakpoints = get(theme, 'breakpoints', defaultBreakpoints);
-    var mediaQueries = [null].concat(breakpoints.map(function (n) {
-      return "@media screen and (min-width: " + n + ")";
-    }));
-
-    for (var key in styles) {
-      var value = typeof styles[key] === 'function' ? styles[key](theme) : styles[key];
-      if (value == null) continue;
-
-      if (!Array.isArray(value)) {
-        next[key] = value;
-        continue;
-      }
-
-      for (var i = 0; i < value.slice(0, mediaQueries.length).length; i++) {
-        var media = mediaQueries[i];
-
-        if (!media) {
-          next[key] = value[i];
-          continue;
-        }
-
-        next[media] = next[media] || {};
-        if (value[i] == null) continue;
-        next[media][key] = value[i];
-      }
-    }
-
-    return next;
-  };
-};
-var css = function css(args) {
-  return function (props) {
-    if (props === void 0) {
-      props = {};
-    }
-
-    var theme = _extends({}, defaultTheme, {}, props.theme || props);
-
-    var result = {};
-    var obj = typeof args === 'function' ? args(theme) : args;
-    var styles = responsive(obj)(theme);
-
-    for (var key in styles) {
-      var x = styles[key];
-      var val = typeof x === 'function' ? x(theme) : x;
-
-      if (key === 'variant') {
-        var variant = css(get(theme, val))(theme);
-        result = _extends({}, result, {}, variant);
-        continue;
-      }
-
-      if (val && typeof val === 'object') {
-        result[key] = css(val)(theme);
-        continue;
-      }
-
-      var prop = get(aliases, key, key);
-      var scaleName = get(scales, prop);
-      var scale = get(theme, scaleName, get(theme, prop, {}));
-      var transform = get(transforms, prop, get);
-      var value = transform(scale, val, val);
-
-      if (multiples[prop]) {
-        var dirs = multiples[prop];
-
-        for (var i = 0; i < dirs.length; i++) {
-          result[dirs[i]] = value;
-        }
-      } else {
-        result[prop] = value;
-      }
-    }
-
-    return result;
-  };
-};
-
 function pad (hash, len) {
@@ -385,2 +181,212 @@ while (hash.length < len) {
 
+var defaultTheme = {
+    breakpoints: {
+        s: "40em",
+        m: "52em",
+        l: "64em",
+    },
+    space: [0, 4, 8, 16, 32, 64, 128, 256, 512],
+    fontSizes: [12, 14, 16, 20, 24, 32, 48, 64, 72],
+};
+
+var get = function (obj, path, def) {
+    var result = obj;
+    var keys = typeof path === "string" ? path.split(".") : [path];
+    for (var _i = 0, keys_1 = keys; _i < keys_1.length; _i++) {
+        var key = keys_1[_i];
+        result = result ? result[key] : undefined;
+    }
+    return result === undefined ? def : result;
+};
+var aliases = {
+    bg: "backgroundColor",
+    m: "margin",
+    mt: "marginTop",
+    mr: "marginRight",
+    mb: "marginBottom",
+    ml: "marginLeft",
+    mx: "marginX",
+    my: "marginY",
+    p: "padding",
+    pt: "paddingTop",
+    pr: "paddingRight",
+    pb: "paddingBottom",
+    pl: "paddingLeft",
+    px: "paddingX",
+    py: "paddingY",
+};
+var multiples = {
+    marginX: ["marginLeft", "marginRight"],
+    marginY: ["marginTop", "marginBottom"],
+    paddingX: ["paddingLeft", "paddingRight"],
+    paddingY: ["paddingTop", "paddingBottom"],
+    size: ["width", "height"],
+};
+var scales = {
+    color: "colors",
+    backgroundColor: "colors",
+    borderColor: "colors",
+    margin: "space",
+    marginTop: "space",
+    marginRight: "space",
+    marginBottom: "space",
+    marginLeft: "space",
+    marginX: "space",
+    marginY: "space",
+    padding: "space",
+    paddingTop: "space",
+    paddingRight: "space",
+    paddingBottom: "space",
+    paddingLeft: "space",
+    paddingX: "space",
+    paddingY: "space",
+    top: "space",
+    right: "space",
+    bottom: "space",
+    left: "space",
+    gridGap: "space",
+    gridColumnGap: "space",
+    gridRowGap: "space",
+    gap: "space",
+    columnGap: "space",
+    rowGap: "space",
+    fontFamily: "fonts",
+    fontSize: "fontSizes",
+    fontWeight: "fontWeights",
+    lineHeight: "lineHeights",
+    letterSpacing: "letterSpacings",
+    border: "borders",
+    borderTop: "borders",
+    borderRight: "borders",
+    borderBottom: "borders",
+    borderLeft: "borders",
+    borderWidth: "borderWidths",
+    borderStyle: "borderStyles",
+    borderRadius: "radii",
+    borderTopRightRadius: "radii",
+    borderTopLeftRadius: "radii",
+    borderBottomRightRadius: "radii",
+    borderBottomLeftRadius: "radii",
+    borderTopWidth: "borderWidths",
+    borderTopColor: "colors",
+    borderTopStyle: "borderStyles",
+    borderBottomWidth: "borderWidths",
+    borderBottomColor: "colors",
+    borderBottomStyle: "borderStyles",
+    borderLeftWidth: "borderWidths",
+    borderLeftColor: "colors",
+    borderLeftStyle: "borderStyles",
+    borderRightWidth: "borderWidths",
+    borderRightColor: "colors",
+    borderRightStyle: "borderStyles",
+    outlineColor: "colors",
+    boxShadow: "shadows",
+    textShadow: "shadows",
+    zIndex: "zIndices",
+    width: "sizes",
+    minWidth: "sizes",
+    maxWidth: "sizes",
+    height: "sizes",
+    minHeight: "sizes",
+    maxHeight: "sizes",
+    flexBasis: "sizes",
+    size: "sizes",
+    // svg
+    fill: "colors",
+    stroke: "colors",
+};
+var positiveOrNegative = function (scale, value) {
+    if (typeof value !== "number" || value >= 0) {
+        return get(scale, value, value);
+    }
+    var absolute = Math.abs(value);
+    var n = get(scale, absolute, absolute);
+    if (typeof n === "string") {
+        return "-" + n;
+    }
+    return n * -1;
+};
+var transforms = [
+    "margin",
+    "marginTop",
+    "marginRight",
+    "marginBottom",
+    "marginLeft",
+    "marginX",
+    "marginY",
+    "top",
+    "bottom",
+    "left",
+    "right",
+].reduce(function (acc, curr) {
+    var _a;
+    return (__assign(__assign({}, acc), (_a = {}, _a[curr] = positiveOrNegative, _a)));
+}, {});
+var responsive = function (systemObject, theme) {
+    var next = {};
+    var breakpoints = get(theme, "breakpoints", defaultTheme.breakpoints);
+    var mediaQueries = Object.keys(breakpoints).reduce(function (acc, breakpointKey) {
+        var _a;
+        return __assign(__assign({}, acc), (_a = {}, _a[breakpointKey] = "@media screen and (min-width: " + breakpoints[breakpointKey] + ")", _a));
+    }, { _: null });
+    for (var key in systemObject) {
+        var value = systemObject[key];
+        var type = typeof value;
+        if (value == null || Array.isArray(value)) {
+            continue;
+        }
+        if (key.includes("&") || type === "string" || type === "number") {
+            next[key] = value;
+            continue;
+        }
+        var breakpointKeys = Object.keys(value);
+        for (var _i = 0, breakpointKeys_1 = breakpointKeys; _i < breakpointKeys_1.length; _i++) {
+            var breakpointKey = breakpointKeys_1[_i];
+            var media = mediaQueries[breakpointKey];
+            if (!media) {
+                next[key] = value[breakpointKey];
+                continue;
+            }
+            next[media] = next[media] || {};
+            if (value[breakpointKey] == null)
+                continue;
+            next[media][key] = value[breakpointKey];
+        }
+    }
+    return next;
+};
+var computeCssObject = function (systemObject, mayBeTheme) {
+    var theme = __assign(__assign({}, defaultTheme), mayBeTheme);
+    var result = {};
+    var styles = responsive(systemObject, theme);
+    for (var key in styles) {
+        var x = styles[key];
+        var val = typeof x === "function" ? x(theme) : x;
+        if (key === "variant") {
+            var variant = computeCssObject(get(theme, val), theme);
+            result = __assign(__assign({}, result), variant);
+            continue;
+        }
+        if (val && typeof val === "object") {
+            result[key] = computeCssObject(val, theme);
+            continue;
+        }
+        var prop = get(aliases, key, key);
+        var scaleName = get(scales, prop);
+        var scale = get(theme, scaleName, get(theme, prop, {}));
+        var transform = get(transforms, prop, get);
+        var value = transform(scale, val, val);
+        if (multiples[prop]) {
+            var dirs = multiples[prop];
+            for (var i = 0; i < dirs.length; i++) {
+                result[dirs[i]] = value;
+            }
+        }
+        else {
+            result[prop] = value;
+        }
+    }
+    return result;
+};
+
 var addUnitIfNeeded = function (name, value) {
@@ -423,16 +429,18 @@ if (value == null || typeof value === "boolean" || value === "") {
 };
-var stylesObjectToRulesObjects = function (cssObject) {
-    var rulesObjects = {};
-    populateRulesObject("&", cssObject, rulesObjects);
-    return rulesObjects;
+var computeRulesObject = function (cssObject) {
+    var rulesObject = {};
+    populateRulesObject("&", cssObject, rulesObject);
+    return rulesObject;
 };
+var defaultDeps = [];
 var useCss = function (systemObject, theme, deps) {
+    if (deps === void 0) { deps = defaultDeps; }
     var styleSheet = useContext(StyleSheetContext);
     var className = useMemo(function () {
-        var styleObject = css(systemObject)(theme);
-        var hash = hashSum(styleObject);
+        var cssObject = computeCssObject(systemObject, theme);
+        var hash = hashSum(cssObject);
         var className = "style-" + hash;
         if (!styleSheet.createdClassNames[className]) {
-            var styleRulesObject = stylesObjectToRulesObjects(styleObject);
-            var rulesKeys = Object.keys(styleRulesObject).sort(function (a, b) {
+            var rulesObject = computeRulesObject(cssObject);
+            var rulesKeys = Object.keys(rulesObject).sort(function (a, b) {
                 return a < b ? -1 : a > b ? 1 : 0;
@@ -442,5 +450,5 @@ });
                 var ruleKey = rulesKeys_1[_i];
-                if (typeof styleRulesObject[ruleKey] === "string") {
+                if (typeof rulesObject[ruleKey] === "string") {
                     var selector = ruleKey.replace(/&/g, "." + className);
-                    var declaration = styleRulesObject[ruleKey];
+                    var declaration = rulesObject[ruleKey];
                     styleSheet.insertRule(selector + "{" + declaration + "}");
@@ -450,3 +458,3 @@ }
                     var identifier = ruleKey;
-                    var ruleObject = styleRulesObject[identifier];
+                    var ruleObject = rulesObject[identifier];
                     var ruleContent = "";
@@ -466,3 +474,3 @@ for (var ruleObjectKey in ruleObject) {
         // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, __spreadArrays([theme], (deps ? deps : [])));
+    }, __spreadArrays([theme], deps));
     return className;
@@ -469,0 +477,0 @@ };

dist/index.js

@@ -25,2 +25,13 @@ 'use strict';
 
+var __assign = function() {
+    __assign = Object.assign || function __assign(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+
 function __spreadArrays() {
@@ -34,217 +45,2 @@ for (var s = 0, i = 0, il = arguments.length; i < il; i++) s += arguments[i].length;
 
-function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-
-// based on https://github.com/developit/dlv
-var get = function get(obj, key, def, p, undef) {
-  key = key && key.split ? key.split('.') : [key];
-
-  for (p = 0; p < key.length; p++) {
-    obj = obj ? obj[key[p]] : undef;
-  }
-
-  return obj === undef ? def : obj;
-};
-var defaultBreakpoints = [40, 52, 64].map(function (n) {
-  return n + 'em';
-});
-var defaultTheme = {
-  space: [0, 4, 8, 16, 32, 64, 128, 256, 512],
-  fontSizes: [12, 14, 16, 20, 24, 32, 48, 64, 72]
-};
-var aliases = {
-  bg: 'backgroundColor',
-  m: 'margin',
-  mt: 'marginTop',
-  mr: 'marginRight',
-  mb: 'marginBottom',
-  ml: 'marginLeft',
-  mx: 'marginX',
-  my: 'marginY',
-  p: 'padding',
-  pt: 'paddingTop',
-  pr: 'paddingRight',
-  pb: 'paddingBottom',
-  pl: 'paddingLeft',
-  px: 'paddingX',
-  py: 'paddingY'
-};
-var multiples = {
-  marginX: ['marginLeft', 'marginRight'],
-  marginY: ['marginTop', 'marginBottom'],
-  paddingX: ['paddingLeft', 'paddingRight'],
-  paddingY: ['paddingTop', 'paddingBottom'],
-  size: ['width', 'height']
-};
-var scales = {
-  color: 'colors',
-  backgroundColor: 'colors',
-  borderColor: 'colors',
-  margin: 'space',
-  marginTop: 'space',
-  marginRight: 'space',
-  marginBottom: 'space',
-  marginLeft: 'space',
-  marginX: 'space',
-  marginY: 'space',
-  padding: 'space',
-  paddingTop: 'space',
-  paddingRight: 'space',
-  paddingBottom: 'space',
-  paddingLeft: 'space',
-  paddingX: 'space',
-  paddingY: 'space',
-  top: 'space',
-  right: 'space',
-  bottom: 'space',
-  left: 'space',
-  gridGap: 'space',
-  gridColumnGap: 'space',
-  gridRowGap: 'space',
-  gap: 'space',
-  columnGap: 'space',
-  rowGap: 'space',
-  fontFamily: 'fonts',
-  fontSize: 'fontSizes',
-  fontWeight: 'fontWeights',
-  lineHeight: 'lineHeights',
-  letterSpacing: 'letterSpacings',
-  border: 'borders',
-  borderTop: 'borders',
-  borderRight: 'borders',
-  borderBottom: 'borders',
-  borderLeft: 'borders',
-  borderWidth: 'borderWidths',
-  borderStyle: 'borderStyles',
-  borderRadius: 'radii',
-  borderTopRightRadius: 'radii',
-  borderTopLeftRadius: 'radii',
-  borderBottomRightRadius: 'radii',
-  borderBottomLeftRadius: 'radii',
-  borderTopWidth: 'borderWidths',
-  borderTopColor: 'colors',
-  borderTopStyle: 'borderStyles',
-  borderBottomWidth: 'borderWidths',
-  borderBottomColor: 'colors',
-  borderBottomStyle: 'borderStyles',
-  borderLeftWidth: 'borderWidths',
-  borderLeftColor: 'colors',
-  borderLeftStyle: 'borderStyles',
-  borderRightWidth: 'borderWidths',
-  borderRightColor: 'colors',
-  borderRightStyle: 'borderStyles',
-  outlineColor: 'colors',
-  boxShadow: 'shadows',
-  textShadow: 'shadows',
-  zIndex: 'zIndices',
-  width: 'sizes',
-  minWidth: 'sizes',
-  maxWidth: 'sizes',
-  height: 'sizes',
-  minHeight: 'sizes',
-  maxHeight: 'sizes',
-  flexBasis: 'sizes',
-  size: 'sizes',
-  // svg
-  fill: 'colors',
-  stroke: 'colors'
-};
-
-var positiveOrNegative = function positiveOrNegative(scale, value) {
-  if (typeof value !== 'number' || value >= 0) {
-    return get(scale, value, value);
-  }
-
-  var absolute = Math.abs(value);
-  var n = get(scale, absolute, absolute);
-  if (typeof n === 'string') return '-' + n;
-  return n * -1;
-};
-
-var transforms = ['margin', 'marginTop', 'marginRight', 'marginBottom', 'marginLeft', 'marginX', 'marginY', 'top', 'bottom', 'left', 'right'].reduce(function (acc, curr) {
-  var _extends2;
-
-  return _extends({}, acc, (_extends2 = {}, _extends2[curr] = positiveOrNegative, _extends2));
-}, {});
-var responsive = function responsive(styles) {
-  return function (theme) {
-    var next = {};
-    var breakpoints = get(theme, 'breakpoints', defaultBreakpoints);
-    var mediaQueries = [null].concat(breakpoints.map(function (n) {
-      return "@media screen and (min-width: " + n + ")";
-    }));
-
-    for (var key in styles) {
-      var value = typeof styles[key] === 'function' ? styles[key](theme) : styles[key];
-      if (value == null) continue;
-
-      if (!Array.isArray(value)) {
-        next[key] = value;
-        continue;
-      }
-
-      for (var i = 0; i < value.slice(0, mediaQueries.length).length; i++) {
-        var media = mediaQueries[i];
-
-        if (!media) {
-          next[key] = value[i];
-          continue;
-        }
-
-        next[media] = next[media] || {};
-        if (value[i] == null) continue;
-        next[media][key] = value[i];
-      }
-    }
-
-    return next;
-  };
-};
-var css = function css(args) {
-  return function (props) {
-    if (props === void 0) {
-      props = {};
-    }
-
-    var theme = _extends({}, defaultTheme, {}, props.theme || props);
-
-    var result = {};
-    var obj = typeof args === 'function' ? args(theme) : args;
-    var styles = responsive(obj)(theme);
-
-    for (var key in styles) {
-      var x = styles[key];
-      var val = typeof x === 'function' ? x(theme) : x;
-
-      if (key === 'variant') {
-        var variant = css(get(theme, val))(theme);
-        result = _extends({}, result, {}, variant);
-        continue;
-      }
-
-      if (val && typeof val === 'object') {
-        result[key] = css(val)(theme);
-        continue;
-      }
-
-      var prop = get(aliases, key, key);
-      var scaleName = get(scales, prop);
-      var scale = get(theme, scaleName, get(theme, prop, {}));
-      var transform = get(transforms, prop, get);
-      var value = transform(scale, val, val);
-
-      if (multiples[prop]) {
-        var dirs = multiples[prop];
-
-        for (var i = 0; i < dirs.length; i++) {
-          result[dirs[i]] = value;
-        }
-      } else {
-        result[prop] = value;
-      }
-    }
-
-    return result;
-  };
-};
-
 function pad (hash, len) {
@@ -392,2 +188,212 @@ while (hash.length < len) {
 
+var defaultTheme = {
+    breakpoints: {
+        s: "40em",
+        m: "52em",
+        l: "64em",
+    },
+    space: [0, 4, 8, 16, 32, 64, 128, 256, 512],
+    fontSizes: [12, 14, 16, 20, 24, 32, 48, 64, 72],
+};
+
+var get = function (obj, path, def) {
+    var result = obj;
+    var keys = typeof path === "string" ? path.split(".") : [path];
+    for (var _i = 0, keys_1 = keys; _i < keys_1.length; _i++) {
+        var key = keys_1[_i];
+        result = result ? result[key] : undefined;
+    }
+    return result === undefined ? def : result;
+};
+var aliases = {
+    bg: "backgroundColor",
+    m: "margin",
+    mt: "marginTop",
+    mr: "marginRight",
+    mb: "marginBottom",
+    ml: "marginLeft",
+    mx: "marginX",
+    my: "marginY",
+    p: "padding",
+    pt: "paddingTop",
+    pr: "paddingRight",
+    pb: "paddingBottom",
+    pl: "paddingLeft",
+    px: "paddingX",
+    py: "paddingY",
+};
+var multiples = {
+    marginX: ["marginLeft", "marginRight"],
+    marginY: ["marginTop", "marginBottom"],
+    paddingX: ["paddingLeft", "paddingRight"],
+    paddingY: ["paddingTop", "paddingBottom"],
+    size: ["width", "height"],
+};
+var scales = {
+    color: "colors",
+    backgroundColor: "colors",
+    borderColor: "colors",
+    margin: "space",
+    marginTop: "space",
+    marginRight: "space",
+    marginBottom: "space",
+    marginLeft: "space",
+    marginX: "space",
+    marginY: "space",
+    padding: "space",
+    paddingTop: "space",
+    paddingRight: "space",
+    paddingBottom: "space",
+    paddingLeft: "space",
+    paddingX: "space",
+    paddingY: "space",
+    top: "space",
+    right: "space",
+    bottom: "space",
+    left: "space",
+    gridGap: "space",
+    gridColumnGap: "space",
+    gridRowGap: "space",
+    gap: "space",
+    columnGap: "space",
+    rowGap: "space",
+    fontFamily: "fonts",
+    fontSize: "fontSizes",
+    fontWeight: "fontWeights",
+    lineHeight: "lineHeights",
+    letterSpacing: "letterSpacings",
+    border: "borders",
+    borderTop: "borders",
+    borderRight: "borders",
+    borderBottom: "borders",
+    borderLeft: "borders",
+    borderWidth: "borderWidths",
+    borderStyle: "borderStyles",
+    borderRadius: "radii",
+    borderTopRightRadius: "radii",
+    borderTopLeftRadius: "radii",
+    borderBottomRightRadius: "radii",
+    borderBottomLeftRadius: "radii",
+    borderTopWidth: "borderWidths",
+    borderTopColor: "colors",
+    borderTopStyle: "borderStyles",
+    borderBottomWidth: "borderWidths",
+    borderBottomColor: "colors",
+    borderBottomStyle: "borderStyles",
+    borderLeftWidth: "borderWidths",
+    borderLeftColor: "colors",
+    borderLeftStyle: "borderStyles",
+    borderRightWidth: "borderWidths",
+    borderRightColor: "colors",
+    borderRightStyle: "borderStyles",
+    outlineColor: "colors",
+    boxShadow: "shadows",
+    textShadow: "shadows",
+    zIndex: "zIndices",
+    width: "sizes",
+    minWidth: "sizes",
+    maxWidth: "sizes",
+    height: "sizes",
+    minHeight: "sizes",
+    maxHeight: "sizes",
+    flexBasis: "sizes",
+    size: "sizes",
+    // svg
+    fill: "colors",
+    stroke: "colors",
+};
+var positiveOrNegative = function (scale, value) {
+    if (typeof value !== "number" || value >= 0) {
+        return get(scale, value, value);
+    }
+    var absolute = Math.abs(value);
+    var n = get(scale, absolute, absolute);
+    if (typeof n === "string") {
+        return "-" + n;
+    }
+    return n * -1;
+};
+var transforms = [
+    "margin",
+    "marginTop",
+    "marginRight",
+    "marginBottom",
+    "marginLeft",
+    "marginX",
+    "marginY",
+    "top",
+    "bottom",
+    "left",
+    "right",
+].reduce(function (acc, curr) {
+    var _a;
+    return (__assign(__assign({}, acc), (_a = {}, _a[curr] = positiveOrNegative, _a)));
+}, {});
+var responsive = function (systemObject, theme) {
+    var next = {};
+    var breakpoints = get(theme, "breakpoints", defaultTheme.breakpoints);
+    var mediaQueries = Object.keys(breakpoints).reduce(function (acc, breakpointKey) {
+        var _a;
+        return __assign(__assign({}, acc), (_a = {}, _a[breakpointKey] = "@media screen and (min-width: " + breakpoints[breakpointKey] + ")", _a));
+    }, { _: null });
+    for (var key in systemObject) {
+        var value = systemObject[key];
+        var type = typeof value;
+        if (value == null || Array.isArray(value)) {
+            continue;
+        }
+        if (key.includes("&") || type === "string" || type === "number") {
+            next[key] = value;
+            continue;
+        }
+        var breakpointKeys = Object.keys(value);
+        for (var _i = 0, breakpointKeys_1 = breakpointKeys; _i < breakpointKeys_1.length; _i++) {
+            var breakpointKey = breakpointKeys_1[_i];
+            var media = mediaQueries[breakpointKey];
+            if (!media) {
+                next[key] = value[breakpointKey];
+                continue;
+            }
+            next[media] = next[media] || {};
+            if (value[breakpointKey] == null)
+                continue;
+            next[media][key] = value[breakpointKey];
+        }
+    }
+    return next;
+};
+var computeCssObject = function (systemObject, mayBeTheme) {
+    var theme = __assign(__assign({}, defaultTheme), mayBeTheme);
+    var result = {};
+    var styles = responsive(systemObject, theme);
+    for (var key in styles) {
+        var x = styles[key];
+        var val = typeof x === "function" ? x(theme) : x;
+        if (key === "variant") {
+            var variant = computeCssObject(get(theme, val), theme);
+            result = __assign(__assign({}, result), variant);
+            continue;
+        }
+        if (val && typeof val === "object") {
+            result[key] = computeCssObject(val, theme);
+            continue;
+        }
+        var prop = get(aliases, key, key);
+        var scaleName = get(scales, prop);
+        var scale = get(theme, scaleName, get(theme, prop, {}));
+        var transform = get(transforms, prop, get);
+        var value = transform(scale, val, val);
+        if (multiples[prop]) {
+            var dirs = multiples[prop];
+            for (var i = 0; i < dirs.length; i++) {
+                result[dirs[i]] = value;
+            }
+        }
+        else {
+            result[prop] = value;
+        }
+    }
+    return result;
+};
+
 var addUnitIfNeeded = function (name, value) {
@@ -430,16 +436,18 @@ if (value == null || typeof value === "boolean" || value === "") {
 };
-var stylesObjectToRulesObjects = function (cssObject) {
-    var rulesObjects = {};
-    populateRulesObject("&", cssObject, rulesObjects);
-    return rulesObjects;
+var computeRulesObject = function (cssObject) {
+    var rulesObject = {};
+    populateRulesObject("&", cssObject, rulesObject);
+    return rulesObject;
 };
+var defaultDeps = [];
 var useCss = function (systemObject, theme, deps) {
+    if (deps === void 0) { deps = defaultDeps; }
     var styleSheet = React.useContext(StyleSheetContext);
     var className = React.useMemo(function () {
-        var styleObject = css(systemObject)(theme);
-        var hash = hashSum(styleObject);
+        var cssObject = computeCssObject(systemObject, theme);
+        var hash = hashSum(cssObject);
         var className = "style-" + hash;
         if (!styleSheet.createdClassNames[className]) {
-            var styleRulesObject = stylesObjectToRulesObjects(styleObject);
-            var rulesKeys = Object.keys(styleRulesObject).sort(function (a, b) {
+            var rulesObject = computeRulesObject(cssObject);
+            var rulesKeys = Object.keys(rulesObject).sort(function (a, b) {
                 return a < b ? -1 : a > b ? 1 : 0;
@@ -449,5 +457,5 @@ });
                 var ruleKey = rulesKeys_1[_i];
-                if (typeof styleRulesObject[ruleKey] === "string") {
+                if (typeof rulesObject[ruleKey] === "string") {
                     var selector = ruleKey.replace(/&/g, "." + className);
-                    var declaration = styleRulesObject[ruleKey];
+                    var declaration = rulesObject[ruleKey];
                     styleSheet.insertRule(selector + "{" + declaration + "}");
@@ -457,3 +465,3 @@ }
                     var identifier = ruleKey;
-                    var ruleObject = styleRulesObject[identifier];
+                    var ruleObject = rulesObject[identifier];
                     var ruleContent = "";
@@ -473,3 +481,3 @@ for (var ruleObjectKey in ruleObject) {
         // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, __spreadArrays([theme], (deps ? deps : [])));
+    }, __spreadArrays([theme], deps));
     return className;
@@ -476,0 +484,0 @@ };

dist/useCss.d.ts

@@ -1,2 +0,2 @@
-import { SystemStyleObject, Theme } from "@styled-system/css";
+import { SystemStyleObject, Theme } from "./types";
 export declare const useCss: (systemObject: SystemStyleObject, theme: Theme, deps?: any[]) => string;

package.json

 {
   "name": "@css-system/use-css",
-  "version": "0.2.0",
+  "version": "0.3.0",
   "license": "MIT",
@@ -26,4 +26,3 @@ "repository": "css-system/use-css",
   "dependencies": {
-    "hash-sum": "^2.0.0",
-    "@styled-system/css": "^5.1.4"
+    "hash-sum": "^2.0.0"
   },
@@ -40,4 +39,4 @@ "peerDependencies": {
     "@types/react-dom": "^16.0.5",
-    "@types/styled-system__css": "^5.0.4",
     "cross-env": "^7.0.0",
+    "csstype": "^2.6.9",
     "gh-pages": "^2.2.0",
@@ -44,0 +43,0 @@ "react": "^16.4.1",

README.md

 # css-system/use-css
 
 A react hook for building versatile design primitives.
+It follow the (theme ui specifications)[https://github.com/system-ui/theme-specification].
 
@@ -13,3 +14,3 @@ ## Example
 const theme = {
-  breakpoints: ["40em", "52em", "64em"],
+  breakpoints: {s: "40em", m: "52em", l: "64em"},
   colors: {
@@ -34,3 +35,2 @@ background: "#ffffff",
       flex: "none",
-      alignSelf: "auto",
       alignItems: "stretch",
@@ -51,10 +51,6 @@ flexDirection: "column",
     {
-      display: "inline-flex",
+      display: "inline",
       minWidth: 0,
       minHeight: 0,
       flex: "none",
-      alignSelf: "auto",
-      alignItems: "stretch",
-      flexDirection: "row",
-      justifyContent: "flex-start",
       ...css,
@@ -72,3 +68,3 @@ },
       css={{
-        p: [1, 2, 3],
+        p: {_: 0, s: 1, m: 2, l: 3},
         "&:hover": {
@@ -80,3 +76,3 @@ bg: "text",
     >
-      <Text css={{fontSize: [1, 2, 3]}}>Hello world !</Text>
+      <Text css={{fontSize: {_: 1, m: 2}}>Hello world !</Text>
     </View>
@@ -83,0 +79,0 @@ )

New alerts

Major refactor

Supply chain risk

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

Found 1 instance in 1 package

Fixed alerts

Major refactor

Supply chain risk

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

Found 1 instance in 1 package

New author

Supply chain risk

A new npm collaborator published a version of the package for the first time. New collaborators are usually benign additions to a project, but do indicate a change to the security surface area of a package.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

135689

22.53%

Dependency count

3

-25%

Number of package files

16

33.33%

Lines of code

1570

67.74%

Number of medium supply chain risk alerts

1

-50%

Worsened metrics

Number of lines in readme file

77

-4.94%

Dependency changes

• - Removed

  @styled-system/css@^5.1.4

• - Removed

  @styled-system/css@5.1.5
  (transitive)