Css hooks v3

package.json

@@ -20,8 +20,7 @@
     "@atlaskit/pragmatic-drag-and-drop-live-region": "1.0.7",
     "@atlaskit/pragmatic-drag-and-drop-react-drop-indicator": "1.1.3",
     "@corbado/react": "2.14.0",
-    "@css-hooks/react": "2.0.4",
-    "@css-hooks/recommended": "2.0.4",
+    "@css-hooks/react": "3.0.0",
     "@cyntler/react-doc-viewer": "1.17.0",
     "@fluentui/react-components": "9.54.17",
     "@fluentui/react-datepicker-compat": "0.4.51",
@@ -69,6 +68,7 @@
     "react-xml-viewer": "2.0.1",
     "recharts": "2.12.7",
     "redaxios": "0.5.1",
+    "remeda": "2.14.0",
     "reproject": "1.2.7",
     "tiny-invariant": "1.3.3",
     "use-debounce": "10.0.3",

src/components/Layout/Header/Menu.tsx

@@ -2,9 +2,10 @@ import { memo, useCallback } from 'react'
 import { Button } from '@fluentui/react-components'
 import { MdLogin } from 'react-icons/md'
 import { useNavigate } from 'react-router-dom'
+import { pipe } from 'remeda'
 
 import { controls } from '../../../styles.ts'
-import { css } from '../../../css.ts'
+import { on } from '../../../css.ts'
 
 export const Menu = memo(() => {
   const navigate = useNavigate()
@@ -18,12 +19,14 @@ export const Menu = memo(() => {
         icon={<MdLogin />}
         onClick={onClickEnter}
         title={'Enter'}
-        style={css({
-          backgroundColor: 'rgba(38, 82, 37, 0)',
-          border: 'none',
-          color: 'white',
-          on: ($) => [$('&:hover', { filter: 'brightness(85%)' })],
-        })}
+        style={pipe(
+          {
+            backgroundColor: 'rgba(38, 82, 37, 0)',
+            border: 'none',
+            color: 'white',
+          },
+          on('&:hover', { filter: 'brightness(85%)' }),
+        )}
       />
     </div>
   )

src/components/LayoutProtected/Header/Menu.tsx

@@ -10,19 +10,22 @@ import { MdLogout, MdLogin } from 'react-icons/md'
 import { useNavigate, useSearchParams, useLocation } from 'react-router-dom'
 import { useCorbado } from '@corbado/react'
 import { useAtom } from 'jotai'
+import { pipe } from 'remeda'
 
 import { controls } from '../../../styles.ts'
-import { css } from '../../../css.ts'
+import { on } from '../../../css.ts'
 import { mapMaximizedAtom, tabsAtom } from '../../../store.ts'
 
 const buildButtonStyle = ({ prevIsActive, nextIsActive, selfIsActive }) => {
   if (!selfIsActive) {
-    return {
-      backgroundColor: 'rgba(38, 82, 37, 0)',
-      border: 'none',
-      color: 'rgba(255, 255, 255, 0.7)',
-      on: ($) => [$('&:hover', { color: 'white' })],
-    }
+    return pipe(
+      {
+        backgroundColor: 'rgba(38, 82, 37, 0)',
+        border: 'none',
+        color: 'rgba(255, 255, 255, 0.7)',
+      },
+      on('&:hover', { color: 'white' }),
+    )
   }
 
   const style = {
@@ -112,13 +115,11 @@ export const Menu = memo(() => {
               aria-label="Tree"
               name="tabs"
               value="tree"
-              style={css(
-                buildButtonStyle({
-                  prevIsActive: false,
-                  nextIsActive: dataIsActive,
-                  selfIsActive: treeIsActive,
-                }),
-              )}
+              style={buildButtonStyle({
+                prevIsActive: false,
+                nextIsActive: dataIsActive,
+                selfIsActive: treeIsActive,
+              })}
               disabled={mapIsMaximized}
             >
               Tree
@@ -127,13 +128,11 @@ export const Menu = memo(() => {
               aria-label="Data"
               name="tabs"
               value="data"
-              style={css(
-                buildButtonStyle({
-                  prevIsActive: treeIsActive,
-                  nextIsActive: mapIsActive,
-                  selfIsActive: dataIsActive,
-                }),
-              )}
+              style={buildButtonStyle({
+                prevIsActive: treeIsActive,
+                nextIsActive: mapIsActive,
+                selfIsActive: dataIsActive,
+              })}
               disabled={mapIsMaximized}
             >
               Data
@@ -156,13 +155,11 @@ export const Menu = memo(() => {
               aria-label="Map"
               name="tabs"
               value="map"
-              style={css(
-                buildButtonStyle({
-                  prevIsActive: dataIsActive,
-                  nextIsActive: false,
-                  selfIsActive: mapIsActive,
-                }),
-              )}
+              style={buildButtonStyle({
+                prevIsActive: dataIsActive,
+                nextIsActive: false,
+                selfIsActive: mapIsActive,
+              })}
               title={tabs.includes('map') ? 'Hide Map' : 'Show Map'}
             >
               Map
@@ -176,12 +173,14 @@ export const Menu = memo(() => {
           icon={<FaCog />}
           onClick={onClickOptions}
           title={isAppStates ? 'Back' : 'Options'}
-          style={css({
-            backgroundColor: 'rgba(38, 82, 37, 0)',
-            border: 'none',
-            color: 'white',
-            on: ($) => [$('&:hover', { filter: 'brightness(85%)' })],
-          })}
+          style={pipe(
+            {
+              backgroundColor: 'rgba(38, 82, 37, 0)',
+              border: 'none',
+              color: 'white',
+            },
+            on('&:hover', { filter: 'brightness(85%)' }),
+          )}
           disabled={mapIsMaximized}
         />
       )}
@@ -196,12 +195,14 @@ export const Menu = memo(() => {
             ? 'Enter'
             : `Logout ${authUser?.email}`
         }
-        style={css({
-          backgroundColor: 'rgba(38, 82, 37, 0)',
-          border: 'none',
-          color: 'white',
-          on: ($) => [$('&:hover', { filter: 'brightness(85%)' })],
-        })}
+        style={pipe(
+          {
+            backgroundColor: 'rgba(38, 82, 37, 0)',
+            border: 'none',
+            color: 'white',
+          },
+          on('&:hover', { filter: 'brightness(85%)' }),
+        )}
       />
     </div>
   )

src/components/LayoutProtected/Header/index.tsx

@@ -1,6 +1,7 @@
 import { Link } from 'react-router-dom'
-import { css } from '../../../css.ts'
+import { pipe } from 'remeda'
 
+import { on } from '../../../css.ts'
 import { Menu } from './Menu.tsx'
 
 import './header.css'
@@ -32,15 +33,13 @@ export const Header = () => {
         <Link
           to={'/'}
           className="header__title__link"
-          style={css({
-            ...linkStyle,
-            on: ($) => [
-              $('&:hover', {
-                filter: 'brightness(85%)',
-                textDecoration: 'underline',
-              }),
-            ],
-          })}
+          style={pipe(
+            linkStyle,
+            on('&:hover', {
+              filter: 'brightness(85%)',
+              textDecoration: 'underline',
+            }),
+          )}
         >
           Promoting Species
         </Link>

src/components/Map/BottomRightControl/HorizontalButtons/Coordinates/Inputs.tsx

@@ -1,9 +1,9 @@
 import { useState, memo, useCallback, useEffect } from 'react'
 import { useMap } from 'react-leaflet'
+import { pipe } from 'remeda'
 
-import { css } from '../../../../../css.ts'
+import { on } from '../../../../../css.ts'
 import { epsgTo4326 } from '../../../../../modules/epsgTo4326.ts'
-import './inputs.css'
 
 const containerStyle = {
   display: 'flex',
@@ -68,15 +68,21 @@ export const Inputs = memo(
           type="text"
           name="x"
           value={coordinates?.x ?? '...'}
-          style={css({
-            ...inputStyle,
-            textAlign: 'right',
-            on: ($) => [
-              $('&:focus-visible', {
-                outline: 'none',
-              }),
-            ],
-          })}
+          style={pipe(
+            {
+              ...inputStyle,
+              textAlign: 'right',
+            },
+            on('&:focus-visible', {
+              outline: 'none',
+            }),
+            on('@supports not (field-sizing: content)', {
+              width: 63,
+            }),
+            on('@supports (field-sizing: content)', {
+              fieldSizing: 'content',
+            }),
+          )}
           onBlur={onBlur}
           onChange={onChange}
           onKeyDown={onKeyDown}
@@ -86,15 +92,21 @@ export const Inputs = memo(
           type="text"
           name="y"
           value={coordinates?.y ?? '...'}
-          style={css({
-            ...inputStyle,
-            textAlign: 'left',
-            on: ($) => [
-              $('&:focus-visible', {
-                outline: 'none',
-              }),
-            ],
-          })}
+          style={pipe(
+            {
+              ...inputStyle,
+              textAlign: 'left',
+            },
+            on('&:focus-visible', {
+              outline: 'none',
+            }),
+            on('@supports not (field-sizing: content)', {
+              width: 63,
+            }),
+            on('@supports (field-sizing: content)', {
+              fieldSizing: 'content',
+            }),
+          )}
           onBlur={onBlur}
           onChange={onChange}
           onKeyDown={onKeyDown}