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.

| Param | Type | Description | | --- | --- | --- | | a | Resolver | String | The first value to "and". | | b | Resolver | String | The second value to "and". |

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.

| Param | Type | Description | | --- | --- | --- | | cssProperty | String | The CSS property we want to declare. | | value | Resolver | * | The value or resolver to set our CSS property to. | | [test] | Resolver | * | This determines whether or not to declare. |

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.

| Param | Type | Description | | --- | --- | --- | | array | Resolver | Array | The array to check inclusion with. | | test | Resolver | * | The value or resolver to look for in the array. |

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.

| Param | Type | Description | | --- | --- | --- | | a | Resolver | String | The first value in the equality check. | | b | Resolver | String | The second value in the equality check. |

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.

| Param | Type | Description | | --- | --- | --- | | joiner | String | the string to join values with. | | ...values | Resolver | String | The values to join together. |

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.

| Param | Type | Description | | --- | --- | --- | | map | Object | Maps values to values OR value-resolving funcs. | | key | Resolver | String | Value or function that resolves to value. |

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.

| Param | Type | Description | | --- | --- | --- | | value | Resolver | String | The value to return the opposite of. |

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.

| Param | Type | Description | | --- | --- | --- | | a | Resolver | String | The first value to "or". | | b | Resolver | String | The second value to "or". |

prop(path) ⇒ Resolver

Takes a path; returns a value-resolving function.

Kind: global function
Returns: Resolver - A resolver.

| Param | Type | Description | | --- | --- | --- | | path | String | A valid path in a props object. |

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.

| Param | Type | Description | | --- | --- | --- | | a | Resolver | String | The 'true' case. | | b | Resolver | String | The 'false' case. | | test | Boolean | function | The value to test for a or b. |