@theme-ui/css - npm Package Compare versions

Comparing version 0.7.0--canary.1423.3d0dfed.0 to 0.7.0

dist/theme-ui-css.cjs.dev.js

@@ -370,3 +370,3 @@ 'use strict';
     var mediaQueries = [null].concat(_toConsumableArray(breakpoints.map(function (n) {
-      return "@media screen and (min-width: ".concat(n, ")");
+      return n.includes('@media') ? n : "@media screen and (min-width: ".concat(n, ")");
     })));
@@ -373,0 +373,0 @@

dist/theme-ui-css.cjs.prod.js

@@ -370,3 +370,3 @@ 'use strict';
     var mediaQueries = [null].concat(_toConsumableArray(breakpoints.map(function (n) {
-      return "@media screen and (min-width: ".concat(n, ")");
+      return n.includes('@media') ? n : "@media screen and (min-width: ".concat(n, ")");
     })));
@@ -373,0 +373,0 @@

dist/theme-ui-css.esm.js

@@ -366,3 +366,3 @@ function _arrayLikeToArray(arr, len) {
     var mediaQueries = [null].concat(_toConsumableArray(breakpoints.map(function (n) {
-      return "@media screen and (min-width: ".concat(n, ")");
+      return n.includes('@media') ? n : "@media screen and (min-width: ".concat(n, ")");
     })));
@@ -369,0 +369,0 @@

package.json

 {
   "name": "@theme-ui/css",
-  "version": "0.7.0--canary.1423.3d0dfed.0",
+  "version": "0.7.0",
   "source": "src/index.ts",
@@ -18,3 +18,3 @@ "main": "dist/theme-ui-css.cjs.js",
   },
-  "gitHead": "3d0dfedb597bd968ea8e76b291ec8e8cfed98bef"
+  "gitHead": "77b7a46da4fe2dfe3c1065a7ef22fe06e31415a4"
 }

src/index.ts

@@ -293,3 +293,5 @@ import {
     null,
-    ...breakpoints.map((n) => `@media screen and (min-width: ${n})`),
+    ...breakpoints.map((n) =>
+      n.includes('@media') ? n : `@media screen and (min-width: ${n})`
+    ),
   ]
@@ -296,0 +298,0 @@

test/index.ts

@@ -663,2 +663,34 @@ import { css, NestedScale, NestedScaleDict, Theme, ThemeUIExtendedCSSProperties } from '../src'
 
+test('returns custom media queries', () => {
+  const result = css({
+    fontSize: [2, 3, 4],
+    color: 'primary',
+  })({
+    theme: {
+      ...theme,
+      breakpoints: [
+        '32em',
+        '@media screen and (orientation: landscape) and (min-width: 40rem)',
+      ],
+    },
+  })
+  const keys = Object.keys(result)
+  expect(keys).toEqual([
+    'fontSize',
+    '@media screen and (min-width: 32em)',
+    '@media screen and (orientation: landscape) and (min-width: 40rem)',
+    'color',
+  ])
+  expect(result).toEqual({
+    fontSize: 16,
+    '@media screen and (min-width: 32em)': {
+      fontSize: 24,
+    },
+    '@media screen and (orientation: landscape) and (min-width: 40rem)': {
+      fontSize: 36,
+    },
+    color: 'tomato',
+  })
+})
+
 test('supports vendor properties', () => {
@@ -681,3 +713,2 @@ expect(css({ WebkitOverflowScrolling: 'touch' })(theme)).toStrictEqual({
 
-
 test('borderTopWidth accepts number', () => {
@@ -684,0 +715,0 @@ expect(css({

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

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

145349

increased by1.79%

Number of package files

21

increased by5%

Lines of code

4200

increased by0.79%

Number of medium supply chain risk alerts

0

decreased by-100%

No dependency changes