@theme-ui/css - npm Package Compare versions

Comparing version 0.6.0-alpha.6 to 0.6.0-alpha.7

dist/index.d.ts

 import { CSSObject, ThemeUIStyleObject, Theme } from './types';
 export * from './types';
+export { __internalGetUseRootStyles } from './options';
 /**
@@ -4,0 +5,0 @@ * Allows for nested scales with shorthand values

dist/index.esm.js

@@ -20,2 +20,21 @@ function _extends() {
 /**
+ * @internal
+ * We fall back to `theme.useBodyStyles` when `theme.useRootStyles` is not set.
+ */
+function __internalGetUseRootStyles(theme) {
+  if (theme === void 0) {
+    theme = {};
+  }
+
+  var _theme = theme,
+      useRootStyles = _theme.useRootStyles,
+      useBodyStyles = _theme.useBodyStyles;
+  var root = 'useRootStyles' in theme && useRootStyles != null;
+  return {
+    scope: root ? 'html' : 'body',
+    rootStyles: root ? useRootStyles : useBodyStyles
+  };
+}
+
+/**
  * Allows for nested scales with shorthand values
@@ -285,3 +304,5 @@ * @example
 
-      if (value == null) continue;
+      if (value === false || value == null) {
+        continue;
+      }
 
@@ -335,3 +356,9 @@ if (!Array.isArray(value)) {
       if (val && typeof val === 'object') {
-        // TODO: val can also be an array here. Is this a bug? Can it be reproduced?
+        if (hasDefault(val)) {
+          result[key] = val[THEME_UI_DEFAULT_KEY];
+          continue;
+        } // On type level, val can also be an array here,
+        // but we transform all arrays in `responsive` function.
+
+
         result[key] = css(val)(theme);
@@ -362,3 +389,3 @@ continue;
 
-export { THEME_UI_DEFAULT_KEY, css, defaultBreakpoints, get, getObjectWithVariants, multiples, scales };
+export { THEME_UI_DEFAULT_KEY, __internalGetUseRootStyles, css, defaultBreakpoints, get, getObjectWithVariants, multiples, scales };
 //# sourceMappingURL=index.esm.js.map

dist/index.js

@@ -20,2 +20,21 @@ function _extends() {
 /**
+ * @internal
+ * We fall back to `theme.useBodyStyles` when `theme.useRootStyles` is not set.
+ */
+function __internalGetUseRootStyles(theme) {
+  if (theme === void 0) {
+    theme = {};
+  }
+
+  var _theme = theme,
+      useRootStyles = _theme.useRootStyles,
+      useBodyStyles = _theme.useBodyStyles;
+  var root = 'useRootStyles' in theme && useRootStyles != null;
+  return {
+    scope: root ? 'html' : 'body',
+    rootStyles: root ? useRootStyles : useBodyStyles
+  };
+}
+
+/**
  * Allows for nested scales with shorthand values
@@ -285,3 +304,5 @@ * @example
 
-      if (value == null) continue;
+      if (value === false || value == null) {
+        continue;
+      }
 
@@ -335,3 +356,9 @@ if (!Array.isArray(value)) {
       if (val && typeof val === 'object') {
-        // TODO: val can also be an array here. Is this a bug? Can it be reproduced?
+        if (hasDefault(val)) {
+          result[key] = val[THEME_UI_DEFAULT_KEY];
+          continue;
+        } // On type level, val can also be an array here,
+        // but we transform all arrays in `responsive` function.
+
+
         result[key] = css(val)(theme);
@@ -363,2 +390,3 @@ continue;
 exports.THEME_UI_DEFAULT_KEY = THEME_UI_DEFAULT_KEY;
+exports.__internalGetUseRootStyles = __internalGetUseRootStyles;
 exports.css = css;
@@ -365,0 +393,0 @@ exports.defaultBreakpoints = defaultBreakpoints;

dist/index.modern.js

@@ -20,2 +20,18 @@ function _extends() {
 /**
+ * @internal
+ * We fall back to `theme.useBodyStyles` when `theme.useRootStyles` is not set.
+ */
+function __internalGetUseRootStyles(theme = {}) {
+  const {
+    useRootStyles,
+    useBodyStyles
+  } = theme;
+  const root = 'useRootStyles' in theme && useRootStyles != null;
+  return {
+    scope: root ? 'html' : 'body',
+    rootStyles: root ? useRootStyles : useBodyStyles
+  };
+}
+
+/**
  * Allows for nested scales with shorthand values
@@ -278,3 +294,5 @@ * @example
 
-    if (value == null) continue;
+    if (value === false || value == null) {
+      continue;
+    }
 
@@ -318,3 +336,9 @@ if (!Array.isArray(value)) {
     if (val && typeof val === 'object') {
-      // TODO: val can also be an array here. Is this a bug? Can it be reproduced?
+      if (hasDefault(val)) {
+        result[key] = val[THEME_UI_DEFAULT_KEY];
+        continue;
+      } // On type level, val can also be an array here,
+      // but we transform all arrays in `responsive` function.
+
+
       result[key] = css(val)(theme);
@@ -344,3 +368,3 @@ continue;
 
-export { THEME_UI_DEFAULT_KEY, css, defaultBreakpoints, get, getObjectWithVariants, multiples, scales };
+export { THEME_UI_DEFAULT_KEY, __internalGetUseRootStyles, css, defaultBreakpoints, get, getObjectWithVariants, multiples, scales };
 //# sourceMappingURL=index.modern.js.map

dist/index.umd.js

@@ -25,2 +25,21 @@ (function (global, factory) {
   /**
+   * @internal
+   * We fall back to `theme.useBodyStyles` when `theme.useRootStyles` is not set.
+   */
+  function __internalGetUseRootStyles(theme) {
+    if (theme === void 0) {
+      theme = {};
+    }
+
+    var _theme = theme,
+        useRootStyles = _theme.useRootStyles,
+        useBodyStyles = _theme.useBodyStyles;
+    var root = 'useRootStyles' in theme && useRootStyles != null;
+    return {
+      scope: root ? 'html' : 'body',
+      rootStyles: root ? useRootStyles : useBodyStyles
+    };
+  }
+
+  /**
    * Allows for nested scales with shorthand values
@@ -290,3 +309,5 @@ * @example
 
-        if (value == null) continue;
+        if (value === false || value == null) {
+          continue;
+        }
 
@@ -340,3 +361,9 @@ if (!Array.isArray(value)) {
         if (val && typeof val === 'object') {
-          // TODO: val can also be an array here. Is this a bug? Can it be reproduced?
+          if (hasDefault(val)) {
+            result[key] = val[THEME_UI_DEFAULT_KEY];
+            continue;
+          } // On type level, val can also be an array here,
+          // but we transform all arrays in `responsive` function.
+
+
           result[key] = css(val)(theme);
@@ -368,2 +395,3 @@ continue;
   exports.THEME_UI_DEFAULT_KEY = THEME_UI_DEFAULT_KEY;
+  exports.__internalGetUseRootStyles = __internalGetUseRootStyles;
   exports.css = css;
@@ -370,0 +398,0 @@ exports.defaultBreakpoints = defaultBreakpoints;

dist/types.d.ts

 import * as CSS from 'csstype';
 declare type StandardCSSProperties = CSS.Properties<number | string>;
+declare type Empty = undefined | null | false;
 /**
@@ -10,3 +11,3 @@ * The `css` function accepts arrays as values for mobile-first responsive styles.
  */
-export declare type ResponsiveStyleValue<T> = T | Array<T | null | undefined>;
+export declare type ResponsiveStyleValue<T> = T | Empty | Array<T | Empty>;
 /**
@@ -426,3 +427,4 @@ * All non-vendor-prefixed CSS properties. (Allow `number` to support CSS-in-JS libs,
 }
-export declare type StylePropertyValue<T> = ResponsiveStyleValue<Exclude<T, undefined>> | ((theme: Theme) => ResponsiveStyleValue<Exclude<T, undefined>> | undefined) | ThemeUIStyleObject;
+declare type ThemeUIStyleValue<T> = ResponsiveStyleValue<T | ObjectWithDefault<T> | T[]>;
+export declare type StylePropertyValue<T> = ThemeUIStyleValue<Exclude<T, undefined>> | ((theme: Theme) => ThemeUIStyleValue<Exclude<T, undefined>> | undefined) | ThemeUIStyleObject | Empty;
 export declare type ThemeUICSSProperties = {
@@ -462,3 +464,3 @@ [K in keyof ThemeUIExtendedCSSProperties]: StylePropertyValue<ThemeUIExtendedCSSProperties[K]>;
 export interface CSSOthersObject {
-    [k: string]: StylePropertyValue<string | number> | undefined | null;
+    [k: string]: StylePropertyValue<string | number>;
 }
@@ -473,2 +475,25 @@ export interface ThemeUICSSObject extends ThemeUICSSProperties, CSSPseudoSelectorProps, CSSOthersObject, VariantProperty, Label {
 export declare type ThemeUIStyleObject = ThemeUICSSObject | ThemeDerivedStyles;
+export declare type TLengthStyledSystem = string | 0 | number;
+export interface ScaleDict<T> {
+    [K: string]: T | T[] | NestedScaleDict<T> | undefined;
+    [I: number]: T;
+}
+export interface ObjectWithDefault<T> {
+    /**
+     * Default value in nested scale.
+     *
+     * Given theme
+     * ```
+     * {
+     *   colors: {
+     *     primary: { __default: '#00f', light: '#33f' }
+     *   }
+     * }
+     * ```
+     * `sx={{ color: 'primary' }}` resolves to `color: #00f`.
+     */
+    __default?: T;
+}
+export interface NestedScaleDict<T> extends ScaleDict<T>, ObjectWithDefault<T> {
+}
 /**
@@ -478,7 +503,5 @@ * An array or object (possibly nested) of related CSS properties
  */
-export declare type Scale<T> = T[] | {
-    [K: string]: T | Scale<T>;
-    [I: number]: T;
-};
-export declare type TLengthStyledSystem = string | 0 | number;
+export declare type Scale<T> = T[] | ScaleDict<T>;
+export declare type NestedScale<T> = T[] | NestedScaleDict<T>;
+export declare type ColorOrNestedColorScale = CSS.Property.Color | NestedScale<CSS.Property.Color>;
 /**
@@ -488,27 +511,27 @@ * Color modes can be used to create a user-configurable dark mode
  */
-export interface ColorMode {
+export interface ColorMode extends ScaleDict<CSS.Property.Color> {
     /**
      * Body background color
      */
-    background?: CSS.Property.Color;
+    background?: ColorOrNestedColorScale;
     /**
      * Body foreground color
      */
-    text?: CSS.Property.Color;
+    text?: ColorOrNestedColorScale;
     /**
      * Primary brand color for links, buttons, etc.
      */
-    primary?: CSS.Property.Color;
+    primary?: ColorOrNestedColorScale;
     /**
      * A secondary brand color for alternative styling
      */
-    secondary?: CSS.Property.Color;
+    secondary?: ColorOrNestedColorScale;
     /**
      * A contrast color for emphasizing UI
      */
-    accent?: CSS.Property.Color;
+    accent?: ColorOrNestedColorScale;
     /**
      * A background color for highlighting text
      */
-    highlight?: CSS.Property.Color;
+    highlight?: ColorOrNestedColorScale;
     /**
@@ -518,4 +541,3 @@ * A faint color for backgrounds, borders, and accents that do not require
      */
-    muted?: CSS.Property.Color;
-    [k: string]: CSS.Property.Color | Scale<CSS.Property.Color> | undefined;
+    muted?: ColorOrNestedColorScale;
 }
@@ -601,2 +623,8 @@ export declare type ColorModesScale = ColorMode & {
     /**
+     * Adds styles defined in theme.styles.root to the <html> element along with color and background-color
+     */
+    useRootStyles?: boolean;
+    /**
+     * @deprecated Deprecated in favor of `useRootStyles`.
+     *
      * Adds styles defined in theme.styles.root to the <body> element along with color and background-color
@@ -603,0 +631,0 @@ */

package.json

 {
   "name": "@theme-ui/css",
-  "version": "0.6.0-alpha.6",
+  "version": "0.6.0-alpha.7",
   "source": "src/index.ts",
@@ -23,3 +23,3 @@ "main": "dist/index.js",
   },
-  "gitHead": "6d4b231dc59d56409804ad7f1b883239ad1e746b"
+  "gitHead": "3f031141f8509487fe77542e32a3240f277ce3b4"
 }

src/index.ts

@@ -10,2 +10,3 @@ import {
 export * from './types'
+export { __internalGetUseRootStyles } from './options'
 
@@ -303,3 +304,5 @@ /**
 
-    if (value == null) continue
+    if (value === false || value == null) {
+      continue
+    }
     if (!Array.isArray(value)) {
@@ -348,3 +351,9 @@ next[key] = value
     if (val && typeof val === 'object') {
-      // TODO: val can also be an array here. Is this a bug? Can it be reproduced?
+      if (hasDefault(val)) {
+        result[key] = val[THEME_UI_DEFAULT_KEY]
+        continue
+      }
+
+      // On type level, val can also be an array here,
+      // but we transform all arrays in `responsive` function.
       result[key] = css(val as ThemeUICSSObject)(theme)
@@ -351,0 +360,0 @@ continue

src/types.ts

@@ -7,2 +7,4 @@ import * as CSS from 'csstype'
 
+type Empty = undefined | null | false
+
 /**
@@ -15,3 +17,3 @@ * The `css` function accepts arrays as values for mobile-first responsive styles.
  */
-export type ResponsiveStyleValue<T> = T | Array<T | null | undefined>
+export type ResponsiveStyleValue<T> = T | Empty | Array<T | Empty>
 
@@ -447,6 +449,9 @@ /**
 
+type ThemeUIStyleValue<T> = ResponsiveStyleValue<T | ObjectWithDefault<T> | T[]>
+
 export type StylePropertyValue<T> =
-  | ResponsiveStyleValue<Exclude<T, undefined>>
-  | ((theme: Theme) => ResponsiveStyleValue<Exclude<T, undefined>> | undefined)
+  | ThemeUIStyleValue<Exclude<T, undefined>>
+  | ((theme: Theme) => ThemeUIStyleValue<Exclude<T, undefined>> | undefined)
   | ThemeUIStyleObject
+  | Empty
 
@@ -496,3 +501,3 @@ export type ThemeUICSSProperties = {
   // so as a side-effect we allow unknown CSS properties (Emotion does too)
-  [k: string]: StylePropertyValue<string | number> | undefined | null
+  [k: string]: StylePropertyValue<string | number>
 }
@@ -514,2 +519,30 @@
 
+export type TLengthStyledSystem = string | 0 | number
+
+export interface ScaleDict<T> {
+  [K: string]: T | T[] | NestedScaleDict<T> | undefined
+  [I: number]: T
+}
+
+export interface ObjectWithDefault<T> {
+  /**
+   * Default value in nested scale.
+   *
+   * Given theme
+   * ```
+   * {
+   *   colors: {
+   *     primary: { __default: '#00f', light: '#33f' }
+   *   }
+   * }
+   * ```
+   * `sx={{ color: 'primary' }}` resolves to `color: #00f`.
+   */
+  __default?: T
+}
+
+export interface NestedScaleDict<T>
+  extends ScaleDict<T>,
+    ObjectWithDefault<T> {}
+
 /**
@@ -519,6 +552,10 @@ * An array or object (possibly nested) of related CSS properties
  */
-export type Scale<T> = T[] | { [K: string]: T | Scale<T>; [I: number]: T }
+export type Scale<T> = T[] | ScaleDict<T>
 
-export type TLengthStyledSystem = string | 0 | number
+export type NestedScale<T> = T[] | NestedScaleDict<T>
 
+export type ColorOrNestedColorScale =
+  | CSS.Property.Color
+  | NestedScale<CSS.Property.Color>
+
 /**
@@ -528,7 +565,7 @@ * Color modes can be used to create a user-configurable dark mode
  */
-export interface ColorMode {
+export interface ColorMode extends ScaleDict<CSS.Property.Color> {
   /**
    * Body background color
    */
-  background?: CSS.Property.Color
+  background?: ColorOrNestedColorScale
 
@@ -538,3 +575,3 @@ /**
    */
-  text?: CSS.Property.Color
+  text?: ColorOrNestedColorScale
 
@@ -544,3 +581,3 @@ /**
    */
-  primary?: CSS.Property.Color
+  primary?: ColorOrNestedColorScale
 
@@ -550,3 +587,3 @@ /**
    */
-  secondary?: CSS.Property.Color
+  secondary?: ColorOrNestedColorScale
 
@@ -556,3 +593,3 @@ /**
    */
-  accent?: CSS.Property.Color
+  accent?: ColorOrNestedColorScale
 
@@ -562,3 +599,3 @@ /**
    */
-  highlight?: CSS.Property.Color
+  highlight?: ColorOrNestedColorScale
 
@@ -569,5 +606,3 @@ /**
    */
-  muted?: CSS.Property.Color
-
-  [k: string]: CSS.Property.Color | Scale<CSS.Property.Color> | undefined
+  muted?: ColorOrNestedColorScale
 }
@@ -658,2 +693,9 @@
   /**
+   * Adds styles defined in theme.styles.root to the <html> element along with color and background-color
+   */
+  useRootStyles?: boolean
+
+  /**
+   * @deprecated Deprecated in favor of `useRootStyles`.
+   *
    * Adds styles defined in theme.styles.root to the <body> element along with color and background-color
@@ -660,0 +702,0 @@ */

test/errors-and-inference.ts

@@ -143,4 +143,2 @@ import { expecter } from '@theme-ui/test-utils'
 
-    colorMode.text?.toUpperCase();
-
     const baseColors = [
@@ -162,5 +160,8 @@ colorMode.text,
 
-  expectedSnippet.toInfer('baseColors', '((string & {}) | undefined)[]')
+  expectedSnippet.toInfer(
+    'baseColors',
+    '((string & {}) | Color[] | NestedScaleDict<Color> | undefined)[]'
+  )
   expectedSnippet.toInfer('light', 'Color')
   expectedSnippet.toInfer('dark', 'Color')
 })

test/index.ts

@@ -1,2 +0,2 @@
-import { css, Theme } from '../src'
+import { css, NestedScale, NestedScaleDict, Theme } from '../src'
 
@@ -481,2 +481,34 @@ const theme: Theme = {
 
+test('object with __default key is accepted as style value', () => {
+  const actual = css({
+    width: { __default: 2 },
+    color: (t) => t.colors?.primary,
+    backgroundColor: (t) => [
+      t.colors?.background,
+      (t.colors?.background as NestedScaleDict<string>).inverted,
+    ],
+  })({
+    sizes: ['10px', '20px', '40px'],
+    colors: {
+      primary: {
+        __default: 'blue',
+        light: 'lightblue',
+      },
+      background: {
+        __default: 'whitesmoke',
+        inverted: 'black',
+      },
+    },
+  })
+
+  expect(actual).toEqual({
+    '@media screen and (min-width: 40em)': {
+      backgroundColor: 'black',
+    },
+    backgroundColor: 'whitesmoke',
+    color: 'blue',
+    width: 2, // yes, 2 not 40px
+  })
+})
+
 test('returns individual border styles', () => {
@@ -637,1 +669,12 @@ const result = css({
 })
+
+test('omits empty values', () => {
+  expect(
+    css({
+      color: false && 'blue',
+      backgroundColor: undefined && 'whitesmoke',
+      textDecoration: null && 'underline',
+      border: '1px solid black',
+    })(theme)
+  ).toStrictEqual({ border: '1px solid black' })
+})

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

243638

increased by5.4%

Number of package files

23

increased by15%

Lines of code

4327

increased by6.47%

No dependency changes