@ustyle/styled NPM

@ustyle/styled

STATUS: Moved to @slimr/styled

A tiny (2kb) React css-in-js library inspired by chakra-ui, emotion, and styled-components libs

Demos: See ./packages/demo or CodeSandbox

Sister libs:

@ustyle/css

Pros:

Much less bundle size and runtime sluggishness
Less is more: less bugs, no breaking changes
Supports declaring css and styled components inside of Components for better code colocating and NO MORE NEED TO PASS ARGS!
Styled shortcuts like styled.div when imported from @ustyle/styled/withHtmlTags. Note: To get types you'll need tsconfig:moduleResolution >= Node16
Zx/Css shorthand props like chakra-ui:
- Pass shorthand props or zx props to styled components. This lib will create css classes if complex, passthrough as styles otherwise.
- m --> margin
- mx --> margin-left and right
- py --> padding-top and bottom
- More here!

CSS Breakpoints shorthand like chakra-ui:

margin: [auto, null, inherit];
/* Translates to */
margin: auto;
@media (min-width: 48em) {
  margin: inherit;
}

Breakpoints are [30em, 48em, 62em, 80em, 96em]

Cons:

No SSR support

Setup/Install

npm i @ustyle/styled

Usage

Preview below. For full code, see demos

// Create primitive components if you like
const Box = styled.div`
  pos: relative;
`

interface ButtonProps extends Omit<HtmlTagProps['button'], 'id'> {
  id: HtmlTagProps['button']['id'] // make required
}
function Button(props: ButtonProps) {
  return (
    <button
      {...props}
      onClick={(e) => {
        console.log(`Button ${props.id} clicked`)
        props.onClick?.(e)
      }}
    />
  )
}
const ButtonP = styled(Button)`
  bg: red;
  c: white;
  w: [100%, null, inherit];
`

export function App() {
  const on = useOscillator()

  return (
    <Box
      // enjoy chakra-ui like shorthand syntax
      bg={['lightblue', null, 'lightred']}
    >
      <ButtonP
        // use css if you'd like, which gets converted into a css class and attached to this element
        css={`
          --font-weight: [bold, null, initial];
        `}
        id="my-button"
        // kinda like style but accepts shorthand syntax
        _zx={{
          textTransform: on ? 'uppercase' : 'inherit',
        }}
        // Any attr with '_' prefix will be passed to zx
        _fontWeight="var(--font-weight)"
        // like _zx, but applies only on :hover
        _hover={{ bg: 'lightblue' }}
        // like _zx, but applies only on :active
        _active={{ bg: 'lightblue' }}
        // like _zx, but applies only when browser prefers dark modes
        _dark={{ bg: 'lightblue' }}
      >
        Click me!
      </ButtonP>
    </Box>
  )
}