Merge branch 'tamagui-reduce-css'

rmarscher · Feb 2, 2024 · a5e8da3 · a5e8da3 · github-actions · Feb 2, 2024
2 parents e127215 + d86b483
commit a5e8da3
Show file tree

Hide file tree

Showing 13 changed files with 844 additions and 65 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/app/layout.tsx b/apps/next/app/layout.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 { Provider } from 'app/provider'
 import { StylesProvider } from './styles-provider'

diff --git a/apps/next/next-env.d.ts b/apps/next/next-env.d.ts
@@ -1,6 +1,5 @@
 /// <reference types="next" />
 /// <reference types="next/image-types/global" />
-/// <reference types="next/navigation-types/compat/navigation" />
 
 // NOTE: This file should not be edited
 // see https://nextjs.org/docs/basic-features/typescript for more information.
diff --git a/apps/next/next.config.js b/apps/next/next.config.js
@@ -35,12 +35,16 @@ const plugins = [
   withPWA,
   withTamagui({
     appDir: true,
+    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/ssr/index.tsx b/apps/next/pages/ssr/index.tsx
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
@@ -11,12 +11,12 @@
     "@shopify/flash-list": "^1.6.3",
     "@t4/api": "workspace:*",
     "@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: 12,
+    3: 14,
+    4: 16,
+    5: 18,
+    6: 20,
+    7: 24,
+    8: 28,
+    9: 32,
+    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,59 @@ 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,
+    1: 12,
+    2: 14,
+    3: 12,
+    4: 15,
+    5: 24,
+    7: 30,
+    8: 36,
+    9: 40,
+    10: 52,
+  },
+  letterSpacing: {},
+  weight: {
+    1: '300',
+    4: '400',
   },
-  {
-    sizeSize: (size) => Math.round(size * 1.1),
-    sizeLineHeight: (size) => Math.round(size * 1.1 + (size > 20 ? 10 : 10)),
-  }
-)
+  lineHeight: {
+    1: 14,
+    2: 21,
+    3: 24,
+    4: 27,
+    5: 36,
+    7: 45,
+    8: 54,
+    9: 60,
+    10: 78,
+  },
+})
 
 export const config = createTamagui({
   defaultFont: 'body',