styled-tools 💅

 

Useful interpolated functions for styled-components 💅, emotion 👩‍🎤, JSS and other CSS-in-JS libraries.

Install

npm:

npm i styled-tools

Yarn:

yarn add styled-tools

Usage

``jsx
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"
})};
;

// renders with color: blue

// renders with color: red

// renders with font-size: 20px

// renders with background-color: mediumblue


`

A more complex example:

`jsx
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")};

${switchProp("kind", {
dark: css
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")};
,
darkest: css
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")};
pointer-events: none;
)}
;
`

API

#### Table of Contents

- prop
- Parameters
- Examples
- theme
- Parameters
- Examples
- palette
- Parameters
- Examples
- ifProp
- Parameters
- Examples
- ifNotProp
- Parameters
- Examples
- withProp
- Parameters
- Examples
- switchProp
- Parameters
- Examples
- Types
- Needle

$3

Returns the value of props[path] or defaultValue

#### Parameters

- path string
- defaultValue any

#### Examples

`javascript
import styled from "styled-components";
import { prop } from "styled-tools";

const Button = styled.button
color: ${prop("color", "red")};
;
`

Returns PropsFn

$3

Same as prop, except that it returns props.theme[path] instead of
props[path].

#### Parameters

- path string
- defaultValue any

#### Examples

`javascript
import styled from "styled-components";
import { theme } from "styled-tools";

const Button = styled.button
color: ${theme("button.color", "red")};
;
`

$3

Returns props.theme.palette[key || props.palette][tone || props.tone || 0] or defaultValue.

#### Parameters

- keyOrTone (string \| number)
- toneOrDefaultValue any
- defaultValue any

#### Examples

`javascript
import styled, { ThemeProvider } from "styled-components";
import { palette } from "styled-tools";

const theme = {
palette: {
primary: ['#1976d2', '#2196f3', '#71bcf7', '#c2e2fb'],
secondary: ['#c2185b', '#e91e63', '#f06292', '#f8bbd0']
}
};

const Button = styled.button
color: ${palette(1)}; // props.theme.palette[props.palette][1]
color: ${palette("primary", 1)}; // props.theme.palette.primary[1]
color: ${palette("primary")}; // props.theme.palette.primary[props.tone || 0]
color: ${palette("primary", -1)}; // props.theme.palette.primary[3]
color: ${palette("primary", 10)}; // props.theme.palette.primary[3]
color: ${palette("primary", -10)}; // props.theme.palette.primary[0]
color: ${palette("primary", 0, "red")}; // props.theme.palette.primary[0] || red
;






`

$3

Returns pass if prop is truthy. Otherwise returns fail

#### Parameters

- test (Needle \| Array<Needle> | Object)
- pass any (optional, default "")
- fail any (optional, default "")

#### Examples

`javascript
import styled from "styled-components";
import { ifProp, palette } from "styled-tools";

const Button = styled.button
background-color: ${ifProp("transparent", "transparent", palette(0))};
color: ${ifProp(["transparent", "accent"], palette("secondary"))};
font-size: ${ifProp({ size: "large" }, "20px", ifProp({ size: "medium" }, "16px", "12px"))};
;
`

Returns PropsFn

$3

Returns pass if prop is falsy. Otherwise returns fail

#### Parameters

- test (Needle \| Array<Needle> | Object)
- pass any
- fail any

#### Examples

`javascript
import styled from "styled-components";
import { ifNotProp } from "styled-tools";

const Button = styled.button
font-size: ${ifNotProp("large", "20px", "30px")};
;
`

Returns PropsFn

$3

Calls a function passing properties values as arguments.

#### Parameters

- needle (Needle \| Array<Needle>)
- fn Function

#### Examples

`javascript
// example with polished
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)};
background: ${withProp(["foo", "bar"], (foo, bar) => ${foo}${bar})};
;
`

Returns PropsFn

$3

Switches on a given prop. Returns the value or function for a given prop value. Third parameter is default value.

#### Parameters

- needle Needle
- cases (Object | PropsFn)
- defaultCase any

#### Examples

`javascript
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")
}, prop("theme.sizes.md", "16px"))};
${switchProp("theme.kind", {
light: css
color: LightBlue;
,
dark: css
color: DarkBlue;

}, csscolor: black;)}
;


`

Returns PropsFn

$3

#### Needle

A Needle is used to map the props to a value. This can either be done with
a path string "theme.size.sm" or with a function
(props) => props.theme.size.sm (these two examples are equivalent).

All of styled-tools can be used as Needles making it possible to do
composition between functions. ie ifProp(theme("dark"), "black", "white")`

Type: (string \| Function)

License

MIT © Diego Haz