@styled-system/variant - npm Package Compare versions

Comparing version 5.0.0-7 to 5.0.0-11

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";
 
 exports.__esModule = true;
-exports["default"] = exports.variant = void 0;
+exports.colorStyle = exports.textStyle = exports.buttonStyle = exports["default"] = exports.variant = void 0;
 
@@ -11,5 +11,6 @@ var _core = require("@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;
 
@@ -20,3 +21,3 @@ var sx = function sx(value, scale) {
 
-  sx.scale = key;
+  sx.scale = scale || key;
   var config = (_config = {}, _config[prop] = sx, _config);
@@ -30,1 +31,15 @@ var parser = (0, _core.createParser)(config);
 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-7",
+  "version": "5.0.0-11",
   "main": "dist/index.js",
@@ -8,11 +8,6 @@ "module": "dist/index.esm.js",
   "license": "MIT",
-  "scripts": {
-    "prepare": "mkdir -p dist && npm run build:cjs && npm run build:esm",
-    "build:cjs": "NODE_ENV=cjs babel src/index.js -o dist/index.js",
-    "build:esm": "NODE_ENV=esm babel src/index.js -o dist/index.esm.js"
-  },
   "dependencies": {
-    "@styled-system/core": "^5.0.0-7"
+    "@styled-system/core": "^5.0.0-11"
   },
-  "gitHead": "e1e240e1dc5ca903cfbf0dc0527a19e0cc6ff749",
+  "gitHead": "be83686fe5f3756814cf9da74ced7a686d2fda9c",
   "publishConfig": {
@@ -19,0 +14,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

Improved metrics

Total package byte prevSize

5845

increased by28.26%

Lines of code

189

increased by56.2%

Worsened metrics

Number of package files

6

decreased by-14.29%

Dependency changes

• Updated@styled-system/core@^5.0.0-11