isocss v1.0.0-3

isocss

npm i isocss

Usage

// low-level API
import iso from 'isocss'

const { className, css } = iso({
  fontSize: 24,
  color: 'magenta',
  '&:hover': {
    color: 'black'
  },
  '@media screen and (min-width: 40em)': {
    fontSize: 32
  }
})

React

import { Base } from 'isocss/react'

export const props =>
  <Base
    css={{
      fontSize: 32,
      color: 'magenta'
    }}>
  </Base>

HOC

import styled from 'isocss/react'

const Box = styled('div')({
  padding: 32,
  border: '1px solid lightgray'
})

// styled-system example
import styled from 'isocss/react'
import { space, color } from 'styled-system'

const Box = styled('div')(
  space,
  color
)

// <Box p={3} color='white' bg='magenta' />

• Isolation from other CSS-in-JS libraries
• Functional styles
• Atomic CSS rulesets
• No side effects
• No singleton pattern
• Inline <style> tag
• Works in iframes
• Works with stream rendering

MIT License