Beta: Add media key to css

Now you can add media queries to the css object. It takes any media query.

<Blue
  css={{
    media: {
      '(min-width: 800px)': {
        '& div': {
          bg: 'green',
        },
        bg: 'black',
      },
    },
    c: 'green',
  }}
>
  BLUE<div>GREEN</div>
</Blue>

Beta: NEW API

To bump up performance there is an API change.

Writing styles inline

Before:

<Boxy color="blue" />

Now:

<Boxy css={{ color: 'blue' }} />

Merge styles inline

Merge a single Juhuui component or multiple using an array.

<Box merge={[Button]} />

Beta: Mostly type fixes

This one adds types so that shortcuts (i.e. "c") can be used without type error and values associated with a property (i.e. "color") are connected to the shortcut (i.e. "c").

Problems that need fixing

// returns type any
const Boxa = Box.with() 
// therefor this has no autocomplete
const fn = () => <Boxa>Hello</Boxa>

// no type checking from with function
const Beatbox = Boxa.with({ c: 'blue' })

• fix types e38eafa
• add description to components 06cc0f5
• added precedence to normal selectors ae0f9ca
• add types - missing shortcuts 626edc3

changes

Beta: Filter, variants and functions are inherited to children

Nest filter & functions within with

const Boxy = Box.with(({bColor}) => ({bg: bColor}), ['bColor'])
const Boxa = Boxy.with()

// bColor will be removed from the DOM
<Boxa bColor="green">Green background</Boxa>

Nest variants

const Color = Box.variants({
  variant: {
    green: {
      color: 'green',
    },
    blue: {
      color: 'blue',
    },
  },
}).with({ p: '0.5rem' })

const Variant = Color.with()

<Variant variant="blue">Blue</Variant>

changes

Beta: Adding filter to with()

This beta adds add a second argument to the 'with' function where you can remove props from the DOM element. Arguments takes an array of strings (string[]).

const Boxy = Box.with((textColor) => ({ color: textColor }) ,['textColor'])

<Boxy textColor="green">Green</Boxy>

changes

Beta showing the new API (as, merge, variants, with)

This beta release adds the new API. This is moving towards the final API.

import { Box, Text } from 'juhuui'

const BlueBox = Box.with({ bg: 'blue' });
const GreenText = Text.as('div').with({ color: 'green' });
const Merged = Box.merge([GreenText, BlueBox])
  .as('main')
  .variants({
    sizes: {
      sm: {
        h: '200px',
        w: '100px'
      },
      md: {
        h: '400px',
        w: '200px'
      }
    }
  })
  .with({ border: '1px solid orange' });

<Merged sizes="sm">Let's walk, talk and dance together</Merged>;

see changes