styled-tools
Advanced tools
Comparing version 0.4.0 to 0.5.0
@@ -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); |
@@ -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; |
@@ -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) { |
@@ -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; |
@@ -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; |
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); |
@@ -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 }; |
@@ -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) { |
@@ -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 @@ }; |
@@ -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 @@ } |
{ | ||
"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" | ||
} | ||
} |
116
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)<[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)<[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)<[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)<[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) |
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
License Policy Violation
LicenseThis 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 riskPackage 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
0
20521
23
13
287
211