refactor(cssints): replace tailwindcss with vanilla-extract

Author: Onlylonger

docs/components/checkbox/playground.tsx

@@ -1,4 +1,4 @@
-import { Button, Checkbox } from '@shilong/react'
+import { Button, Checkbox, Label } from '@shilong/react'
 import { useState } from 'react'
 
 function App() {
@@ -7,7 +7,10 @@ function App() {
 
   return (
     <>
-      <Checkbox aria-invalid={error} disabled={disabled} />
+      <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
+        <Checkbox aria-invalid={error} disabled={disabled} id="food" />
+        <Label htmlFor="food">香蕉</Label>
+      </div>
       <div style={{ marginTop: 20, display: 'flex', gap: 20 }}>
         <Button variant="destructive" onClick={() => setError(!error)}>
           Toggle Error

package.json

@@ -37,6 +37,10 @@
   "publishConfig": {
     "access": "public"
   },
+  "browserslist": [
+    "> 0.5%",
+    "not dead"
+  ],
   "scripts": {
     "build": "vite build",
     "dev": "vite build -w",
@@ -62,9 +66,15 @@
     "@types/node": "^22.15.17",
     "@types/react": "^19.1.3",
     "@types/react-dom": "^19.1.4",
+    "@vanilla-extract/css": "^1.17.4",
+    "@vanilla-extract/css-utils": "^0.1.6",
+    "@vanilla-extract/vite-plugin": "^5.1.1",
     "@vitejs/plugin-react": "^4.4.1",
+    "autoprefixer": "^10.4.21",
     "bumpp": "^10.1.0",
     "happy-dom": "^17.4.6",
+    "postcss": "^8.5.6",
+    "postcss-preset-env": "^10.2.4",
     "prettier": "^3.6.2",
     "prettier-plugin-tailwindcss": "^0.6.14",
     "react": "^19.1.0",

playground/src/App.tsx

@@ -1,101 +1,25 @@
-import { DataTable, Form, FormItem, Input } from '../../src'
+import { Button, Checkbox, Input, Label } from '../../src'
+import { useState } from 'react'
 
-export type Payment = {
-  id: string
-  amount: number
-  status: 'pending' | 'processing' | 'success' | 'failed'
-  email: string
-}
-
-const data: Payment[] = [
-  {
-    id: 'm5gr84i9',
-    amount: 316,
-    status: 'success',
-    email: 'ken99@example.com',
-  },
-  {
-    id: '3u1reuv4',
-    amount: 242,
-    status: 'success',
-    email: 'Abe45@example.com',
-  },
-  {
-    id: 'derv1ws0',
-    amount: 837,
-    status: 'processing',
-    email: 'Monserrat44@example.com',
-  },
-  {
-    id: '5kma53ae',
-    amount: 874,
-    status: 'success',
-    email: 'Silas22@example.com',
-  },
-  {
-    id: 'bhqecj4p',
-    amount: 721,
-    status: 'failed',
-    email: 'carmella@example.com',
-  },
-]
-
-export const columns: DataTable.ColumnDef<Payment>[] = [
-  {
-    accessorKey: 'id',
-    header: 'ID',
-    cell: ({ row }) => row.getValue('id'),
-  },
-  {
-    accessorKey: 'status',
-    header: 'Status',
-    cell: ({ row }) => (
-      <div className="capitalize">{row.getValue('status')}</div>
-    ),
-  },
-  {
-    accessorKey: 'email',
-    header: 'email',
-    cell: ({ row }) => <div className="lowercase">{row.getValue('email')}</div>,
-  },
-  {
-    accessorKey: 'amount',
-    header: () => <div className="text-right">Amount</div>,
-    cell: ({ row }) => {
-      const amount = parseFloat(row.getValue('amount'))
-      // Format the amount as a dollar amount
-      const formatted = new Intl.NumberFormat('en-US', {
-        style: 'currency',
-        currency: 'USD',
-      }).format(amount)
-      return <div className="text-right font-medium">{formatted}</div>
-    },
-  },
-]
-
-export function App() {
-  const table = DataTable.useReactTable({
-    data,
-    columns,
-    getCoreRowModel: DataTable.getCoreRowModel(),
-    getFilteredRowModel: DataTable.getFilteredRowModel(),
-  })
-
-  const handleSubmit = (v: { email?: string }) => {
-    console.log(v?.email)
-    table.getColumn('email')?.setFilterValue(v.email)
-  }
+function App() {
+  const [error, setError] = useState(false)
+  const [disabled, setDisabled] = useState(false)
 
   return (
-    <div>
-      <div>
-        <Form onSubmit={handleSubmit}>
-          <FormItem name="email" label="Email" render={<Input />} />
-        </Form>
+    <>
+      <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
+        <Checkbox aria-invalid={error} disabled={disabled} id="food" />
+        <Label htmlFor="food">香蕉</Label>
+        <Input placeholder="nihao" />
       </div>
-      <div>
-        <DataTable.Table table={table} />
+      <div style={{ marginTop: 20, display: 'flex', gap: 20 }}>
+        <Button variant="destructive" onClick={() => setError(!error)}>
+          Toggle Error
+        </Button>
+        <Button onClick={() => setDisabled(!disabled)}>Toggle disabled</Button>
       </div>
-    </div>
+    </>
   )
 }
+
+export default App

playground/src/index.tsx

@@ -1,8 +1,8 @@
 import { StrictMode } from 'react'
 import { createRoot } from 'react-dom/client'
-import { App } from './App'
+import App from './App'
+import '../../src/components/theme/theme.css'
 import './style.css'
-import '../../src/global.css'
 
 createRoot(document.querySelector('#app')!).render(
   <StrictMode>

playground/src/style.css

@@ -0,0 +1,8 @@
+.testIcon {
+  width: 20px;
+  height: 20px;
+}
+
+.test {
+  height: 100px;
+}

playground/vite.config.ts

@@ -1,8 +1,14 @@
 import react from '@vitejs/plugin-react'
 import { defineConfig } from 'vite'
 import tailwindcss from '@tailwindcss/vite'
+import { vanillaExtractPlugin } from '@vanilla-extract/vite-plugin'
 
 export default defineConfig({
   root: './playground',
-  plugins: [react(), tailwindcss()],
+  plugins: [
+    react(),
+    vanillaExtractPlugin({
+      identifiers: ({ hash }) => `sl_${hash}`,
+    }),
+  ],
 })