@theme-ui/css - npm Package Compare versions

Comparing version 0.6.0-alpha.1 to 0.6.0-alpha.4

dist/index.d.ts

 import { CSSObject, ThemeUIStyleObject, Theme } from './types';
 export * from './types';
 export declare function get(obj: object, key: string | number | undefined, def?: unknown, p?: number, undef?: unknown): any;
+export declare const getObjectWithVariants: (obj: any, theme: Theme) => CSSObject;
 export declare const defaultBreakpoints: string[];
@@ -5,0 +6,0 @@ export declare const multiples: {

dist/index.esm.js

@@ -21,2 +21,6 @@ import '@emotion/react';
 
+var hasDefault = function hasDefault(x) {
+  return typeof x === 'object' && x !== null && 'default' in x;
+};
+
 function get(obj, key, def, p, undef) {
@@ -29,4 +33,26 @@ var path = key && typeof key === 'string' ? key.split('.') : [key];
 
-  return obj === undef ? def : obj;
+  if (obj === undef) return def;
+  return hasDefault(obj) ? obj["default"] : obj;
 }
+var getObjectWithVariants = function getObjectWithVariants(obj, theme) {
+  if (obj && obj['variant']) {
+    var result = {};
+
+    for (var key in obj) {
+      var x = obj[key];
+
+      if (key === 'variant') {
+        var val = typeof x === 'function' ? x(theme) : x;
+        var variant = getObjectWithVariants(get(theme, val), theme);
+        result = _extends({}, result, variant);
+      } else {
+        result[key] = x;
+      }
+    }
+
+    return result;
+  }
+
+  return obj;
+};
 var defaultBreakpoints = [40, 52, 64].map(function (n) {
@@ -273,44 +299,26 @@ return n + 'em';
 
-    var theme = _extends({}, defaultTheme, 'theme' in props ? props.theme : props);
-
-    var obj = typeof args === 'function' ? args(theme) : args;
-    var result = {}; // insert variant props before responsive styles, so they can be merged
+    var theme = _extends({}, defaultTheme, 'theme' in props ? props.theme : props); // insert variant props before responsive styles, so they can be merged
     // we need to maintain order of the style props, so if a variant is place in the middle
     // of other props, it will extends its props at that same location order.
 
-    if (obj && obj['variant']) {
-      for (var key in obj) {
-        var x = obj[key];
 
-        if (key === 'variant') {
-          var val = typeof x === 'function' ? x(theme) : x;
-          var variant = get(theme, val);
-          result = _extends({}, result, variant);
-        } else {
-          result[key] = x;
-        }
-      }
-    } else {
-      result = obj;
-    }
+    var obj = getObjectWithVariants(typeof args === 'function' ? args(theme) : args, theme);
+    var styles = responsive(obj)(theme);
+    var result = {};
 
-    var styles = responsive(result)(theme);
-    result = {};
+    for (var key in styles) {
+      var x = styles[key];
+      var val = typeof x === 'function' ? x(theme) : x;
 
-    for (var _key in styles) {
-      var _x = styles[_key];
-
-      var _val = typeof _x === 'function' ? _x(theme) : _x;
-
-      if (_val && typeof _val === 'object') {
+      if (val && typeof val === 'object') {
         // TODO: val can also be an array here. Is this a bug? Can it be reproduced?
-        result[_key] = css(_val)(theme);
+        result[key] = css(val)(theme);
         continue;
       }
 
-      var prop = _key in aliases ? aliases[_key] : _key;
+      var prop = key in aliases ? aliases[key] : key;
       var scaleName = prop in scales ? scales[prop] : undefined;
       var scale = get(theme, scaleName, get(theme, prop, {}));
       var transform = get(transforms, prop, get);
-      var value = transform(scale, _val, _val);
+      var value = transform(scale, val, val);
 
@@ -332,3 +340,3 @@ if (prop in multiples) {
 
-export { css, defaultBreakpoints, get, multiples, scales };
+export { css, defaultBreakpoints, get, getObjectWithVariants, multiples, scales };
 //# sourceMappingURL=index.esm.js.map

dist/index.js

@@ -21,2 +21,6 @@ require('@emotion/react');
 
+var hasDefault = function hasDefault(x) {
+  return typeof x === 'object' && x !== null && 'default' in x;
+};
+
 function get(obj, key, def, p, undef) {
@@ -29,4 +33,26 @@ var path = key && typeof key === 'string' ? key.split('.') : [key];
 
-  return obj === undef ? def : obj;
+  if (obj === undef) return def;
+  return hasDefault(obj) ? obj["default"] : obj;
 }
+var getObjectWithVariants = function getObjectWithVariants(obj, theme) {
+  if (obj && obj['variant']) {
+    var result = {};
+
+    for (var key in obj) {
+      var x = obj[key];
+
+      if (key === 'variant') {
+        var val = typeof x === 'function' ? x(theme) : x;
+        var variant = getObjectWithVariants(get(theme, val), theme);
+        result = _extends({}, result, variant);
+      } else {
+        result[key] = x;
+      }
+    }
+
+    return result;
+  }
+
+  return obj;
+};
 var defaultBreakpoints = [40, 52, 64].map(function (n) {
@@ -273,44 +299,26 @@ return n + 'em';
 
-    var theme = _extends({}, defaultTheme, 'theme' in props ? props.theme : props);
-
-    var obj = typeof args === 'function' ? args(theme) : args;
-    var result = {}; // insert variant props before responsive styles, so they can be merged
+    var theme = _extends({}, defaultTheme, 'theme' in props ? props.theme : props); // insert variant props before responsive styles, so they can be merged
     // we need to maintain order of the style props, so if a variant is place in the middle
     // of other props, it will extends its props at that same location order.
 
-    if (obj && obj['variant']) {
-      for (var key in obj) {
-        var x = obj[key];
 
-        if (key === 'variant') {
-          var val = typeof x === 'function' ? x(theme) : x;
-          var variant = get(theme, val);
-          result = _extends({}, result, variant);
-        } else {
-          result[key] = x;
-        }
-      }
-    } else {
-      result = obj;
-    }
+    var obj = getObjectWithVariants(typeof args === 'function' ? args(theme) : args, theme);
+    var styles = responsive(obj)(theme);
+    var result = {};
 
-    var styles = responsive(result)(theme);
-    result = {};
+    for (var key in styles) {
+      var x = styles[key];
+      var val = typeof x === 'function' ? x(theme) : x;
 
-    for (var _key in styles) {
-      var _x = styles[_key];
-
-      var _val = typeof _x === 'function' ? _x(theme) : _x;
-
-      if (_val && typeof _val === 'object') {
+      if (val && typeof val === 'object') {
         // TODO: val can also be an array here. Is this a bug? Can it be reproduced?
-        result[_key] = css(_val)(theme);
+        result[key] = css(val)(theme);
         continue;
       }
 
-      var prop = _key in aliases ? aliases[_key] : _key;
+      var prop = key in aliases ? aliases[key] : key;
       var scaleName = prop in scales ? scales[prop] : undefined;
       var scale = get(theme, scaleName, get(theme, prop, {}));
       var transform = get(transforms, prop, get);
-      var value = transform(scale, _val, _val);
+      var value = transform(scale, val, val);
 
@@ -335,4 +343,5 @@ if (prop in multiples) {
 exports.get = get;
+exports.getObjectWithVariants = getObjectWithVariants;
 exports.multiples = multiples;
 exports.scales = scales;
 //# sourceMappingURL=index.js.map

dist/index.modern.js

@@ -21,2 +21,6 @@ import '@emotion/react';
 
+const hasDefault = x => {
+  return typeof x === 'object' && x !== null && 'default' in x;
+};
+
 function get(obj, key, def, p, undef) {
@@ -29,4 +33,26 @@ const path = key && typeof key === 'string' ? key.split('.') : [key];
 
-  return obj === undef ? def : obj;
+  if (obj === undef) return def;
+  return hasDefault(obj) ? obj.default : obj;
 }
+const getObjectWithVariants = (obj, theme) => {
+  if (obj && obj['variant']) {
+    let result = {};
+
+    for (const key in obj) {
+      const x = obj[key];
+
+      if (key === 'variant') {
+        const val = typeof x === 'function' ? x(theme) : x;
+        const variant = getObjectWithVariants(get(theme, val), theme);
+        result = _extends({}, result, variant);
+      } else {
+        result[key] = x;
+      }
+    }
+
+    return result;
+  }
+
+  return obj;
+};
 const defaultBreakpoints = [40, 52, 64].map(n => n + 'em');
@@ -256,28 +282,11 @@ const defaultTheme = {
 const css = (args = {}) => (props = {}) => {
-  const theme = _extends({}, defaultTheme, 'theme' in props ? props.theme : props);
-
-  let obj = typeof args === 'function' ? args(theme) : args;
-  let result = {}; // insert variant props before responsive styles, so they can be merged
+  const theme = _extends({}, defaultTheme, 'theme' in props ? props.theme : props); // insert variant props before responsive styles, so they can be merged
   // we need to maintain order of the style props, so if a variant is place in the middle
   // of other props, it will extends its props at that same location order.
 
-  if (obj && obj['variant']) {
-    for (const key in obj) {
-      const x = obj[key];
 
-      if (key === 'variant') {
-        const val = typeof x === 'function' ? x(theme) : x;
-        const variant = get(theme, val);
-        result = _extends({}, result, variant);
-      } else {
-        result[key] = x;
-      }
-    }
-  } else {
-    result = obj;
-  }
+  const obj = getObjectWithVariants(typeof args === 'function' ? args(theme) : args, theme);
+  const styles = responsive(obj)(theme);
+  let result = {};
 
-  const styles = responsive(result)(theme);
-  result = {};
-
   for (const key in styles) {
@@ -313,3 +322,3 @@ const x = styles[key];
 
-export { css, defaultBreakpoints, get, multiples, scales };
+export { css, defaultBreakpoints, get, getObjectWithVariants, multiples, scales };
 //# sourceMappingURL=index.modern.js.map

dist/index.umd.js

@@ -24,2 +24,6 @@ (function (global, factory) {
 
+  var hasDefault = function hasDefault(x) {
+    return typeof x === 'object' && x !== null && 'default' in x;
+  };
+
   function get(obj, key, def, p, undef) {
@@ -32,4 +36,26 @@ var path = key && typeof key === 'string' ? key.split('.') : [key];
 
-    return obj === undef ? def : obj;
+    if (obj === undef) return def;
+    return hasDefault(obj) ? obj["default"] : obj;
   }
+  var getObjectWithVariants = function getObjectWithVariants(obj, theme) {
+    if (obj && obj['variant']) {
+      var result = {};
+
+      for (var key in obj) {
+        var x = obj[key];
+
+        if (key === 'variant') {
+          var val = typeof x === 'function' ? x(theme) : x;
+          var variant = getObjectWithVariants(get(theme, val), theme);
+          result = _extends({}, result, variant);
+        } else {
+          result[key] = x;
+        }
+      }
+
+      return result;
+    }
+
+    return obj;
+  };
   var defaultBreakpoints = [40, 52, 64].map(function (n) {
@@ -276,44 +302,26 @@ return n + 'em';
 
-      var theme = _extends({}, defaultTheme, 'theme' in props ? props.theme : props);
-
-      var obj = typeof args === 'function' ? args(theme) : args;
-      var result = {}; // insert variant props before responsive styles, so they can be merged
+      var theme = _extends({}, defaultTheme, 'theme' in props ? props.theme : props); // insert variant props before responsive styles, so they can be merged
       // we need to maintain order of the style props, so if a variant is place in the middle
       // of other props, it will extends its props at that same location order.
 
-      if (obj && obj['variant']) {
-        for (var key in obj) {
-          var x = obj[key];
 
-          if (key === 'variant') {
-            var val = typeof x === 'function' ? x(theme) : x;
-            var variant = get(theme, val);
-            result = _extends({}, result, variant);
-          } else {
-            result[key] = x;
-          }
-        }
-      } else {
-        result = obj;
-      }
+      var obj = getObjectWithVariants(typeof args === 'function' ? args(theme) : args, theme);
+      var styles = responsive(obj)(theme);
+      var result = {};
 
-      var styles = responsive(result)(theme);
-      result = {};
+      for (var key in styles) {
+        var x = styles[key];
+        var val = typeof x === 'function' ? x(theme) : x;
 
-      for (var _key in styles) {
-        var _x = styles[_key];
-
-        var _val = typeof _x === 'function' ? _x(theme) : _x;
-
-        if (_val && typeof _val === 'object') {
+        if (val && typeof val === 'object') {
           // TODO: val can also be an array here. Is this a bug? Can it be reproduced?
-          result[_key] = css(_val)(theme);
+          result[key] = css(val)(theme);
           continue;
         }
 
-        var prop = _key in aliases ? aliases[_key] : _key;
+        var prop = key in aliases ? aliases[key] : key;
         var scaleName = prop in scales ? scales[prop] : undefined;
         var scale = get(theme, scaleName, get(theme, prop, {}));
         var transform = get(transforms, prop, get);
-        var value = transform(scale, _val, _val);
+        var value = transform(scale, val, val);
 
@@ -338,2 +346,3 @@ if (prop in multiples) {
   exports.get = get;
+  exports.getObjectWithVariants = getObjectWithVariants;
   exports.multiples = multiples;
@@ -340,0 +349,0 @@ exports.scales = scales;

package.json

 {
   "name": "@theme-ui/css",
-  "version": "0.6.0-alpha.1",
+  "version": "0.6.0-alpha.4",
   "source": "src/index.ts",
@@ -23,3 +23,3 @@ "main": "dist/index.js",
   },
-  "gitHead": "920aa42e068634fce0482873cd165ec7a6e48449"
+  "gitHead": "d667041fc8369fd278ff38b242c8dffc97b138b3"
 }

README.md

@@ -1,2 +0,1 @@
-
 # @theme-ui/css
@@ -3,0 +2,0 @@

src/index.ts

@@ -11,2 +11,6 @@ import {
 
+const hasDefault = (x: unknown): x is { default: string | number } => {
+  return typeof x === 'object' && x !== null && 'default' in x
+}
+
 export function get(
@@ -23,5 +27,25 @@ obj: object,
   }
-  return obj === undef ? def : obj
+  if (obj === undef) return def
+
+  return hasDefault(obj) ? obj.default : obj
 }
 
+export const getObjectWithVariants = (obj: any, theme: Theme): CSSObject => {
+  if (obj && obj['variant']) {
+    let result: CSSObject = {}
+    for (const key in obj) {
+      const x = obj[key]
+      if (key === 'variant') {
+        const val = typeof x === 'function' ? x(theme) : x
+        const variant = getObjectWithVariants(get(theme, val as string), theme)
+        result = { ...result, ...variant }
+      } else {
+        result[key] = x as CSSObject
+      }
+    }
+    return result
+  }
+  return obj as CSSObject
+}
+
 export const defaultBreakpoints = [40, 52, 64].map((n) => n + 'em')
@@ -267,4 +291,4 @@
       next[media] = next[media] || {}
-      if (value[i] == null) continue;
-      (next[media] as Record<string, any>)[key] = value[i]
+      if (value[i] == null) continue
+      ;(next[media] as Record<string, any>)[key] = value[i]
     }
@@ -284,24 +308,13 @@ }
   }
-  let obj = typeof args === 'function' ? args(theme) : args
-  let result: CSSObject = {}
-
   // insert variant props before responsive styles, so they can be merged
   // we need to maintain order of the style props, so if a variant is place in the middle
   // of other props, it will extends its props at that same location order.
-  if (obj && obj['variant']) {
-    for (const key in obj) {
-      const x = obj[key as keyof typeof styles]
-      if (key === 'variant') {
-        const val = typeof x === 'function' ? x(theme) : x;
-        const variant = get(theme, val as string);
-        result = { ...result, ...variant };
-      } else {
-        result[key] = x as CSSObject;
-      }  
-    }
-  } else {
-    result = obj as CSSObject ;
-  }
-  const styles = responsive(result as ThemeUICSSObject)(theme)
-  result = {}
+
+  const obj: CSSObject = getObjectWithVariants(
+    typeof args === 'function' ? args(theme) : args,
+    theme
+  )
+
+  const styles = responsive(obj as ThemeUICSSObject)(theme)
+  let result: CSSObject = {}
   for (const key in styles) {
@@ -308,0 +321,0 @@ const x = styles[key as keyof typeof styles]

test/index.ts

@@ -9,2 +9,13 @@ import { css, Theme } from '../src'
     text: 'black',
+    purple: {
+      default: 'darkviolet',
+      100: 'rebeccapurple',
+      500: 'darkviolet',
+      900: 'violet',
+    },
+    pink: {
+      100: 'mediumvioletred',
+      500: 'hotpink',
+      900: 'pink',
+    },
   },
@@ -28,2 +39,9 @@ fontSizes: [12, 14, 16, 24, 36],
   buttons: {
+    default: {
+      px: 4,
+      py: 2,
+      fontWeight: 'bold',
+      color: 'secondary',
+      bg: 'background',
+    },
     primary: {
@@ -36,2 +54,11 @@ p: 3,
     },
+    size: {
+      size: '100%',
+      bg: 'primary',
+    },
+    round: {
+      variant: 'buttons.size',
+      overflow: 'hidden',
+      borderRadius: '50%',
+    },
   },
@@ -60,4 +87,4 @@ text: {
   transitions: {
-    standard: '0.3s ease-in-out'
-  }
+    standard: '0.3s ease-in-out',
+  },
 }
@@ -125,3 +152,3 @@
       py: [3, 4],
-      scrollPaddingY: [2, 4]
+      scrollPaddingY: [2, 4],
     },
@@ -141,3 +168,2 @@ })({ theme })
         scrollPaddingTop: 32,
-  
       },
@@ -238,2 +264,54 @@ },
 
+test('returns `default` key when accessing object value with default', () => {
+  const result = css({
+    color: 'purple',
+  })(theme)
+  expect(result).toEqual({
+    color: 'darkviolet',
+  })
+})
+
+test('returns nested key when accessing key from object value with default', () => {
+  const result = css({
+    color: 'purple.100',
+  })(theme)
+  expect(result).toEqual({
+    color: 'rebeccapurple',
+  })
+})
+
+test('variant prop returns `default` key when accessing variant object with default', () => {
+  const result = css({
+    variant: 'buttons',
+  })(theme)
+
+  expect(result).toEqual({
+    paddingLeft: 32,
+    paddingRight: 32,
+    paddingTop: 8,
+    paddingBottom: 8,
+    fontWeight: 600,
+    color: 'cyan',
+    backgroundColor: 'white',
+  })
+})
+
+test('returns object when accessing object value with no default key', () => {
+  const result = css({
+    color: 'pink',
+  })(theme)
+  // Note: Returning this object is the expected behavior; however, an object
+  // value like this isn't able to become valid CSS. Ensure the theme path
+  // points to a primitive value (such as 'pink.100') when intending to make
+  // CSS out of these values.
+  // Ref: https://github.com/system-ui/theme-ui/pull/951#discussion_r430697168
+  expect(result).toEqual({
+    color: {
+      100: 'mediumvioletred',
+      500: 'hotpink',
+      900: 'pink',
+    },
+  })
+})
+
 test('returns variants from theme', () => {
@@ -252,2 +330,15 @@ const result = css({
 
+test('returns nested variants from theme', () => {
+  const result = css({
+    variant: 'buttons.round',
+  })(theme)
+  expect(result).toEqual({
+    width: '100%',
+    height: '100%',
+    overflow: 'hidden',
+    borderRadius: '50%',
+    backgroundColor: 'tomato',
+  })
+})
+
 test('handles variants with responsive values', () => {
@@ -527,3 +618,3 @@ const result = css({
     'paddingBottom',
-    'scrollPadding'
+    'scrollPadding',
   ])
@@ -530,0 +621,0 @@ })

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Worsened metrics

Total package byte prevSize

221734

decreased by-37.62%

Number of package files

18

decreased by-52.63%

Lines of code

3898

decreased by-43.33%

Number of lines in readme file

11

decreased by-8.33%

No dependency changes