Nukem's Possible Manifestation

    babel-plugin-styled-components-attr

    0.0.4 • Public • Published

    babel-plugin-styled-components-attr

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

    npm version Build Status codecov

    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

    Install

    npm i babel-plugin-styled-components-attr

    DownloadsWeekly Downloads

    1

    Version

    0.0.4

    License

    MIT

    Last publish

    Collaborators

    • tkh44