🐛 UnoCSS 加 prefix 解决 CSS冲突、CSS 布局修正 (#1013)

* [v1.3] UnoCSS 加 prefix 解决 CSS冲突

* CSS 布局修正

* inset 兼容修正

* `uno-` -> `tw-` ；符合平常的写法

* presetUno -> presetWind3, 加 extractors 让 vscode 能配对

* Install 頁面 CSS 布局修正

* rspack/postcss/unocss 语法修改

Author: cyfung1031

postcss.config.mjs

@@ -1,5 +1,6 @@
 import UnoCSS from "@unocss/postcss";
+import autoprefixer from "autoprefixer";
 
 export default {
-  plugins: [UnoCSS()],
+  plugins: [UnoCSS(), autoprefixer()],
 };

rspack.config.ts

@@ -66,20 +66,9 @@ export default defineConfig({
   module: {
     rules: [
       {
-        test: /\.css$/,
-        use: [
-          {
-            loader: "postcss-loader",
-            options: {
-              postcssOptions: {
-                plugins: {
-                  autoprefixer: {},
-                },
-              },
-            },
-          },
-        ],
-        type: "css",
+        test: /\.css$/i,
+        type: "css/auto",
+        use: ["postcss-loader"],
       },
       {
         test: /\.(svg|png)$/,

src/index.css

@@ -1,5 +1,6 @@
 @unocss preflights;
 @unocss default;
+@unocss;
 
 body {
     scrollbar-color: var(--color-scrollbar-thumb) var(--color-scrollbar-track);
@@ -17,4 +18,19 @@ body[arco-theme='light'] {
     --color-scrollbar-thumb: #6b6b6b;
     --color-scrollbar-track: #f0f0f0;
     --color-scrollbar-thumb-hover: #8c8c8c;
-}
+}
+
+:root {
+	--sc-zero-1: 0;
+	--sc-zero-2: 0;
+	--sc-zero-3: 0;
+	--sc-zero-4: 0;
+}
+
+/* 自定义 .sc-inset-0 避免打包成 inset: 0 使旧浏览器布局错位 */
+.sc-inset-0 {
+	top: var(--sc-zero-1);
+	left: var(--sc-zero-2);
+	right: var(--sc-zero-3);
+	bottom: var(--sc-zero-4);
+}

src/pages/batchupdate/App.tsx

@@ -256,7 +256,7 @@ function App() {
                   title={
                     <span
                       onClick={() => openUpdatePage(item.uuid)}
-                      className="text-clickable text-gray-900 dark:text-gray-100 !hover:text-blue-600 dark:hover:text-blue-400"
+                      className="tw-text-clickable tw-text-gray-900 dark:tw-text-gray-100 !hover:tw-text-blue-600 dark:hover:tw-text-blue-400"
                     >
                       <Typography.Ellipsis rows={1} expandable={false} showTooltip={{ mini: true }}>
                         {item.script?.name}
@@ -285,7 +285,7 @@ function App() {
                     </>
                   }
                 >
-                  <Space className="pb-2">
+                  <Space className="tw-pb-2">
                     <Space direction="vertical">
                       <Text>{t("updatepage.old_version_")}</Text>
                       <Text>{t("updatepage.new_version_")}</Text>
@@ -377,31 +377,31 @@ function App() {
   return (
     <>
       {
-        <div className="mb-2 text-gray-800 dark:text-gray-200">
-          <div className="flex flex-row items-center gap-2">
-            <Typography.Title heading={6} className="!m-0 text-gray-900 dark:text-gray-100">
+        <div className="tw-mb-2 tw-text-gray-800 dark:tw-text-gray-200">
+          <div className="tw-flex tw-flex-row tw-items-center tw-gap-2">
+            <Typography.Title heading={6} className="!tw-m-0 tw-text-gray-900 dark:tw-text-gray-100">
               {t("updatepage.main_header")}
             </Typography.Title>
             <IconSync
               spin={checkUpdateSpin}
               onClick={() => onCheckUpdateClick()}
-              className="cursor-pointer text-gray-700 dark:text-gray-300"
+              className="tw-cursor-pointer tw-text-gray-700 dark:tw-text-gray-300"
             />
           </div>
-          <div className="flex flex-row indent-4">
-            <Typography.Text className="text-gray-700 dark:text-gray-300">{mStatusText}</Typography.Text>
+          <div className="tw-flex tw-flex-row tw-indent-4">
+            <Typography.Text className="tw-text-gray-700 dark:tw-text-gray-300">{mStatusText}</Typography.Text>
           </div>
           {mRecords === null ? (
             <></>
           ) : (
             <>
               {mRecords.site.length === 0 && mRecords.other.length === 0 ? (
-                <div className="flex flex-row indent-4">
-                  <Text className="text-gray-700 dark:text-gray-300">{t("updatepage.status_no_update")}</Text>
+                <div className="tw-flex tw-flex-row tw-indent-4">
+                  <Text className="tw-text-gray-700 dark:tw-text-gray-300">{t("updatepage.status_no_update")}</Text>
                 </div>
               ) : (
-                <div className="flex flex-row indent-4">
-                  <Text className="text-gray-700 dark:text-gray-300">
+                <div className="tw-flex tw-flex-row tw-indent-4">
+                  <Text className="tw-text-gray-700 dark:tw-text-gray-300">
                     {t("updatepage.status_n_update").replace("$0", `${mRecords.site.length + mRecords.other.length}`)}
                   </Text>
                 </div>
@@ -410,15 +410,15 @@ function App() {
                 // <div><Text>{"没有已忽略的更新"}</Text></div>
                 <></>
               ) : (
-                <div className="flex flex-row indent-4">
-                  <Text className="text-gray-700 dark:text-gray-300">
+                <div className="tw-flex tw-flex-row tw-indent-4">
+                  <Text className="tw-text-gray-700 dark:tw-text-gray-300">
                     {t("updatepage.status_n_ignored").replace("$0", `${mRecords.ignored.length}`)}
                   </Text>
                 </div>
               )}
               {mTimeClose >= 0 ? (
-                <div className="flex flex-row indent-4">
-                  <Text className="text-gray-700 dark:text-gray-300">
+                <div className="tw-flex tw-flex-row tw-indent-4">
+                  <Text className="tw-text-gray-700 dark:tw-text-gray-300">
                     {t("updatepage.status_autoclose").replace("$0", `${mTimeClose}`)}
                   </Text>
                 </div>
@@ -439,9 +439,9 @@ function App() {
             <Collapse
               defaultActiveKey={[]}
               className={[
-                "justify-self-center",
+                "tw-justify-self-center",
                 mRecords.site.length === 0 && mRecords.other.length === 0 && mRecords.ignored.length === 0
-                  ? "hidden"
+                  ? "tw-hidden"
                   : "",
               ]}
               style={{ width: "calc(100vw - 64px)" }}
@@ -481,7 +481,7 @@ function App() {
                   <CollapseItem
                     header={`${t("updatepage.header_other_update")}`}
                     name="list-other"
-                    className={[paramSite ? "" : "hidden"]}
+                    className={[paramSite ? "" : "tw-hidden"]}
                     disabled={!mRecords?.other?.length || isDoingTask}
                     extra={
                       mRecords?.other?.length ? (

src/pages/batchupdate/main.tsx

@@ -21,7 +21,7 @@ loggerCore.logger().debug("batchupdate page start");
 
 const Root = (
   <AppProvider>
-    <MainLayout className="!flex-col !px-4 box-border batchupdate-mainlayout">
+    <MainLayout className="!tw-flex-col !tw-px-4 tw-box-border batchupdate-mainlayout">
       <App />
     </MainLayout>
   </AppProvider>

src/pages/components/ScriptMenuList/index.tsx

@@ -89,7 +89,7 @@ const MenuItem = React.memo(({ menuItems, uuid }: MenuItemProps) => {
       }}
     >
       <Button
-        className="text-left"
+        className="tw-text-left"
         type="secondary"
         htmlType="submit"
         icon={<IconMenu />}
@@ -219,10 +219,10 @@ const ListMenuItem = React.memo(
           name={item.uuid}
           contentStyle={{ padding: "0 0 0 40px" }}
         >
-          <div className="flex flex-col">
+          <div className="tw-flex tw-flex-col">
             {isBackscript && (
               <Button
-                className="text-left"
+                className="tw-text-left"
                 type="secondary"
                 icon={item.runStatus !== SCRIPT_RUN_STATUS_RUNNING ? <RiPlayFill /> : <RiStopFill />}
                 onClick={() => {
@@ -238,7 +238,7 @@ const ListMenuItem = React.memo(
               </Button>
             )}
             <Button
-              className="text-left"
+              className="tw-text-left"
               type="secondary"
               icon={<IconEdit />}
               onClick={() => {
@@ -250,7 +250,7 @@ const ListMenuItem = React.memo(
             </Button>
             {url && isEffective !== null && (
               <Button
-                className="text-left"
+                className="tw-text-left"
                 status="warning"
                 type="secondary"
                 icon={!isEffective ? <IconPlus /> : <IconMinus />}
@@ -264,21 +264,21 @@ const ListMenuItem = React.memo(
               icon={<IconDelete />}
               onOk={() => handleDeleteScript(item.uuid)}
             >
-              <Button className="text-left" status="danger" type="secondary" icon={<IconDelete />}>
+              <Button className="tw-text-left" status="danger" type="secondary" icon={<IconDelete />}>
                 {t("delete")}
               </Button>
             </Popconfirm>
           </div>
         </CollapseItem>
-        <div className="arco-collapse-item-content-box flex flex-col" style={{ padding: "0 0 0 40px" }}>
+        <div className="arco-collapse-item-content-box tw-flex tw-flex-col" style={{ padding: "0 0 0 40px" }}>
           {/* 依数量与展开状态决定要显示的分组项（收合时只显示前 menuExpandNum 笔） */}
           {visibleMenus.map(({ uuid, groupKey, menus }) => {
             // 不同脚本之间可能出现相同的 groupKey；为避免 React key 冲突，需加上 uuid 做区分。
             return <MenuItem key={`${uuid}:${groupKey}`} menuItems={menus} uuid={uuid} />;
           })}
           {shouldShowMore && (
             <Button
-              className="text-left"
+              className="tw-text-left"
               key="expand"
               type="secondary"
               icon={isExpand ? <IconCaretUp /> : <IconCaretDown />}
@@ -289,7 +289,7 @@ const ListMenuItem = React.memo(
           )}
           {item.hasUserConfig && (
             <Button
-              className="text-left"
+              className="tw-text-left"
               key="config"
               type="secondary"
               icon={<IconSettings />}

src/pages/components/ScriptResource/index.tsx

@@ -143,8 +143,8 @@ const ScriptResource: React.FC<{
       onOk={onOk}
       onCancel={onCancel}
     >
-      <Space className="w-full" direction="vertical">
-        <Space className="!flex justify-end">
+      <Space className="tw-w-full" direction="vertical">
+        <Space className="!tw-flex tw-justify-end">
           <Popconfirm
             focusLock
             title={t("confirm_clear_resource")}

src/pages/components/ScriptSetting/Match.tsx

@@ -248,7 +248,7 @@ const Match: React.FC<{
           }}
         />
       </Modal>
-      <div className="flex flex-row justify-between pb-2">
+      <div className="tw-flex tw-flex-row tw-justify-between tw-pb-2">
         <Typography.Title heading={6}>{t("website_match")}</Typography.Title>
         <Space>
           <Button
@@ -277,7 +277,7 @@ const Match: React.FC<{
       </div>
       <Table columns={columns} data={match} rowKey="id" pagination={false} />
       <Divider />
-      <div className="flex flex-row justify-between pb-2">
+      <div className="tw-flex tw-flex-row tw-justify-between tw-pb-2">
         <Typography.Title heading={6}>{t("website_exclude")}</Typography.Title>
         <Space>
           <Button

src/pages/components/ScriptSetting/Permission.tsx

@@ -130,7 +130,7 @@ const PermissionManager: React.FC<{
           }
         }}
       >
-        <Space className="w-full" direction="vertical">
+        <Space className="tw-w-full" direction="vertical">
           <Select
             value={permissionValue?.permission}
             onChange={(e) => {
@@ -156,7 +156,7 @@ const PermissionManager: React.FC<{
           </Checkbox>
         </Space>
       </Modal>
-      <div className="flex flex-row justify-between pb-2">
+      <div className="tw-flex tw-flex-row tw-justify-between tw-pb-2">
         <Typography.Title heading={6}>{t("permission_management")}</Typography.Title>
         <Space>
           <Button

src/pages/components/ScriptStorage/index.tsx

@@ -248,8 +248,8 @@ const ScriptStorage: React.FC<{
           </Form>
         )}
       </Modal>
-      <Space className="w-full" direction="vertical">
-        <Space className="!flex justify-end">
+      <Space className="tw-w-full" direction="vertical">
+        <Space className="!tw-flex tw-justify-end">
           {isEdit ? (
             <>
               <Button