lozmm93 / styled-tools

Useful interpolated functions for CSS-in-JS

styled-tools 💅

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

Install

$ npm install --save styled-tools

Usage

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
<Button color="blue" />

// renders with color: red
<Button />

// renders with font-size: 20px
<Button size="large" />

// renders with background-color: mediumblue
<Button theme="darker" />

A more complex example:

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
• ifProp
  • Parameters
  • Examples
• ifNotProp
  • Parameters
  • Examples
• withProp
  • Parameters
  • Examples
• switchProp
  • Parameters
  • Examples
• Types
  • Needle

prop

Returns the value of props[path] or defaultValue

Parameters

• path string
• defaultValue any

Examples

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

Returns PropsFn

ifProp

Returns pass if prop is truthy. Otherwise returns fail

Parameters

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

Examples

// usage with 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"))};
`;

Returns PropsFn

ifNotProp

Returns pass if prop is falsy. Otherwise returns fail

Parameters

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

Examples

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

Returns PropsFn

withProp

Calls a function passing properties values as arguments.

Parameters

• needle (Needle | Array<Needle>)
• fn Function

Examples

// 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

switchProp

Switches on a given prop. Returns the value or function for a given prop value.

Parameters

• needle Needle
• cases Object
• defaultCase any

Examples

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

<Button size="large" theme={{ kind: "light" }} />

Returns PropsFn

Types

Needle

Type: (string | Function)

License

MIT © Diego Haz