zwilling
TypeScript icon, indicating that this package has built-in type declarations

0.1.9 • Public • Published

Zwilling

npm version

Replacement for twin.macro's tw function. Just use zw instead of tw everywhere.

Installation

npm i zwilling
# or
yarn add zwilling
# or
pnpm add zwilling

vanilla:

// lib/zw.ts
import { Zwilling } from 'zwilling'

export const zw = Zwilling()

// pages/demo.tsx
const StyledLink = zw.a`underline`

with clsx (recommended):

// lib/zw.ts
import clsx, { ClassValue } from 'clsx'
import { Zwilling } from 'zwilling'

export const zw = Zwilling<ClassValue>({
  classNameJoiner: clsx,
})

// pages/demo.tsx
const StyledLink = zw.a(['underline']) // clsx syntax allowed

define which props to pass:

// lib/zw.ts
import { Zwilling } from 'zwilling'

export const zw = Zwilling({
  passProp: (key) => !key.startsWith('$') // actually the default
})

// pages/demo.tsx
const StyledLink = zw.a<{ $active: boolean }>((props) =>
  props.$active ? 'underline' : 'no-underline'
)

<StyledLink $active={true}>Whoop</StyledLink>
// $active will not be passed to the DOM-Anchor-Element

Why?

  • No need for Styled Components or Emotion
  • No need for a babel plugin

Limitations

  • Only implements tw from twin.macro
  • No support for css from twin.macro
  • No support for styled from twin.macro
  • No support for theme from twin.macro
  • In general: No support for CSS!
  • No support for custom twin.macro syntax like md:(h-4 w-4)

Examples

const justAString = zw`text-red-500` // => 'text-red-500'
const StyledLink = zw.a`text-red-500`
return <StyledLink href="#typed">Whoop</StyledLink>
const darkMode = true
const StyledLink = zw.a`text-red-500 ${darkMode ? 'text-white' : 'text-black'}`
const darkMode = true
const StyledLink = zw.a`text-red-500 ${[
  // clsx style
  darkMode && 'text-white',
  { 'text-white': darkMode },
  [[[[['text-2xl']]]]],
]}`
const StyledLink = zw.a<{ $active: boolean }>`text-red-500 ${(props) =>
  props.$active && 'text-white'}`
const SuperButton = (props) => (
  <button className={props.className}>Super</button>
)
const StyledSuperButton = zw(SuperButton)`text-red-500`
const StyledLink = zw.a(['bg-purple-500', { 'rotate-45': true }])
const StyledLink = zw.a<{ $active: boolean }>(
  (p) => p.$active && 'bg-purple-500'
)
const NotSoStyledLink = zw.a()
return <NotSoStyledLink className={{ 'bg-purple-500': true }} />
// Combine with styled-components if you are a madman (or have legacy code):
const DoubleStyled = styled(
  zw.a`bg-purple-500` // tailwind here
)`
  text-decoration: underline; /* CSS here */
`
import { cva } from 'class-variance-authority'

const buttonVariants = cva('', {
  variants: {
    color: {
      red: 'bg-red-500',
      green: 'bg-green-500',
    },
  },
})
const VariantButton = zw.a(buttonVariants)

Development

# Install:
pnpm i

# Run once:
pnpm build
pnpm demo

# After every change to src:
pnpm build
pnpm demo

Readme

Keywords

none

Package Sidebar

Install

npm i zwilling

Weekly Downloads

45

Version

0.1.9

License

MIT

Unpacked Size

170 kB

Total Files

5

Last publish

Collaborators

  • rechenberger