0.0.4 • Published 7 years ago
babel-plugin-styled-components-attr v0.0.4
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