Reduce tamagui css file size

None of the configured color themes are currently in use. It makes sense to drop including them and instead let developers opt into including them. Note that a v3 of tamagui's theme builder will be released soon and my provide other optimization options. Also dropping use of the Inter font in place of system fonts.
rmarscher · Feb 2, 2024 · b5bb270 · b5bb270
1 parent f701007
commit b5bb270
Show file tree

Hide file tree

Showing 12 changed files with 866 additions and 68 deletions.
diff --git a/apps/expo/app/_layout.tsx b/apps/expo/app/_layout.tsx
@@ -13,8 +13,8 @@ SplashScreen.preventAutoHideAsync()
 
 export default function RootLayout() {
   const [loaded, error] = useFonts({
-    Inter: require('@tamagui/font-inter/otf/Inter-Medium.otf'),
-    InterBold: require('@tamagui/font-inter/otf/Inter-Bold.otf'),
+    // Inter: require('@tamagui/font-inter/otf/Inter-Medium.otf'),
+    // InterBold: require('@tamagui/font-inter/otf/Inter-Bold.otf'),
   })
 
   // Expo Router uses Error Boundaries to catch errors in the navigation tree.

diff --git a/apps/expo/package.json b/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"
   }

diff --git a/apps/next/next.config.js b/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

diff --git a/apps/next/package.json b/apps/next/package.json
@@ -14,25 +14,29 @@
   "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",
+    "react-native-web": "^0.19.10",
     "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"

diff --git a/apps/next/pages/_app.tsx b/apps/next/pages/_app.tsx
@@ -10,8 +10,8 @@ if (typeof requestAnimationFrame === 'undefined') {
   }
 }
 import '@tamagui/core/reset.css'
-import '@tamagui/font-inter/css/400.css'
-import '@tamagui/font-inter/css/700.css'
+// import '@tamagui/font-inter/css/400.css'
+// import '@tamagui/font-inter/css/700.css'
 
 import type { Session } from '@supabase/supabase-js'
 import { Provider } from 'app/provider'
@@ -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' />

diff --git a/apps/next/pages/_document.tsx b/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() {

diff --git a/apps/next/postcss.config.js b/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'],
+    //   },
+    // ],
+  ],
+}
diff --git a/bun.lockb b/bun.lockb
diff --git a/packages/app/package.json b/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",

diff --git a/packages/ui/package.json b/packages/ui/package.json
@@ -15,17 +15,18 @@
     "@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/theme-builder": "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"
   }
 }
diff --git a/packages/ui/src/tamagui.config.ts b/packages/ui/src/tamagui.config.ts
@@ -1,14 +1,83 @@
 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 { createTamagui } from 'tamagui'
+import { tokens } from '@tamagui/themes/v2'
+// import { themes } from '@tamagui/themes/v2-themes'
+import { themes } from './themes'
+import { createTamagui, createFont, isWeb } from 'tamagui'
 
 import { animations } from './animations'
 
-const headingFont = createInterFont({
+// const headingFont = createInterFont({
+//   size: {
+//     6: 15,
+//   },
+//   transform: {
+//     6: 'uppercase',
+//     7: 'none',
+//   },
+//   weight: {
+//     6: '400',
+//     7: '700',
+//   },
+//   color: {
+//     6: '$colorFocus',
+//     7: '$color',
+//   },
+//   letterSpacing: {
+//     5: 2,
+//     6: 1,
+//     7: 0,
+//     8: -1,
+//     9: -2,
+//     10: -3,
+//     12: -4,
+//     14: -5,
+//     15: -6,
+//   },
+//   face: {
+//     700: { normal: 'InterBold' },
+//   },
+// })
+
+// const bodyFont = createInterFont(
+//   {
+//     face: {
+//       700: { normal: 'InterBold' },
+//     },
+//   },
+//   {
+//     sizeSize: (size) => Math.round(size * 1.1),
+//     sizeLineHeight: (size) => Math.round(size * 1.1 + (size > 20 ? 10 : 10)),
+//   }
+// )
+
+const webFontFamily =
+  'system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"'
+
+const headingFont = createFont({
+  family: isWeb ? webFontFamily : 'System',
   size: {
-    6: 15,
+    2: 14,
+    3: 16,
+    4: 18,
+    5: 20,
+    6: 24,
+    7: 28,
+    8: 32,
+    9: 40,
+    10: 48,
+  },
+  lineHeight: {
+    2: 14,
+    3: 16,
+    4: 18,
+    5: 20,
+    6: 24,
+    7: 28,
+    8: 32,
+    9: 40,
+    10: 48,
   },
   transform: {
     6: 'uppercase',
@@ -23,32 +92,56 @@ const headingFont = createInterFont({
     7: '$color',
   },
   letterSpacing: {
-    5: 2,
-    6: 1,
-    7: 0,
-    8: -1,
-    9: -2,
-    10: -3,
+    5: 3,
+    6: 2,
+    7: 1,
+    8: 0,
+    9: -1,
+    10: -2,
     12: -4,
-    14: -5,
-    15: -6,
-  },
-  face: {
-    700: { normal: 'InterBold' },
+    14: -6,
+    15: -7,
   },
+  // face: {
+  //   700: { normal: 'InterBold' },
+  // },
 })
 
-const bodyFont = createInterFont(
-  {
-    face: {
-      700: { normal: 'InterBold' },
-    },
+const bodyFont = createFont({
+  family: isWeb ? webFontFamily : 'System',
+  size: {
+    // 2: 12,
+    // 3: 14,
+    // 4: 16,
+    // 5: 18,
+    // 7: 22,
+    // 8: 26,
+    // 9: 32,
+    // 10: 38,
+    2: 14,
+    3: 16,
+    4: 20,
+    5: 24,
+    7: 30,
+    8: 36,
+    9: 40,
+    10: 52,
+  },
+  letterSpacing: {},
+  weight: {
+    4: '400',
   },
-  {
-    sizeSize: (size) => Math.round(size * 1.1),
-    sizeLineHeight: (size) => Math.round(size * 1.1 + (size > 20 ? 10 : 10)),
-  }
-)
+  lineHeight: {
+    2: 16,
+    3: 18,
+    4: 22,
+    5: 26,
+    7: 32,
+    8: 38,
+    9: 44,
+    10: 56,
+  },
+})
 
 export const config = createTamagui({
   defaultFont: 'body',