Nondigestible Purple Mayonnaise
    Wondering what’s next for npm?Check out our public roadmap! »

    cataract

    0.9.11 • Public • Published

    cataract

    A utility for helping make inline stylesheets from plain javascript objects. Probably for use with react.

    Example

    import cataract from 'cataract'
     
    const styles = {
      background: 'black',
      color: 'white',
      link: {
        fontStyle: 'inherit',
        active: {
          color: 'orange',
          fontSize: '2.1em',
          border: '1px'
        }
      }
    }
     
    var styleSheet = cataract(styles)

    styleSheet will be:

    {
      $base: {
        color: 'white'
      },
      link: {
        color: 'white',
        fontStyle: 'inherit'
      },
      'link:active': {
        color: 'orange',
        fontStyle: 'inherit',
        fontSize: '2.1em',
        border: '1px'
      }
    }

    So then you can just do something like this (in react 0.14)

    function MyComponent (props) {
      const { isActive } = props
      const { $base, link, 'link:active': linkActive } = styleSheet
     
      return (
        <div style={$base}>
          <h1>Hello World</h1>
          <a style={isActive ? linkActive : link}>
            Follow Me
          </a>
        </div>
      )
    }

    More documentation to come...

    Install

    npm i cataract

    DownloadsWeekly Downloads

    3

    Version

    0.9.11

    License

    ISC

    Last publish

    Collaborators

    • avatar