babel-plugin-styled-components-attr

use the CSS attr function in your styled-components code.

const Input = styled.input`
  color: attr(color);
  width: attr(width %);
  margin: attr(margin px, 16);
`

Install

npm install -S babel-plugin-styled-components-attr

.babelrc

{
  "plugins": [
    "styled-components-attr"
  ]
}

attr

The attr CSS function is supported in a basic capacity. I will be adding more features, but PRs are welcome.

/* get value from `width` prop */
width: attr(width vw);
 
/* specify type or unit to apply to value */
width: attr(width vw);
 
/* fallback value if props.width is falsey */
width: attr(width vw, 50);

const H1 = styled.h1`
  font-size: attr(fontSize px);
  margin: attr(margin rem, 4);
  font-family: sans-serif;
  color: ${colors.pink[5]};
  @media (min-width: 680px) {
    color: attr(desktopColor);
  }
`
 
const Title = ({ title, scale }) => {
  return (
    <H1 fontSize={16 * scale} desktopColor={colors.gray[5]}>
      {title}
    </H1>
  )
}

Value types

checked is supported

• em
• ex
• px
• rem
• vw
• vh
• vmin
• vmax
• mm
• cm
• in
• pt
• pc
• %
• string
• color
• url
• integer
• number
• length
• deg
• grad
• rad
• time
• s
• ms
• frequency
• Hz
• kHz