style: use prettier-plugin-tailwindcss and disable sort in lint

RSSNext · Dec 23, 2024 · 36f0d00 · 36f0d00
1 parent 86b5712
commit 36f0d00
Show file tree

Hide file tree

Showing 21 changed files with 106 additions and 36 deletions.
diff --git a/.prettierignore b/.prettierignore
@@ -4,3 +4,6 @@ pnpm-lock.yaml
 CHANGELOG.md
 
 apps/external/postcss.config.cjs
+
+apps/mobile/android
+apps/mobile/ios
diff --git a/.prettierrc.mjs b/.prettierrc.mjs
@@ -4,4 +4,5 @@ export default {
   printWidth: 100,
   tabWidth: 2,
   trailingComma: "all",
+  plugins: ["prettier-plugin-tailwindcss"],
 }
diff --git a/apps/renderer/src/components/ui/code-highlighter/shiki/shiki.module.css b/apps/renderer/src/components/ui/code-highlighter/shiki/shiki.module.css
@@ -1,5 +1,5 @@
 .shiki-wrapper {
-  @apply rounded-md overflow-hidden;
+  @apply overflow-hidden rounded-md;
 
   pre {
     @apply bg-transparent;

diff --git a/apps/renderer/src/modules/achievement/AchievementModalContent.tsx b/apps/renderer/src/modules/achievement/AchievementModalContent.tsx
@@ -250,7 +250,7 @@ export const AchievementModalContent: FC = () => {
                     <div
                       className={styledButtonVariant({
                         variant: "outline",
-                        className: "relative border-0 pointer-events-none",
+                        className: "pointer-events-none relative border-0",
                       })}
                     >
                       <LoadingCircle size="small" className="center absolute inset-0" />
@@ -265,7 +265,7 @@ export const AchievementModalContent: FC = () => {
                       className={styledButtonVariant({
                         variant: "outline",
                         className:
-                          "relative !bg-green-100/50 gap-1 border-green-200 text-green-800 dark:text-foreground dark:!bg-green-100/5 dark:border-green-200/20",
+                          "relative gap-1 border-green-200 !bg-green-100/50 text-green-800 dark:border-green-200/20 dark:!bg-green-100/5 dark:text-foreground",
                       })}
                     >
                       <i className="i-mgc-check-filled" />
@@ -278,7 +278,7 @@ export const AchievementModalContent: FC = () => {
                       className={styledButtonVariant({
                         variant: "outline",
                         className:
-                          "relative cursor-not-allowed !bg-zinc-100/50 gap-1 border-zinc-200 text-zinc-800 dark:text-foreground dark:!bg-zinc-100/5 dark:border-zinc-200/20",
+                          "relative cursor-not-allowed gap-1 border-zinc-200 !bg-zinc-100/50 text-zinc-800 dark:border-zinc-200/20 dark:!bg-zinc-100/5 dark:text-foreground",
                       })}
                     >
                       Validating...
@@ -454,7 +454,7 @@ const IncompleteButton: FC<{
       type="button"
       className={styledButtonVariant({
         variant: "ghost",
-        className: "relative hover:bg-transparent group cursor-pointer",
+        className: "group relative cursor-pointer hover:bg-transparent",
       })}
       onClick={() => {
         checkAchievement(achievement.actionId)

diff --git a/apps/renderer/src/modules/boost/boost-progress.tsx b/apps/renderer/src/modules/boost/boost-progress.tsx
@@ -27,7 +27,7 @@ export const BoostProgress = ({
       <div className="relative -mx-2 pt-12">
         <span
           className={cn(
-            "absolute -bottom-3 mb-10 flex h-7 -translate-x-1/2 items-center justify-center whitespace-nowrap rounded-full p-2 text-sm font-bold text-white transition-all duration-500 ease-out after:absolute after:bottom-[-5px] after:left-1/2 after:-z-10 after:flex after:size-3 after:-translate-x-1/2 after:rotate-45 ",
+            "absolute -bottom-3 mb-10 flex h-7 -translate-x-1/2 items-center justify-center whitespace-nowrap rounded-full p-2 text-sm font-bold text-white transition-all duration-500 ease-out after:absolute after:bottom-[-5px] after:left-1/2 after:-z-10 after:flex after:size-3 after:-translate-x-1/2 after:rotate-45",
             "bg-orange-500 after:bg-orange-500",
             "motion-preset-shake",
           )}

diff --git a/apps/renderer/src/modules/entry-column/Items/audio-item.tsx b/apps/renderer/src/modules/entry-column/Items/audio-item.tsx
@@ -64,15 +64,15 @@ export const AudioItemSkeleton = (
           <div className="flex gap-1 text-[10px] font-bold text-zinc-400 dark:text-neutral-500">
             <Skeleton className="h-3 w-20" />
             <span>·</span>
-            <Skeleton className="h-3 w-10 " />
+            <Skeleton className="h-3 w-10" />
           </div>
           <div className="relative my-0.5 break-words font-medium">
-            <Skeleton className="h-4 w-full " />
-            <Skeleton className="mt-2 h-4 w-3/4 " />
+            <Skeleton className="h-4 w-full" />
+            <Skeleton className="mt-2 h-4 w-3/4" />
           </div>
         </div>
         <div className="relative ml-2 size-20 shrink-0">
-          <Skeleton className="mr-2 size-20 shrink-0 overflow-hidden rounded-sm " />
+          <Skeleton className="mr-2 size-20 shrink-0 overflow-hidden rounded-sm" />
         </div>
       </div>
     </div>

diff --git a/apps/renderer/src/modules/entry-column/Items/notification-item.tsx b/apps/renderer/src/modules/entry-column/Items/notification-item.tsx
@@ -36,13 +36,13 @@ export const NotificationItemSkeleton = (
       <Skeleton className="mr-2 size-5 shrink-0 overflow-hidden rounded-sm" />
       <div className="-mt-0.5 line-clamp-4 flex-1 text-sm leading-tight">
         <div className="flex gap-1 text-[10px] font-bold text-zinc-400 dark:text-neutral-500">
-          <Skeleton className="h-3 w-32 truncate " />
+          <Skeleton className="h-3 w-32 truncate" />
           <span>·</span>
-          <Skeleton className="h-3 w-12 shrink-0 " />
+          <Skeleton className="h-3 w-12 shrink-0" />
         </div>
         <div className="relative my-0.5 break-words">
-          <Skeleton className="h-4 w-full " />
-          <Skeleton className="mt-2 h-4 w-3/4 " />
+          <Skeleton className="h-4 w-full" />
+          <Skeleton className="mt-2 h-4 w-3/4" />
         </div>
       </div>
     </div>

diff --git a/apps/renderer/src/modules/entry-column/Items/picture-item.tsx b/apps/renderer/src/modules/entry-column/Items/picture-item.tsx
@@ -50,7 +50,7 @@ export function PictureItem({ entryId, entryPreview, translation }: UniversalIte
             }}
           />
         ) : (
-          <div className="center aspect-square  w-full flex-col gap-1 rounded-md bg-muted text-xs text-muted-foreground">
+          <div className="center aspect-square w-full flex-col gap-1 rounded-md bg-muted text-xs text-muted-foreground">
             <i className="i-mgc-sad-cute-re size-6" />
             {t("entry_content.no_content")}
           </div>

diff --git a/apps/renderer/src/modules/entry-column/Items/social-media-item.tsx b/apps/renderer/src/modules/entry-column/Items/social-media-item.tsx
@@ -200,18 +200,18 @@ export const SocialMediaItemSkeleton = (
         <div className="ml-2 min-w-0 flex-1">
           <div className="-mt-0.5 line-clamp-5 flex-1 text-sm">
             <div className="flex w-[calc(100%-10rem)] space-x-1">
-              <Skeleton className="h-4 w-16 " />
+              <Skeleton className="h-4 w-16" />
               <span className="text-zinc-500">·</span>
-              <Skeleton className="h-4 w-12 " />
+              <Skeleton className="h-4 w-12" />
             </div>
             <div className="relative mt-0.5 text-sm">
-              <Skeleton className="h-4 w-full " />
-              <Skeleton className="mt-1.5 h-4 w-full " />
-              <Skeleton className="mt-1.5 h-4 w-3/4 " />
+              <Skeleton className="h-4 w-full" />
+              <Skeleton className="mt-1.5 h-4 w-full" />
+              <Skeleton className="mt-1.5 h-4 w-3/4" />
             </div>
           </div>
           <div className="mt-2 flex gap-2 overflow-x-auto">
-            <Skeleton className="size-28 overflow-hidden rounded " />
+            <Skeleton className="size-28 overflow-hidden rounded" />
           </div>
         </div>
       </div>

diff --git a/apps/renderer/src/modules/entry-column/Items/video-item.tsx b/apps/renderer/src/modules/entry-column/Items/video-item.tsx
@@ -218,13 +218,13 @@ export const VideoItemSkeleton = (
         </div>
         <div className="relative flex-1 px-2 pb-3 pt-1 text-sm">
           <div className="relative mb-1 mt-1.5 truncate font-medium leading-none">
-            <Skeleton className="h-4 w-3/4 " />
+            <Skeleton className="h-4 w-3/4" />
           </div>
           <div className="mt-1 flex items-center gap-1 truncate text-[13px]">
             <Skeleton className="mr-0.5 size-4" />
-            <Skeleton className="h-3 w-1/2 " />
+            <Skeleton className="h-3 w-1/2" />
             <span className="text-zinc-500">·</span>
-            <Skeleton className="h-3 w-12 " />
+            <Skeleton className="h-3 w-12" />
           </div>
         </div>
       </div>

diff --git a/apps/renderer/src/modules/entry-column/templates/list-item-template.tsx b/apps/renderer/src/modules/entry-column/templates/list-item-template.tsx
@@ -278,7 +278,7 @@ function AudioCover({
       </div>
 
       {!!estimatedMins && (
-        <div className="absolute bottom-0 w-full overflow-hidden rounded-b-sm text-center ">
+        <div className="absolute bottom-0 w-full overflow-hidden rounded-b-sm text-center">
           <div
             className={cn(
               "absolute left-0 top-0 size-full bg-white/50 opacity-0 duration-200 group-hover:opacity-100 dark:bg-neutral-900/70",

diff --git a/apps/renderer/src/modules/feed-column/header.tsx b/apps/renderer/src/modules/feed-column/header.tsx
@@ -107,7 +107,7 @@ const LayoutActionButton = () => {
             <i
               className={cn(
                 !feedColumnShow
-                  ? "i-mgc-layout-leftbar-open-cute-re "
+                  ? "i-mgc-layout-leftbar-open-cute-re"
                   : "i-mgc-layout-leftbar-close-cute-re",
                 "text-theme-vibrancyFg",
               )}

diff --git a/apps/renderer/src/modules/panel/cmdk.module.css b/apps/renderer/src/modules/panel/cmdk.module.css
@@ -1,8 +1,8 @@
 .status-bar {
-  @apply scale-y-75 z-10 relative h-px w-full shrink-0 transform;
+  @apply relative z-10 h-px w-full shrink-0 scale-y-75 transform;
 
   &.loading::before {
-    @apply scale-y-75 z-10 h-px absolute bottom-0 w-full left-0 top-0 transform;
+    @apply absolute bottom-0 left-0 top-0 z-10 h-px w-full scale-y-75 transform;
     @apply bg-repeat;
 
     content: "";

diff --git a/apps/renderer/src/styles/additional.css b/apps/renderer/src/styles/additional.css
@@ -57,7 +57,7 @@
   }
 
   #root [data-button="true"][data-action="true"] {
-    @apply bg-transparent font-bold font-sans text-foreground relative -mr-[16px] px-4 before:absolute before:inset-y-0 before:left-0 before:w-px before:bg-foreground/30;
+    @apply relative -mr-[16px] bg-transparent px-4 font-sans font-bold text-foreground before:absolute before:inset-y-0 before:left-0 before:w-px before:bg-foreground/30;
   }
 }
 
@@ -69,7 +69,7 @@
     content: "";
     border-radius: var(--border-radius);
 
-    @apply absolute inset-0 pointer-events-none z-[-1] dark:opacity-20 opacity-10 !transform-none;
+    @apply pointer-events-none absolute inset-0 z-[-1] !transform-none opacity-10 dark:opacity-20;
   }
 
   &[data-type="success"]::before {

diff --git a/apps/renderer/src/styles/base.css b/apps/renderer/src/styles/base.css
@@ -28,7 +28,7 @@ body,
 
   @apply font-theme;
 
-  @apply print:overflow-auto print:h-auto;
+  @apply print:h-auto print:overflow-auto;
 }
 
 :focus-visible {
@@ -53,5 +53,5 @@ button {
 }
 
 #react-scan-toolbar {
-  @apply max-lg:!hidden no-drag-region;
+  @apply no-drag-region max-lg:!hidden;
 }
diff --git a/configs/tailwind-extend.css b/configs/tailwind-extend.css
@@ -140,8 +140,8 @@
   .kbd {
     background-color: oklch(0.984625 0.001706 247.839);
     /* @apply shadow-[0px_2px_0px_0px_rgba(255,255,255,0.5)] dark:shadow-[0px_2px_0px_0px_rgba(0,0,0,0.6)]; */
-    @apply text-[0.5em] px-1 rounded-[4px];
-    @apply font-mono border dark:border-neutral-700 border-zinc-300;
+    @apply rounded-[4px] px-1 text-[0.5em];
+    @apply border border-zinc-300 font-mono dark:border-neutral-700;
     @apply inline-flex items-center justify-center;
   }
 

diff --git a/eslint.config.mjs b/eslint.config.mjs
@@ -28,6 +28,9 @@ export default defineConfig(
         }
       : undefined,
     typeChecked: isCI ? "essential" : false,
+    tailwindCSS: {
+      order: false,
+    },
   },
   isCI && {
     files: GLOB_TS_SRC,

diff --git a/package.json b/package.json
@@ -100,6 +100,7 @@
     "postcss": "8.4.49",
     "postcss-js": "4.0.1",
     "prettier": "3.4.2",
+    "prettier-plugin-tailwindcss": "^0.6.9",
     "raw-body": "3.0.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",

diff --git a/packages/components/src/ui/navigation-menu/index.tsx b/packages/components/src/ui/navigation-menu/index.tsx
@@ -55,7 +55,7 @@ const NavigationMenuContent = React.forwardRef<
   <NavigationMenuPrimitive.Content
     ref={ref}
     className={cn(
-      "left-0 top-0 w-full data-[motion^=from-]:animate-in data-[motion^=to-]:animate-out data-[motion^=from-]:fade-in data-[motion^=to-]:fade-out data-[motion=from-end]:slide-in-from-right-52 data-[motion=from-start]:slide-in-from-left-52 data-[motion=to-end]:slide-out-to-right-52 data-[motion=to-start]:slide-out-to-left-52 md:absolute md:w-auto ",
+      "left-0 top-0 w-full data-[motion^=from-]:animate-in data-[motion^=to-]:animate-out data-[motion^=from-]:fade-in data-[motion^=to-]:fade-out data-[motion=from-end]:slide-in-from-right-52 data-[motion=from-start]:slide-in-from-left-52 data-[motion=to-end]:slide-out-to-right-52 data-[motion=to-start]:slide-out-to-left-52 md:absolute md:w-auto",
       className,
     )}
     {...props}

diff --git a/packages/components/src/ui/popover/index.module.css b/packages/components/src/ui/popover/index.module.css
@@ -6,7 +6,7 @@
     rgba(0, 0, 0, 0.067) 0px 1px 1px;
   border-radius: 6px;
 
-  @apply bg-background z-50 outline-none;
+  @apply z-50 bg-background outline-none;
 }
 
 [data-theme="dark"] .popover {

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml