@styled-system/variant - npm Package Compare versions

Comparing version 5.0.0-alpha.0 to 5.0.0

dist/index.esm.js

@@ -5,5 +5,6 @@ import { get, createParser } from '@styled-system/core';
 
-  var key = _ref.key,
+  var scale = _ref.scale,
       _ref$prop = _ref.prop,
-      prop = _ref$prop === void 0 ? 'variant' : _ref$prop;
+      prop = _ref$prop === void 0 ? 'variant' : _ref$prop,
+      key = _ref.key;
 
@@ -14,3 +15,3 @@ var sx = function sx(value, scale) {
 
-  sx.scale = key;
+  sx.scale = scale || key;
   var config = (_config = {}, _config[prop] = sx, _config);
@@ -21,1 +22,12 @@ var parser = createParser(config);
 export default variant;
+export var buttonStyle = variant({
+  key: 'buttons'
+});
+export var textStyle = variant({
+  key: 'textStyles',
+  prop: 'textStyle'
+});
+export var colorStyle = variant({
+  key: 'colorStyles',
+  prop: 'colors'
+});

dist/index.js

 "use strict";
 
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports["default"] = exports.variant = void 0;
+exports.__esModule = true;
+exports.colorStyle = exports.textStyle = exports.buttonStyle = exports["default"] = exports.variant = void 0;
 
 var _core = require("@styled-system/core");
 
-function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+var variant = function variant(_ref) {
+  var _config;
 
-var variant = function variant(_ref) {
-  var key = _ref.key,
+  var scale = _ref.scale,
       _ref$prop = _ref.prop,
-      prop = _ref$prop === void 0 ? 'variant' : _ref$prop;
+      prop = _ref$prop === void 0 ? 'variant' : _ref$prop,
+      key = _ref.key;
 
@@ -21,6 +20,4 @@ var sx = function sx(value, scale) {
 
-  sx.scale = key;
-
-  var config = _defineProperty({}, prop, sx);
-
+  sx.scale = scale || key;
+  var config = (_config = {}, _config[prop] = sx, _config);
   var parser = (0, _core.createParser)(config);
@@ -32,2 +29,16 @@ return parser;
 var _default = variant;
-exports["default"] = _default;
+exports["default"] = _default;
+var buttonStyle = variant({
+  key: 'buttons'
+});
+exports.buttonStyle = buttonStyle;
+var textStyle = variant({
+  key: 'textStyles',
+  prop: 'textStyle'
+});
+exports.textStyle = textStyle;
+var colorStyle = variant({
+  key: 'colorStyles',
+  prop: 'colors'
+});
+exports.colorStyle = colorStyle;

package.json

 {
   "name": "@styled-system/variant",
-  "version": "5.0.0-alpha.0",
+  "version": "5.0.0",
   "main": "dist/index.js",
+  "module": "dist/index.esm.js",
   "author": "Brent Jackson <[e-mail]>",
   "license": "MIT",
-  "scripts": {
-    "prepare": "babel src -d dist"
-  },
   "dependencies": {
-    "@styled-system/core": "^5.0.0-alpha.0"
+    "@styled-system/core": "^5.0.0"
   },
-  "gitHead": "5357d5b7338f1236054dcd026bb27d8ca6a8e146",
+  "gitHead": "e67157cfd0222c355826adf5ad271534653c00df",
   "publishConfig": {
@@ -15,0 +13,0 @@ "access": "public"

src/index.js

 import { get, createParser } from '@styled-system/core'
 
 export const variant = ({
+  scale,
+  prop = 'variant',
+  // shim for v4 API
   key,
-  prop = 'variant'
 }) => {
@@ -10,5 +12,5 @@ const sx = (value, scale) => {
   }
-  sx.scale = key
+  sx.scale = scale || key
   const config = {
-    [prop]: sx
+    [prop]: sx,
   }
@@ -20,1 +22,5 @@ const parser = createParser(config)
 export default variant
+
+export const buttonStyle = variant({ key: 'buttons' })
+export const textStyle = variant({ key: 'textStyles', prop: 'textStyle' })
+export const colorStyle = variant({ key: 'colorStyles', prop: 'colors' })

test/index.js

@@ -1,2 +0,6 @@
-import { variant } from '../src'
+import {
+  variant,
+  textStyle,
+  colorStyle,
+} from '../src'
 import { system, compose } from '@styled-system/core'
@@ -75,1 +79,38 @@
 })
+
+test('textStyle prop returns theme.textStyles object', () => {
+  const a = textStyle({
+    theme: {
+      textStyles: {
+        heading: {
+          fontWeight: 'bold',
+          lineHeight: 1.25,
+        },
+      },
+    },
+    textStyle: 'heading',
+  })
+  expect(a).toEqual({
+    fontWeight: 'bold',
+    lineHeight: 1.25,
+  })
+})
+
+test('colors prop returns theme.colorStyles object', () => {
+  const a = colorStyle({
+    theme: {
+      colorStyles: {
+        dark: {
+          color: '#fff',
+          backgroundColor: '#000',
+        },
+      },
+    },
+    colors: 'dark',
+  })
+  expect(a).toEqual({
+    color: '#fff',
+    backgroundColor: '#000',
+  })
+})
+

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

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

5839

increased by27.6%

Lines of code

189

increased by54.92%

Number of low quality alerts

1

decreased by-50%

Worsened metrics

Number of package files

6

decreased by-14.29%

Dependency changes

• Updated@styled-system/core@^5.0.0