1.2.1 • Published 8 years ago

facepaint v1.2.1

Weekly downloads
48,754
License
MIT
Repository
github
Last release
8 years ago

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;
}
@travelshift/webdocz-theme-umi-yformadmiral_storybookreact-component-library-gatsbymymoria-ui@jacco-meijer/styled-system@wheelroom/styled-system@healthtrain/healthtrain-uidocz-theme-keui@infinitebrahmanuniverse/nolb-fac@jaccomeijer/styled-system@everything-registry/sub-chunk-1644@pxwlab/docz-theme-katanaterampilalphawodax-docz-theme-umistorwork-componentsstorwork-storesstorybook-structure@roseys/docz-theme@roothub/docz-theme-umiv@westpac/core@webiny/app-page-builder-elements@theiarise/ui-library@trafilea/afrodita-components@travelshift/admin@uswitch/trustyle.arrangement@uswitch/trustyle.styles@uswitch/trustyle.grid@voussoir/style@zalastax/nolb-fac@zinde/ui@atlaskit/smart-card@ag.labs/custom-elements@adhitiadarmawan/tmcomponents@ag.ds-next/react@crossbell/uistyled-layoutsstyled-easy-mqsteffes-ui@bulb/patterns@kuworking/block-landing-four@kuworking/block-landing-one@kuworking/block-landing-three@kuworking/block-landing-two@kuworking/block-masonry@leafygreen-ui/mongo-nav@leafygreen-ui/code@lattekit/core@mycujoo/mcls-event-components@mycujoo/mcls-player@modelberry/blue-lib@mojotech/mojo-ui@keystone-6-master/website@keystone-ui/core@keystone-ui-master/core@kentcdodds/react-workshop-app@kep-ui-kit/ui-theme@keystar/ui@redesign-system/theme@reactonic/ui@parataxic/shared-ui@robbie-cook/personal-website@robbie-cook/react-componentsmonad-uindla-coreparishconnect-boxreact-emotion-styles-guideprimitive-themereact-systemsnaphunt-uireact-uicomuse-docz-themecloset-themecura-uibrokoli-uibulb-design-testbodypaintdocm-theme-defaultfrontstrapfrontend-mlsgatsby-theme-elevator-pitchgatsby-theme-personal-bloggatsby-theme-social-bio@steffesgroup/reactdocz-theme-bddocz-theme-bonedocz-theme-defaultdocz-theme-discodocz-theme-fdxdocz-theme-hydratedocz-theme-magic-scrolldocz-theme-suladocz-theme-umidocz-theme-umi-hooksdocz-theme-umivdocz-theme-yuqueemoji-styled-cssemotion-flexexample-afrodita-components@spark-web/theme
1.2.1

8 years ago

1.2.0

8 years ago

1.1.2

8 years ago

1.1.1

8 years ago

1.1.0

8 years ago

1.0.3

8 years ago

1.0.2

8 years ago

1.0.1

8 years ago

1.0.0

8 years ago