@theme-ui/css - npm Package Compare versions

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

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;
+/**
+ * Allows for nested scales with shorthand values
+ * @example
+ * {
+ *   colors: {
+ *     primary: { __default: '#00f', light: '#33f' }
+ *   }
+ * }
+ * css({ color: 'primary' }); // { color: '#00f' }
+ * css({ color: 'primary.light' }) // { color: '#33f' }
+ */
+export declare const THEME_UI_DEFAULT_KEY = "__default";
+/**
+ * Extracts value under path from a deeply nested object.
+ * Used for Themes, variants and Theme UI style objects.
+ * Given a path to object with `__default` key, returns the value under that key.
+ *
+ * @param obj a theme, variant or style object
+ * @param path path separated with dots (`.`)
+ * @param fallback default value returned if get(obj, path) is not found
+ */
+export declare function get(obj: object, path: string | number | undefined, fallback?: unknown, p?: number, undef?: unknown): any;
 export declare const getObjectWithVariants: (obj: any, theme: Theme) => CSSObject;
@@ -5,0 +26,0 @@ export declare const defaultBreakpoints: string[];

dist/index.esm.js

@@ -21,15 +21,39 @@ import '@emotion/react';
 
+/**
+ * Allows for nested scales with shorthand values
+ * @example
+ * {
+ *   colors: {
+ *     primary: { __default: '#00f', light: '#33f' }
+ *   }
+ * }
+ * css({ color: 'primary' }); // { color: '#00f' }
+ * css({ color: 'primary.light' }) // { color: '#33f' }
+ */
+
+var THEME_UI_DEFAULT_KEY = '__default';
+
 var hasDefault = function hasDefault(x) {
-  return typeof x === 'object' && x !== null && 'default' in x;
+  return typeof x === 'object' && x !== null && THEME_UI_DEFAULT_KEY in x;
 };
+/**
+ * Extracts value under path from a deeply nested object.
+ * Used for Themes, variants and Theme UI style objects.
+ * Given a path to object with `__default` key, returns the value under that key.
+ *
+ * @param obj a theme, variant or style object
+ * @param path path separated with dots (`.`)
+ * @param fallback default value returned if get(obj, path) is not found
+ */
 
-function get(obj, key, def, p, undef) {
-  var path = key && typeof key === 'string' ? key.split('.') : [key];
 
-  for (p = 0; p < path.length; p++) {
-    obj = obj ? obj[path[p]] : undef;
+function get(obj, path, fallback, p, undef) {
+  var pathArray = path && typeof path === 'string' ? path.split('.') : [path];
+
+  for (p = 0; p < pathArray.length; p++) {
+    obj = obj ? obj[pathArray[p]] : undef;
   }
 
-  if (obj === undef) return def;
-  return hasDefault(obj) ? obj["default"] : obj;
+  if (obj === undef) return fallback;
+  return hasDefault(obj) ? obj[THEME_UI_DEFAULT_KEY] : obj;
 }
@@ -319,3 +343,3 @@ var getObjectWithVariants = function getObjectWithVariants(obj, theme) {
       var scaleName = prop in scales ? scales[prop] : undefined;
-      var scale = get(theme, scaleName, get(theme, prop, {}));
+      var scale = scaleName ? theme == null ? void 0 : theme[scaleName] : get(theme, prop, {});
       var transform = get(transforms, prop, get);
@@ -339,3 +363,3 @@ var value = transform(scale, val, val);
 
-export { css, defaultBreakpoints, get, getObjectWithVariants, multiples, scales };
+export { THEME_UI_DEFAULT_KEY, css, defaultBreakpoints, get, getObjectWithVariants, multiples, scales };
 //# sourceMappingURL=index.esm.js.map

dist/index.js

@@ -21,15 +21,39 @@ require('@emotion/react');
 
+/**
+ * Allows for nested scales with shorthand values
+ * @example
+ * {
+ *   colors: {
+ *     primary: { __default: '#00f', light: '#33f' }
+ *   }
+ * }
+ * css({ color: 'primary' }); // { color: '#00f' }
+ * css({ color: 'primary.light' }) // { color: '#33f' }
+ */
+
+var THEME_UI_DEFAULT_KEY = '__default';
+
 var hasDefault = function hasDefault(x) {
-  return typeof x === 'object' && x !== null && 'default' in x;
+  return typeof x === 'object' && x !== null && THEME_UI_DEFAULT_KEY in x;
 };
+/**
+ * Extracts value under path from a deeply nested object.
+ * Used for Themes, variants and Theme UI style objects.
+ * Given a path to object with `__default` key, returns the value under that key.
+ *
+ * @param obj a theme, variant or style object
+ * @param path path separated with dots (`.`)
+ * @param fallback default value returned if get(obj, path) is not found
+ */
 
-function get(obj, key, def, p, undef) {
-  var path = key && typeof key === 'string' ? key.split('.') : [key];
 
-  for (p = 0; p < path.length; p++) {
-    obj = obj ? obj[path[p]] : undef;
+function get(obj, path, fallback, p, undef) {
+  var pathArray = path && typeof path === 'string' ? path.split('.') : [path];
+
+  for (p = 0; p < pathArray.length; p++) {
+    obj = obj ? obj[pathArray[p]] : undef;
   }
 
-  if (obj === undef) return def;
-  return hasDefault(obj) ? obj["default"] : obj;
+  if (obj === undef) return fallback;
+  return hasDefault(obj) ? obj[THEME_UI_DEFAULT_KEY] : obj;
 }
@@ -319,3 +343,3 @@ var getObjectWithVariants = function getObjectWithVariants(obj, theme) {
       var scaleName = prop in scales ? scales[prop] : undefined;
-      var scale = get(theme, scaleName, get(theme, prop, {}));
+      var scale = scaleName ? theme == null ? void 0 : theme[scaleName] : get(theme, prop, {});
       var transform = get(transforms, prop, get);
@@ -339,2 +363,3 @@ var value = transform(scale, val, val);
 
+exports.THEME_UI_DEFAULT_KEY = THEME_UI_DEFAULT_KEY;
 exports.css = css;
@@ -341,0 +366,0 @@ exports.defaultBreakpoints = defaultBreakpoints;

dist/index.modern.js

@@ -21,15 +21,39 @@ import '@emotion/react';
 
+/**
+ * Allows for nested scales with shorthand values
+ * @example
+ * {
+ *   colors: {
+ *     primary: { __default: '#00f', light: '#33f' }
+ *   }
+ * }
+ * css({ color: 'primary' }); // { color: '#00f' }
+ * css({ color: 'primary.light' }) // { color: '#33f' }
+ */
+
+const THEME_UI_DEFAULT_KEY = '__default';
+
 const hasDefault = x => {
-  return typeof x === 'object' && x !== null && 'default' in x;
+  return typeof x === 'object' && x !== null && THEME_UI_DEFAULT_KEY in x;
 };
+/**
+ * Extracts value under path from a deeply nested object.
+ * Used for Themes, variants and Theme UI style objects.
+ * Given a path to object with `__default` key, returns the value under that key.
+ *
+ * @param obj a theme, variant or style object
+ * @param path path separated with dots (`.`)
+ * @param fallback default value returned if get(obj, path) is not found
+ */
 
-function get(obj, key, def, p, undef) {
-  const path = key && typeof key === 'string' ? key.split('.') : [key];
 
-  for (p = 0; p < path.length; p++) {
-    obj = obj ? obj[path[p]] : undef;
+function get(obj, path, fallback, p, undef) {
+  const pathArray = path && typeof path === 'string' ? path.split('.') : [path];
+
+  for (p = 0; p < pathArray.length; p++) {
+    obj = obj ? obj[pathArray[p]] : undef;
   }
 
-  if (obj === undef) return def;
-  return hasDefault(obj) ? obj.default : obj;
+  if (obj === undef) return fallback;
+  return hasDefault(obj) ? obj[THEME_UI_DEFAULT_KEY] : obj;
 }
@@ -302,3 +326,3 @@ const getObjectWithVariants = (obj, theme) => {
     const scaleName = prop in scales ? scales[prop] : undefined;
-    const scale = get(theme, scaleName, get(theme, prop, {}));
+    const scale = scaleName ? theme == null ? void 0 : theme[scaleName] : get(theme, prop, {});
     const transform = get(transforms, prop, get);
@@ -321,3 +345,3 @@ const value = transform(scale, val, val);
 
-export { css, defaultBreakpoints, get, getObjectWithVariants, multiples, scales };
+export { THEME_UI_DEFAULT_KEY, css, defaultBreakpoints, get, getObjectWithVariants, multiples, scales };
 //# sourceMappingURL=index.modern.js.map

dist/index.umd.js

@@ -24,15 +24,39 @@ (function (global, factory) {
 
+  /**
+   * Allows for nested scales with shorthand values
+   * @example
+   * {
+   *   colors: {
+   *     primary: { __default: '#00f', light: '#33f' }
+   *   }
+   * }
+   * css({ color: 'primary' }); // { color: '#00f' }
+   * css({ color: 'primary.light' }) // { color: '#33f' }
+   */
+
+  var THEME_UI_DEFAULT_KEY = '__default';
+
   var hasDefault = function hasDefault(x) {
-    return typeof x === 'object' && x !== null && 'default' in x;
+    return typeof x === 'object' && x !== null && THEME_UI_DEFAULT_KEY in x;
   };
+  /**
+   * Extracts value under path from a deeply nested object.
+   * Used for Themes, variants and Theme UI style objects.
+   * Given a path to object with `__default` key, returns the value under that key.
+   *
+   * @param obj a theme, variant or style object
+   * @param path path separated with dots (`.`)
+   * @param fallback default value returned if get(obj, path) is not found
+   */
 
-  function get(obj, key, def, p, undef) {
-    var path = key && typeof key === 'string' ? key.split('.') : [key];
 
-    for (p = 0; p < path.length; p++) {
-      obj = obj ? obj[path[p]] : undef;
+  function get(obj, path, fallback, p, undef) {
+    var pathArray = path && typeof path === 'string' ? path.split('.') : [path];
+
+    for (p = 0; p < pathArray.length; p++) {
+      obj = obj ? obj[pathArray[p]] : undef;
     }
 
-    if (obj === undef) return def;
-    return hasDefault(obj) ? obj["default"] : obj;
+    if (obj === undef) return fallback;
+    return hasDefault(obj) ? obj[THEME_UI_DEFAULT_KEY] : obj;
   }
@@ -322,3 +346,3 @@ var getObjectWithVariants = function getObjectWithVariants(obj, theme) {
         var scaleName = prop in scales ? scales[prop] : undefined;
-        var scale = get(theme, scaleName, get(theme, prop, {}));
+        var scale = scaleName ? theme == null ? void 0 : theme[scaleName] : get(theme, prop, {});
         var transform = get(transforms, prop, get);
@@ -342,2 +366,3 @@ var value = transform(scale, val, val);
 
+  exports.THEME_UI_DEFAULT_KEY = THEME_UI_DEFAULT_KEY;
   exports.css = css;
@@ -344,0 +369,0 @@ exports.defaultBreakpoints = defaultBreakpoints;

package.json

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

src/index.ts

@@ -11,20 +11,45 @@ import {
 
-const hasDefault = (x: unknown): x is { default: string | number } => {
-  return typeof x === 'object' && x !== null && 'default' in x
+/**
+ * Allows for nested scales with shorthand values
+ * @example
+ * {
+ *   colors: {
+ *     primary: { __default: '#00f', light: '#33f' }
+ *   }
+ * }
+ * css({ color: 'primary' }); // { color: '#00f' }
+ * css({ color: 'primary.light' }) // { color: '#33f' }
+ */
+export const THEME_UI_DEFAULT_KEY = '__default'
+
+const hasDefault = (
+  x: unknown
+): x is { [THEME_UI_DEFAULT_KEY]: string | number } => {
+  return typeof x === 'object' && x !== null && THEME_UI_DEFAULT_KEY in x
 }
 
+/**
+ * Extracts value under path from a deeply nested object.
+ * Used for Themes, variants and Theme UI style objects.
+ * Given a path to object with `__default` key, returns the value under that key.
+ *
+ * @param obj a theme, variant or style object
+ * @param path path separated with dots (`.`)
+ * @param fallback default value returned if get(obj, path) is not found
+ */
 export function get(
   obj: object,
-  key: string | number | undefined,
-  def?: unknown,
+  path: string | number | undefined,
+  fallback?: unknown,
   p?: number,
   undef?: unknown
 ): any {
-  const path = key && typeof key === 'string' ? key.split('.') : [key]
-  for (p = 0; p < path.length; p++) {
-    obj = obj ? (obj as any)[path[p]!] : undef
+  const pathArray = path && typeof path === 'string' ? path.split('.') : [path]
+  for (p = 0; p < pathArray.length; p++) {
+    obj = obj ? (obj as any)[pathArray[p]!] : undef
   }
-  if (obj === undef) return def
 
-  return hasDefault(obj) ? obj.default : obj
+  if (obj === undef) return fallback
+
+  return hasDefault(obj) ? obj[THEME_UI_DEFAULT_KEY] : obj
 }
@@ -329,4 +354,4 @@
     const scaleName = prop in scales ? scales[prop as keyof Scales] : undefined
-    const scale = get(theme, scaleName as any, get(theme, prop, {}))
-    const transform: any = get(transforms, prop, get)
+    const scale = scaleName ? theme?.[scaleName] : get(theme, prop, {})
+    const transform = get(transforms, prop, get)
     const value = transform(scale, val, val)
@@ -333,0 +358,0 @@

test/index.ts

@@ -10,3 +10,3 @@ import { css, Theme } from '../src'
     purple: {
-      default: 'darkviolet',
+      __default: 'darkviolet',
       100: 'rebeccapurple',
@@ -39,3 +39,3 @@ 500: 'darkviolet',
   buttons: {
-    default: {
+    __default: {
       px: 4,
@@ -75,2 +75,5 @@ py: 2,
   },
+  borders: {
+    body: '3px solid #000000',
+  },
   borderWidths: {
@@ -89,2 +92,10 @@ thin: 1,
   },
+  shadows: {
+    card: '5px 5px 15px 5px #000000',
+  },
+  zIndices: {
+    below: -1,
+    body: 1,
+    nav: 2,
+  },
 }
@@ -189,2 +200,5 @@
     lineHeight: 'body',
+    border: 'body',
+    boxShadow: 'card',
+    zIndex: 'nav',
   })({ theme })
@@ -210,2 +224,5 @@ expect(result).toEqual({
     lineHeight: 1.5,
+    border: '3px solid #000000',
+    boxShadow: '5px 5px 15px 5px #000000',
+    zIndex: 2,
   })
@@ -264,3 +281,3 @@ })
 
-test('returns `default` key when accessing object value with default', () => {
+test('returns `__default` key when accessing object value with default', () => {
   const result = css({
@@ -274,3 +291,3 @@ color: 'purple',
 
-test('returns nested key when accessing key from object value with default', () => {
+test('returns nested key when accessing key from object value with __default', () => {
   const result = css({
@@ -284,3 +301,3 @@ color: 'purple.100',
 
-test('variant prop returns `default` key when accessing variant object with default', () => {
+test('variant prop returns `__default` key when accessing variant object with default', () => {
   const result = css({
@@ -287,0 +304,0 @@ variant: 'buttons',

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

Environment variable access

Supply chain risk

Package accesses environment variables, which may be a sign of credential stuffing or data theft.

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

304527

increased by37.34%

Number of package files

27

increased by50%

Lines of code

6063

increased by55.54%

Worsened metrics

Number of low supply chain risk alerts

2

increased by100%

No dependency changes