astahmer / tw2panda

Easily migrate code from tailwind to Panda CSS

tw2panda

Easily migrate code from tailwind to Panda CSS

Features

• rewrite, extract and convert CLI commands
• use your own custom panda.config and/or custom tailwind.config file
• also rewrites class-variance-authority to panda's cva function

You can look at this file for an example of what it can do: example

VSCode extension

Select the text you want to convert and run the tw2panda: Rewrite tw to Panda CSS command. https://marketplace.visualstudio.com/items?itemName=astahmer.tw2panda-vscode

Install & usage

pnpm add tw2panda

It exports a bunch of functions that can be used to build your own tooling on top of it. You can look at the CLI code or the tests to see how it can be used.

CLI

npx tw2panda -h

tw2panda/0.1.0

Usage:
  $ tw2panda <command> [options]

Commands:
  rewrite <file>       Output the given file converted to panda, doesn't actually write to disk unless using -w
  extract <file>       Extract each tailwind candidate and show its converted output, doesn't actually write to disk
  convert <classList>  Example: inline-flex disabled:pointer-events-none underline-offset-4

For more info, run any command with the `--help` flag:
  $ tw2panda rewrite --help
  $ tw2panda extract --help
  $ tw2panda convert --help

Options:
  -h, --help     Display this message
  -v, --version  Display version number

rewrite

Usage:
  $ tw2panda rewrite <file>

Options:
  --tw, --tailwind <file>  Path to tailwind.config.js
  -w, --write              Write to disk instead of stdout
  -s, --shorthands         Use shorthands instead of longhand properties
  -c, --config <path>      Path to panda config file
  --cwd <cwd>              Current working directory (default: /Users/astahmer/dev/alex/tailwind-to-css-in-js/packages/tw2panda)
  -h, --help               Display this message

extract

Usage:
  $ tw2panda extract <file>

Options:
  --tw, --tailwind <file>  Path to tailwind.config.js
  -s, --shorthands         Use shorthands instead of longhand properties
  -h, --help               Display this message

convert

Usage:
  $ tw2panda convert <classList>

Options:
  -s, --shorthands  Use shorthands instead of longhand properties
  -h, --help        Display this message

Alternatives

https://github.com/jherr/tw2panda-cli / you can see the live demo here https://www.youtube.com/watch?v=fKSemrudovo&t=442s

Contributing

• pnpm i
• pnpm build
• pnpm test

When you're done with your changes, please run pnpm changeset in the root of the repo and follow the instructions described here.

tw2panda's Issues

Handle conditional styles propperly

Currently conditional styles are not handled properly

For example:

<header
  className={`header top-0 left-0 z-40 flex w-full items-center bg-transparent ${
    sticky
      ? "!fixed !z-[9999] !bg-white !bg-opacity-80 shadow-sticky backdrop-blur-sm !transition dark:!bg-primary dark:!bg-opacity-20"
      : "absolute"
  }`}
>
</header>

Will be converted to this

<header
  className={`header top-0 left-0 z-40 flex w-full items-center bg-transparent ${
    sticky
      ? css({
          pos: 'fixed!',
          zIndex: '9999!',
          bgColor: 'white!',
          backdropFilter: 'sm',
          transitionProperty:
            'color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter!',
          transitionTimingFunction: 'transition!',
          transitionDuration: 'transition!',
        })
      : css({ pos: 'absolute' })
  }`}
>
</header>

I would expect it to use cx helper like this

<header
  className={cx(
   css({
      top: '0',
      left: '0',
      zIndex: '40',
      display: 'flex',
      w: 'full',
      alignItems: 'center',
      bgColor: 'transparent',
    }),
    sticky
      ? css({
          pos: 'fixed!',
          zIndex: '9999!',
          bgColor: 'white!',
          backdropFilter: 'sm',
          transitionProperty:
            'color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter!',
          transitionTimingFunction: 'transition!',
          transitionDuration: 'transition!',
        })
      : css({ pos: 'absolute' })
  )}
>
</header>

enhancement: reduce the size of the vscode extension

it's about 90mb currently, not sure why it ships the whole planet but it does. it sucks but at the same time I've spent way too much time on getting it to work so I'm mostly done with it for now.

if anyone wants to tackle the issue, while not breaking anything ofc, feel free to send a PR

issue with `transform` property

it currently spits this horror

input: class="translate-x-1"
output:

 transform:
                        'translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))',

convert text-3xl -> textStyle: "3xl" instead of fontSize + lineHeight

sr-only -> should output srOnly: true, outputs "sr.only"

https://tw2panda-astahmer.vercel.app/?input=MYewdgzgLgBAggBwTAvDAFASlQPhgbwCgYYAnAUygFdSwYAeHYkhiBAQzuABt2IIUAIgikAtOG4BPQTny8ARuW4BfGNwCWYANb0A9G05MSepsqA

const App = () => {
  return <>
    <span class="sr-only">{label} link</span>
  </>
}

---

import { css } from '../styled-system/css'

const App = () => {
  return (
    <>
      <span
        class={css({
          pos: 'absolute',
          w: 'sr.only',
          h: 'sr.only',
          p: 'sr.only',
          m: 'sr.only',
          overflow: 'hidden',
          clip: 'rect(0, 0, 0, 0)',
          whiteSpace: 'nowrap',
          borderWidth: '0',
        })}
      >
        {label} link
      </span>
    </>
  )
}

`!important` modifiers are not handled correctly

// !fixed !z-[9999] !bg-white
```json
{
  "pos": "fixed",
  "zIndex": "9999",
  "bgColor": "!bg.white"
}

Expect:

// !fixed !z-[9999] !bg-white
```json
{
  "pos": "fixed !important",
  "zIndex": "9999 !important",
  "bgColor": "white  !important"
}

`bg-opacity` and `text-opacity` solution

Currently bg-opacity is ignored

<div className="bg-indigo-600 bg-opacity-50" />

<div className={css({ bgColor: 'indigo.600' })} />

Is there a way to somehow support this transformation.
Panda CSS currently does not have a solution for transparent colors, but maybe some custom tailwind preset could solve this.
Tailwind is using css variables with each color like this

.bg-opacity-50 {
    --tw-bg-opacity: 0.5;
}
.bg-indigo-600 {
    --tw-bg-opacity: 1;
    background-color: rgba(79,70,229,var(--tw-bg-opacity));
}
.text-opacity-25 {
    --tw-text-opacity: 0.25;
}
.text-white {
    --tw-text-opacity: 1;
    color: rgba(255,255,255,var(--tw-text-opacity));
}

But until Panda add something similar maybe tw2panda could just transform it to css variable like this

<div 
  style={{ `--tw-bg-opacity`: 0.5 }}
  className={css({ 
    bgColor: 'indigo.600'
  })} 
/>

and provide tailwind colors preset

JSX expressions are not converted propperly

For example normal string (' single quote or double)

<header
  className={'header top-0 left-0 z-40 flex w-full items-center bg-transparent'}
>

<header
        className={{css(
{"top":"0","left":"0","zIndex":"40","display":"flex","w":"full","alignItems":"center","bgColor":"transparent"})}}
      >

I guess this is fine but it's not consistent with other transformations because all the props are strings

Template string doesn't get transformed at all

<header
  className={`header top-0 left-0 z-40 flex w-full items-center bg-transparent`}
>

Support tailwind 3.4

Multiple new classes are added in tailwind 3.4.

Release notes here. https://github.com/tailwindlabs/tailwindcss/releases/tag/v3.4.0 and here https://tailwindcss.com/blog/tailwindcss-v3-4. It would be great to have tailwind 3.4 supported.