fix: add postcss-replace plugin and update global styles (#5488)

common/shared/package.json

@@ -35,6 +35,7 @@
         "happy-dom": "18.0.1",
         "javascript-obfuscator": "^4.1.1",
         "postcss-preset-env": "^10.2.4",
+        "postcss-replace": "^2.0.1",
         "sort-keys": "^5.1.0",
         "tailwind-scrollbar": "^4.0.2",
         "tailwindcss": "3.4.17",

common/shared/postcss/postcss.config.mjs

@@ -1,5 +1,6 @@
 import autoprefixer from 'autoprefixer';
 import env from 'postcss-preset-env';
+import replace from 'postcss-replace';
 import tailwindcss from 'tailwindcss';
 
 /** @type {import('postcss-load-config').Config} */
@@ -13,6 +14,12 @@ const config = {
                 'hexadecimal-alpha-notation': true,
             },
         }),
+        replace({
+            pattern: /(--tw|\*)/g,
+            data: {
+                '--tw': '--univer-tw',
+            },
+        }),
     ],
 };
 

packages/design/src/global.css

@@ -1,2 +1,3 @@
+@tailwind base;
 @tailwind components;
 @tailwind utilities;

packages/sheets-formula-ui/src/views/formula-editor/index.tsx

@@ -315,6 +315,7 @@ export const FormulaEditor = forwardRef((props: IFormulaEditorProps, ref: Ref<IF
     return (
         <div className={className}>
             <div
+                ref={sheetEmbeddingRef}
                 className={clsx(
                     `
                       univer-relative univer-box-border univer-flex univer-h-full univer-w-full univer-items-center
@@ -325,7 +326,6 @@ export const FormulaEditor = forwardRef((props: IFormulaEditorProps, ref: Ref<IF
                         'univer-ring-red-500': isError,
                     }
                 )}
-                ref={sheetEmbeddingRef}
             >
                 <div
                     ref={formulaEditorContainerRef}

pnpm-lock.yaml

@@ -155,6 +155,9 @@ importers:
       postcss-preset-env:
         specifier: ^10.2.4
         version: 10.2.4(postcss@8.5.6)
+      postcss-replace:
+        specifier: ^2.0.1
+        version: 2.0.1(postcss@8.5.6)
       sort-keys:
         specifier: ^5.1.0
         version: 5.1.0
@@ -8770,6 +8773,10 @@ packages:
   keyv@4.5.4:
     resolution: {integrity: sha512-oxVHkHR/EJf2CNXnWxRLW6mg7JyCCUcG0DtEGmL2ctUo1PNTin1PUil+r/+4r5MpVgC/fn1kjsx7mjSujKqIpw==}
 
+  kind-of@6.0.3:
+    resolution: {integrity: sha512-dcS1ul+9tmeD95T+x28/ehLgd9mENa3LsvDTtzm3vyBEO7RPptvAD+t44WVXaUjTBRcrpFeFlC8WCruUR456hw==}
+    engines: {node: '>=0.10.0'}
+
   kolorist@1.8.0:
     resolution: {integrity: sha512-Y+60/zizpJ3HRH8DCss+q95yr6145JXZo46OTpFvDZWLfRCE4qChOyk1b26nMaNpfHHgxagk9dXT5OP0Tfe+dQ==}
 
@@ -9313,6 +9320,10 @@ packages:
     resolution: {integrity: sha512-NuAESUOUMrlIXOfHKzD6bpPu3tYt3xvjNdRIQ+FeT0lNb4K8WR70CaDxhuNguS2XG+GjkyMwOzsN5ZktImfhLA==}
     engines: {node: '>= 0.4'}
 
+  object-path@0.11.8:
+    resolution: {integrity: sha512-YJjNZrlXJFM42wTBn6zgOJVar9KFJvzx6sTWDte8sWZF//cnjl0BxHNpfZx+ZffXX63A9q0b1zsFiBX4g4X5KA==}
+    engines: {node: '>= 10.12.0'}
+
   object.assign@4.1.7:
     resolution: {integrity: sha512-nK28WOo+QIjBkDduTINE4JkF/UJJKyf2EJxvJKfblDpyg0Q+pkOHNTL0Qwy6NP6FhE/EnzV73BxxqcJaXY9anw==}
     engines: {node: '>= 0.4'}
@@ -9823,6 +9834,12 @@ packages:
     peerDependencies:
       postcss: ^8.0.3
 
+  postcss-replace@2.0.1:
+    resolution: {integrity: sha512-T83GVovCkBQkFCTmuid0B2bWNu/O0Bh/HDMeEGFC62EwMvVBLZQFYM7iBbcGT48QDXSNSX6e/X1Q7/Syh5NFng==}
+    engines: {node: ^12 || ^14 || >=16}
+    peerDependencies:
+      postcss: ^8.4
+
   postcss-selector-not@8.0.1:
     resolution: {integrity: sha512-kmVy/5PYVb2UOhy0+LqUYAhKj7DUGDpSWa5LZqlkWJaaAV+dxxsOG3+St0yNLu6vsKD7Dmqx+nWQt0iil89+WA==}
     engines: {node: '>=18'}
@@ -16950,6 +16967,8 @@ snapshots:
     dependencies:
       json-buffer: 3.0.1
 
+  kind-of@6.0.3: {}
+
   kolorist@1.8.0: {}
 
   levn@0.3.0:
@@ -17640,6 +17659,8 @@ snapshots:
 
   object-keys@1.1.1: {}
 
+  object-path@0.11.8: {}
+
   object.assign@4.1.7:
     dependencies:
       call-bind: 1.0.8
@@ -18227,6 +18248,12 @@ snapshots:
     dependencies:
       postcss: 8.5.6
 
+  postcss-replace@2.0.1(postcss@8.5.6):
+    dependencies:
+      kind-of: 6.0.3
+      object-path: 0.11.8
+      postcss: 8.5.6
+
   postcss-selector-not@8.0.1(postcss@8.5.6):
     dependencies:
       postcss: 8.5.6