@theme-ui/css - npm Package Compare versions

Comparing version 0.5.0-alpha.0 to 0.5.0-alpha.1

dist/index.esm.js

@@ -274,3 +274,9 @@ import '@emotion/react';
     var result = {};
-    var obj = typeof args === 'function' ? args(theme) : args;
+    var obj = typeof args === 'function' ? args(theme) : args; // insert variant props before responsive styles, so they can be merged
+
+    if (obj['variant']) {
+      obj = _extends({}, get(theme, obj['variant']), obj);
+      delete obj['variant'];
+    }
+
     var styles = responsive(obj)(theme);
@@ -282,8 +288,2 @@
 
-      if (key === 'variant') {
-        var variant = css(get(theme, val))(theme);
-        result = _extends({}, result, variant);
-        continue;
-      }
-
       if (val && typeof val === 'object') {
@@ -290,0 +290,0 @@ // TODO: val can also be an array here. Is this a bug? Can it be reproduced?

dist/index.js

@@ -274,3 +274,9 @@ require('@emotion/react');
     var result = {};
-    var obj = typeof args === 'function' ? args(theme) : args;
+    var obj = typeof args === 'function' ? args(theme) : args; // insert variant props before responsive styles, so they can be merged
+
+    if (obj['variant']) {
+      obj = _extends({}, get(theme, obj['variant']), obj);
+      delete obj['variant'];
+    }
+
     var styles = responsive(obj)(theme);
@@ -282,8 +288,2 @@
 
-      if (key === 'variant') {
-        var variant = css(get(theme, val))(theme);
-        result = _extends({}, result, variant);
-        continue;
-      }
-
       if (val && typeof val === 'object') {
@@ -290,0 +290,0 @@ // TODO: val can also be an array here. Is this a bug? Can it be reproduced?

dist/index.modern.js

@@ -257,3 +257,9 @@ import '@emotion/react';
   let result = {};
-  const obj = typeof args === 'function' ? args(theme) : args;
+  let obj = typeof args === 'function' ? args(theme) : args; // insert variant props before responsive styles, so they can be merged
+
+  if (obj['variant']) {
+    obj = _extends({}, get(theme, obj['variant']), obj);
+    delete obj['variant'];
+  }
+
   const styles = responsive(obj)(theme);
@@ -265,8 +271,2 @@
 
-    if (key === 'variant') {
-      const variant = css(get(theme, val))(theme);
-      result = _extends({}, result, variant);
-      continue;
-    }
-
     if (val && typeof val === 'object') {
@@ -273,0 +273,0 @@ // TODO: val can also be an array here. Is this a bug? Can it be reproduced?

dist/index.umd.js

@@ -277,3 +277,9 @@ (function (global, factory) {
       var result = {};
-      var obj = typeof args === 'function' ? args(theme) : args;
+      var obj = typeof args === 'function' ? args(theme) : args; // insert variant props before responsive styles, so they can be merged
+
+      if (obj['variant']) {
+        obj = _extends({}, get(theme, obj['variant']), obj);
+        delete obj['variant'];
+      }
+
       var styles = responsive(obj)(theme);
@@ -285,8 +291,2 @@
 
-        if (key === 'variant') {
-          var variant = css(get(theme, val))(theme);
-          result = _extends({}, result, variant);
-          continue;
-        }
-
         if (val && typeof val === 'object') {
@@ -293,0 +293,0 @@ // TODO: val can also be an array here. Is this a bug? Can it be reproduced?

dist/scales.d.ts

 import * as CSS from 'csstype';
 import { FinalTheme } from './types';
-declare type CollectionKeys<T> = T extends any[] ? Exclude<keyof T, keyof any[]> | number : keyof T;
+import { Iteration, Object } from 'ts-toolbelt';
+declare type StringOrNumber = string | number;
+declare type TokenValue = StringOrNumber;
+declare type IgnoredKeys = Exclude<keyof any[], number>;
+export declare type ScaleDottedPaths<O, I extends Iteration.Iteration = Iteration.IterationOf<'0'>> = 9 extends Iteration.Pos<I> ? never : {
+    [K in keyof O & StringOrNumber]: K extends IgnoredKeys ? never : O[K] extends null | undefined ? never : O[K] extends TokenValue ? `${K}` : `${K}.${ScaleDottedPaths<O[K], Iteration.Next<I>>}`;
+}[keyof O & StringOrNumber];
 declare type StringHack<T> = string extends T ? Exclude<T, string> | (string & {}) : T;
-declare type ScaleProperty<TScale> = StringHack<CollectionKeys<Exclude<TScale, undefined>>> | CSS.Globals;
+declare type AllowedStrings = Object.Path<FinalTheme, [
+    'options',
+    'strictMode',
+    'allowStrings'
+]>;
+declare type StringEscapeHatch = AllowedStrings extends false ? never : string & {};
+declare type AddNumberForConvenience<T> = `${number}` extends T ? T | number : T;
+declare type ScaleProperty<TScale> = StringEscapeHatch | AddNumberForConvenience<StringHack<ScaleDottedPaths<Exclude<TScale, undefined>>>> | CSS.Globals;
 export declare type Color = Exclude<ScaleProperty<FinalTheme['colors']>, 'modes'>;
@@ -1134,2 +1147,12 @@ export interface ColorScaleCSSProperties {
 export interface RadiiCSSProperties {
+    /**
+     * The **`border-radius`** CSS property rounds the corners of an element's outer border edge. You can set a single radius to make circular corners, or two radii to make elliptical corners.
+     *
+     * | Chrome  | Firefox | Safari  |  Edge  |  IE   |
+     * | :-----: | :-----: | :-----: | :----: | :---: |
+     * |  **4**  |  **4**  |  **5**  | **12** | **9** |
+     * | 1 _-x-_ |         | 3 _-x-_ |        |       |
+     *
+     * @see https://developer.mozilla.org/docs/Web/CSS/border-radius
+     */
     borderRadius?: Radii;
@@ -1148,2 +1171,13 @@ borderTopRightRadius?: Radii;
     borderWidth?: BorderWidths;
+    /**
+     * The **`border-top-width`** CSS property sets the width of the top border of an element.
+     *
+     * **Initial value**: `medium`
+     *
+     * | Chrome | Firefox | Safari |  Edge  |  IE   |
+     * | :----: | :-----: | :----: | :----: | :---: |
+     * | **1**  |  **1**  | **1**  | **12** | **4** |
+     *
+     * @see https://developer.mozilla.org/docs/Web/CSS/border-top-width
+     */
     borderTopWidth?: BorderWidths;
@@ -1163,5 +1197,49 @@ borderBottomWidth?: BorderWidths;
     borderStyle?: BorderStyles;
+    /**
+     * The **`border-top-style`** CSS property sets the line style of an element's top `border`.
+     *
+     * **Initial value**: `none`
+     *
+     * | Chrome | Firefox | Safari |  Edge  |   IE    |
+     * | :----: | :-----: | :----: | :----: | :-----: |
+     * | **1**  |  **1**  | **1**  | **12** | **5.5** |
+     *
+     * @see https://developer.mozilla.org/docs/Web/CSS/border-top-style
+     */
     borderTopStyle?: BorderStyles;
+    /**
+     * The **`border-bottom-style`** CSS property sets the line style of an element's bottom `border`.
+     *
+     * **Initial value**: `none`
+     *
+     * | Chrome | Firefox | Safari |  Edge  |   IE    |
+     * | :----: | :-----: | :----: | :----: | :-----: |
+     * | **1**  |  **1**  | **1**  | **12** | **5.5** |
+     *
+     * @see https://developer.mozilla.org/docs/Web/CSS/border-bottom-style
+     */
     borderBottomStyle?: BorderStyles;
+    /**
+     * The **`border-left-style`** CSS property sets the line style of an element's left `border`.
+     *
+     * **Initial value**: `none`
+     *
+     * | Chrome | Firefox | Safari |  Edge  |   IE    |
+     * | :----: | :-----: | :----: | :----: | :-----: |
+     * | **1**  |  **1**  | **1**  | **12** | **5.5** |
+     *
+     * @see https://developer.mozilla.org/docs/Web/CSS/border-left-style
+     */
     borderLeftStyle?: BorderStyles;
+    /**
+     * The **`border-right-style`** CSS property sets the line style of an element's right `border`.
+     *
+     * **Initial value**: `none`
+     *
+     * | Chrome | Firefox | Safari |  Edge  |   IE    |
+     * | :----: | :-----: | :----: | :----: | :-----: |
+     * | **1**  |  **1**  | **1**  | **12** | **5.5** |
+     *
+     * @see https://developer.mozilla.org/docs/Web/CSS/border-right-style
+     */
     borderRightStyle?: BorderStyles;
@@ -1185,2 +1263,14 @@ borderBlockEndStyle?: BorderStyles;
 export interface FontWeightsCSSProperties {
+    /**
+     * The **`font-weight`** CSS property specifies the weight (or boldness) of the font. The font weights available to you will depend on the `font-family` you are using. Some fonts are only
+     * available in `normal` and `bold`.
+     *
+     * **Initial value**: `normal`
+     *
+     * | Chrome | Firefox | Safari |  Edge  |  IE   |
+     * | :----: | :-----: | :----: | :----: | :---: |
+     * | **2**  |  **1**  | **1**  | **12** | **3** |
+     *
+     * @see https://developer.mozilla.org/docs/Web/CSS/font-weight
+     */
     fontWeight?: FontWeights;
@@ -1198,2 +1288,15 @@ }
 export interface ShadowsCSSProperties {
+    /**
+     * The **`box-shadow`** CSS property adds shadow effects around an element's frame. You can set multiple effects separated by commas. A box shadow is described by X and Y offsets relative to the
+     * element, blur and spread radii, and color.
+     *
+     * **Initial value**: `none`
+     *
+     * | Chrome  | Firefox | Safari  |  Edge  |  IE   |
+     * | :-----: | :-----: | :-----: | :----: | :---: |
+     * | **10**  |  **4**  | **5.1** | **12** | **9** |
+     * | 1 _-x-_ |         | 3 _-x-_ |        |       |
+     *
+     * @see https://developer.mozilla.org/docs/Web/CSS/box-shadow
+     */
     boxShadow?: Shadows;
@@ -1204,2 +1307,13 @@ textShadow?: Shadows;
 export interface ZIndicesCSSProperties {
+    /**
+     * The **`z-index`** CSS property sets the z-order of a positioned element and its descendants or flex items. Overlapping elements with a larger z-index cover those with a smaller one.
+     *
+     * **Initial value**: `auto`
+     *
+     * | Chrome | Firefox | Safari |  Edge  |  IE   |
+     * | :----: | :-----: | :----: | :----: | :---: |
+     * | **1**  |  **1**  | **1**  | **12** | **4** |
+     *
+     * @see https://developer.mozilla.org/docs/Web/CSS/z-index
+     */
     zIndex?: ZIndices;
@@ -1216,7 +1330,7 @@ }
     readonly fontFamily: "fonts";
+    readonly borderStyle: "borderStyles";
     readonly borderTopStyle: "borderStyles";
     readonly borderBottomStyle: "borderStyles";
+    readonly borderLeftStyle: "borderStyles";
     readonly borderRightStyle: "borderStyles";
-    readonly borderLeftStyle: "borderStyles";
-    readonly borderStyle: "borderStyles";
     readonly borderBlockEndStyle: "borderStyles";
@@ -1228,4 +1342,4 @@ readonly borderBlockStartStyle: "borderStyles";
     readonly borderInlineStyle: "borderStyles";
+    readonly borderWidth: "borderWidths";
     readonly borderTopWidth: "borderWidths";
-    readonly borderWidth: "borderWidths";
     readonly borderBottomWidth: "borderWidths";
@@ -1232,0 +1346,0 @@ readonly borderLeftWidth: "borderWidths";

package.json

 {
   "name": "@theme-ui/css",
-  "version": "0.5.0-alpha.0",
+  "version": "0.5.0-alpha.1",
   "source": "src/index.ts",
@@ -23,3 +23,3 @@ "main": "dist/index.js",
   },
-  "gitHead": "4a277d27fcae7d070af2b03ea82365eb89ae5bbc"
+  "gitHead": "1cfd0b163d630d8cad9b9a691c7b7c294f57729b"
 }

src/index.ts

@@ -265,7 +265,6 @@ import {
       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]
     }
   }
-
   return next
@@ -284,3 +283,8 @@ }
   let result: CSSObject = {}
-  const obj = typeof args === 'function' ? args(theme) : args
+  let obj = typeof args === 'function' ? args(theme) : args
+  // insert variant props before responsive styles, so they can be merged
+  if (obj['variant']) {
+    obj = { ...get(theme, obj['variant']), ...obj }
+    delete obj['variant'];
+  }
   const styles = responsive(obj)(theme)
@@ -292,8 +296,2 @@
 
-    if (key === 'variant') {
-      const variant = css(get(theme, val as string))(theme)
-      result = { ...result, ...variant }
-      continue
-    }
-
     if (val && typeof val === 'object') {
@@ -300,0 +298,0 @@ // TODO: val can also be an array here. Is this a bug? Can it be reproduced?

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

Lines of code

5168

increased by2.17%

Worsened metrics

Total package byte prevSize

272912

decreased by-66.5%

Number of package files

20

decreased by-70.59%

No dependency changes