feat: 使用css2react-native

Author: cand

dist/index.mjs

@@ -1,2 +1,2 @@
-function l(e){return e}const s={name:"My Plugin",code:{css:{title:"Stylus",lang:"stylus",transform({style:e}){return Object.entries(e).map(([n,t])=>`${n} ${t}`).join(`
-`)}},js:!1}};export{s as default};
+import r from"css-to-react-native";function u(t){return t}const s={name:"React Native Plugin",code:{css:{title:"Stylus",lang:"stylus",transform({style:t}){return Object.entries(t).map(([e,n])=>`${e} ${n}`).join(`
+`)}},js:{title:"JavaScript",lang:"js",transform({style:t}){try{const e=Object.entries(t),n=r(e);return`${JSON.stringify(n,null,2)}`}catch(e){return`// \u8F6C\u6362\u5931\u8D25: ${e.message}`}}}}};export{s as default};

package.json

@@ -44,6 +44,7 @@
     "@tempad-dev/plugins": "catalog:",
     "@types/node": "catalog:types",
     "bumpp": "catalog:cli",
+    "css-to-react-native": "catalog:cli",
     "eslint": "catalog:cli",
     "lint-staged": "catalog:cli",
     "simple-git-hooks": "catalog:cli",

pnpm-lock.yaml

@@ -16,6 +16,7 @@ catalogs:
     '@antfu/eslint-config': ^5.4.1
     '@antfu/ni': ^26.0.1
     bumpp: ^10.2.3
+    css-to-react-native: ^3.2.0
     eslint: ^9.36.0
     lint-staged: ^16.2.0
     simple-git-hooks: ^2.13.1

pnpm-workspace.yaml

@@ -1,7 +1,8 @@
 import { definePlugin } from '@tempad-dev/plugins'
+import cssToReactNative from 'css-to-react-native'
 
 export default definePlugin({
-  name: 'My Plugin',
+  name: 'React Native Plugin',
   code: {
     css: {
       title: 'Stylus', // Custom code block title
@@ -12,6 +13,24 @@ export default definePlugin({
           .join('\n')
       },
     },
-    js: false, // Hides the built-in JavaScript code block
+    js: {
+      title: 'JavaScript',
+      lang: 'js',
+      // 直接引用 css-to-react-native 库进行转换并返回
+      transform({ style }) {
+        // 动态引入，防止包未安装时报错
+        try {
+          const styleArr = Object.entries(style)
+          const rnStyle = cssToReactNative(styleArr)
+          return (
+            `${
+              JSON.stringify(rnStyle, null, 2)}`
+          )
+        }
+        catch (e) {
+          return `// 转换失败: ${(e as Error).message}`
+        }
+      },
+    },
   },
 })