Nostradamus Prophecy Machine

    facepaint
    DefinitelyTyped icon, indicating that this package has TypeScript declarations provided by the separate @types/facepaint package

    1.2.1 • Public • Published

    facepaint

    Dynamic style values for css-in-js.

    import { css } from 'emotion'
    import facepaint from 'facepaint'
     
    const mq = facepaint([
      '@media(min-width: 420px)',
      '@media(min-width: 920px)',
      '@media(min-width: 1120px)'
    ])
     
    const myClassName = css(mq({
      color: ['red', 'green', 'blue', 'darkorchid'],
    }))

    Install

    npm i facepaint -S

    or

    yarn add facepaint

    API

    facepaint function

    facepaint(selectors: Array<Selector>) : DynamicStyleFunction

    Arguments

    • breakpoints

      const mq = facepaint([
        '@media(min-width: 420px)',
        '@media(min-width: 920px)',
        '@media(min-width: 1120px)'
      ])
    • options

      const mq = facepaint(
        [...],
        {
          literal: true|false,
          overlap: true|false
        }
      )
      • literal boolean (Default: false) - force "slot"
      • overlap boolean (Default: false) - remove any duplicate values found in multiple "slots"

    Returns

    facepaint returns a function that can be exported and used throughout your app to dynamically style based on your provided selectors.

    • The function accepts any number of arrays or objects as arguments.
    • Nested arrays are flattened.
    • Boolean, undefined, and null values are ignored.

    Examples

    emotion

    CodeSandbox Demo

    import { css } from 'emotion'
    import facepaint from 'facepaint'
     
    const mq = facepaint([
      '@media(min-width: 420px)',
      '@media(min-width: 920px)',
      '@media(min-width: 1120px)'
    ])
     
    const myClassName = css(mq({
      backgroundColor: 'hotpink',
      textAlign: 'center',
      width: ['25%', '50%', '75%', '100%'],
      '& .foo': {
        color: ['red', 'green', 'blue', 'darkorchid'],
        '& img': {
          height: [10, 15, 20, 25]
        }
      }
    }))

    Note that the first value is considered a default value and is not a child of a media query at-rule.

    The following css is generated.

    .css-rbuh8g {
      background-color: hotpink;
      text-align: center;
      width: 25%;
    }
     
    @media (min-width:420px) {
      .css-rbuh8g {
        width: 50%;
      }
    }
     
    @media (min-width:920px) {
      .css-rbuh8g {
        width: 75%;
      }
    }
     
    @media (min-width:1120px) {
      .css-rbuh8g {
        width: 100%;
      }
    }
     
    .css-rbuh8g .foo {
      color: red;
    }
     
    @media (min-width:420px) {
      .css-rbuh8g .foo {
        color: green;
      }
    }
     
    @media (min-width:920px) {
      .css-rbuh8g .foo {
        color: blue;
      }
    }
     
    @media (min-width:1120px) {
      .css-rbuh8g .foo {
        color: darkorchid;
      }
    }
     
    .css-rbuh8g .foo img {
      height: 10px;
    }
     
    @media (min-width:420px) {
      .css-rbuh8g .foo img {
        height: 15px;
      }
    }
     
    @media (min-width:920px) {
      .css-rbuh8g .foo img {
        height: 20px;
      }
    }
     
    @media (min-width:1120px) {
      .css-rbuh8g .foo img {
        height: 25px;
      }
    }

    styled-components

    import styled from 'styled-components'
    import facepaint from 'facepaint'
     
    const mq = facepaint([
      '@media(min-width: 420px)',
      '@media(min-width: 920px)',
      '@media(min-width: 1120px)'
    ])
     
    const Div = styled('div')`
      ${mq({
        backgroundColor: 'hotpink',
        textAlign: 'center',
        width: ['25%', '50%', '75%', '100%'],
        '& .foo': {
          color: ['red', 'green', 'blue', 'papayawhip'],
          '& img': {
            height: ['10px', '15px', '20px', '25px']
          }
        }
      })};
    `
     
    <Div/>

    The following css is generated.

    .c0 {
      background-color: hotpink;
      text-align: center;
      width: 25%;
    }
     
    .c0 .foo {
      color: red;
    }
     
    .c0 .foo img {
      height: 10px;
    }
     
    @media (min-width:420px) {
      .c0 {
        width: 50%;
      }
    }
     
    @media (min-width:920px) {
      .c0 {
        width: 75%;
      }
    }
     
    @media (min-width:1120px) {
      .c0 {
        width: 100%;
      }
    }
     
    @media (min-width:420px) {
      .c0 .foo {
        color: green;
      }
    }
     
    @media (min-width:920px) {
      .c0 .foo {
        color: blue;
      }
    }
     
    @media (min-width:1120px) {
      .c0 .foo {
        color: papayawhip;
      }
    }
     
    @media (min-width:420px) {
      .c0 .foo img {
        height: 15px;
      }
    }
     
    @media (min-width:920px) {
      .c0 .foo img {
        height: 20px;
      }
    }
     
    @media (min-width:1120px) {
      .c0 .foo img {
        height: 25px;
      }
    }

    Pseudo Selectors

    CodeSandbox Demo

    import { css } from 'emotion'
    import facepaint from 'facepaint'
     
    const pseudo = facepaint([':hover', ':active', ':focus'])
     
    const myClassName = css(
      pseudo({
        backgroundColor: 'hotpink',
        textAlign: 'center',
        width: ['25%', '50%', '75%', '100%'],
        '& .foo': {
          color: ['red', 'green', 'blue', 'darkorchid'],
          '& img': {
            height: [10, 15, 20, 25]
          }
        }
      })
    )
    .css-1guvnfu {
      background-color: hotpink;
      text-align: center;
      width: 25%;
    }
     
    .css-1guvnfu:hover {
      width: 50%;
    }
     
    .css-1guvnfu:active {
      width: 75%;
    }
     
    .css-1guvnfu:focus {
      width: 100%;
    }
     
    .css-1guvnfu .foo {
      color: red;
    }
     
    .css-1guvnfu .foo:hover {
      color: green;
    }
     
    .css-1guvnfu .foo:active {
      color: blue;
    }
     
    .css-1guvnfu .foo:focus {
      color: darkorchid;
    }
     
    .css-1guvnfu .foo img {
      height: 10px;
    }
     
    .css-1guvnfu .foo img:hover {
      height: 15px;
    }
     
    .css-1guvnfu .foo img:active {
      height: 20px;
    }
     
    .css-1guvnfu .foo img:focus {
      height: 25px;
    }

    Install

    npm i facepaint

    DownloadsWeekly Downloads

    45,174

    Version

    1.2.1

    License

    MIT

    Unpacked Size

    25.6 kB

    Total Files

    9

    Last publish

    Collaborators

    • mitchellhamilton
    • tkh44