Skin

Skin provides alias & helpers for css-in-js

Installation

npm i @rocketstation/skin

Usage

import * as skin from '@rocketstation/skin'
import * as alias from '@rocketstation/skin/alias'

import $ from '@rocketstation/black-box'

import { createRenderer } from 'fela'
import pluginCustomProperty from 'fela-plugin-custom-property'
import React from 'react'
import ReactDOM from 'react-dom'
import { RendererProvider as FelaProvider } from 'react-fela'

const MyComponent = ({ name, ...props }) =>
  $(
    'div',
    {
      onClick: () => {
        console.log('test')
      },
      skin: ({ theme }) => ({
        colorBox: theme.box.color.major,
        colorText: theme.text.color.major,
        [skin.onHover]: {
          colorBox: theme.text.color.major,
          colorText: theme.box.color.major,
        },
        [skin.screenFrom(960)]: { size: '125%' }
      }),
      ...props,
    },
    'Hello',
    $('span', name),
    '!'
  )

const renderer = createRenderer({
  plugins: [pluginCustomProperty(alias)],
})

ReactDOM.render(
  React.createElement(
    FelaProvider,
    { renderer },
    React.createElement(MyComponent, { name: 'John Doe' })
  ),
  document.getElementById('app')
)

API

Services

attr

attr('key') // [key]

attr-contains

attrContains('key', 'val') // [key~=val]

attr-contains-str

attrContainsStr('key', 'val') // [key*="val"]

attr-ends-str

attrEndsStr('key', 'val') // [key$="val"]

attr-equals

attrEquals('key', 'val') // [key=val]

attr-starts

attrStarts('key', 'val') // [key|=val]

attr-starts-str

attrStartsStr('key', 'val') // [key^="val"]

src

src('src') // url(src)

its

its('div') // & div

its-after

itsAfter // ::after

its-before

itsBefore // ::before

its-children

itsChildren // >*

its-first

itsFirst() // :nth-child(0n+1)
itsFirst(1, 0) // :nth-child(1n+0)

its-highlight

itsHighlight // ::selection

its-last

itsLast() // :nth-last-child(0n+1)
itsLast(1, 0) // :nth-last-child(1n+0)

its-next-multiple

itsNextMultiple // &~*

its-next-single

itsNextSingle // &+*

its-placeholder

itsPlaceholder // ::placeholder

limit

limit() // minmax('auto','auto')
limit(1, 1) // minmax(1rem,1rem)
limit('1fr', '1fr') // minmax(1fr,1fr)

linear

linear(360, 'white', 'black') // linear-gradient(360deg,white,black)
linear(360, ['white', 0], ['black', 100]) // linear-gradient(360deg,white 0%,black 100%)

on-active

onActive // :active

on-focus

onFocus // :focus

on-focus-inside

onFocusInner // :focusWithin

on-hover

onHover // :hover

radial

radial('white', 'black') // radial-gradient(white,black)
radial(['white', 0], ['black', 100]) // radial-gradient(white 0%,black 100%)

repeat

repeat('fill', '1rem')) // repeat(auto-fill,1rem)
repeat('fit', '1rem')) // repeat(auto-fit,1rem)
repeat(1)) // repeat(1,1fr)
repeat(1, 1)) // repeat(1,1fr)
repeat(1, 'auto')) // repeat(1,auto)

screen

screen({ orientation: 'landscape' }) // @media screen and (orientation:'landscape')

screen-between

screenBetween(600, 1200) // @media screen and (min-width:37.5em) and (max-width:74.9375em)

screen-from

screenFrom(600) // @media screen and (min-width:37.5em)

screen-to

screenTo(1200) // @media screen and (max-width:74.9375em)

Alias

custom

// in

{
  custom: { key: 'val' },
}

// out

{
  key: 'val',
}

animation

// in

{
  animation: 'foobar',
  animation: ['foo', 'bar'],
}

// out

{
  animationName: 'foobar',
  animationName: 'foo,bar',
}

animation-count

// in

{
  animationCount: true,
  animationCount: 1,
  animationCount: [1, 1],
}

// out

{
  animationIterationCount: 'infinite',
  animationIterationCount: '1',
  animationIterationCount: '1,1',
}

animation-delay

// in

{
  animationDelay: 100,
  animationDelay: '100ms',
  animationDelay: [100, '100ms'],
}

// out

{
  animationDelay: '100ms',
  animationDelay: '100ms',
  animationDelay: '100ms,100ms',
}

animation-direction

// in

{
  animationDirection: 'backwards-forwards',
  animationDirection: 'backwards',
  animationDirection: 'forwards',
  animationDirection: 'forwards-backwards',
}

// out

{
  animationDirection: 'alternate-reverse',
  animationDirection: 'reverse',
  animationDirection: 'normal',
  animationDirection: 'alternate',
}

animation-duration

// in

{
  animationDuration: 100,
  animationDuration: '100ms',
  animationDuration: [100, '100ms'],
}

// out

{
  animationDuration: '100ms',
  animationDuration: '100ms',
  animationDuration: '100ms,100ms',
}

animation-fn

// in

{
  animationFn: 'ease',
  animationFn: ['ease', 'ease'],
}

// out

{
  animationTimingFunction: 'ease',
  animationTimingFunction: 'ease,ease',
}

animation-is-active

// in

{
  animationIsActive: true,
  animationIsActive: false,
  animationIsActive: [true, false],
}

// out

{
  animationPlayState: 'running',
  animationPlayState: 'paused',
  animationPlayState: 'running,paused',
}

animation-origin

// in

{
  animationOrigin: true,
  animationOrigin: false,
  animationOrigin: 'forwards',
  animationOrigin: 'backwards',
}

// out

{
  animationFillMode: 'both',
  animationFillMode: 'none',
  animationFillMode: 'forwards',
  animationFillMode: 'backwards',
}

box-bg

// in

{
  boxBg: false,
  boxBg: 'url(bg.png)',
  boxBg: ['url(bg.svg)', 'url(bg.png)', 'url(bg.jpg)'],
}

// out

{
  backgroundImage: 'none',
  backgroundImage: 'url(bg.png)',
  backgroundImage: 'url(bg.svg),url(bg.png),url(bg.jpg)',
}

box-bg-move

// in

{
  boxBgMove: ['center', 'center center', { left: 1, top: 1 }, { bottom: '100%', right: '100%' }],
  boxBgMove: 'center',
  boxBgMove: 'center center',
  boxBgMove: { left: 1, top: 1 },
  boxBgMove: { bottom: '100%', right: '100%' },
}

// out

{
  backgroundPosition: 'center,center center,left 1rem top 1rem ,bottom 100% right 100%',
  backgroundPosition: 'center',
  backgroundPosition: 'center center',
  backgroundPosition: 'left 1rem top 1rem',
  backgroundPosition: 'bottom 100% right 100%',
}

box-bg-origin

// in

{
  boxBgOrigin: ['border', 'space', 'content'],
  boxBgOrigin: 'border',
  boxBgOrigin: 'space',
  boxBgOrigin: 'content',
}

// out

{
  backgroundOrigin: 'border-box,padding-box,content-box',
  backgroundOrigin: 'border-box',
  backgroundOrigin: 'space-box',
  backgroundOrigin: 'content-box',
}

box-bg-overflow

// in

{
  boxBgOverflow: ['border', 'space', 'content'],
  boxBgOverflow: 'border',
  boxBgOverflow: 'space',
  boxBgOverflow: 'content',
}

// out

{
  backgroundClip: 'border-box,padding-box,content-box',
  backgroundClip: 'border-box',
  backgroundClip: 'space-box',
  backgroundClip: 'content-box',
}

box-bg-position

// in

{
  boxBgPosition: ['local', 'global', false],
  boxBgPosition: 'local',
  boxBgPosition: 'global',
  boxBgPosition: false,
}

// out

{
 backgroundAttachment: 'local',
 backgroundAttachment: 'scroll',
 backgroundAttachment: 'fixed',
}

box-bg-repeat

// in

{
  boxBgRepeat: [false, true, 'y', 'x'],
  boxBgRepeat: false,
  boxBgRepeat: true,
  boxBgRepeat: 'y',
  boxBgRepeat: 'x',
}

// out

{
  backgroundRepeat: 'no-repeat,repeat,repeat-y,repeat-x',
  backgroundRepeat: 'no-repeat',
  backgroundRepeat: 'repeat',
  backgroundRepeat: 'repeat-y',
  backgroundRepeat: 'repeat-x',
}

box-bg-size

// in

{
  boxBgSize: ['fill', 'fit', 'auto', { height: 1, width: '100%' }],
  boxBgSize: 'fill',
  boxBgSize: 'fit',
  boxBgSize: 'auto',
  boxBgSize: { height: 1, width: '100%' },
}

// out

{
  backgroundSize: 'cover,contain,auto,100% 1rem',
  backgroundSize: 'cover',
  backgroundSize: 'contain',
  backgroundSize: 'auto',
  backgroundSize: '100% 1rem',
}

box-border

// in

{
  boxBorder: false,
  boxBorder: 'hsl(0,0%,0%)',
}

// out

{
  borderBottomColor: 'transparent',
  borderLeftColor: 'transparent',
  borderRightColor: 'transparent',
  borderTopColor: 'transparent',
  borderBottomColor: 'hsl(0,0%,0%)',
  borderLeftColor: 'hsl(0,0%,0%)',
  borderRightColor: 'hsl(0,0%,0%)',
  borderTopColor: 'hsl(0,0%,0%)',
}

box-border-x

// in

{
  boxBorderX: false,
  boxBorderX: 'hsl(0,0%,0%)',
}

// out

{
  borderLeftColor: 'transparent',
  borderRightColor: 'transparent',
  borderLeftColor: 'hsl(0,0%,0%)',
  borderRightColor: 'hsl(0,0%,0%)',
}

box-border-y

// in

{
  boxBorderY: false,
  boxBorderY: 'hsl(0,0%,0%)',
}

// out

{
  borderBottomColor: 'transparent',
  borderTopColor: 'transparent',
  borderBottomColor: 'hsl(0,0%,0%)',
  borderTopColor: 'hsl(0,0%,0%)',
}

box-border-bottom

// in

{
  boxBorderBottom: false,
  boxBorderBottom: 'hsl(0,0%,0%)',
}

// out

{
  borderBottomColor: 'transparent',
  borderBottomColor: 'hsl(0,0%,0%)',
}

box-border-left

// in

{
  boxBorderLeft: false,
  boxBorderLeft: 'hsl(0,0%,0%)',
}

// out

{
  borderLeftColor: 'transparent',
  borderLeftColor: 'hsl(0,0%,0%)',
}

box-border-right

// in

{
  boxBorderRight: false,
  boxBorderRight: 'hsl(0,0%,0%)',
}

// out

{
  borderRightColor: 'transparent',
  borderRightColor: 'hsl(0,0%,0%)',
}

box-border-top

// in

{
  boxBorderTop: false,
  boxBorderTop: 'hsl(0,0%,0%)',
}

// out

{
  borderTopColor: 'transparent',
  borderTopColor: 'hsl(0,0%,0%)',
}

box-border-kind

// in

{
  boxBorderKind: true,
  boxBorderKind: false,
  boxBorderKind: 'dashed',
}

// out

{
  borderBottomStyle: 'solid',
  borderLeftStyle: 'solid',
  borderRightStyle: 'solid',
  borderTopStyle: 'solid',
  borderBottomStyle: 'none',
  borderLeftStyle: 'none',
  borderRightStyle: 'none',
  borderTopStyle: 'none',
  borderBottomStyle: 'dashed',
  borderLeftStyle: 'dashed',
  borderRightStyle: 'dashed',
  borderTopStyle: 'dashed',
}

box-border-kind-x

// in

{
  boxBorderKind: true,
  boxBorderKind: false,
  boxBorderKind: 'dashed',
}

// out

{
  borderLeftStyle: 'solid',
  borderRightStyle: 'solid',
  borderLeftStyle: 'none',
  borderRightStyle: 'none',
  borderLeftStyle: 'dashed',
  borderRightStyle: 'dashed',
}

box-border-kind-y

// in

{
  boxBorderKind: true,
  boxBorderKind: false,
  boxBorderKind: 'dashed',
}

// out

{
  borderBottomStyle: 'solid',
  borderTopStyle: 'solid',
  borderBottomStyle: 'none',
  borderTopStyle: 'none',
  borderBottomStyle: 'dashed',
  borderTopStyle: 'dashed',
}

box-border-kind-bottom

// in

{
  boxBorderKind: true,
  boxBorderKind: false,
  boxBorderKind: 'dashed',
}

// out

{
  borderBottomStyle: 'solid',
  borderBottomStyle: 'none',
  borderBottomStyle: 'dashed',
}

box-border-kind-left

// in

{
  boxBorderKind: true,
  boxBorderKind: false,
  boxBorderKind: 'dashed',
}

// out

{
  borderLeftStyle: 'solid',
  borderLeftStyle: 'none',
  borderLeftStyle: 'dashed',
}

box-border-kind-right

// in

{
  boxBorderKind: true,
  boxBorderKind: false,
  boxBorderKind: 'dashed',
}

// out

{
  borderRightStyle: 'solid',
  borderRightStyle: 'none',
  borderRightStyle: 'dashed',
}

box-border-kind-top

// in

{
  boxBorderKind: true,
  boxBorderKind: false,
  boxBorderKind: 'dashed',
}

// out

{
  borderTopStyle: 'solid',
  borderTopStyle: 'none',
  borderTopStyle: 'dashed',
}

box-border-size

// in

{
  boxBorderSize: 0,
}

// out

{
  borderBottomWidth: 0,
  borderLeftWidth: 0,
  borderRightWidth: 0,
  borderTopWidth: 0,
}

box-border-size-x

// in

{
  boxBorderSize: 0,
}

// out

{
  borderLeftWidth: 0,
  borderRightWidth: 0,
}

box-border-size-y

// in

{
  boxBorderSize: 0,
}

// out

{
  borderBottomWidth: 0,
  borderTopWidth: 0,
}

box-border-size-bottom

// in

{
  boxBorderSize: 0,
}

// out

{
  borderBottomWidth: 0,
}

box-border-size-left

// in

{
  boxBorderSize: 0,
}

// out

{
  borderLeftWidth: 0,
}

box-border-size-right

// in

{
  boxBorderSize: 0,
}

// out

{
  borderRightWidth: 0,
}

box-order-size-top

// in

{
  boxBorderSize: 0,
}

// out

{
  borderTopWidth: 0,
}

box

// in

{
  box: false,
  box: 'hsl(0,0%,0%)',
}

// out

{
  backgroundColor: 'transparent',
  backgroundColor: 'hsl(0,0%,0%)',
}

box-content

// in

{
  boxContent: true,
  boxContent: '"foobar"',
}

// out

{
  content: '""',
  content: '"foobar"',
}

box-corner

// in

{
  boxCorner: 1,
  boxCorner: [1, 1],
  boxCorner: '100%',
}

// out

{
  borderBottomLeftRadius: '1px',
  borderBottomRightRadius: '1px',
  borderTopLeftRadius: '1px',
  borderTopRightRadius: '1px',
  borderBottomLeftRadius: '1px/1px',
  borderBottomRightRadius: '1px/1px',
  borderTopLeftRadius: '1px/1px',
  borderTopRightRadius: '1px/1px',
  borderBottomLeftRadius: '100%',
  borderBottomRightRadius: '100%',
  borderTopLeftRadius: '100%',
  borderTopRightRadius: '100%',
}

box-corner-bottom

// in

{
  boxCornerBottom: 1,
  boxCornerBottom: [1, 1],
  boxCornerBottom: '100%',
}

// out

{
  borderBottomLeftRadius: '1px',
  borderBottomRightRadius: '1px',
  borderBottomLeftRadius: '1px/1px',
  borderBottomRightRadius: '1px/1px',
  borderBottomLeftRadius: '100%',
  borderBottomRightRadius: '100%',
}

box-corner-left

// in

{
  boxCornerLeft: 1,
  boxCornerLeft: [1, 1],
  boxCornerLeft: '100%',
}

// out

{
  borderBottomLeftRadius: '1px',
  borderTopLeftRadius: '1px',
  borderBottomLeftRadius: '1px/1px',
  borderTopLeftRadius: '1px/1px',
  borderBottomLeftRadius: '100%',
  borderTopLeftRadius: '100%',
}

box-corner-left-bottom

// in

{
  boxCornerLeftBottom: 1,
  boxCornerLeftBottom: [1, 1],
  boxCornerLeftBottom: '100%',
}

// out

{
  borderBottomLeftRadius: '1px',
  borderBottomLeftRadius: '1px/1px',
  borderBottomLeftRadius: '100%',
}

box-corner-left-top

// in

{
  boxCornerLeftTop: 1,
  boxCornerLeftTop: [1, 1],
  boxCornerLeftTop: '100%',
}

// out

{
  borderTopLeftRadius: '1px',
  borderTopLeftRadius: '1px/1px',
  borderTopLeftRadius: '100%',
}

box-corner-right

// in

{
  boxCornerRight: 1,
  boxCornerRight: [1, 1],
  boxCornerRight: '100%',
}

// out

{
  borderBottomRightRadius: '1px',
  borderTopRightRadius: '1px',
  borderBottomRightRadius: '1px/1px',
  borderTopRightRadius: '1px/1px',
  borderBottomRightRadius: '100%',
  borderTopRightRadius: '100%',
}

box-corner-right-bottom

// in

{
  boxCornerRightBottom: 1,
  boxCornerRightBottom: [1, 1],
  boxCornerRightBottom: '100%',
}

// out

{
  borderBottomRightRadius: '1px',
  borderBottomRightRadius: '1px/1px',
  borderBottomRightRadius: '100%',
}

box-corner-right-top

// in

{
  boxCornerRightTop: 1,
  boxCornerRightTop: [1, 1],
  boxCornerRightTop: '100%',
}

// out

{
  borderTopRightRadius: '1px',
  borderTopRightRadius: '1px/1px',
  borderTopRightRadius: '100%',
}

box-corner-top

// in

{
  boxCornerTop: 1,
  boxCornerTop: [1, 1],
  boxCornerTop: '100%',
}

// out

{
  borderTopLeftRadius: '1px',
  borderTopRightRadius: '1px',
  borderTopLeftRadius: '1px/1px',
  borderTopRightRadius: '1px/1px',
  borderTopLeftRadius: '100%',
  borderTopRightRadius: '100%',
}

box-cursor

// in

{
  boxCursor: true,
  boxCursor: false,
  boxCursor: 'auto',
}

// out

{
  cursor: 'pointer',
  cursor: 'not-allowed',
  cursor: 'auto',
}

box-height

// in

{
  boxHeight: 0,
  boxHeight: '100%',
}

// out

{
  height: 0,
  height: '100%',
}

box-height-max

// in

{
  boxHeightMax: false,
  boxHeightMax: 0,
  boxHeightMax: '100%',
}

// out

{
  maxHeight: 'none',
  maxHeight: 0,
  maxHeight: '100%',
}

box-height-min

// in

{
  boxHeightMin: 0,
  boxHeightMin: '100%',
}

// out

{
  minHeight: 0,
  minHeight: '100%',
}

box-move

// in

{
  boxMove: 0,
}

// out

{
  bottom: 0,
  left: 0,
  right: 0,
  top: 0,
}

box-move-bottom

// in

{
  boxMoveBottom: 0,
}

// out

{
  bottom: 0,
}

box-move-left

// in

{
  boxMoveLeft: 0,
}

// out

{
  left: 0,
}

box-move-right

// in

{
  boxMoveRight: 0,
}

// out

{
  right: 0,
}

box-move-top

// in

{
  boxMoveTop: 0,
}

// out

{
  top: 0,
}

box-move-x

// in

{
  boxMoveX: 0,
}

// out

{
  left: 0,
  right: 0,
}

box-move-y

// in

{
  boxMoveY: 0,
}

// out

{
  bottom: 0,
  top: 0,
}

box-must-break-words

// in

{
  boxMustBreakWords: true,
  boxMustBreakWords: false,
}

// out

{
  overflowWrap: 'break-word',
  overflowWrap: 'normal',
}

box-must-handle-events

// in

{
  boxMustHandleEvents: true,
  boxMustHandleEvents: false,
}

// out

{
  pointerEvents: 'auto',
  pointerEvents: 'none',
}

box-opacity

// in

{
  boxOpacity: 100,
  boxOpacity: 0,
}

// out

{
  opacity: 1,
  opacity: 0,
}

box-order

// in

{
  boxOrder: 1,
}

// out

{
  zIndex: 1,
}

box-outline

// in

{
  boxOutline: false,
  boxOutline: 'hsl(0,0%,0%)',
}

// out

{
  outlineColor: 'transparent',
  outlineColor: 'hsl(0,0%,0%)',
}

box-outline-kind

// in

{
  boxOutlineKind: true,
  boxOutlineKind: false,
  boxOutlineKind: 'dashed',
}

// out

{
  outlineStyle: 'solid',
  outlineStyle: 'none',
  outlineStyle: 'dashed',
}

box-outline-size

// in

{
  boxOutlineSize: 1,
}

// out

{
  outlineWidth: 1,
}

box-outline-space

// in

{
  boxOutlineSpace: 1,
}

// out

{
  outlineOffset: 1,
}

box-overflow-x

// in

{
  boxOverflowX: true,
  boxOverflowX: false,
  boxOverflowX: 'scroll',
  boxOverflowX: 'auto',
}

// out

{
  overflowX: 'visible',
  overflowX: 'hidden',
  overflowX: 'scroll',
  overflowX: 'auto',
}

box-overflow-y

// in

{
  boxOverflowY: true,
  boxOverflowY: false,
  boxOverflowY: 'scroll',
  boxOverflowY: 'auto',
}

// out

{
  overflowY: 'visible',
  overflowY: 'hidden',
  overflowY: 'scroll',
  overflowY: 'auto',
}

box-position

// in

{
  boxPosition: true,
  boxPosition: 'relative',
  boxPosition: 'absolute',
  boxPosition: false,
}

// out

{
  boxPosition: 'static',
  boxPosition: 'relative',
  boxPosition: 'absolute',
  boxPosition: 'fixed',
}

box-shadow

// in

{
  boxShadow: false,
  boxShadow: '1px 1px 1px 1px hsla(0,0%,0%,1) inset',
  boxShadow: { blur: 1, color: 'hsla(0,0%,0%,1)', isReversed: true, size: 1, x: 1, y: 1 },
  boxShadow: ['1px 1px 1px 1px hsla(0,0%,0%,1) inset', { blur: 1, color: 'hsla(0,0%,0%,1)', isReversed: true, size: 1, x: 1, y: 1 }],
}

// out

{
  boxShadow: 'none',
  boxShadow: '1px 1px 1px 1px hsla(0,0%,0%,1) inset',
  boxShadow: '1px 1px 1px 1px hsla(0,0%,0%,1) inset',
  boxShadow: ['1px 1px 1px 1px hsla(0,0%,0%,1) inset', '1px 1px 1px 1px hsla(0,0%,0%,1) inset'],
}

box-space-inner

// in

{
  boxSpaceInner: 0,
}

// out

{
  paddingBottom: 0,
  paddingLeft: 0,
  paddingRight: 0,
  paddingTop: 0,
}

box-space-inner-bottom

// in

{
  boxSpaceInnerBottom: 0,
}

// out

{
  paddingBottom: 0,
}

box-space-inner-left

// in

{
  boxSpaceInnerLeft: 0,
}

// out

{
  paddingLeft: 0,
}

box-space-inner-right

// in

{
  boxSpaceInnerRight: 0,
}

// out

{
  paddingRight: 0,
}

box-space-inner-top

// in

{
  boxSpaceInnerTop: 0,
}

// out

{
  paddingTop: 0,
}

box-space-inner-x

// in

{
  boxSpaceInnerX: 0,
}

// out

{
  paddingLeft: 0,
  paddingRight: 0,
}

box-space-inner-y

// in

{
  boxSpaceInnerY: 0,
}

// out

{
  paddingBottom: 0,
  paddingTop: 0,
}

box-space-outer

// in

{
  boxSpaceOuter: 0,
}

// out

{
  marginBottom: 0,
  marginLeft: 0,
  marginRight: 0,
  marginTop: 0,
}

box-space-outer-bottom

// in

{
  boxSpaceOuterBottom: 0,
}

// out

{
  marginBottom: 0,
}

box-space-outer-left

// in

{
  boxSpaceOuterLeft: 0,
}

// out

{
  marginLeft: 0,
}

box-space-outer-right

// in

{
  boxSpaceOuterRight: 0,
}

// out

{
  marginRight: 0,
}

box-space-outer-top

// in

{
  boxSpaceOuterTop: 0,
}

// out

{
  marginTop: 0,
}

box-space-outer-x

// in

{
  boxSpaceOuterX: 0,
}

// out

{
  marginLeft: 0,
  marginRight: 0,
}

box-space-outer-y

// in

{
  boxSpaceOuterY: 0,
}

// out

{
  marginBottom: 0,
  marginTop: 0,
}

box-width

// in

{
  boxWidth: 0,
  boxWidth: '100%',
}

// out

{
  width: 0,
  width: '100%',
}

box-width-max

// in

{
  boxWidthMax: false,
  boxWidthMax: 0,
  boxWidthMax: '100%',
}

// out

{
  maxWidth: 'none',
  maxWidth: 0,
  maxWidth: '100%',
}

box-width-min

// in

{
  boxWidthMin: 0,
  boxWidthMin: '100%',
}

// out

{
  minWidth: 0,
  minWidth: '100%',
}

grid-area

// in

{
  gridArea: 'name',
}

// out

{
  gridArea: 'name',
}

grid-align-major

// in

{
  gridAlignMajor: 'center',
  gridAlignMajor: 'end',
  gridAlignMajor: 'start',
  gridAlignMajor: 'stretch',
}

// out

{
  justifyItems: 'center',
  justifyItems: 'end',
  justifyItems: 'start',
  justifyItems: 'stretch',
}

grid-align-minor

// in

{
  gridAlignMinor: 'center',
  gridAlignMinor: 'end',
  gridAlignMinor: 'start',
  gridAlignMinor: 'stretch',
}

// out

{
  alignItems: 'center',
  alignItems: 'end',
  alignItems: 'start',
  alignItems: 'stretch',
}

grid-align-self-major

// in

{
  gridAlignSelfMajor: 'center',
  gridAlignSelfMajor: 'end',
  gridAlignSelfMajor: 'start',
  gridAlignSelfMajor: 'stretch',
}

// out

{
  justifySelf: 'center',
  justifySelf: 'end',
  justifySelf: 'start',
  justifySelf: 'stretch',
}

grid-align-self-minor

// in

{
  gridAlignSelfMinor: 'center',
  gridAlignSelfMinor: 'end',
  gridAlignSelfMinor: 'start',
  gridAlignSelfMinor: 'stretch',
}

// out

{
  alignSelf: 'center',
  alignSelf: 'end',
  alignSelf: 'start',
  alignSelf: 'stretch',
}

grid-col-end

// in

{
  gridColEnd: 1,
  gridColEnd: [1, true],
}

// out

{
  gridColumnEnd: 1,
  gridColumnEnd: 'span 1',
}

grid-col-start

// in

{
  gridColStart: 1,
}

// out

{
  gridColumnStart: 1,
}

grid-cols

// in

{
  gridCols: 1,
  gridCols: '100%',
  gridCols: false,
  gridCols: [1, 1],
}

// out

{
  gridTemplateColumns: '1fr',
  gridTemplateColumns: '100%',
  gridTemplateColumns: 'none',
  gridTemplateColumns: ['1fr','1fr'],
}

grid-cols-pseudo

// in

{
  gridColsPseudo: 'auto',
  gridColsPseudo: 1,
  gridColsPseudo: [1, 1],
}

// out

{
  gridAutoColumns: 'auto',
  gridAutoColumns: '1fr',
  gridAutoColumns: ['1fr', '1fr'],
}

grid-direction

// in

{
  gridDirection: 'x',
  gridDirection: 'y',
  gridDirection: 'x-auto',
  gridDirection: 'y-auto',
}

// out

{
  gridAutoFlow: 'row',
  gridAutoFlow: 'column',
  gridAutoFlow: 'row dense',
  gridAutoFlow: 'column dense',
}

grid-place-major

// in

{
  gridPlaceMajor: 'start',
  gridPlaceMajor: 'end',
  gridPlaceMajor: 'center',
  gridPlaceMajor: 'space',
  gridPlaceMajor: 'space-inner',
  gridPlaceMajor: 'space-outer',
}

// out

{
  justifyContent: 'start',
  justifyContent: 'end',
  justifyContent: 'center',
  justifyContent: 'space-evenly',
  justifyContent: 'space-between',
  justifyContent: 'space-around',
}

grid-place-minor

// in

{
  gridPlaceMinor: 'start',
  gridPlaceMinor: 'end',
  gridPlaceMinor: 'center',
  gridPlaceMinor: 'space',
  gridPlaceMinor: 'space-inner',
  gridPlaceMinor: 'space-outer',
}

// out

{
  alignContent: 'start',
  alignContent: 'end',
  alignContent: 'center',
  alignContent: 'space-evenly',
  alignContent: 'space-between',
  alignContent: 'space-around',
}

grid-row-end

// in

{
  gridRowEnd: 1,
  gridRowEnd: [1, true],
}

// out

{
  gridRowEnd: 1,
  gridRowEnd: 'span 1',
}

grid-row-start

// in

{
  gridRowStart: 1,
}

// out

{
  gridRowStart: 1,
}

grid-rows

// in

{
  gridRows: 1,
  gridRows: '100%',
  gridRows: false,
  gridRows: [1, 1],
}

// out

{
  gridTemplateRows: '1fr',
  gridTemplateRows: '100%',
  gridTemplateRows: 'none',
  gridTemplateRows: ['1fr','1fr'],
}

grid-rows-pseudo

// in

{
  gridRowsPseudo: 'auto',
  gridRowsPseudo: 1,
  gridRowsPseudo: [1, 1],
}

// out

{
  gridAutoRows: 'auto',
  gridAutoRows: '1fr',
  gridAutoRows: ['1fr', '1fr'],
}

grid-space-x

// in

{
  gridSpaceX: 0,
}

// out

{
  gridRowGap: 0,
}

grid-space-y

// in

{
  gridSpaceY: 0,
}

// out

{
  gridColumnGap: 0,
}

grid-template

// in

{
  gridTemplate: '"header header header" "body body body" "footer footer footer"',
  gridTemplate: ["header header header", "body body body", "footer footer footer"],
  gridTemplate: [['header', 'header', 'header'], ['body', 'body', 'body'], ['footer', 'footer', 'footer']],
}

// out

{
  gridTemplateAreas: '"header header header" "body body body" "footer footer footer"',
  gridTemplateAreas: '"header header header" "body body body" "footer footer footer"',
  gridTemplateAreas: '"header header header" "body body body" "footer footer footer"',
}

kind

// in

{
  kind: 'box',
  kind: 'text',
  kind: 'track',
  kind: 'grid',
  kind: false,
}

// out

{
  display: 'block',
  display: 'inline',
  display: 'flex',
  display: 'grid',
  display: 'none',
}

modify

// in

{
  modify: false,
  modify: 'translate(0,0)',
  modify: ['translateX(0)', 'translateY(0)'],
}

// out

{
  transform: 'none',
  transform: 'translate(0,0)',
  transform: 'translateX(0) translateY(0)',
}

modify-origin

// in

{
  modifyOrigin: 'center',
  modifyOrigin: ['50%', '50%'],
}

// out

{
  transformOrigin: 'center',
  transformOrigin: '50% 50%',
}

shape

// in

{
  shape: false,
  shape: 'hsl(0,0%,0%)',
}

// out

{
  fill: 'transparent',
  fill: 'hsl(0,0%,0%)',
}

shape-border

// in

{
  shapeBorder: false,
  shapeBorder: 'hsl(0,0%,0%)',
}

// out

{
  stroke: 'transparent',
  stroke: 'hsl(0,0%,0%)',
}

shape-border-dashes

// in

{
  shapeBorderKind: 1,
  shapeBorderKind: [1, 1],
}

// out

{
  strokeDasharray: 1,
  strokeDasharray: '1 1',
}

shape-border-size

// in

{
  shapeBorderSize: 1,
}

// out

{
  strokeWidth: 1,
}

shape-border-space

// in

{
  shapeBorderSpace: 1,
}

// out

{
  strokeDashoffset: 1,
}

text-align

// in

{
  textAlign: 'center',
  textAlign: 'end',
  textAlign: 'start',
  textAlign: 'stretch',
}

// out

{
  textAlign: 'center',
  textAlign: 'end',
  textAlign: 'start',
  textAlign: 'justify',
}

text-case

// in

{
  textCase: 'upper',
  textCase: 'lower',
  textCase: false,
}

// out

{
  textTransform: 'uppercase',
  textTransform: 'lowercase',
  textTransform: 'none',
}

text

// in

{
  text: false,
  text: 'hsl(0,0%,0%)',
}

// out

{
  color: 'transparent',
  color: 'hsl(0,0%,0%)',
}

text-cols-amount

// in

{
  textColsAmount: 1,
}

// out

{
  columnCount: 1,
}

text-cols-border

// in

{
  textColsBorder: false,
  textColsBorder: 'hsl(0,0%,0%)',
}

// out

{
  columnRuleColor: 'transparent',
  columnRuleColor: 'hsl(0,0%,0%)',
}

text-cols-border-kind

// in

{
  textColsBorderKind: true,
  textColsBorderKind: false,
  textColsBorderKind: 'dashed',
}

// out

{
  columnRuleStyle: 'solid',
  columnRuleStyle: 'none',
  columnRuleStyle: 'dashed',
}

text-cols-border-size

// in

{
  textColsBorderSize: 1,
}

// out

{
  columnRuleWidth: 1,
}

text-cols-size

// in

{
  textColsSize: 1,
}

// out

{
  columnWidth: 1,
}

text-cols-space

// in

{
  textColsSpace: 1,
}

// out

{
  columnGap: 1,
}

text-decoration

// in

{
  textDecoration: 'top',
  textDecoration: 'bottom',
  textDecoration: 'center',
  textDecoration: false,
}

// out

{
  textDecoration: 'overline',
  textDecoration: 'line-through',
  textDecoration: 'underline',
  textDecoration: 'none',
}

text-font

// in

{
  textFont: 'serif',
  textFont: ['sans-serif', 'serif'],
}

// out

{
  fontFamily: 'serif',
  fontFamily: 'sans-serif, serif',
}

text-is-italic

// in

{
  textIsItalic: true,
  textIsItalic: false,
}

// out

{
  textStyle: 'italic',
  textStyle: 'normal',
}

text-line

// in

{
  textLine: 1,
}

// out

{
  lineHeight: 1,
}

text-overflow

// in

{
  textOverflow: true,
  textOverflow: false,
  textOverflow: 'raw',
  textOverflow: 'raw-fit',
  textOverflow: 'raw-fit-strict',
}

// out

{
  whiteSpace: 'normal',
  whiteSpace: 'nowrap',
  whiteSpace: 'pre',
  whiteSpace: 'pre-wrap',
  whiteSpace: 'pre-line',
}

text-overflow-handler

// in

{
  textOverflowHandler: true,
  textOverflowHandler: false,
}

// out

{
  textOverflow: 'ellipsis',
  textOverflow: 'clip',
}

text-shadow

// in

{
  textShadow: false,
  textShadow: '1px 1px 1px hsla(0,0%,0%,1)',
  textShadow: { blur: 1, color: 'hsla(0,0%,0%,1)', x: 1, y: 1 },
  textShadow: ['1px 1px 1px hsla(0,0%,0%,1)', { blur: 1, color: 'hsla(0,0%,0%,1)', x: 1, y: 1 }],
}

// out

{
  textShadow: 'none',
  textShadow: '1px 1px 1px hsla(0,0%,0%,1)',
  textShadow: '1px 1px 1px hsla(0,0%,0%,1)',
  textShadow: ['1px 1px 1px hsla(0,0%,0%,1)', '1px 1px 1px hsla(0,0%,0%,1)'],
}

text-size

// in

{
  textSize: 16,
}

// out

{
  fontSize: 16,
}

text-space-char

// in

{
  textSpaceChar: 1,
}

// out

{
  letterSpacing: 1,
}

text-space-word

// in

{
  textSpaceWord: 1,
}

// out

{
  wordSpacing: 1,
}

text-weight

// in

{
  textWeight: 400,
}

// out

{
  fontWeight: 400,
}

track-align

// in

{
  trackAlign: 'center',
  trackAlign: 'end',
  trackAlign: 'start',
  trackAlign: 'stretch',
}

// out

{
  alignItems: 'center',
  alignItems: 'flex-end',
  alignItems: 'flex-start',
  alignItems: 'stretch',
}

track-align-self

// in

{
  trackAlignSelf: 'center',
  trackAlignSelf: 'end',
  trackAlignSelf: 'start',
  trackAlignSelf: 'stretch',
}

// out

{
  alignSelf: 'center',
  alignSelf: 'flex-end',
  alignSelf: 'flex-start',
  alignSelf: 'stretch',
}

track-direction

// in

{
  trackDirection: 'x',
  trackDirection: 'y',
  trackDirection: ['x', true],
  trackDirection: ['y', true],
}

// out

{
  direction: 'row',
  direction: 'column',
  direction: 'row-reverse',
  direction: 'col-reverse',
}

track-grow

// in

{
  trackGrow: 1,
}

// out

{
  flexGrow: 1,
}

track-order

// in

{
  trackOrder: 1,
}

// out

{
  order: 1,
}

track-origin

// in

{
  trackOrigin: '100%',
}

// out

{
  flexBasis: '100%',
}

track-overflow

// in

{
  trackOverflow: -1,
  trackOverflow: false,
  trackOverflow: 1,
}

// out

{
  flexWrap: 'wrap-reverse',
  flexWrap: 'nowrap',
  flexWrap: 'wrap',
}

track-place

// in

{
  trackPlace: 'start',
  trackPlace: 'end',
  trackPlace: 'center',
  trackPlace: 'space',
  trackPlace: 'space-inner',
  trackPlace: 'space-outer',
}

// out

{
  justifyContent: 'flex-start',
  justifyContent: 'flex-end',
  justifyContent: 'center',
  justifyContent: 'space-evenly',
  justifyContent: 'space-between',
  justifyContent: 'space-around',
}

track-shrink

// in

{
  trackShrink: 0,
}

// out

{
  flexShrink: 0,
}

transition

// in

{
  transition: 'color',
  transition: ['background-color', 'border-color', 'color', 'fill', 'stroke', 'transform'],
}

// out

{
  transitionProperty: 'color',
  transitionProperty: 'background-color, border-color, color, fill, stroke, transform',
}

transition-delay

// in

{
  transitionDelay: 100,
  transitionDelay: '100ms',
  transitionDelay: [100, '100ms'],
}

// out

{
  transitionDelay: '100ms',
  transitionDelay: '100ms',
  transitionDelay: '100ms,100ms',
}

transition-duration

// in

{
  transitionDuration: 100,
  transitionDuration: '100ms',
  transitionDuration: [100, '100ms'],
}

// out

{
  transitionDuration: '100ms',
  transitionDuration: '100ms',
  transitionDuration: '100ms,100ms',
}

transition-fn

// in

{
  transitionFn: 'ease',
  transitionFn: ['ease', 'ease'],
}

// out

{
  transitionTimingFunction: 'ease',
  transitionTimingFunction: 'ease, ease',
}

License

Skin is licensed under the MIT License

Created by RocketStation