styled-tools - npm Package Compare versions

Comparing version 0.4.0 to 0.5.0

dist/cjs/ifProp.js

@@ -1,2 +0,2 @@
-'use strict';
+"use strict";
 
@@ -9,15 +9,15 @@ Object.defineProperty(exports, "__esModule", {
 
-var _get = require('lodash/get');
+var _get = require("lodash/get");
 
 var _get2 = _interopRequireDefault(_get);
 
-var _at = require('lodash/at');
+var _at = require("lodash/at");
 
 var _at2 = _interopRequireDefault(_at);
 
-var _values = require('lodash/values');
+var _values = require("lodash/values");
 
 var _values2 = _interopRequireDefault(_values);
 
-var _difference = require('lodash/difference');
+var _difference = require("lodash/difference");
 
@@ -32,11 +32,11 @@ var _difference2 = _interopRequireDefault(_difference);
  * // usage with styled-theme
- * import styled from 'styled-components'
- * import { ifProp } from 'styled-tools'
- * import { palette } from 'styled-theme'
+ * import styled from "styled-components";
+ * import { ifProp } from "styled-tools";
+ * import { palette } from "styled-theme";
  *
  * const Button = styled.button`
- *   background-color: ${ifProp('transparent', 'transparent', palette(0))};
- *   color: ${ifProp(['transparent', 'accent'], palette('secondary', 0))};
- *   font-size: ${ifProp({ size: 'large' }, '20px', ifProp({ size: 'medium' }, '16px', '12px'))};
- * `
+ *   background-color: ${ifProp("transparent", "transparent", palette(0))};
+ *   color: ${ifProp(["transparent", "accent"], palette("secondary", 0))};
+ *   font-size: ${ifProp({ size: "large" }, "20px", ifProp({ size: "medium" }, "16px", "12px"))};
+ * `;
  */
@@ -52,5 +52,5 @@ var ifProp = function ifProp(test, pass, fail) {
       }).length;
-    } else if (typeof test === 'function') {
+    } else if (typeof test === "function") {
       result = test(props);
-    } else if ((typeof test === 'undefined' ? 'undefined' : _typeof(test)) === 'object') {
+    } else if ((typeof test === "undefined" ? "undefined" : _typeof(test)) === "object") {
       var testKeys = Object.keys(test);
@@ -57,0 +57,0 @@ var testValues = (0, _values2.default)(test);

dist/cjs/index.js

@@ -1,2 +0,2 @@
-'use strict';
+"use strict";
 
@@ -6,21 +6,17 @@ Object.defineProperty(exports, "__esModule", {
 });
-exports.withProp = exports.switchProp = exports.prop = exports.ifProp = exports.call = undefined;
+exports.withProp = exports.switchProp = exports.prop = exports.ifProp = undefined;
 
-var _call2 = require('./call');
+var _ifProp2 = require("./ifProp");
 
-var _call3 = _interopRequireDefault(_call2);
-
-var _ifProp2 = require('./ifProp');
-
 var _ifProp3 = _interopRequireDefault(_ifProp2);
 
-var _prop2 = require('./prop');
+var _prop2 = require("./prop");
 
 var _prop3 = _interopRequireDefault(_prop2);
 
-var _switchProp2 = require('./switchProp');
+var _switchProp2 = require("./switchProp");
 
 var _switchProp3 = _interopRequireDefault(_switchProp2);
 
-var _withProp2 = require('./withProp');
+var _withProp2 = require("./withProp");
 
@@ -31,3 +27,2 @@ var _withProp3 = _interopRequireDefault(_withProp2);
 
-exports.call = _call3.default;
 exports.ifProp = _ifProp3.default;
@@ -34,0 +29,0 @@ exports.prop = _prop3.default;

dist/cjs/prop.js

@@ -1,2 +0,2 @@
-'use strict';
+"use strict";
 
@@ -7,3 +7,3 @@ Object.defineProperty(exports, "__esModule", {
 
-var _get = require('lodash/get');
+var _get = require("lodash/get");
 
@@ -18,4 +18,4 @@ var _get2 = _interopRequireDefault(_get);
  * const Button = styled.button`
- *  color: ${prop('color', 'red')};
- * `
+ *  color: ${prop("color", "red")};
+ * `;
  */
@@ -22,0 +22,0 @@ var prop = function prop(path, defaultValue) {

dist/cjs/switchProp.js

@@ -1,2 +0,2 @@
-'use strict';
+"use strict";
 
@@ -7,3 +7,3 @@ Object.defineProperty(exports, "__esModule", {
 
-var _get = require('lodash/get');
+var _get = require("lodash/get");
 
@@ -16,15 +16,13 @@ var _get2 = _interopRequireDefault(_get);
  * Switches on a given prop. Returns the value or function for a given prop value.
- * Otherwise returns `defaultValue`
- * @param defaultValue *deprecated*
  * @example
- * import styled, { css } from 'styled-components'
- * import { switchProp, prop } from 'styled-tools'
+ * import styled, { css } from "styled-components";
+ * import { switchProp, prop } from "styled-tools";
  *
  * const Button = styled.button`
- *  font-size: ${switchProp(prop('size', 'medium'), {
- *    small: prop('theme.sizes.sm', '12px'),
- *    medium: prop('theme.sizes.md', '16px'),
- *    large: prop('theme.sizes.lg', '20px'),
+ *  font-size: ${switchProp(prop("size", "medium"), {
+ *    small: prop("theme.sizes.sm", "12px"),
+ *    medium: prop("theme.sizes.md", "16px"),
+ *    large: prop("theme.sizes.lg", "20px")
  *  }};
- *  ${switchProp('theme.kind', {
+ *  ${switchProp("theme.kind", {
  *    light: css`
@@ -35,19 +33,16 @@ *      color: LightBlue;
  *      color: DarkBlue;
- *    `,
+ *    `
  *  })}
- * `
+ * `;
  *
- * <Button size="large" theme={{ kind: 'light' }} />
+ * <Button size="large" theme={{ kind: "light" }} />
  */
-var switchProp = function switchProp(needle, switches, defaultValue) {
-  if (typeof defaultValue !== 'undefined') {
-    console.warn(['[styled-tools] Passing `defaultValue` as third argument to `switchProp` is deprecated.', 'Please use `switchProp(prop(path, defaultValue), { ... })` instead.', 'See https://github.com/diegohaz/styled-tools#switchprop'].join(' '));
-  }
+var switchProp = function switchProp(needle, switches) {
   return function () {
     var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
 
-    var value = typeof needle === 'function' ? needle(props) : (0, _get2.default)(props, needle);
-    return (0, _get2.default)(switches, value, defaultValue);
+    var value = typeof needle === "function" ? needle(props) : (0, _get2.default)(props, needle);
+    return (0, _get2.default)(switches, value);
   };
 };
 exports.default = switchProp;

dist/cjs/withProp.js

@@ -1,2 +0,2 @@
-'use strict';
+"use strict";
 
@@ -7,3 +7,3 @@ Object.defineProperty(exports, "__esModule", {
 
-var _get = require('lodash/get');
+var _get = require("lodash/get");
 
@@ -14,2 +14,4 @@ var _get2 = _interopRequireDefault(_get);
 
+function _toConsumableArray(arr) { if (Array.isArray(arr)) { for (var i = 0, arr2 = Array(arr.length); i < arr.length; i++) { arr2[i] = arr[i]; } return arr2; } else { return Array.from(arr); } }
+
 /**
@@ -19,10 +21,11 @@ * Calls a function passing properties values as arguments.
  * // example with polished
- * import styled from 'styled-components'
- * import { darken } from 'polished'
- * import { withProp, prop } from 'styled-tools'
+ * import styled from "styled-components";
+ * import { darken } from "polished";
+ * import { withProp, prop } from "styled-tools";
  *
  * const Button = styled.button`
- *   border-color: ${withProp(prop('theme.primaryColor', 'blue'), darken(0.5))};
- *   font-size: ${withProp('theme.size', size => `${size + 1}px`)};
- * `
+ *   border-color: ${withProp(prop("theme.primaryColor", "blue"), darken(0.5))};
+ *   font-size: ${withProp("theme.size", size => `${size + 1}px`)};
+ *   background: ${withProp(["foo", "bar"], (foo, bar) => `${foo}${bar}`)};
+ * `;
  */
@@ -33,3 +36,11 @@ var withProp = function withProp(needle, fn) {
 
-    if (typeof needle === 'function') {
+    if (Array.isArray(needle)) {
+      var needles = needle.map(function (arg) {
+        return withProp(arg, function (x) {
+          return x;
+        })(props);
+      });
+      return fn.apply(undefined, _toConsumableArray(needles));
+    }
+    if (typeof needle === "function") {
       return fn(needle(props));
@@ -40,2 +51,3 @@ }
 };
+
 exports.default = withProp;

dist/es/ifProp.js

 var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function (obj) { return typeof obj; } : function (obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; };
 
-import get from 'lodash/get';
-import at from 'lodash/at';
-import values from 'lodash/values';
-import difference from 'lodash/difference';
+import get from "lodash/get";
+import at from "lodash/at";
+import values from "lodash/values";
+import difference from "lodash/difference";
 
@@ -13,11 +13,11 @@
  * // usage with styled-theme
- * import styled from 'styled-components'
- * import { ifProp } from 'styled-tools'
- * import { palette } from 'styled-theme'
+ * import styled from "styled-components";
+ * import { ifProp } from "styled-tools";
+ * import { palette } from "styled-theme";
  *
  * const Button = styled.button`
- *   background-color: ${ifProp('transparent', 'transparent', palette(0))};
- *   color: ${ifProp(['transparent', 'accent'], palette('secondary', 0))};
- *   font-size: ${ifProp({ size: 'large' }, '20px', ifProp({ size: 'medium' }, '16px', '12px'))};
- * `
+ *   background-color: ${ifProp("transparent", "transparent", palette(0))};
+ *   color: ${ifProp(["transparent", "accent"], palette("secondary", 0))};
+ *   font-size: ${ifProp({ size: "large" }, "20px", ifProp({ size: "medium" }, "16px", "12px"))};
+ * `;
  */
@@ -33,5 +33,5 @@ var ifProp = function ifProp(test, pass, fail) {
       }).length;
-    } else if (typeof test === 'function') {
+    } else if (typeof test === "function") {
       result = test(props);
-    } else if ((typeof test === 'undefined' ? 'undefined' : _typeof(test)) === 'object') {
+    } else if ((typeof test === "undefined" ? "undefined" : _typeof(test)) === "object") {
       var testKeys = Object.keys(test);
@@ -38,0 +38,0 @@ var testValues = values(test);

dist/es/index.js

@@ -1,10 +0,8 @@
-import _call from './call';
-export { _call as call };
-import _ifProp from './ifProp';
+import _ifProp from "./ifProp";
 export { _ifProp as ifProp };
-import _prop from './prop';
+import _prop from "./prop";
 export { _prop as prop };
-import _switchProp from './switchProp';
+import _switchProp from "./switchProp";
 export { _switchProp as switchProp };
-import _withProp from './withProp';
+import _withProp from "./withProp";
 export { _withProp as withProp };

dist/es/prop.js

@@ -1,2 +0,2 @@
-import get from 'lodash/get';
+import get from "lodash/get";
 
@@ -7,4 +7,4 @@ /**
  * const Button = styled.button`
- *  color: ${prop('color', 'red')};
- * `
+ *  color: ${prop("color", "red")};
+ * `;
  */
@@ -11,0 +11,0 @@ var prop = function prop(path, defaultValue) {

dist/es/switchProp.js

@@ -1,2 +0,2 @@
-import get from 'lodash/get';
+import get from "lodash/get";
 
@@ -6,15 +6,13 @@
  * Switches on a given prop. Returns the value or function for a given prop value.
- * Otherwise returns `defaultValue`
- * @param defaultValue *deprecated*
  * @example
- * import styled, { css } from 'styled-components'
- * import { switchProp, prop } from 'styled-tools'
+ * import styled, { css } from "styled-components";
+ * import { switchProp, prop } from "styled-tools";
  *
  * const Button = styled.button`
- *  font-size: ${switchProp(prop('size', 'medium'), {
- *    small: prop('theme.sizes.sm', '12px'),
- *    medium: prop('theme.sizes.md', '16px'),
- *    large: prop('theme.sizes.lg', '20px'),
+ *  font-size: ${switchProp(prop("size", "medium"), {
+ *    small: prop("theme.sizes.sm", "12px"),
+ *    medium: prop("theme.sizes.md", "16px"),
+ *    large: prop("theme.sizes.lg", "20px")
  *  }};
- *  ${switchProp('theme.kind', {
+ *  ${switchProp("theme.kind", {
  *    light: css`
@@ -25,17 +23,14 @@ *      color: LightBlue;
  *      color: DarkBlue;
- *    `,
+ *    `
  *  })}
- * `
+ * `;
  *
- * <Button size="large" theme={{ kind: 'light' }} />
+ * <Button size="large" theme={{ kind: "light" }} />
  */
-var switchProp = function switchProp(needle, switches, defaultValue) {
-  if (typeof defaultValue !== 'undefined') {
-    console.warn(['[styled-tools] Passing `defaultValue` as third argument to `switchProp` is deprecated.', 'Please use `switchProp(prop(path, defaultValue), { ... })` instead.', 'See https://github.com/diegohaz/styled-tools#switchprop'].join(' '));
-  }
+var switchProp = function switchProp(needle, switches) {
   return function () {
     var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
 
-    var value = typeof needle === 'function' ? needle(props) : get(props, needle);
-    return get(switches, value, defaultValue);
+    var value = typeof needle === "function" ? needle(props) : get(props, needle);
+    return get(switches, value);
   };
@@ -42,0 +37,0 @@ };

dist/es/withProp.js

@@ -1,4 +0,6 @@
-import get from 'lodash/get';
+function _toConsumableArray(arr) { if (Array.isArray(arr)) { for (var i = 0, arr2 = Array(arr.length); i < arr.length; i++) { arr2[i] = arr[i]; } return arr2; } else { return Array.from(arr); } }
 
+import get from "lodash/get";
 
+
 /**
@@ -8,10 +10,11 @@ * Calls a function passing properties values as arguments.
  * // example with polished
- * import styled from 'styled-components'
- * import { darken } from 'polished'
- * import { withProp, prop } from 'styled-tools'
+ * import styled from "styled-components";
+ * import { darken } from "polished";
+ * import { withProp, prop } from "styled-tools";
  *
  * const Button = styled.button`
- *   border-color: ${withProp(prop('theme.primaryColor', 'blue'), darken(0.5))};
- *   font-size: ${withProp('theme.size', size => `${size + 1}px`)};
- * `
+ *   border-color: ${withProp(prop("theme.primaryColor", "blue"), darken(0.5))};
+ *   font-size: ${withProp("theme.size", size => `${size + 1}px`)};
+ *   background: ${withProp(["foo", "bar"], (foo, bar) => `${foo}${bar}`)};
+ * `;
  */
@@ -22,3 +25,11 @@ var withProp = function withProp(needle, fn) {
 
-    if (typeof needle === 'function') {
+    if (Array.isArray(needle)) {
+      var needles = needle.map(function (arg) {
+        return withProp(arg, function (x) {
+          return x;
+        })(props);
+      });
+      return fn.apply(undefined, _toConsumableArray(needles));
+    }
+    if (typeof needle === "function") {
       return fn(needle(props));
@@ -25,0 +36,0 @@ }

package.json

 {
   "name": "styled-tools",
-  "version": "0.4.0",
+  "version": "0.5.0",
   "description": "Utilities for styled-components",
@@ -27,3 +27,3 @@ "license": "MIT",
     "flow-typed": "flow-typed install",
-    "docs": "documentation readme src --section=API -c documentation.yml",
+    "docs": "documentation readme src --section=API --pe flow -c documentation.yml",
     "clean": "rimraf dist",
@@ -57,2 +57,3 @@ "prebuild": "npm run docs && npm run clean",
     "babel-cli": "^6.18.0",
+    "babel-core": "^6.26.0",
     "babel-eslint": "^8.2.1",
@@ -64,9 +65,11 @@ "babel-jest": "^22.0.6",
     "cross-env": "^5.1.3",
-    "documentation": "^5.3.2",
+    "documentation": "^6.1.0",
     "eslint": "^4.15.0",
     "eslint-config-airbnb-base": "^12.1.0",
+    "eslint-config-prettier": "^2.9.0",
     "eslint-plugin-flowtype": "^2.29.2",
     "eslint-plugin-flowtype-errors": "^3.0.0",
     "eslint-plugin-import": "^2.2.0",
-    "flow-bin": "^0.63.1",
+    "eslint-plugin-prettier": "^2.6.0",
+    "flow-bin": "^0.69.0",
     "flow-typed": "^2.0.0",
@@ -76,4 +79,5 @@ "jest-cli": "^22.0.6",
     "opn-cli": "^3.1.0",
+    "prettier": "^1.11.1",
     "rimraf": "^2.6.2"
   }
 }

README.md

@@ -5,2 +5,3 @@ # styled-tools 💅
 [![NPM version](https://img.shields.io/npm/v/styled-tools.svg?style=flat-square)](https://npmjs.org/package/styled-tools)
+[![NPM downloads](https://img.shields.io/npm/dm/styled-tools.svg?style=flat-square)](https://npmjs.org/package/styled-tools)
 [![Build Status](https://img.shields.io/travis/diegohaz/styled-tools/master.svg?style=flat-square)](https://travis-ci.org/diegohaz/styled-tools) [![Coverage Status](https://img.shields.io/codecov/c/github/diegohaz/styled-tools/master.svg?style=flat-square)](https://codecov.io/gh/diegohaz/styled-tools/branch/master)
@@ -10,2 +11,4 @@
 
+> **Shameless self promotion** 💡: If you are using `styled-components`, have a look at <https://github.com/diegohaz/reas>, a minimalist and highly customizable UI toolkit for React.
+
 ## Install
@@ -20,14 +23,14 @@
 ```jsx
-import styled, { css } from 'styled-components'
-import { prop, ifProp, switchProp } from 'styled-tools'
+import styled, { css } from "styled-components";
+import { prop, ifProp, switchProp } from "styled-tools";
 
 const Button = styled.button`
-  color: ${prop('color', 'red')};
-  font-size: ${ifProp({ size: 'large' }, '20px', '14px')};
-  background-color: ${switchProp('theme', {
-    dark: 'blue', 
-    darker: 'mediumblue', 
-    darkest: 'darkblue' 
+  color: ${prop("color", "red")};
+  font-size: ${ifProp({ size: "large" }, "20px", "14px")};
+  background-color: ${switchProp("theme", {
+    dark: "blue", 
+    darker: "mediumblue", 
+    darkest: "darkblue" 
   })};
-`
+`;
 
@@ -51,27 +54,27 @@ // renders with color: blue
 const Button = styled.button`
-  color: ${prop('theme.colors.white', '#fff')};
-  font-size: ${ifProp({ size: 'large' }, prop('theme.sizes.lg', '20px'), prop('theme.sizes.md', '14px'))};
-  background-color: ${prop('theme.colors.black', '#000')};
+  color: ${prop("theme.colors.white", "#fff")};
+  font-size: ${ifProp({ size: "large" }, prop("theme.sizes.lg", "20px"), prop("theme.sizes.md", "14px"))};
+  background-color: ${prop("theme.colors.black", "#000")};
   
-  ${switchProp('kind', {
+  ${switchProp("kind", {
     dark: css`
-      background-color: ${prop('theme.colors.blue', 'blue')};
-      border: 1px solid ${prop('theme.colors.blue', 'blue')};
+      background-color: ${prop("theme.colors.blue", "blue")};
+      border: 1px solid ${prop("theme.colors.blue", "blue")};
     `,
     darker: css`
-      background-color: ${prop('theme.colors.mediumblue', 'mediumblue')};
-      border: 1px solid ${prop('theme.colors.mediumblue', 'mediumblue')};
+      background-color: ${prop("theme.colors.mediumblue", "mediumblue")};
+      border: 1px solid ${prop("theme.colors.mediumblue", "mediumblue")};
     `,
     darkest: css`
-      background-color: ${prop('theme.colors.darkblue', 'darkblue')};
-      border: 1px solid ${prop('theme.colors.darkblue', 'darkblue')};
-    `,
+      background-color: ${prop("theme.colors.darkblue", "darkblue")};
+      border: 1px solid ${prop("theme.colors.darkblue", "darkblue")};
+    `
   })}
   
-  ${ifProp('disabled', css`
-    background-color: ${prop('theme.colors.gray', '#999')};
-    border-color: ${prop('theme.colors.gray', '#999')};
+  ${ifProp("disabled", css`
+    background-color: ${prop("theme.colors.gray", "#999")};
+    border-color: ${prop("theme.colors.gray", "#999")};
     pointer-events: none;
   `)}
-`
+`;
 ```
@@ -98,3 +101,3 @@
 
--   `path` **([string](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String) \| [Array](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array)&lt;[string](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String)>)** 
+-   `path` **[string](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String)** 
 -   `defaultValue` **any** 
@@ -106,4 +109,4 @@
 const Button = styled.button`
- color: ${prop('color', 'red')};
-`
+ color: ${prop("color", "red")};
+`;
 ```
@@ -119,3 +122,3 @@
 
--   `test` **([Needle](#needle) \| [Object](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object))** 
+-   `test` **([Needle](#needle) \| [Array](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array)&lt;[string](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String)> | [Object](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object))** 
 -   `pass` **any** 
@@ -128,11 +131,11 @@ -   `fail` **any**
 // usage with styled-theme
-import styled from 'styled-components'
-import { ifProp } from 'styled-tools'
-import { palette } from 'styled-theme'
+import styled from "styled-components";
+import { ifProp } from "styled-tools";
+import { palette } from "styled-theme";
 
 const Button = styled.button`
-  background-color: ${ifProp('transparent', 'transparent', palette(0))};
-  color: ${ifProp(['transparent', 'accent'], palette('secondary', 0))};
-  font-size: ${ifProp({ size: 'large' }, '20px', ifProp({ size: 'medium' }, '16px', '12px'))};
-`
+  background-color: ${ifProp("transparent", "transparent", palette(0))};
+  color: ${ifProp(["transparent", "accent"], palette("secondary", 0))};
+  font-size: ${ifProp({ size: "large" }, "20px", ifProp({ size: "medium" }, "16px", "12px"))};
+`;
 ```
@@ -148,3 +151,3 @@
 
--   `needle` **[Needle](#needle)** 
+-   `needle` **([Needle](#needle) \| [Array](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array)&lt;[Needle](#needle)>)** 
 -   `fn` **[Function](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/function)** 
@@ -156,10 +159,11 @@
 // example with polished
-import styled from 'styled-components'
-import { darken } from 'polished'
-import { withProp, prop } from 'styled-tools'
+import styled from "styled-components";
+import { darken } from "polished";
+import { withProp, prop } from "styled-tools";
 
 const Button = styled.button`
-  border-color: ${withProp(prop('theme.primaryColor', 'blue'), darken(0.5))};
-  font-size: ${withProp('theme.size', size => `${size + 1}px`)};
-`
+  border-color: ${withProp(prop("theme.primaryColor", "blue"), darken(0.5))};
+  font-size: ${withProp("theme.size", size => `${size + 1}px`)};
+  background: ${withProp(["foo", "bar"], (foo, bar) => `${foo}${bar}`)};
+`;
 ```
@@ -172,3 +176,2 @@
 Switches on a given prop. Returns the value or function for a given prop value.
-Otherwise returns `defaultValue`
 
@@ -179,3 +182,2 @@ **Parameters**
 -   `switches` **[Object](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object)** 
--   `defaultValue` **any** _deprecated_
 
@@ -185,12 +187,12 @@ **Examples**
 ```javascript
-import styled, { css } from 'styled-components'
-import { switchProp, prop } from 'styled-tools'
+import styled, { css } from "styled-components";
+import { switchProp, prop } from "styled-tools";
 
 const Button = styled.button`
- font-size: ${switchProp(prop('size', 'medium'), {
-   small: prop('theme.sizes.sm', '12px'),
-   medium: prop('theme.sizes.md', '16px'),
-   large: prop('theme.sizes.lg', '20px'),
+ font-size: ${switchProp(prop("size", "medium"), {
+   small: prop("theme.sizes.sm", "12px"),
+   medium: prop("theme.sizes.md", "16px"),
+   large: prop("theme.sizes.lg", "20px")
  }};
- ${switchProp('theme.kind', {
+ ${switchProp("theme.kind", {
    light: css`
@@ -201,7 +203,7 @@ color: LightBlue;
      color: DarkBlue;
-   `,
+   `
  })}
-`
+`;
 
-<Button size="large" theme={{ kind: 'light' }} />
+<Button size="large" theme={{ kind: "light" }} />
 ```
@@ -218,10 +220,6 @@
 
-Type: ([string](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String) \| [Array](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array)&lt;[string](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String)> | [Function](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/function))
+Type: ([string](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String) \| [Function](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/function))
 
-## Related
-
--   [styled-theme](https://github.com/diegohaz/styled-theme) - Extensible theming system for styled-components
-
 ## License
 
 MIT © [Diego Haz](https://github.com/diegohaz)

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

Number of medium supply chain risk alerts

0

decreased by-100%

Worsened metrics

Total package byte prevSize

20521

decreased by-6.37%

Dev dependency count

23

increased by21.05%

Number of package files

13

decreased by-23.53%

Lines of code

287

decreased by-8.01%

Number of lines in readme file

211

decreased by-0.94%

No dependency changes