From d86b4830c5cf461df921a1321b695bb885e8765a Mon Sep 17 00:00:00 2001 From: Rob Marscher Date: Thu, 1 Feb 2024 14:47:07 -0500 Subject: [PATCH] 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. --- apps/expo/app/_layout.tsx | 4 +- apps/expo/package.json | 2 +- apps/next/next.config.js | 4 + apps/next/package.json | 10 +- apps/next/pages/_app.tsx | 10 +- apps/next/pages/_document.tsx | 40 +- apps/next/postcss.config.js | 29 ++ bun.lockb | Bin 758248 -> 797120 bytes packages/app/package.json | 12 +- packages/ui/package.json | 17 +- packages/ui/src/tamagui.config.ts | 146 +++++-- packages/ui/src/themes.ts | 663 ++++++++++++++++++++++++++++++ 12 files changed, 869 insertions(+), 68 deletions(-) create mode 100644 apps/next/postcss.config.js create mode 100644 packages/ui/src/themes.ts diff --git a/apps/expo/app/_layout.tsx b/apps/expo/app/_layout.tsx index 8beb12aa3..e4ba45445 100644 --- 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 index b5102b254..083684a7e 100755 --- 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 index 3b141c90c..e2cd704b4 100644 --- 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 index d7296dd03..1c035e788 100644 --- a/apps/next/package.json +++ b/apps/next/package.json @@ -14,10 +14,11 @@ "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", @@ -25,14 +26,17 @@ "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 index 95658886a..88f1ca617 100644 --- 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 = () => ( } `} +