Attempts to reduce output tamagui css file size

apps/expo/package.json

@@ -49,7 +49,7 @@
   "devDependencies": {
     "@babel/core": "^7.23.2",
     "@expo/metro-config": "^0.10.7",
-    "@tamagui/babel-plugin": "1.75.9",
+    "@tamagui/babel-plugin": "1.88.18",
     "metro-minify-terser": "^0.80.0",
     "typescript": "^5.2.2"
   }

apps/next/next.config.js

@@ -34,12 +34,16 @@ const optimizeCss = false
 const plugins = [
   withPWA,
   withTamagui({
+    emitSingleCSSFile: false,
+    doesMutateThemes: false,
     config: './tamagui.config.ts',
     components: ['tamagui', '@t4/ui'],
     importsWhitelist: ['constants.js', 'colors.js'],
     outputCSS: process.env.NODE_ENV === 'production' ? './public/tamagui.css' : null,
     logTimings: true,
     disableExtraction,
+    enableCSSOptimizations: true,
+    excludeReactNativeWebExports: ['Switch', 'ProgressBar', 'Picker', 'CheckBox', 'Touchable'],
     shouldExtract: (path) => {
       if (path.includes(join('packages', 'app'))) {
         return true

apps/next/package.json

@@ -14,25 +14,28 @@
   "dependencies": {
     "@cloudflare/next-on-pages": "1.8.3",
     "@ducanh2912/next-pwa": "^9.7.2",
+    "@fullhuman/postcss-purgecss": "^5.0.0",
     "@supabase/auth-helpers-nextjs": "^0.7.4",
     "@supabase/auth-helpers-react": "^0.4.2",
     "@t4/ui": "workspace:*",
-    "@tamagui/next-theme": "1.75.9",
+    "@tamagui/next-theme": "1.88.18",
     "@tsndr/cloudflare-worker-jwt": "2.2.7",
     "app": "workspace:*",
     "million": "2.6.4",
     "next": "14.0.1",
     "next-seo": "^6.4.0",
     "next-superjson-plugin": "^0.5.10",
     "pattycake": "^0.0.2",
+    "postcss": "^8.4.33",
+    "postcss-flexbugs-fixes": "^5.0.2",
+    "postcss-preset-env": "^9.3.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-native": "^0.72.6",
-    "react-native-web-lite": "1.75.9",
     "webpack": "^5.88.2"
   },
   "devDependencies": {
-    "@tamagui/next-plugin": "1.75.9",
+    "@tamagui/next-plugin": "1.88.18",
     "@types/react": "^18.2.37",
     "vercel": "33.0.2",
     "wrangler": "3.22.3"

apps/next/pages/_app.tsx

@@ -52,6 +52,12 @@ const Metadata = () => (
         }
       `}
     </style>
+    <script
+      dangerouslySetInnerHTML={{
+        // avoid flash of entered elements before enter animations run:
+        __html: `document.documentElement.classList.add('t_unmounted')`,
+      }}
+    />
     {/* Favicons */}
     <link rel='icon' href='/pwa/icons/favicon.ico' />
     <link rel='shortcut icon' href='/pwa/icons/favicon.ico' />

apps/next/pages/_document.tsx

@@ -6,8 +6,7 @@ import NextDocument, {
   Main,
   NextScript,
 } from 'next/document'
-import { Children } from 'react'
-import { AppRegistry } from 'react-native'
+import { AppRegistry, StyleSheet } from 'react-native'
 
 import Tamagui from '../tamagui.config'
 
@@ -16,26 +15,25 @@ export default class Document extends NextDocument {
     AppRegistry.registerComponent('Main', () => Main)
     const page = await ctx.renderPage()
 
-    // @ts-ignore
-    const { getStyleElement } = AppRegistry.getApplication('Main')
+    // @ts-ignore RN doesn't have this type
+    const rnwStyle = StyleSheet.getSheet()
 
-    /**
-     * Note: be sure to keep tamagui styles after react-native-web styles like it is here!
-     * So Tamagui styles can override the react-native-web styles.
-     */
-    const styles = [
-      getStyleElement(),
-      <style
-        key='tamagui-css'
-        dangerouslySetInnerHTML={{
-          __html: Tamagui.getCSS({
-            exclude: process.env.NODE_ENV === 'development' ? null : 'design-system',
-          }),
-        }}
-      />,
-    ]
-
-    return { ...page, styles: Children.toArray(styles) }
+    return {
+      ...page,
+      styles: (
+        <>
+          <style id={rnwStyle.id} dangerouslySetInnerHTML={{ __html: rnwStyle.textContent }} />
+          <style
+            key='tamagui-css'
+            dangerouslySetInnerHTML={{
+              __html: Tamagui.getCSS({
+                exclude: process.env.NODE_ENV === 'production' ? 'design-system' : null,
+              }),
+            }}
+          />
+        </>
+      ),
+    }
   }
 
   render() {

apps/next/postcss.config.js

@@ -0,0 +1,29 @@
+module.exports = {
+  plugins: [
+    'postcss-flexbugs-fixes',
+    [
+      'postcss-preset-env',
+      {
+        autoprefixer: {
+          flexbox: 'no-2009',
+        },
+        stage: 3,
+        features: {
+          'custom-properties': false,
+        },
+      },
+    ],
+    // [
+    //   '@fullhuman/postcss-purgecss',
+    //   {
+    //     content: [
+    //       './pages/**/*.{js,jsx,ts,tsx}',
+    //       './../../packages/app/**/*.{js,jsx,ts,tsx}',
+    //       './../../packages/ui/**/*.{js,jsx,ts,tsx}',
+    //     ],
+    //     defaultExtractor: (content) => content.match(/[\w-/:]+(?<!:)/g) || [],
+    //     safelist: ['html', 'body'],
+    //   },
+    // ],
+  ],
+}

package.json

@@ -44,6 +44,7 @@
     "check-dependency-version-consistency": "^4.1.0",
     "npm-run-all": "^4.1.5",
     "react-native-url-polyfill": "^2.0.0",
+    "react-native-web": "^0.19.10",
     "typescript": "^5.2.2",
     "workerd": "1.20231218.0"
   }

packages/app/package.json

@@ -10,12 +10,12 @@
   "dependencies": {
     "@shopify/flash-list": "^1.6.3",
     "@t4/ui": "workspace:*",
-    "@tamagui/animations-react-native": "1.75.9",
-    "@tamagui/colors": "1.75.9",
-    "@tamagui/font-inter": "1.75.9",
-    "@tamagui/lucide-icons": "1.75.9",
-    "@tamagui/shorthands": "1.75.9",
-    "@tamagui/themes": "1.75.9",
+    "@tamagui/animations-react-native": "1.88.18",
+    "@tamagui/colors": "1.88.18",
+    "@tamagui/font-inter": "1.88.18",
+    "@tamagui/lucide-icons": "1.88.18",
+    "@tamagui/shorthands": "1.88.18",
+    "@tamagui/themes": "1.88.18",
     "@tanstack/react-query": "^4.36.1",
     "@trpc/client": "^10.43.2",
     "@trpc/next": "^10.43.2",

packages/ui/package.json

@@ -15,17 +15,17 @@
     "@shopify/flash-list": "^1.6.3",
     "@supabase/supabase-js": "^2.38.4",
     "@t4/api": "workspace:*",
-    "@tamagui/animations-react-native": "1.75.9",
-    "@tamagui/font-inter": "1.75.9",
-    "@tamagui/react-native-media-driver": "1.75.9",
-    "@tamagui/shorthands": "1.75.9",
-    "@tamagui/themes": "1.75.9",
-    "@tamagui/toast": "1.75.9",
+    "@tamagui/animations-react-native": "1.88.18",
+    "@tamagui/font-inter": "1.88.18",
+    "@tamagui/react-native-media-driver": "1.88.18",
+    "@tamagui/shorthands": "1.88.18",
+    "@tamagui/themes": "1.88.18",
+    "@tamagui/toast": "1.88.18",
     "@tanstack/react-virtual": "3.0.0-beta.68",
     "jotai": "^2.5.1",
-    "tamagui": "1.75.9"
+    "tamagui": "1.88.18"
   },
   "devDependencies": {
-    "@tamagui/build": "1.75.9"
+    "@tamagui/build": "1.88.18"
   }
 }

packages/ui/src/tamagui.config.ts

@@ -1,7 +1,9 @@
 import { createInterFont } from '@tamagui/font-inter'
 import { createMedia } from '@tamagui/react-native-media-driver'
 import { shorthands } from '@tamagui/shorthands'
-import { themes, tokens } from '@tamagui/themes'
+import { tokens } from '@tamagui/themes/v2'
+// import { themes } from '@tamagui/themes/v2-themes'
+import { themes } from './themes'
 import { createTamagui } from 'tamagui'
 
 import { animations } from './animations'