styled-components-utils v1.0.0-beta.4

Styled Components Utils

Installation

npm install --save styled-components-utils

Nutshell

Functional tools to resolve props into style 💅. Compose these in tagged template literals.

From:

import styled from "styled-components";  // you'll likely have this...
const StyledButton = styled.button`color: ${props => props.color};`;

To:

import styled from "styled-components";  // you'll likely have this...
import { prop } from "styled-components-utils";
const StyledButton = styled.button`color: ${prop("color")};`;

More in depth

This library helps to compose functions. As an example, let's say you want to coax folks in an open source project into being a follower or, better yet, a contributor.

import { includes, or, prop, tern } from "styled-components-utils";

const isFollower = includes(prop("followers"), prop("id"));
const isContributor = includes(prop("contributors"), prop("id"));
const FollowerBadge = styled.button`
  color: ${tern("gold", "grey", or(isFollower, isContributor))};
`;
const AdminBadge = styled.button`
  color: ${tern("gold", "grey", isFollower)};
`;

This library knows how to handle what we refer to as resolvers. Such that gluing multiple resolvers together becomes trivial.

Contributing

Setup

After cloning the repo:

npm install

Testing

We use jest to test.

npm test

Formatting

We use prettier to format. You don't really need to run this as it runs on each commit. However, if you want:

npm run format

Documentation (auto-generated)

Functions

and(a, b) ⇒ Resolver | Boolean

The and function is for resolving the logical "and" of two values. Given a and b, and will return a boolean value immediately if possible. Otherwise, it returns a function which accepts a value to resolve later.

Kind: global function
Returns: Resolver | Boolean - A value or a resolver.

declare(cssProperty, value, test) ⇒ Resolver | String

The declare function is for resolving whether or not a CSS (property, value) pair string should be declared. In many cases, you know what CSS property you want to declare, but you don't know whether or not to declare it. The alternative would be to set the CSS value to something invalid, but this bloats the CSS unnecessarily. Given cssProperty, value, and test, the declare function will return a string (may be empty) immediately if possible. Otherwise, it returns a function which accepts a value to resolve later. The cssProperty must be a string (i.e., cannot be a resolver). However, both value and test may be resolved later.

Kind: global function
Returns: Resolver | String - A declaration string or a resolver.

includes(array, test) ⇒ Resolver | Boolean

The includes function is for resolving whether or not some value is included in an array of values. Given array and test, includes will return a boolean value immediately if possible. Otherwise, it returns a function which accepts a value to resolve later. Array's elements may not be resolvers. I.e., they must be resolved along with the parent array.

Kind: global function
Returns: Resolver | Boolean - A value or a resolver.

is(a, b) ⇒ Resolver | Boolean

The is function is for resolving a === check of two values. Given a and b, is will return a boolean value immediately if possible. Otherwise, it returns a function which accepts a value to resolve later.

Kind: global function
Returns: Resolver | Boolean - A value or a resolver.

join(joiner, ...values) ⇒ Resolver | String

Takes an array of strings possible interpolation functions. If all the values are strings, a string is returned. Otherwise, a function is returned that accepts an object and returns a string by resolving any functions.

Kind: global function
Returns: Resolver | String - Returns string immediately if possible.

map(map, key) ⇒ Resolver | String

The map function is for mapping keys to values. Given a map and a key, it will resolve to a value immediately (if possible), or return a function with may be passed an object to resolve later.

Kind: global function
Returns: Resolver | String - A value or a resolver.

not(value) ⇒ Resolver | Boolean

The not function is for resolving logical "not" of some single condition. Given value, not will return a boolean value immediately if possible. Otherwise, it returns a function which accepts a value to resolve later.

Kind: global function
Returns: Resolver | Boolean - A value or a resolver.

or(a, b) ⇒ Resolver | Boolean

The or function is for resolving the logical "or" of two values. Given a and b, or will return a boolean value immediately if possible. Otherwise, it returns a function which accepts a value to resolve later.

Kind: global function
Returns: Resolver | Boolean - A value or a resolver.

prop(path) ⇒ Resolver

Takes a path; returns a value-resolving function.

Kind: global function
Returns: Resolver - A resolver.

tern(a, b, test) ⇒ Resolver | String

The tern function is for resolving some ternary condition. Given a, b, and test--if tern will return a value immediately if possible. Otherwise, it returns a function which accepts a value to resolve later.

Kind: global function
Returns: Resolver | String - A value or a resolver.