Coder Social home page Coder Social logo

astahmer / tw2panda Goto Github PK

View Code? Open in Web Editor NEW
114.0 3.0 0.0 515 KB

Easily migrate code from tailwind to Panda CSS

Home Page: https://tailwind-to-panda.vercel.app/

JavaScript 1.55% TypeScript 97.45% HTML 0.81% CSS 0.18%
cli extension migration panda tailwind vscode

tw2panda's Issues

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))',

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>

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`}
>

`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

`!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"
}

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

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>
    </>
  )
}

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.