babel-plugin-styled-components-attr

CSS attr function in your styled components

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

HomePage

https://github.com/tkh44/babel-plugin-styled-components-attr#readme

Repository

git+https://github.com/tkh44/babel-plugin-styled-components-attr.git