Fix: Handle all cases of applying tailwind to class or className

Author: nmn

.flowconfig

@@ -0,0 +1,30 @@
+[version]
+
+
+[ignore]
+.*/build/.*
+.*/dist/.*
+.*/lib/.*
+.*/malformed_package_json/.*
+
+[include]
+
+[libs]
+flow-typed
+
+[lints]
+
+[options]
+emoji=true
+exact_by_default=true
+experimental.const_params=true
+module.use_strict=true
+munge_underscores=true
+suppress_type=$FlowFixMe
+suppress_type=$FlowTODO
+; type-stubs
+module.system.node.resolve_dirname=flow_modules
+module.system.node.resolve_dirname=node_modules
+
+
+[strict]

README.md

@@ -4,12 +4,12 @@ A simpler code translator to convert code using Tailwind to code using StyleX
 
 ## TODO
 
-- [ ] `className={cn("m-1 text-red-500", prop.className)}`
+- [x] `className={cn("m-1 text-red-500", prop.className)}`
   - should become `{..._stylex.props(styles.$1, prop.className)}`
   - but is currently: `{..._stylex.props(styles.$1)}`
-- [ ] There might multiple stylex imports, but it should be fine.
-- [ ] It'll insert a second `stylex.create` call even when one exists
-- [ ] Support this pattern: `<div className={cn(`hidden lg:inline-flex text-[${tokens.textColor}]`)} />`
+- [x] There might multiple stylex imports, but it should be fine.
+- [x] It'll insert a second `stylex.create` call even when one exists
+- [-] Support this pattern: `<div className={cn(`hidden lg:inline-flex text-[${tokens.textColor}]`)} />`
 - [ ] Add and use a custom `tw` function to behave like `stylex.atom()`.
 
 - [ ] A Babel plugin for `style:x={}` instead of a spread

__test__/__fixtures__/form.js

@@ -9,13 +9,13 @@ import {
   CardContent,
   CardFooter,
   Card,
-} from '@/components/ui/card';
-import { Label } from '@/components/ui/label';
-import { Input } from '@/components/ui/input';
-import { Button } from '@/components/ui/button';
-import Link from 'next/link';
+} from "@/components/ui/card";
+import { Label } from "@/components/ui/label";
+import { Input } from "@/components/ui/input";
+import { Button } from "@/components/ui/button";
+import Link from "next/link";
 
-export default function Component() {
+export default function Component({ xstyle }) {
   return (
     <Card>
       <CardHeader>
@@ -25,14 +25,21 @@ export default function Component() {
         </CardDescription>
       </CardHeader>
       <CardContent>
-        <div className="grid grid-cols-2 gap-4 text-sm">
-          <div className="flex flex-col space-y-1.5">
+        <div className={cn("grid grid-cols-2 gap-4 text-sm", xstyle)}>
+          <div className={twMerge(xstyle, "flex flex-col space-y-1.5")}>
             <Label htmlFor="sqrtPriceX96">Sqrt Price X96</Label>
             <Input disabled id="sqrtPriceX96" placeholder="Sqrt Price X96" />
           </div>
           <div className="flex flex-col space-y-1.5">
-            <Label htmlFor="tick">Tick</Label>
-            <Input disabled id="tick" placeholder="Tick" />
+            <Label htmlFor="tick" className="flex flex-col space-y-1.5">
+              Tick
+            </Label>
+            <Input
+              disabled
+              id="tick"
+              placeholder="Tick"
+              className={cn("flex flex-col space-y-1.5", xstyle)}
+            />
           </div>
           <div className="flex flex-col space-y-1.5">
             <Label htmlFor="observationIndex">Observation Index</Label>

__test__/__snapshots__/transform.test.js.snap

@@ -166,12 +166,14 @@ exports[`tailwind-to-stylex transforms form.js 1`] = `
  * v0 by Vercel.
  * @see https://v0.dev/t/WfjCkNNqj9B
  */
-import { CardTitle, CardDescription, CardHeader, CardContent, CardFooter, Card } from '@/components/ui/card';
-import { Label } from '@/components/ui/label';
-import { Input } from '@/components/ui/input';
-import { Button } from '@/components/ui/button';
-import Link from 'next/link';
-export default function Component() {
+import { CardTitle, CardDescription, CardHeader, CardContent, CardFooter, Card } from "@/components/ui/card";
+import { Label } from "@/components/ui/label";
+import { Input } from "@/components/ui/input";
+import { Button } from "@/components/ui/button";
+import Link from "next/link";
+export default function Component({
+  xstyle
+}) {
   return <Card>
       <CardHeader>
         <CardTitle>Uniswap Slot0 Information</CardTitle>
@@ -180,14 +182,16 @@ export default function Component() {
         </CardDescription>
       </CardHeader>
       <CardContent>
-        <div {..._stylex.props(_styles.$1)}>
-          <div {..._stylex.props(_styles.$2)}>
+        <div {..._stylex.props(_styles.$1, xstyle)}>
+          <div {..._stylex.props(xstyle, _styles.$2)}>
             <Label htmlFor="sqrtPriceX96">Sqrt Price X96</Label>
             <Input disabled id="sqrtPriceX96" placeholder="Sqrt Price X96" />
           </div>
           <div {..._stylex.props(_styles.$2)}>
-            <Label htmlFor="tick">Tick</Label>
-            <Input disabled id="tick" placeholder="Tick" />
+            <Label htmlFor="tick" className={_styles.$2}>
+              Tick
+            </Label>
+            <Input disabled id="tick" placeholder="Tick" className={[_styles.$2, xstyle]} />
           </div>
           <div {..._stylex.props(_styles.$2)}>
             <Label htmlFor="observationIndex">Observation Index</Label>
@@ -681,6 +685,5 @@ export const colors = stylex.defineVars({
   dirtyBlack: "#1d2033",
   darkBackground: "#151934",
   darkText: "#ffffff"
-});
-const _styles = _stylex.create({});"
+});"
 `;