@-ui/stylesdeprecated

Yet another CSS-in-JS library. Based on Facebook's internal styling library as seen at React Conf 2019.

Usage no npm install needed!

<script type="module">
  import UiStyles from 'https://cdn.skypack.dev/@-ui/styles';
</script>

README


@-ui/styles

Bundlephobia Types Code coverage Build status NPM Version MIT License

npm i @-ui/styles

Quick Start

// React example
import React from 'react'
import styles from '@-ui/styles'

styles.variables({
  colors: {
    red: '#c12',
    blue: '#09a',
    purple: '#800080',
  },
})

const style = styles({
  red: `
    color: var(--colors-red);
  `,
  blue: ({colors}) => `
    color: ${colors.blue};

    .${style('red')} {
      color: ${colors.purple};
    }
  `,
})

const Component = (props) => (
  <div className={style({blue: props.blue, red: props.red})}>
    Hello world
    <span className={style(props.blue && 'blue', props.red && 'red')}>
      Hello world
    </span>
    <span className={style('blue')}>I'm always blue</span>
    <span className={style('red')}>I'm purple when my parent is blue</span>
  </div>
)

API

Coming soon. Until then play with this React example on CodeSandbox

LICENSE

MIT