fix(docs): resolve SSR crash and webpack warnings in docs build

- Inject polyfills/dev.js via getClientModules to define globalThis.__DEV__ for both client and SSR bundles; needed because the new Switch pulls in react-native-reanimated which assumes this global exists
- Alias @expo/vector-icons/MaterialCommunityIcons to material-design-icons (already present) and @react-native-vector-icons/get-image to false
- Flatten CSS nesting in custom.css to fix CSS minimizer warnings about unsupported & selector syntax
- Add isDynamicColorSupported = false to the non-Android DynamicTheme fallback, which was missing the re-exported symbol
- Fix TypescaleKey re-export to use the type keyword

Author: adrcotfas

docs/plugins/docusaurus-react-native-plugin.js

@@ -14,10 +14,17 @@ module.exports = function () {
             'react-native-vector-icons/MaterialCommunityIcons': path.resolve(
               'node_modules/@react-native-vector-icons/material-design-icons'
             ),
+            '@expo/vector-icons/MaterialCommunityIcons': path.resolve(
+              'node_modules/@react-native-vector-icons/material-design-icons'
+            ),
+            '@react-native-vector-icons/get-image': false,
           },
           extensions: ['.web.js'],
         },
       };
     },
+    getClientModules() {
+      return [path.resolve(__dirname, 'polyfills/dev.js')];
+    },
   };
 };

docs/plugins/polyfills/dev.js

@@ -0,0 +1 @@
+globalThis.__DEV__ = process.env.NODE_ENV !== 'production';

docs/src/css/custom.css

@@ -128,8 +128,10 @@ html[data-theme='light'] .gallery-dark {
   height: 124px;
   align-items: center;
   text-align: center;
+}
 
-  @media (max-width: 680px) {
+@media (max-width: 680px) {
+  .icons-list-icon-container {
     width: 96px;
   }
 }
@@ -153,10 +155,10 @@ html[data-theme='light'] .gallery-dark {
   flex-wrap: wrap;
   justify-content: center;
   margin: 24px 0;
+}
 
-  &:last-child {
-    justify-content: flex-start;
-  }
+.icons-list-results:last-child {
+  justify-content: flex-start;
 }
 
 .icons-list-searchbar {
@@ -171,15 +173,15 @@ html[data-theme='light'] .gallery-dark {
   border-radius: 3px;
   transition: background-color 0.3s;
   outline: 0;
+}
 
-  &:focus,
-  &:hover {
-    background-color: #e7e7e7;
-  }
+.icons-list-searchbar:focus,
+.icons-list-searchbar:hover {
+  background-color: #e7e7e7;
+}
 
-  *:focus-visible {
-    outline: auto;
-  }
+.icons-list-searchbar:focus-visible {
+  outline: auto;
 }
 
 @font-face {

src/index.tsx

@@ -137,4 +137,4 @@ export type { Props as SegmentedButtonsProps } from './components/SegmentedButto
 export type { Props as ListImageProps } from './components/List/ListImage';
 export type { Props as TooltipProps } from './components/Tooltip/Tooltip';
 
-export { TypescaleKey, type Theme, type Elevation } from './types';
+export { type TypescaleKey, type Theme, type Elevation } from './types';

src/theme/schemes/DynamicTheme.tsx

@@ -1,2 +1,4 @@
 export { DarkTheme as DynamicDarkTheme } from './DarkTheme';
 export { LightTheme as DynamicLightTheme } from './LightTheme';
+
+export const isDynamicColorSupported = false;