chore: replace iconify plugin

Signed-off-by: Innei <[email protected]>

Author: Innei

package.json

@@ -116,9 +116,9 @@
     "xss": "1.0.15"
   },
   "devDependencies": {
+    "@egoist/tailwindcss-icons": "1.8.1",
     "@iconify-json/material-symbols": "1.2.1",
     "@iconify-json/mingcute": "1.2.0",
-    "@iconify/tailwind": "1.1.3",
     "@innei/prettier": "0.15.0",
     "@mx-space/webhook": "0.5.0",
     "@next/bundle-analyzer": "14.2.13",

plugins/tw-css-plugin.js

@@ -0,0 +1,24 @@
+// https://github.com/tailwindlabs/tailwindcss-intellisense/issues/227#issuecomment-1462034856
+// cssAsPlugin.js
+const postcss = require('postcss')
+const postcssJs = require('postcss-js')
+const { readFileSync } = require('node:fs')
+
+require.extensions['.css'] = function (module, filename) {
+  const cssAsPlugin = ({ addBase, addComponents, addUtilities }) => {
+    const css = readFileSync(filename, 'utf8')
+    const root = postcss.parse(css)
+    const jss = postcssJs.objectify(root)
+
+    if ('@layer base' in jss) {
+      addBase(jss['@layer base'])
+    }
+    if ('@layer components' in jss) {
+      addComponents(jss['@layer components'])
+    }
+    if ('@layer utilities' in jss) {
+      addUtilities(jss['@layer utilities'])
+    }
+  }
+  module.exports = cssAsPlugin
+}

pnpm-lock.yaml

@@ -52,7 +52,7 @@ export const ActivityCard = ({ activity }: { activity: ReactActivityType }) => {
                 iconClassName,
               )}
             >
-              <i className="icon-[mingcute--comment-line]" />
+              <i className="i-mingcute-comment-line" />
             </div>
             <div className="flex items-center gap-2 pl-8">
               <div className="space-x-2">
@@ -175,7 +175,7 @@ export const ActivityCard = ({ activity }: { activity: ReactActivityType }) => {
         return (
           <div className="flex translate-y-1/4 items-start gap-2">
             <span className={clsx(iconClassName)}>
-              <i className="icon-[mingcute--heart-line]" />
+              <i className="i-mingcute-heart-line" />
             </span>
             <div className="space-x-2">
               <small>有人点赞了</small> {TitleLink}

src/app/(app)/(home)/components/ActivityCard.tsx

@@ -52,7 +52,7 @@ export const ActivityPostList = () => {
         className="flex items-center justify-end opacity-70 duration-200 hover:text-accent"
         href={routeBuilder(Routes.Posts, {})}
       >
-        <i className="icon-[mingcute--arrow-right-circle-line]" />
+        <i className="i-mingcute-arrow-right-circle-line" />
         <span className="ml-2">还有更多</span>
       </Link>
 
@@ -85,7 +85,7 @@ export const ActivityPostList = () => {
         className="flex items-center justify-end opacity-70 duration-200 hover:text-accent"
         href={routeBuilder(Routes.Timelime, { type: 'note' })}
       >
-        <i className="icon-[mingcute--arrow-right-circle-line]" />
+        <i className="i-mingcute-arrow-right-circle-line" />
         <span className="ml-2">还有更多</span>
       </Link>
     </m.section>

src/app/(app)/(home)/components/ActivityPostList.tsx

@@ -142,7 +142,7 @@ const Hero = () => {
             <span className="opacity-80">{description}</span>
           </BottomToUpTransitionView>
 
-          <ul className="mx-[60px] mt-8 flex flex-wrap gap-6 center lg:mx-auto lg:mt-28 lg:justify-start lg:gap-4">
+          <ul className="center mx-[60px] mt-8 flex flex-wrap gap-6 lg:mx-auto lg:mt-28 lg:justify-start lg:gap-4">
             {Object.entries(socialIds || noopObj).map(
               ([type, id]: any, index) => {
                 if (!isSupportIcon(type)) return null
@@ -181,16 +181,16 @@ const Hero = () => {
           animate={{ opacity: 1, y: 0 }}
           transition={softBouncePreset}
           className={clsx(
-            'inset-x-0 bottom-0 mt-12 flex flex-col center lg:absolute lg:mt-0',
+            'center inset-x-0 bottom-0 mt-12 flex flex-col lg:absolute lg:mt-0',
 
-            'text-neutral-800/80 center dark:text-neutral-200/80',
+            'center text-neutral-800/80 dark:text-neutral-200/80',
           )}
         >
           <small className="text-center">
             当第一颗卫星飞向大气层外，我们便以为自己终有一日会征服宇宙。
           </small>
           <span className="mt-8 animate-bounce">
-            <i className="icon-[mingcute--right-line] rotate-90 text-2xl" />
+            <i className="i-mingcute-right-line rotate-90 text-2xl" />
           </span>
         </m.div>
       </TwoColumnLayout>
@@ -273,7 +273,7 @@ const Windsock = () => {
   const { present: presentSubscribe } = usePresentSubscribeModal()
   return (
     <>
-      <div className="mt-28 flex flex-col center">
+      <div className="center mt-28 flex flex-col">
         <div className="my-5 text-2xl font-medium">风向标</div>
         <div className="mb-24 opacity-90">去到别去看看？</div>
         <ul className="flex flex-col flex-wrap gap-2 gap-y-8 opacity-80 lg:flex-row">
@@ -325,7 +325,7 @@ const Windsock = () => {
 
       <div className="mt-24 flex justify-center gap-4">
         <StyledButton
-          className="flex gap-2 bg-red-400 center"
+          className="center flex gap-2 bg-red-400"
           onClick={() => {
             apiClient
               .proxy('like_this')
@@ -339,7 +339,7 @@ const Windsock = () => {
             toast('谢谢你！', undefined, {
               iconElement: (
                 <m.i
-                  className="icon-[mingcute--heart-fill] text-uk-red-light"
+                  className="i-mingcute-heart-fill text-uk-red-light"
                   initial={{
                     scale: 0.96,
                   }}
@@ -357,20 +357,20 @@ const Windsock = () => {
             })
           }}
         >
-          喜欢本站 <i className="icon-[mingcute--heart-fill]" />{' '}
+          喜欢本站 <i className="i-mingcute-heart-fill" />{' '}
           <NumberSmoothTransition>
             {count as any as string}
           </NumberSmoothTransition>
         </StyledButton>
 
         <StyledButton
-          className="flex gap-2 center"
+          className="center flex gap-2"
           onClick={() => {
             presentSubscribe()
           }}
         >
           订阅
-          <i className="icon-[material-symbols--notifications-active]" />
+          <i className="i-material-symbols-notifications-active" />
         </StyledButton>
       </div>
     </>

src/app/(app)/(home)/page.tsx

@@ -75,7 +75,7 @@ export default function Page() {
                   >
                     {child.title}
                   </Link>
-                  <span className="meta">
+                  <span>
                     {(date.getMonth() + 1).toString().padStart(2, '0')}/
                     {date.getDate().toString().padStart(2, '0')}/
                     {date.getFullYear()}

src/app/(app)/(note-topic)/notes/(topic-detail)/topics/[slug]/page.tsx

@@ -39,7 +39,7 @@ export default definePrerenderPage()({
                   >
                     {item.name}
                   </Link>
-                  <span className="meta">
+                  <span>
                     {(date.getMonth() + 1).toString().padStart(2, '0')}/
                     {date.getDate().toString().padStart(2, '0')}/
                     {date.getFullYear()}

src/app/(app)/(note-topic)/notes/topics/page.tsx

@@ -99,7 +99,7 @@ const PostBox = () => {
           handleSend()
         }}
       >
-        <div className="absolute bottom-2 right-2 flex size-5 center">
+        <div className="center absolute bottom-2 right-2 flex size-5">
           <MotionButtonBase
             onClick={() => handleSend()}
             disabled={value.length === 0 || isPending}
@@ -250,7 +250,7 @@ const List = () => {
                 <div
                   className={clsx(
                     'mt-4 space-x-8 opacity-50 duration-200 hover:opacity-100',
-                    '[&_button:hover]:text-accent [&_button]:inline-flex [&_button]:space-x-1 [&_button]:text-sm [&_button]:center',
+                    '[&_button]:center [&_button:hover]:text-accent [&_button]:inline-flex [&_button]:space-x-1 [&_button]:text-sm',
                     '[&_button]:-my-5 [&_button]:-ml-5 [&_button]:p-5',
                   )}
                 >
@@ -262,7 +262,7 @@ const List = () => {
                       })
                     }}
                   >
-                    <i className="icon-[mingcute--comment-line]" />
+                    <i className="i-mingcute-comment-line" />
 
                     <span className="sr-only">评论</span>
                     <span>
@@ -276,7 +276,7 @@ const List = () => {
                       handleUp(item.id)
                     }}
                   >
-                    <i className="icon-[mingcute--heart-line]" />
+                    <i className="i-mingcute-heart-line" />
                     <span className="sr-only">喜欢</span>
                     <span>{item.up}</span>
                   </button>
@@ -286,7 +286,7 @@ const List = () => {
                       handleDown(item.id)
                     }}
                   >
-                    <i className="icon-[mingcute--heart-crack-line]" />
+                    <i className="i-mingcute-heart-crack-line" />
                     <span className="sr-only">不喜欢</span>
                     <span>{item.down}</span>
                   </button>
@@ -368,7 +368,7 @@ const DeleteButton = (props: { id: string }) => {
         })
       }}
     >
-      <i className="icon-[mingcute--delete-line]" />
+      <i className="i-mingcute-delete-line" />
       <span className="sr-only">删除</span>
     </button>
   )
@@ -407,7 +407,7 @@ const RefPreview: FC<{ refModel: any }> = (props) => {
     <>
       <Divider className="my-4 w-12 bg-current opacity-50" />
       <p className="flex items-center space-x-2 opacity-80">
-        发表于： <i className="icon-[mingcute--link-3-line]" />
+        发表于： <i className="i-mingcute-link-3-line" />
         <PeekLink href={url} className="shiro-link--underline">
           {title}
         </PeekLink>

src/app/(app)/thinking/page.tsx

@@ -71,7 +71,7 @@ export default (function Page() {
           }}
           className="card-shadow"
         >
-          <i className="icon-[mingcute--add-line] text-white" />
+          <i className="i-mingcute-add-line text-white" />
         </RoundedIconButton>
       </OffsetHeaderLayout>
     </div>