React props to CSS variables

README.md

Converts props into css variables in styled-components

Example usage

import React from 'react'
import styled from '@xstyled/styled-components'
import { cx, getCSSVars } from 'utils'

const StyledIconBase = styled.i`
  display: inline-block;
  width: var(--size, 24px);
  height: var(--size, 24px);
  transition: .1s;
  mask-image: var(--src);
  background: gray;
`

// will generate "--size" & "--src" variables from the react props
const StyledIcon = styled(StyledIconBase)`
  ${getCSSVars('size', 'src')}
`

// using icons from:
// https://svgbox.net/
const Icon = ({ src = '', size, className }) =>
  <StyledIcon className={cx('icon', className)} size={size} src={`url(https://${src})`} />

export default React.memo(Icon)

getCSSVars.js

export default (...whitelistProps) => (props) => {
  const res = Object.entries(props)
    .filter(([k, v]) => (typeof v === 'string' || typeof v === 'number') && whitelistProps.includes(k))
    .map(([k, v]) => `--${k}:${v};`)

  return res
}

https://codesandbox.io/s/styled-components-with-css-variables-vydeq