@theme-ui/css - npm Package Compare versions

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

dist/index.esm.js

@@ -273,27 +273,42 @@ import '@emotion/react';
 
-    var result = {};
-    var obj = typeof args === 'function' ? args(theme) : args; // insert variant props before responsive styles, so they can be merged
+    var obj = typeof args === 'function' ? args(theme) : args;
+    var result = {}; // 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']) {
-      obj = _extends({}, get(theme, obj['variant']), obj);
-      delete 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 styles = responsive(obj)(theme);
+    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];
 
-      if (val && typeof val === 'object') {
+      var _val = typeof _x === 'function' ? _x(theme) : _x;
+
+      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);
 
@@ -300,0 +315,0 @@ if (prop in multiples) {

dist/index.js

@@ -273,27 +273,42 @@ require('@emotion/react');
 
-    var result = {};
-    var obj = typeof args === 'function' ? args(theme) : args; // insert variant props before responsive styles, so they can be merged
+    var obj = typeof args === 'function' ? args(theme) : args;
+    var result = {}; // 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']) {
-      obj = _extends({}, get(theme, obj['variant']), obj);
-      delete 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 styles = responsive(obj)(theme);
+    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];
 
-      if (val && typeof val === 'object') {
+      var _val = typeof _x === 'function' ? _x(theme) : _x;
+
+      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);
 
@@ -300,0 +315,0 @@ if (prop in multiples) {

dist/index.modern.js

@@ -256,11 +256,25 @@ import '@emotion/react';
 
-  let result = {};
-  let obj = typeof args === 'function' ? args(theme) : args; // insert variant props before responsive styles, so they can be merged
+  let obj = typeof args === 'function' ? args(theme) : args;
+  let result = {}; // 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']) {
-    obj = _extends({}, get(theme, obj['variant']), obj);
-    delete 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 styles = responsive(obj)(theme);
+  const styles = responsive(result)(theme);
+  result = {};
 
@@ -267,0 +281,0 @@ for (const key in styles) {

dist/index.umd.js

@@ -276,27 +276,42 @@ (function (global, factory) {
 
-      var result = {};
-      var obj = typeof args === 'function' ? args(theme) : args; // insert variant props before responsive styles, so they can be merged
+      var obj = typeof args === 'function' ? args(theme) : args;
+      var result = {}; // 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']) {
-        obj = _extends({}, get(theme, obj['variant']), obj);
-        delete 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 styles = responsive(obj)(theme);
+      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];
 
-        if (val && typeof val === 'object') {
+        var _val = typeof _x === 'function' ? _x(theme) : _x;
+
+        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);
 
@@ -303,0 +318,0 @@ if (prop in multiples) {

package.json

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

src/index.ts

@@ -281,11 +281,24 @@ import {
   }
+  let obj = typeof args === 'function' ? args(theme) : args
   let result: CSSObject = {}
-  let obj = typeof args === 'function' ? args(theme) : args
+
   // 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']) {
-    obj = { ...get(theme, obj['variant']), ...obj }
-    delete 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(obj)(theme)
-
+  const styles = responsive(result as ThemeUICSSObject)(theme)
+  result = {}
   for (const key in styles) {
@@ -292,0 +305,0 @@ const x = styles[key as keyof typeof styles]

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

355437

increased by1.64%

Lines of code

6878

increased by0.95%

No dependency changes