fix: hmr codegen and add log option (#17)

* chore: commit panda and tw demo

* feat: commit buttons

* fix: hmr codegen and add log option

examples/package.json

@@ -13,7 +13,10 @@
   "devDependencies": {
     "@pandacss/dev": "^0.9.0",
     "cross-env": "^7.0.3",
-    "weapp-ide-cli": "^1.0.1"
+    "postcss-rem-to-responsive-pixel": "^5.1.3",
+    "tailwindcss": "^3.3.3",
+    "weapp-ide-cli": "^1.0.1",
+    "weapp-tailwindcss": "^2.6.3"
   },
   "dependencies": {
     "weapp-pandacss": "link:.."

examples/uni-app-vue3/.gitignore

@@ -20,4 +20,4 @@ dist
 *.sln
 *.sw?
 
-src/styled-system
+styled-system

examples/uni-app-vue3/package.json

@@ -39,7 +39,8 @@
     "type-check": "vue-tsc --noEmit",
     "prepare": "panda codegen && weapp-panda codegen",
     "open:dev": "weapp open -p dist/dev/mp-weixin",
-    "open:build": "weapp open -p dist/build/mp-weixin"
+    "open:build": "weapp open -p dist/build/mp-weixin",
+    "postinstall": "weapp-tw patch"
   },
   "dependencies": {
     "@dcloudio/uni-app": "3.0.0-3080720230703001",
@@ -55,6 +56,8 @@
     "@dcloudio/uni-mp-toutiao": "3.0.0-3080720230703001",
     "@dcloudio/uni-mp-weixin": "3.0.0-3080720230703001",
     "@dcloudio/uni-quickapp-webview": "3.0.0-3080720230703001",
+    "class-variance-authority": "^0.7.0",
+    "clsx": "^2.0.0",
     "vue": "^3.3.4",
     "vue-i18n": "^9.2.2"
   },

examples/uni-app-vue3/panda.config.ts

@@ -5,7 +5,7 @@ export default defineConfig({
   preflight: false,
 
   // Where to look for your css declarations
-  include: ['./src/**/*.{js,jsx,ts,tsx,vue}', './pages/**/*.{js,jsx,ts,tsx}'],
+  include: ['./src/**/*.{js,jsx,ts,tsx,vue}'],
 
   // Files to exclude
   exclude: [],
@@ -18,5 +18,5 @@ export default defineConfig({
   jsxFramework: 'vue',
 
   // The output directory for your css system
-  outdir: 'src/styled-system'
+  outdir: 'styled-system'
 })

examples/uni-app-vue3/src/App.vue

@@ -11,5 +11,13 @@ onHide(() => {
 });
 </script>
 <style lang="scss">
-@layer reset, base, tokens, recipes, utilities;
+@layer reset,
+base,
+tokens,
+recipes,
+utilities;
+
+@import 'tailwindcss/base';
+@import 'tailwindcss/utilities';
+@import 'tailwindcss/components';
 </style>

examples/uni-app-vue3/src/components/ButtonPanda.vue

@@ -0,0 +1,92 @@
+<template>
+  <view :class="className">
+    <slot></slot>
+  </view>
+</template>
+
+<script lang="ts">
+// tailwindcss
+import { defineComponent } from 'vue'
+import type { PropType } from 'vue'
+import { cva } from "styled-system/css";
+import type { RecipeVariantProps } from 'styled-system/css'
+const button = cva({
+  base: {
+    fontWeight: 'semibold',
+    borderWidth: '1px',
+    rounded: 'md'
+  },
+  variants: {
+    intent: {
+      primary: {
+        bg: 'blue.500',
+        color: 'white',
+        borderColor: 'transparent',
+        _hover: {
+          bg: 'blue.600'
+        }
+      },
+      secondary: {
+        bg: 'white',
+        color: 'gray.800',
+        borderColor: 'gray.400',
+        _hover: {
+          bg: 'gray.100'
+        }
+      }
+    },
+    size: {
+      small: {
+        fontSize: 'sm',
+        py: '1',
+        px: '2'
+      },
+      medium: {
+        fontSize: 'md',
+        py: '2',
+        px: '4'
+      }
+    }
+
+  },
+  compoundVariants: [
+    {
+      intent: "primary",
+      size: "medium",
+      css: {
+        textTransform: 'uppercase'
+      }
+    },
+  ],
+  defaultVariants: {
+    intent: "primary",
+    size: "medium",
+  }
+});
+
+type StyleProps = RecipeVariantProps<typeof button>
+
+export default defineComponent({
+  props: {
+    intent: {
+      type: [String] as PropType<StyleProps['intent']>
+    },
+    size: {
+      type: [String] as PropType<StyleProps['size']>
+    }
+  },
+  setup(props) {
+    return {
+      className: button({
+        intent: props.intent,
+        size: props.size
+      })
+    }
+  }
+})
+
+
+
+</script>
+
+<style scoped></style>

examples/uni-app-vue3/src/components/ButtonTw.vue

@@ -0,0 +1,74 @@
+<template>
+  <view :class="className">
+    <slot></slot>
+  </view>
+</template>
+
+<script lang="ts">
+// tailwindcss
+import { defineComponent } from 'vue'
+import type { PropType } from 'vue'
+import { cva } from "class-variance-authority";
+import type { VariantProps } from 'class-variance-authority'
+const button = cva(["font-semibold", "border", "rounded"], {
+  variants: {
+    intent: {
+      primary: [
+        "bg-blue-500",
+        "text-white",
+        "border-transparent",
+        "hover:bg-blue-600",
+      ],
+      // **or**
+      // primary: "bg-blue-500 text-white border-transparent hover:bg-blue-600",
+      secondary: [
+        "bg-white",
+        "text-gray-800",
+        "border-gray-400",
+        "hover:bg-gray-100",
+      ],
+    },
+    size: {
+      small: ["text-sm", "py-1", "px-2"],
+      medium: ["text-base", "py-2", "px-4"],
+    },
+  },
+  compoundVariants: [
+    {
+      intent: "primary",
+      size: "medium",
+      class: "uppercase",
+    },
+  ],
+  defaultVariants: {
+    intent: "primary",
+    size: "medium",
+  },
+});
+
+type StyleProps = VariantProps<typeof button>
+
+export default defineComponent({
+  props: {
+    intent: {
+      type: [String] as PropType<StyleProps['intent']>
+    },
+    size: {
+      type: [String] as PropType<StyleProps['size']>
+    }
+  },
+  setup(props) {
+    return {
+      className: button({
+        intent: props.intent,
+        size: props.size
+      })
+    }
+  }
+})
+
+
+
+</script>
+
+<style scoped></style>

examples/uni-app-vue3/src/pages/index/index.vue

@@ -1,7 +1,7 @@
 <template>
   <view class="content">
 
-    <view class="text-area">
+    <view class="text-area pb-2">
       <text class="title" :class="css({
         bg: 'red.400',
         '&:hover': {
@@ -13,11 +13,18 @@
     <div :class="styles">
       <p>Hello World</p>
     </div>
+    <view class="flex justify-around w-full">
+      <IceButtonTw>asdfg</IceButtonTw>
+      <IceButtonPanda>zxcvb</IceButtonPanda>
+    </view>
+
   </view>
 </template>
 
 <script setup lang="ts">
-import { css } from '@/styled-system/css'
+import IceButtonTw from '@/components/ButtonTw.vue'
+import IceButtonPanda from '@/components/ButtonPanda.vue'
+import { css } from 'styled-system/css'
 import { ref } from 'vue'
 const title = ref('Hello')
 const aaa = css({

examples/uni-app-vue3/tailwind.config.js

@@ -0,0 +1,11 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  content: ['./src/**/*.{js,jsx,ts,tsx,vue}'],
+  theme: {
+    extend: {}
+  },
+  plugins: [],
+  corePlugins: {
+    preflight: false
+  }
+}

examples/uni-app-vue3/tsconfig.json

@@ -4,10 +4,26 @@
     "sourceMap": true,
     "baseUrl": ".",
     "paths": {
-      "@/*": ["./src/*"]
+      "@/*": [
+        "./src/*"
+      ],
+      "styled-system/*": [
+        "styled-system/*"
+      ]
     },
-    "lib": ["esnext", "dom"],
-    "types": ["@dcloudio/types"]
+    "lib": [
+      "esnext",
+      "dom"
+    ],
+    "types": [
+      "@dcloudio/types"
+    ]
   },
-  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"]
-}
+  "include": [
+    "src/**/*.ts",
+    "src/**/*.d.ts",
+    "src/**/*.tsx",
+    "src/**/*.vue",
+    "styled-system"
+  ]
+}

examples/uni-app-vue3/vite.config.ts

@@ -1,14 +1,32 @@
+import path from 'node:path'
 import { defineConfig } from 'vite'
 import uni from '@dcloudio/vite-plugin-uni'
-
+import { UnifiedViteWeappTailwindcssPlugin as uvwt } from 'weapp-tailwindcss/vite'
 // https://vitejs.dev/config/
 export default defineConfig({
-  plugins: [uni()],
+  plugins: [uni(), uvwt()],
+  resolve: {
+    alias: [
+      {
+        find: 'styled-system',
+        replacement: path.resolve(__dirname, 'styled-system')
+      }
+    ]
+  },
   css: {
     postcss: {
       plugins: [
+        require('tailwindcss')(),
         require('@pandacss/dev/postcss')(),
-        require('weapp-pandacss/postcss')()
+        require('weapp-pandacss/postcss')(),
+        require('postcss-rem-to-responsive-pixel')({
+          // 32 意味着 1rem = 32rpx
+          rootValue: 32,
+          // 默认所有属性都转化
+          propList: ['*'],
+          // 转化的单位,可以变成 px / rpx
+          transformUnit: 'rpx'
+        })
       ]
     }
   }

src/cli.ts

@@ -7,7 +7,9 @@ async function initCtx() {
   if (ctx) {
     return ctx
   }
-  ctx = await createContext()
+  ctx = await createContext({
+    log: true
+  })
   return ctx
 }
 

src/core/context.ts

@@ -11,8 +11,15 @@ import { getCreateContextDefaults } from '@/defaults'
 
 export async function createContext(options?: ICreateContextOptions) {
   const opt = defu(options, getCreateContextDefaults())
+  let pandaConfig: Awaited<ReturnType<typeof getPandacssConfig>>
+  try {
+    pandaConfig = await getPandacssConfig(opt.pandaConfig)
+  } catch {
+    throw new Error(
+      'Cannot find config file: panda.config.ts or panda.config.js/cjs/mjs. Did you forget to run `panda init`?'
+    )
+  }
 
-  const pandaConfig = await getPandacssConfig(opt.pandaConfig)
   const outdir = pandaConfig.config.outdir
   const projectRoot = dirname(pandaConfig.path)
   async function codegen() {
@@ -37,7 +44,9 @@ export async function createContext(options?: ICreateContextOptions) {
       '/helpers.mjs'
     )}: inject escape function into helpers
     `)
-    console.log(words.filter(Boolean).join('\n'))
+    if (opt.log) {
+      console.log(words.filter(Boolean).join('\n'))
+    }
   }
 
   async function rollback() {

src/defaults.ts

@@ -4,7 +4,8 @@ export function getCreateContextDefaults(): Required<ICreateContextOptions> {
   return {
     pandaConfig: {
       cwd: process.cwd()
-    }
+    },
+    log: false
   }
 }