chore: deps and stuff, tailwind 4

Author: shellscape

.github/actions/setup/action.yml

@@ -18,6 +18,8 @@ runs:
 
     - name: Install PNPM
       uses: pnpm/action-setup@v4
+      with:
+        version: 9
 
     - name: Sanity Check
       shell: bash

.moon/toolchain.yml

@@ -14,7 +14,7 @@ node:
 
   # The version of the package manager (above) to use.
   pnpm:
-    version: '9.15.6'
+    version: '9.15.9'
 
   # Add `node.version` as a constraint in the root `package.json` `engines`.
   addEnginesConstraint: true

.npmrc

@@ -1,2 +1,6 @@
 //registry.npmjs.org/:_authToken=${NPM_TOKEN}
 auth-type=legacy
+
+# pnpm
+enable-pre-post-scripts=true
+shamefully-hoist=true

package.json

@@ -8,7 +8,7 @@
   },
   "devDependencies": {
     "@dot/versioner": "^0.4.2",
-    "@moonrepo/cli": "1.30.0",
+    "@moonrepo/cli": "1.35.0",
     "@swc/core": "^1.3.91",
     "@swc/helpers": "^0.5.2",
     "@types/node": "22.14.1",
@@ -45,7 +45,7 @@
       "prettier --write"
     ]
   },
-  "packageManager": "pnpm@10.8.1",
+  "packageManager": "pnpm@9.15.9",
   "pnpm": {
     "overrides": {
       "@types/react": "19.1.2",

packages/jsx-email/package.json

@@ -66,8 +66,8 @@
     "@unocss/core": "^66.0.0",
     "@unocss/preset-rem-to-px": "^66.0.0",
     "@unocss/preset-typography": "^66.0.0",
-    "@unocss/preset-uno": "^66.0.0",
-    "@unocss/preset-wind": "^66.0.0",
+    "@unocss/preset-wind3": "^66.0.0",
+    "@unocss/preset-wind4": "66.1.0-beta.11",
     "@unocss/transformer-compile-class": "^66.0.0",
     "@unocss/transformer-variant-group": "^66.0.0",
     "@vitejs/plugin-react": "^4.3.0",

packages/jsx-email/src/components/tailwind/tailwind.tsx

@@ -1,8 +1,8 @@
 import type { ConfigBase } from '@unocss/core';
 import { createGenerator } from '@unocss/core';
 import { presetTypography } from '@unocss/preset-typography';
-import { presetWind } from '@unocss/preset-wind';
-import { presetUno } from '@unocss/preset-uno';
+import { presetWind3 } from '@unocss/preset-wind3';
+import { presetWind4 } from '@unocss/preset-wind4';
 import { presetRemToPx } from '@unocss/preset-rem-to-px';
 import transformerCompileClass from '@unocss/transformer-compile-class';
 import transformerVariantGroup from '@unocss/transformer-variant-group';
@@ -26,11 +26,19 @@ export interface TailwindProps {
     'layers' | 'presets' | 'rules' | 'separators' | 'shortcuts' | 'theme' | 'variants'
   >;
   production?: boolean;
+  version?: '3' | '4';
+}
+
+interface GetUnoOptions {
+  config: ConfigBase;
+  production: boolean;
+  version: '3' | '4';
 }
 
 const debugProps = debug.elements.enabled ? { dataType: 'jsx-email/tailwind' } : {};
 
-const getUno = async (config: ConfigBase, production: boolean) => {
+const getUno = async (options: GetUnoOptions) => {
+  const { config, production, version } = options;
   const transformers = [transformerVariantGroup()];
 
   if (production)
@@ -55,8 +63,7 @@ const getUno = async (config: ConfigBase, production: boolean) => {
     // Convert all `rem` values to `px`
     presetRemToPx(),
     presetTypography(),
-    presetUno({ dark: 'media' }),
-    presetWind()
+    version === '3' ? presetWind3({ dark: 'media' }) : presetWind4({ dark: 'media' })
   ];
   const uno = await createGenerator({
     ...(config as any),
@@ -70,9 +77,10 @@ const getUno = async (config: ConfigBase, production: boolean) => {
 const render = async ({
   children,
   config = {},
-  production = false
+  production = false,
+  version = '3'
 }: React.PropsWithChildren<TailwindProps>) => {
-  const uno = await getUno(config, production);
+  const uno = await getUno({ config, production, version });
   const html = await jsxToString(<>{children}</>);
   const code = production ? html.replace(/class="/g, 'class=":jsx: ') : html;
   const s = new MagicString(code);