feat: add postcss-preset-env for enhanced CSS features and refactor A…

…lphaSlider styles (#4486)
dream-num · Jan 15, 2025 · fdd876b · fdd876b
1 parent bd9da5d
commit fdd876b
Show file tree

Hide file tree

Showing 4 changed files with 925 additions and 7 deletions.
diff --git a/common/shared/package.json b/common/shared/package.json
@@ -33,6 +33,7 @@
         "fs-extra": "^11.2.0",
         "happy-dom": "15.0.0",
         "javascript-obfuscator": "^4.1.1",
+        "postcss-preset-env": "^10.1.3",
         "sort-keys": "^5.1.0",
         "tailwind-scrollbar": "^3.1.0",
         "tailwindcss": "^3.4.17",

diff --git a/common/shared/postcss/postcss.config.mjs b/common/shared/postcss/postcss.config.mjs
@@ -1,11 +1,18 @@
 import autoprefixer from 'autoprefixer';
+import env from 'postcss-preset-env';
 import tailwindcss from 'tailwindcss';
 
 /** @type {import('postcss-load-config').Config} */
 const config = {
     plugins: [
         tailwindcss,
         autoprefixer,
+        env({
+            features: {
+                'color-functional-notation': true,
+                'hexadecimal-alpha-notation': true,
+            },
+        }),
     ],
 };
 

diff --git a/packages/design/src/components/color-picker/AlphaSlider.tsx b/packages/design/src/components/color-picker/AlphaSlider.tsx
@@ -78,13 +78,12 @@ export const AlphaSlider: React.FC<IAlphaSliderProps> = ({ hsv, alpha, onChange,
         <div className="univer-relative univer-w-full univer-select-none">
             {/* Chessboard background */}
             <div
-                className={`
-                  univer-absolute univer-inset-0 univer-rounded-full
-                  [background-image:linear-gradient(45deg,#E3E5EA_25%,transparent_25%),linear-gradient(-45deg,#E3E5EA_25%,transparent_25%),linear-gradient(45deg,transparent_75%,#E3E5EA_75%),linear-gradient(-45deg,transparent_75%,#E3E5EA_75%)]
-                  [background-position:0_0,0_4px,4px_-4px,-4px_0px]
-                  [background-size:8px_8px]
-                  dark:[background-image:linear-gradient(45deg,#414657_25%,transparent_25%),linear-gradient(-45deg,#414657_25%,transparent_25%),linear-gradient(45deg,transparent_75%,#414657_75%),linear-gradient(-45deg,transparent_75%,#414657_75%)]
-                `}
+                className="univer-absolute univer-inset-0 univer-rounded-full"
+                style={{
+                    backgroundImage: 'linear-gradient(45deg, #E3E5EA 25%, transparent 25%), linear-gradient(-45deg, #E3E5EA 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #E3E5EA 75%), linear-gradient(-45deg, transparent 75%, #E3E5EA 75%)',
+                    backgroundPosition: '0 0, 0 4px, 4px -4px, -4px 0',
+                    backgroundSize: '8px 8px',
+                }}
             />
             {/* Slider */}
             <div