@theme-ui/css - npm Package Compare versions

Comparing version 0.3.0-alpha.6 to 0.3.0

dist/index.esm.js

@@ -87,9 +87,5 @@ var get = function (obj, key, def, p, undef) {
   borderTopStyle: 'borderStyles',
-  borderTopLeftRadius: 'radii',
-  borderTopRightRadius: 'radii',
   borderBottomWidth: 'borderWidths',
   borderBottomColor: 'colors',
   borderBottomStyle: 'borderStyles',
-  borderBottomLeftRadius: 'radii',
-  borderBottomRightRadius: 'radii',
   borderLeftWidth: 'borderWidths',
@@ -152,4 +148,8 @@ borderLeftColor: 'colors',
       var media = mediaQueries[i];
-      if (value[i] == null) { continue; }
 
+      if (value[i] == null) {
+        next[media] = {};
+        continue;
+      }
+
       if (!media) {
@@ -156,0 +156,0 @@ next[key] = value[i];

dist/index.js

@@ -87,9 +87,5 @@ var get = function (obj, key, def, p, undef) {
   borderTopStyle: 'borderStyles',
-  borderTopLeftRadius: 'radii',
-  borderTopRightRadius: 'radii',
   borderBottomWidth: 'borderWidths',
   borderBottomColor: 'colors',
   borderBottomStyle: 'borderStyles',
-  borderBottomLeftRadius: 'radii',
-  borderBottomRightRadius: 'radii',
   borderLeftWidth: 'borderWidths',
@@ -152,4 +148,8 @@ borderLeftColor: 'colors',
       var media = mediaQueries[i];
-      if (value[i] == null) { continue; }
 
+      if (value[i] == null) {
+        next[media] = {};
+        continue;
+      }
+
       if (!media) {
@@ -156,0 +156,0 @@ next[key] = value[i];

dist/index.umd.js

@@ -92,9 +92,5 @@ (function (global, factory) {
     borderTopStyle: 'borderStyles',
-    borderTopLeftRadius: 'radii',
-    borderTopRightRadius: 'radii',
     borderBottomWidth: 'borderWidths',
     borderBottomColor: 'colors',
     borderBottomStyle: 'borderStyles',
-    borderBottomLeftRadius: 'radii',
-    borderBottomRightRadius: 'radii',
     borderLeftWidth: 'borderWidths',
@@ -157,4 +153,8 @@ borderLeftColor: 'colors',
         var media = mediaQueries[i];
-        if (value[i] == null) { continue; }
 
+        if (value[i] == null) {
+          next[media] = {};
+          continue;
+        }
+
         if (!media) {
@@ -161,0 +161,0 @@ next[key] = value[i];

package.json

 {
   "name": "@theme-ui/css",
-  "version": "0.3.0-alpha.6",
+  "version": "0.3.0",
   "main": "dist/index.js",
@@ -16,3 +16,3 @@ "module": "dist/index.esm.js",
   },
-  "gitHead": "fc8f24c4f54aa0cdd6ec50dcf06ef47b132f84d9"
+  "gitHead": "7663897ec671e1ff66b0d4ef946611dd57f3bb99"
 }

src/index.js

@@ -90,9 +90,5 @@ export const get = (obj, key, def, p, undef) => {
   borderTopStyle: 'borderStyles',
-  borderTopLeftRadius: 'radii',
-  borderTopRightRadius: 'radii',
   borderBottomWidth: 'borderWidths',
   borderBottomColor: 'colors',
   borderBottomStyle: 'borderStyles',
-  borderBottomLeftRadius: 'radii',
-  borderBottomRightRadius: 'radii',
   borderLeftWidth: 'borderWidths',
@@ -170,3 +166,6 @@ borderLeftColor: 'colors',
       const media = mediaQueries[i]
-      if (value[i] == null) continue
+      if (value[i] == null) {
+        next[media] = {}
+        continue
+      }
       if (!media) {
@@ -173,0 +172,0 @@ next[key] = value[i]

test/index.js

@@ -262,9 +262,10 @@ import { css } from '../src'
   const result = css({
-    width: [ '100%', , '50%' ],
+    width: ['100%', , '50%'],
   })(theme)
   expect(result).toEqual({
     width: '100%',
+    '@media screen and (min-width: 40em)': {},
     '@media screen and (min-width: 52em)': {
       width: '50%',
-    }
+    },
   })
@@ -294,5 +295,5 @@ })
   const result = css({
-    width: [ 32, 64, 128, 256, 512 ]
+    width: [32, 64, 128, 256, 512],
   })({
-    breakpoints: [ '32em', '40em' ],
+    breakpoints: ['32em', '40em'],
   })
@@ -408,4 +409,29 @@ expect(result).toEqual({
   expect(result).toEqual({
-    outlineColor: 'tomato'
+    outlineColor: 'tomato',
   })
 })
+
+test('returns correct media query order', () => {
+  const result = css({
+    width: ['100%', , '50%'],
+    color: ['red', 'green', 'blue'],
+  })(theme)
+  const keys = Object.keys(result)
+  expect(keys).toEqual([
+    'width',
+    '@media screen and (min-width: 40em)',
+    '@media screen and (min-width: 52em)',
+    'color',
+  ])
+  expect(result).toEqual({
+    width: '100%',
+    '@media screen and (min-width: 40em)': {
+      color: 'green',
+    },
+    '@media screen and (min-width: 52em)': {
+      width: '50%',
+      color: 'blue',
+    },
+    color: 'red',
+  })
+})

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

1181

increased by1.81%

Worsened metrics

Total package byte prevSize

70863

decreased by-0.33%

No dependency changes