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

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