enable Oxfmt TW classes sort, bump dependencies (#2144)

Author: Simek

.oxfmtrc.json

@@ -17,6 +17,9 @@
     "README.md",
     "next-env.d.ts"
   ],
+  "experimentalTailwindcss": {
+    "functions": ["tw"]
+  },
   "experimentalSortImports": {
     "groups": [
       ["side-effect"],

bun.lock

@@ -56,7 +56,7 @@ export function createTextComponent(
         id={id}
         numberOfLines={numberOfLines}
         style={[
-          tw`font-sans font-normal my-0 text-black dark:text-white`,
+          tw`font-sans my-0 font-normal text-black dark:text-white`,
           elementStyle as StyleProp<Style>,
           textStyle,
           style,

common/styleguide.tsx

@@ -24,7 +24,7 @@ export function Button({
 }: Props) {
   const isLink = !!href;
   const buttonStyle = [
-    tw`justify-center items-center rounded outline-offset-1 cursor-pointer select-none bg-primary-darker dark:bg-primary-dark`,
+    tw`cursor-pointer select-none items-center justify-center rounded bg-primary-darker outline-offset-1 dark:bg-primary-dark`,
     style,
   ] as ViewStyle[];
 
@@ -39,7 +39,7 @@ export function Button({
         <A
           href={href}
           role="button"
-          style={[tw`rounded font-sans no-underline`, containerStyle]}
+          style={[tw`font-sans rounded no-underline`, containerStyle]}
           {...(openInNewTab ? { target: '_blank' } : {})}
           {...(href?.startsWith('#') ? { target: '_self' } : {})}
           {...rest}>

components/Button.tsx

@@ -13,7 +13,7 @@ export default function CheckBox({ style, value }: Props) {
   return (
     <View
       style={[
-        tw`size-[18px] items-center justify-center border-2 rounded-sm mr-2`,
+        tw`mr-2 size-[18px] items-center justify-center rounded-sm border-2`,
         value
           ? tw`border-primary-dark bg-primary-dark`
           : tw`border-palette-gray4 bg-white dark:border-default dark:bg-dark`,

components/CheckBox.tsx

@@ -29,14 +29,14 @@ export default function CompatibilityTags({ library }: Props) {
       {library.dev ? (
         <Tag
           label="Development Tool"
-          tagStyle={tw`bg-[#ece3fc] border-[#d9c8fa] dark:bg-[#261a3d] dark:border-[#3d2861]`}
+          tagStyle={tw`border-[#d9c8fa] bg-[#ece3fc] dark:border-[#3d2861] dark:bg-[#261a3d]`}
           icon={null}
         />
       ) : null}
       {library.template ? (
         <Tag
           label="Template"
-          tagStyle={tw`bg-[#fce1f5] border-[#f5c6e8] dark:bg-[#37172e] dark:border-[#52213e]`}
+          tagStyle={tw`border-[#f5c6e8] bg-[#fce1f5] dark:border-[#52213e] dark:bg-[#37172e]`}
           icon={null}
         />
       ) : null}
@@ -46,7 +46,7 @@ export default function CompatibilityTags({ library }: Props) {
           <Tag
             label={platform}
             key={`${platform}-platform`}
-            tagStyle={tw`bg-palette-gray1 border-palette-gray2 dark:bg-dark dark:border-default`}
+            tagStyle={tw`border-palette-gray2 bg-palette-gray1 dark:border-default dark:bg-dark`}
           />
         ) : null
       )}
@@ -55,7 +55,7 @@ export default function CompatibilityTags({ library }: Props) {
           side="bottom"
           trigger={
             <View
-              style={tw`items-center justify-center cursor-pointer rounded-full`}
+              style={tw`cursor-pointer items-center justify-center rounded-full`}
               role="button"
               aria-label="Additional information">
               <Info style={tw`text-icon`} />
@@ -74,7 +74,7 @@ export default function CompatibilityTags({ library }: Props) {
                 <br />
                 <A
                   href={`https://www.npmjs.com/package/${library.vegaos}`}
-                  style={tw`text-xs text-white font-light`}>
+                  style={tw`text-xs font-light text-white`}>
                   (via dedicated support package)
                 </A>
               </li>

components/CompatibilityTags.tsx

@@ -4,5 +4,5 @@ import { View, type ViewProps } from 'react-native';
 import tw from '~/util/tailwind';
 
 export default function ContentContainer({ children, style }: PropsWithChildren<ViewProps>) {
-  return <View style={[tw`w-full mx-auto max-w-layout flex-1`, style]}>{children}</View>;
+  return <View style={[tw`mx-auto w-full max-w-layout flex-1`, style]}>{children}</View>;
 }

components/ContentContainer.tsx

@@ -41,20 +41,20 @@ export default function ExploreSection({
 
   return (
     <>
-      <H3 style={tw`flex gap-3 pt-3 pb-2 px-2 items-center`} id={hashLink}>
-        {icon && createElement(icon, { style: tw`size-7.5 text-icon mt-px` })}
+      <H3 style={tw`flex items-center gap-3 px-2 pb-2 pt-3`} id={hashLink}>
+        {icon && createElement(icon, { style: tw`size-7.5 mt-px text-icon` })}
         <A
           href={`#${hashLink}`}
           target="_self"
-          style={tw`no-underline text-icon`}
+          style={tw`text-icon no-underline`}
           hoverStyle={tw`text-palette-gray4 dark:text-palette-gray5`}>
           {title}
         </A>
       </H3>
-      <View style={tw`pt-3 flex-1 flex-row flex-wrap`}>
+      <View style={tw`flex-1 flex-row flex-wrap pt-3`}>
         {renderLibs(data.filter(filter), count)}
       </View>
-      <P style={tw`px-6 pt-2 pb-6 text-sm font-light text-secondary`}>
+      <P style={tw`px-6 pb-6 pt-2 text-sm font-light text-secondary`}>
         Want to see more? Check out other{' '}
         <A href={urlWithQuery('/packages', { ...queryParams, ...DEFAULT_PARAMS })} target="_self">
           {title} libraries

components/Explore/ExploreSection.tsx

@@ -46,7 +46,7 @@ export function FilterButton({ isFilterVisible, query, onPress, onClearAllPress,
         onPress={onPress}
         containerStyle={tw`h-full flex-grow`}
         style={[
-          tw`h-full px-2 bg-accented`,
+          tw`h-full bg-accented px-2`,
           isFilterVisible && tw`bg-primary-dark`,
           isFilterCount && tw`rounded-r-none`,
         ]}>
@@ -58,14 +58,14 @@ export function FilterButton({ isFilterVisible, query, onPress, onClearAllPress,
               height={12}
             />
           </View>
-          <P style={tw`text-sm ml-1.5 text-white select-none`}>
+          <P style={tw`ml-1.5 select-none text-sm text-white`}>
             Filters{isFilterCount ? `: ${filterCount}` : ''}
           </P>
         </View>
       </Button>
       {filterCount > 0 && (
         <View
-          style={tw`h-full justify-center items-center rounded-r border-l border-palette-gray6 bg-accented dark:border-dark`}>
+          style={tw`h-full items-center justify-center rounded-r border-l border-palette-gray6 bg-accented dark:border-dark`}>
           <ClearButton onPress={onClearAllPress} />
         </View>
       )}

components/Filters/FilterButton.tsx

@@ -13,7 +13,7 @@ export default function FiltersSection({ title, children, rightSlot }: Props) {
   const { isSmallScreen } = useLayout();
 
   return (
-    <View style={[tw`px-4 py-2 max-w-layout`, isSmallScreen && tw`max-w-full`]}>
+    <View style={[tw`max-w-layout px-4 py-2`, isSmallScreen && tw`max-w-full`]}>
       <Headline style={[tw`mb-2 font-semibold text-secondary`, rightSlot && tw`mb-1`]}>
         {title}
         {rightSlot}