@tamagui/next-plugin 1.0.1-beta.226 → 1.0.1-beta.228

package/src/withTamagui.ts

@@ -3,7 +3,9 @@ import path, { dirname, join } from 'path'
 
 import type { TamaguiOptions } from '@tamagui/static'
 import browserslist from 'browserslist'
+import CssMinimizerPlugin from 'css-minimizer-webpack-plugin'
 import buildResolver from 'esm-resolve'
+import MiniCSSExtractPlugin from 'mini-css-extract-plugin'
 import { lazyPostCSS } from 'next/dist/build/webpack/config/blocks/css'
 import { getGlobalCssLoader } from 'next/dist/build/webpack/config/blocks/css/loaders'
 import { TamaguiPlugin, shouldExclude as shouldExcludeDefault } from 'tamagui-loader'
@@ -12,6 +14,7 @@ import webpack from 'webpack'
 export type WithTamaguiProps = TamaguiOptions & {
   useReactNativeWebLite: boolean
   disableFontSupport?: boolean
+  enableCSSOptimizations?: boolean
   aliasReactPackages?: boolean
   includeCSSTest?: RegExp | ((path: string) => boolean)
   shouldExtract?: (path: string, projectRoot: string) => boolean | undefined
@@ -46,7 +49,7 @@ export const withTamagui = (tamaguiOptions: WithTamaguiProps) => {
 
         const prefix = `${isServer ? ' ssr ' : ' web '} |`
 
-        const safeResolves = (...resolves: [string, string][]) => {
+        const safeResolves = (resolves: [string, string][], multiple = false) => {
           const res: string[][] = []
           for (const [out, mod] of resolves) {
             if (out.endsWith('$')) {
@@ -55,6 +58,9 @@ export const withTamagui = (tamaguiOptions: WithTamaguiProps) => {
             }
             try {
               res.push([out, resolveEsm(mod)])
+              if (multiple) {
+                res.push([out, resolveEsm(mod, true)])
+              }
             } catch (err) {
               if (out.includes(`@gorhom/bottom-sheet`)) {
                 continue
@@ -65,11 +71,13 @@ export const withTamagui = (tamaguiOptions: WithTamaguiProps) => {
               }
             }
           }
-          return Object.fromEntries(res)
+          return res
         }
 
-        const resolveEsm = (relativePath: string) => {
-          if (isServer) return require.resolve(relativePath)
+        const resolveEsm = (relativePath: string, onlyRequire = false) => {
+          if (isServer || onlyRequire) {
+            return require.resolve(relativePath)
+          }
           const esm = resolver(relativePath)
           return esm ? path.join(dir, esm) : require.resolve(relativePath)
         }
@@ -78,26 +86,25 @@ export const withTamagui = (tamaguiOptions: WithTamaguiProps) => {
 
         // automatically compile our given components
         const componentsFullPaths = safeResolves(
-          ...tamaguiOptions.components.map(
+          tamaguiOptions.components.map(
             (moduleName) => [moduleName, moduleName] as [string, string]
-          )
+          ),
+          true
         )
 
-        const componentsBaseDirs = Object.entries(componentsFullPaths).map(
-          ([_moduleName, fullPath]) => {
-            let rootPath = dirname(fullPath as string)
-            while (rootPath.length > 1) {
-              const pkg = join(rootPath, 'package.json')
-              const hasPkg = existsSync(pkg)
-              if (hasPkg) {
-                return rootPath
-              } else {
-                rootPath = join(rootPath, '..')
-              }
+        const componentsBaseDirs = componentsFullPaths.map(([_, fullPath]) => {
+          let rootPath = dirname(fullPath as string)
+          while (rootPath.length > 1) {
+            const pkg = join(rootPath, 'package.json')
+            const hasPkg = existsSync(pkg)
+            if (hasPkg) {
+              return rootPath
+            } else {
+              rootPath = join(rootPath, '..')
             }
-            throw new Error(`Couldn't find package.json in any path above: ${fullPath}`)
           }
-        )
+          throw new Error(`Couldn't find package.json in any path above: ${fullPath}`)
+        })
 
         function isInComponentModule(fullPath: string) {
           return componentsBaseDirs.some((componentDir) => fullPath.startsWith(componentDir))
@@ -119,28 +126,30 @@ export const withTamagui = (tamaguiOptions: WithTamaguiProps) => {
           ? 'react-native-web-lite'
           : 'react-native-web'
 
-        const tamaguiAliases = safeResolves(
-          ['@tamagui/core/reset.css', '@tamagui/core/reset.css'],
-          ['@tamagui/core', '@tamagui/core'],
-          ['react-native-svg', '@tamagui/react-native-svg'],
-          // fixes https://github.com/kentcdodds/mdx-bundler/issues/143
-          ['react/jsx-runtime.js', 'react/jsx-runtime'],
-          ['react/jsx-runtime', 'react/jsx-runtime'],
-          ['react/jsx-dev-runtime.js', 'react/jsx-dev-runtime'],
-          ['react/jsx-dev-runtime', 'react/jsx-dev-runtime'],
-          ['react-native-reanimated', 'react-native-reanimated'],
-          ['react-native$', rnw],
-          ['react-native-web$', rnw],
-          ['@testing-library/react-native', '@tamagui/proxy-worm'],
-          ['@gorhom/bottom-sheet$', '@gorhom/bottom-sheet'],
-          // fix reanimated 3
-          ['react-native/Libraries/Renderer/shims/ReactFabric', '@tamagui/proxy-worm'],
-          ...(tamaguiOptions.aliasReactPackages
-            ? ([
-                ['react', 'react'],
-                ['react-dom', 'react-dom'],
-              ] as any)
-            : [])
+        const tamaguiAliases = Object.fromEntries(
+          safeResolves([
+            ['@tamagui/core/reset.css', '@tamagui/core/reset.css'],
+            ['@tamagui/core', '@tamagui/core'],
+            ['react-native-svg', '@tamagui/react-native-svg'],
+            // fixes https://github.com/kentcdodds/mdx-bundler/issues/143
+            ['react/jsx-runtime.js', 'react/jsx-runtime'],
+            ['react/jsx-runtime', 'react/jsx-runtime'],
+            ['react/jsx-dev-runtime.js', 'react/jsx-dev-runtime'],
+            ['react/jsx-dev-runtime', 'react/jsx-dev-runtime'],
+            ['react-native-reanimated', 'react-native-reanimated'],
+            ['react-native$', rnw],
+            ['react-native-web$', rnw],
+            ['@testing-library/react-native', '@tamagui/proxy-worm'],
+            ['@gorhom/bottom-sheet$', '@gorhom/bottom-sheet'],
+            // fix reanimated 3
+            ['react-native/Libraries/Renderer/shims/ReactFabric', '@tamagui/proxy-worm'],
+            ...(tamaguiOptions.aliasReactPackages
+              ? ([
+                  ['react', 'react'],
+                  ['react-dom', 'react-dom'],
+                ] as any)
+              : []),
+          ])
         )
 
         const alias = {
@@ -197,6 +206,19 @@ export const withTamagui = (tamaguiOptions: WithTamaguiProps) => {
           }
         }
 
+        if (!dev && tamaguiOptions.enableCSSOptimizations) {
+          const cssMin = webpackConfig.optimization.minimizer.find((x) =>
+            x.toString().includes('css-minimizer-plugin')
+          )
+          if (cssMin) {
+            webpackConfig.optimization.minimizer = webpackConfig.optimization.minimizer.slice(
+              cssMin.index,
+              1
+            )
+          }
+          webpackConfig.optimization.minimizer.push(new CssMinimizerPlugin())
+        }
+
         /**
          * Server react-native compat
          */
@@ -322,26 +344,51 @@ export const withTamagui = (tamaguiOptions: WithTamaguiProps) => {
           /**
            * CSS Support
            */
+          const cssLoader = getGlobalCssLoader(
+            // @ts-ignore
+            {
+              assetPrefix: options.config.assetPrefix || config.assetPrefix,
+              future: nextConfig.future,
+              experimental: nextConfig.experimental || {},
+              isEdgeRuntime: true,
+              isProduction: !dev,
+              targetWeb: true,
+              isClient: !isServer,
+              isServer,
+              isDevelopment: dev,
+            },
+            // @ts-ignore
+            () => lazyPostCSS(dir, getSupportedBrowsers(dir, dev)),
+            []
+          )
+
+          const cssTest = tamaguiOptions.includeCSSTest ?? /\.css$/
+
+          if (!dev && tamaguiOptions.enableCSSOptimizations) {
+            const postCSSLoader = cssLoader[cssLoader.length - 1]
+            // replace nextjs picky style rules with simple minicssextract
+            cssRules.unshift({
+              test: cssTest,
+              use: [MiniCSSExtractPlugin.loader, 'css-loader', postCSSLoader],
+              sideEffects: true,
+            })
+            webpackConfig.plugins.push(
+              new MiniCSSExtractPlugin({
+                filename: 'static/css/[contenthash].css',
+                ignoreOrder: true,
+              })
+            )
+          } else {
+            cssRules.unshift({
+              test: cssTest,
+              sideEffects: true,
+              use: cssLoader,
+            })
+          }
           cssRules.unshift({
-            test: tamaguiOptions.includeCSSTest ?? /\.css$/,
+            test: cssTest,
             sideEffects: true,
-            use: getGlobalCssLoader(
-              // @ts-ignore
-              {
-                assetPrefix: options.config.assetPrefix || config.assetPrefix,
-                future: nextConfig.future,
-                experimental: nextConfig.experimental || {},
-                isEdgeRuntime: true,
-                isProduction: !dev,
-                targetWeb: true,
-                isClient: !isServer,
-                isServer,
-                isDevelopment: dev,
-              },
-              // @ts-ignore
-              () => lazyPostCSS(dir, getSupportedBrowsers(dir, dev)),
-              []
-            ),
+            use: cssLoader,
           })
         }
 

package/types/withTamagui.d.ts

@@ -2,6 +2,7 @@ import type { TamaguiOptions } from '@tamagui/static';
 export declare type WithTamaguiProps = TamaguiOptions & {
     useReactNativeWebLite: boolean;
     disableFontSupport?: boolean;
+    enableCSSOptimizations?: boolean;
     aliasReactPackages?: boolean;
     includeCSSTest?: RegExp | ((path: string) => boolean);
     shouldExtract?: (path: string, projectRoot: string) => boolean | undefined;