@styled-system/variant - npm Package Compare versions

Comparing version 5.0.21 to 5.1.0

dist/index.esm.js

 import { get, createParser } from '@styled-system/core';
+import css from '@styled-system/css';
 export var variant = function variant(_ref) {
@@ -8,9 +9,19 @@ var _config;
       prop = _ref$prop === void 0 ? 'variant' : _ref$prop,
+      _ref$variants = _ref.variants,
+      variants = _ref$variants === void 0 ? {} : _ref$variants,
       key = _ref.key;
+  var sx;
 
-  var sx = function sx(value, scale) {
-    return get(scale, value, null);
-  };
+  if (Object.keys(variants).length) {
+    sx = function sx(value, scale, props) {
+      return css(get(scale, value, null))(props.theme);
+    };
+  } else {
+    sx = function sx(value, scale) {
+      return get(scale, value, null);
+    };
+  }
 
   sx.scale = scale || key;
+  sx.defaults = variants;
   var config = (_config = {}, _config[prop] = sx, _config);
@@ -17,0 +28,0 @@ var parser = createParser(config);

dist/index.js

@@ -8,2 +8,6 @@ "use strict";
 
+var _css = _interopRequireDefault(require("@styled-system/css"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
 var variant = function variant(_ref) {
@@ -15,9 +19,19 @@ var _config;
       prop = _ref$prop === void 0 ? 'variant' : _ref$prop,
+      _ref$variants = _ref.variants,
+      variants = _ref$variants === void 0 ? {} : _ref$variants,
       key = _ref.key;
+  var sx;
 
-  var sx = function sx(value, scale) {
-    return (0, _core.get)(scale, value, null);
-  };
+  if (Object.keys(variants).length) {
+    sx = function sx(value, scale, props) {
+      return (0, _css["default"])((0, _core.get)(scale, value, null))(props.theme);
+    };
+  } else {
+    sx = function sx(value, scale) {
+      return (0, _core.get)(scale, value, null);
+    };
+  }
 
   sx.scale = scale || key;
+  sx.defaults = variants;
   var config = (_config = {}, _config[prop] = sx, _config);
@@ -24,0 +38,0 @@ var parser = (0, _core.createParser)(config);

package.json

 {
   "name": "@styled-system/variant",
-  "version": "5.0.21",
+  "version": "5.1.0",
   "main": "dist/index.js",
@@ -9,5 +9,6 @@ "module": "dist/index.esm.js",
   "dependencies": {
-    "@styled-system/core": "^5.0.21"
+    "@styled-system/core": "^5.1.0",
+    "@styled-system/css": "^5.0.23"
   },
-  "gitHead": "f97ef2c9369a4ce7e45409d78415e7e07829c214",
+  "gitHead": "6477ac28b98015cea35c7b8c873b92cae453d910",
   "publishConfig": {
@@ -14,0 +15,0 @@ "access": "public"

src/index.js

 import { get, createParser } from '@styled-system/core'
+import css from '@styled-system/css'
 
@@ -6,9 +7,15 @@ export const variant = ({
   prop = 'variant',
+  // enables new api
+  variants = {},
   // shim for v4 API
   key,
 }) => {
-  const sx = (value, scale) => {
-    return get(scale, value, null)
+  let sx
+  if (Object.keys(variants).length) {
+    sx = (value, scale, props) => css(get(scale, value, null))(props.theme)
+  } else {
+    sx = (value, scale) => get(scale, value, null)
   }
   sx.scale = scale || key
+  sx.defaults = variants
   const config = {
@@ -15,0 +22,0 @@ [prop]: sx,

test/index.js

@@ -116,1 +116,157 @@ import {
 
+describe('component variant', () => {
+  test('returns a variant defined inline', () => {
+    const comp = variant({
+      variants: {
+        primary: {
+          color: 'black',
+          bg: 'tomato',
+        },
+        secondary: {
+          color: 'white',
+          bg: 'purple',
+        },
+      }
+    })
+    const primary = comp({ variant: 'primary' })
+    const secondary = comp({ variant: 'secondary' })
+    expect(primary).toEqual({
+      color: 'black',
+      backgroundColor: 'tomato',
+    })
+    expect(secondary).toEqual({
+      color: 'white',
+      backgroundColor: 'purple',
+    })
+  })
+
+  test('returns theme-aware styles', () => {
+    const comp = variant({
+      variants: {
+        primary: {
+          p: 3,
+          fontSize: 1,
+          color: 'white',
+          bg: 'primary',
+        },
+      }
+    })
+    const style = comp({
+      variant: 'primary',
+      theme: {
+        colors: {
+          primary: '#07c',
+        }
+      }
+    })
+    expect(style).toEqual({
+      padding: 16,
+      fontSize: 14,
+      color: 'white',
+      backgroundColor: '#07c',
+    })
+  })
+
+  test('can use a custom prop name', () => {
+    const comp = variant({
+      prop: 'size',
+      variants: {
+        big: {
+          fontSize: 32,
+          fontWeight: 900,
+          lineHeight: 1.25,
+        },
+      }
+    })
+    const style = comp({ size: 'big' })
+    expect(style).toEqual({
+      fontSize: 32,
+      fontWeight: 900,
+      lineHeight: 1.25,
+    })
+  })
+
+  test('does not throw when no variants are found', () => {
+    const comp = variant({
+      variants: {
+        beep: {}
+      }
+    })
+    let style
+    expect(() => {
+      style = comp({ variant: 'beep' })
+    }).not.toThrow()
+    expect(style).toEqual({})
+  })
+
+  test('returns empty object when no prop is provided', () => {
+    const comp = variant({
+      variants: {
+        beep: {}
+      }
+    })
+    const style = comp({})
+    expect(style).toEqual({})
+  })
+
+  test('can be composed with other style props', () => {
+    const parser = compose(
+      variant({
+        variants: {
+          tomato: {
+            color: 'tomato',
+            fontSize: 20,
+            fontWeight: 'bold',
+          }
+        }
+      }),
+      color,
+      fontSize
+    )
+    const a = parser({
+      variant: 'tomato',
+    })
+    const b = parser({
+      variant: 'tomato',
+      color: 'blue',
+      fontSize: 32,
+    })
+    expect(a).toEqual({
+      color: 'tomato',
+      fontSize: 20,
+      fontWeight: 'bold',
+    })
+    expect(b).toEqual({
+      color: 'blue',
+      fontSize: 32,
+      fontWeight: 'bold',
+    })
+  })
+
+  test('theme-based variants override local variants', () => {
+    const comp = variant({
+      variants: {
+        primary: {
+          color: 'white',
+          bg: 'blue',
+        }
+      },
+      scale: 'buttons',
+    })
+    const style = comp({
+      variant: 'primary',
+      theme: {
+        buttons: {
+          primary: {
+            color: 'black',
+            bg: 'cyan',
+          }
+        }
+      }
+    })
+    expect(style).toEqual({
+      color: 'black',
+      backgroundColor: 'cyan',
+    })
+  })
+})

Fixed alerts

No README

Quality

Package does not have a README. This may indicate a failed publish or a low quality package.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

10846

increased by85.69%

Number of package files

7

increased by16.67%

Lines of code

369

increased by95.24%

Number of medium quality alerts

0

decreased by-100%

Number of lines in readme file

44

increased byInfinity%

Worsened metrics

Dependency count

2

increased by100%

Dependency changes

• + Added@styled-system/css@^5.0.23

• + Added@styled-system/css@5.1.5(transitive)

• Updated@styled-system/core@^5.1.0