A fork of styled-tools with more utilities for css-in-js
npm install styled-bettertools
This project is a fork of styled-tools, which is no longer maintained. The main goal of this project is to keep the same API and add new features and improvements.
Useful interpolated functions for styled-components 💅, emotion 👩🎤, JSS and other CSS-in-JS libraries.
npm:
npm i styled-bettertools
Yarn:
yarn add styled-bettertools
``jsx
import styled, { css } from "styled-components";
import { prop, ifProp, switchProp } from "styled-bettertools";
// If the component does not have Props interface, pass
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 <
object >
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;
)};`
#### 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
Returns the value of props[path] or defaultValue
#### Parameters
- path stringdefaultValue
- any
#### Examples
`javascript
import styled from "styled-components";
import { prop } from "styled-bettertools";
const Button = styled.button
color: ${prop("color", "red")};;`
A utility function to retrieve a property value from a component's props that deeply resolves each property in the path.
#### Parameters
- path stringdefaultValue
- any
#### Examples
`javascript
import styled from "styled-components";
import { deepProp } from "styled-bettertools"; // or "styled-bettertools/deep-prop"
const Button = styled.button
color: ${deepProp("color.primary", "red")};;
function App() {
return
Same as prop, except that it returns props.theme[path] instead ofprops[path].
#### Parameters
- path stringdefaultValue
- any
#### Examples
`javascript
import styled from "styled-components";
import { theme } from "styled-bettertools";
const Button =
styled.button <
object >
color: ${theme("button.color", "red")};;`
Returns props.theme.palette[key || props.palette][tone || props.tone || 0] or defaultValue.
#### Parameters
- keyOrTone \*toneOrDefaultValue
\*(string \| number)
\\
- anydefaultValue
- any
#### Examples
`javascript
import styled, { ThemeProvider } from "styled-components";
import { palette } from "styled-bettertools";
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;
`
Returns pass if prop is truthy. Otherwise returns fail
#### Parameters
- test \*pass
\*(Needle \| Array
<Needle> | Object)
\\
- any (optional, default "")fail
- any (optional, default "")
#### Examples
`javascript
import styled from "styled-components";
import { ifProp, palette } from "styled-bettertools";
const Button =
styled.button <
object >
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 pass if prop is falsy. Otherwise returns fail
#### Parameters
- test \*pass
\*(Needle \| Array
<Needle> | Object)
\\
- anyfail
- any
#### Examples
`javascript
import styled from "styled-components";
import { ifNotProp } from "styled-bettertools";
const Button = styled.button
font-size: ${ifNotProp("large", "20px", "30px")};;`
Calls a function passing properties values as arguments.
#### Parameters
- needle \*fn
\*(Needle \| Array
<Needle>)\\
- Function
#### Examples
`javascript
// example with polished
import styled from "styled-components";
import { darken } from "polished";
import { withProp, prop } from "styled-bettertools";
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})};;`
Switches on a given prop. Returns the value or function for a given prop value. Third parameter is default value.
#### Parameters
- needle Needlecases
- (Object | PropsFn)defaultCase
- any
#### Examples
`javascript
import styled, { css } from "styled-components";
import { switchProp, prop } from "styled-bettertools";
const Button =
styled.button <
object >
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;
},
css
color: black;
)};
;
`
#### 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")`
MIT © Alvaro Neto