fix: dynamic rootValue in css file not work

playground/spa/__tests__/spa.spec.ts

@@ -48,6 +48,31 @@ describe('pxtorem - width 700', () => {
     const fontSize = await getFontsize('#c_1')
     expect(fontSize).toBe(`${Number.parseFloat(rem) / 2}px`)
   })
+
+  test('should d_1 fontsize be rem', async ({ rem }) => {
+    const fontSize = await getFontsize('#d_1')
+    expect(fontSize).toBe(rem)
+  })
+
+  test('should d_2 fontsize be half rem', async ({ rem }) => {
+    const fontSize = await getFontsize('#d_2')
+    expect(fontSize).toBe(`${Number.parseFloat(rem) / 2}px`)
+  })
+
+  test('should d_3 fontsize be double rem', async ({ rem }) => {
+    const fontSize = await getFontsize('#d_3')
+    expect(fontSize).toBe(`${Number.parseFloat(rem) * 2}px`)
+  })
+
+  test('should d_4 fontsize be double rem', async ({ rem }) => {
+    const fontSize = await getFontsize('#d_4')
+    expect(fontSize).toBe(`${Number.parseFloat(rem) * 2}px`)
+  })
+
+  test('should e_1 fontsize be rem', async ({ rem }) => {
+    const fontSize = await getFontsize('#e_1')
+    expect(fontSize).toBe(rem)
+  })
 })
 
 describe('pxtorem - width 1120', () => {
@@ -91,6 +116,31 @@ describe('pxtorem - width 1120', () => {
     const fontSize = await getFontsize('#c_1')
     expect(fontSize).toBe(`${Number.parseFloat(rem) / 2}px`)
   })
+
+  test('should d_1 fontsize be rem', async ({ rem }) => {
+    const fontSize = await getFontsize('#d_1')
+    expect(fontSize).toBe(rem)
+  })
+
+  test('should d_2 fontsize be half rem', async ({ rem }) => {
+    const fontSize = await getFontsize('#d_2')
+    expect(fontSize).toBe(`${Number.parseFloat(rem) / 2}px`)
+  })
+
+  test('should d_3 fontsize be double rem', async ({ rem }) => {
+    const fontSize = await getFontsize('#d_3')
+    expect(fontSize).toBe(`${Number.parseFloat(rem) * 2}px`)
+  })
+
+  test('should d_4 fontsize be double rem', async ({ rem }) => {
+    const fontSize = await getFontsize('#d_4')
+    expect(fontSize).toBe(`${Number.parseFloat(rem) * 2}px`)
+  })
+
+  test('should e_1 fontsize be rem', async ({ rem }) => {
+    const fontSize = await getFontsize('#e_1')
+    expect(fontSize).toBe(rem)
+  })
 })
 
 describe('pxtorem - width 1960', () => {
@@ -134,4 +184,29 @@ describe('pxtorem - width 1960', () => {
     const fontSize = await getFontsize('#c_1')
     expect(fontSize).toBe(`${Number.parseFloat(rem) / 2}px`)
   })
+
+  test('should d_1 fontsize be rem', async ({ rem }) => {
+    const fontSize = await getFontsize('#d_1')
+    expect(fontSize).toBe(rem)
+  })
+
+  test('should d_2 fontsize be half rem', async ({ rem }) => {
+    const fontSize = await getFontsize('#d_2')
+    expect(fontSize).toBe(`${Number.parseFloat(rem) / 2}px`)
+  })
+
+  test('should d_3 fontsize be double rem', async ({ rem }) => {
+    const fontSize = await getFontsize('#d_3')
+    expect(fontSize).toBe(`${Number.parseFloat(rem) * 2}px`)
+  })
+
+  test('should d_4 fontsize be double rem', async ({ rem }) => {
+    const fontSize = await getFontsize('#d_4')
+    expect(fontSize).toBe(`${Number.parseFloat(rem) * 2}px`)
+  })
+
+  test('should e_1 fontsize be rem', async ({ rem }) => {
+    const fontSize = await getFontsize('#e_1')
+    expect(fontSize).toBe(rem)
+  })
 })

playground/spa/package.json

@@ -21,8 +21,6 @@
     "@types/react-dom": "^18.0.11",
     "@vitejs/plugin-react": "^3.1.0",
     "postcss": "^8.4.21",
-    "postcss-import": "^15.1.0",
-    "postcss-nested": "^6.0.1",
     "tailwindcss": "^3.2.7",
     "typescript": "^4.9.5",
     "vite": "^4.4.9",

playground/spa/src/App.css

@@ -4,39 +4,3 @@
   padding: 2rem;
   text-align: center;
 }
-
-.logo {
-  height: 6em;
-  padding: 1.5em;
-  will-change: filter;
-  transition: filter 300ms;
-}
-.logo:hover {
-  filter: drop-shadow(0 0 2em #646cffaa);
-}
-.logo.react:hover {
-  filter: drop-shadow(0 0 2em #61dafbaa);
-}
-
-@keyframes logo-spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
-}
-
-@media (prefers-reduced-motion: no-preference) {
-  a:nth-of-type(2) .logo {
-    animation: logo-spin infinite 20s linear;
-  }
-}
-
-.card {
-  padding: 2em;
-}
-
-.read-the-docs {
-  color: #888;
-}

playground/spa/src/App.tsx

@@ -3,6 +3,8 @@ import { useWindowSize } from 'react-use'
 import A from './components/A'
 import B from './components/B'
 import C from './components/C'
+import D from './components/D'
+import E from './components/E'
 import { DEVICE } from './device'
 import './App.css'
 
@@ -50,6 +52,8 @@ function App() {
       <A />
       <B />
       <C />
+      <D />
+      <E />
     </div>
   )
 }

playground/spa/src/components/D/index.module.css

@@ -0,0 +1,17 @@
+.d1 {
+  font-size: 16px;
+}
+
+/* pxtorem?rootValue=32 */
+.d2 {
+  font-size: 16px;
+}
+
+/* pxtorem?rootValue=8 */
+.d3 {
+  font-size: 16px;
+}
+
+.d4 {
+  font-size: 16px;
+}

playground/spa/src/components/D/index.tsx

@@ -0,0 +1,22 @@
+import styles from './index.module.css'
+
+const D = () => {
+  return (
+    <div className={'box'}>
+      <div id='d_1' className={styles.d1}>
+        这是在css文件中不修改rootValue的16px
+      </div>
+      <div id='d_2' className={styles.d2}>
+        这是在css文件中动态修改rootValue为32px后的16px（缩小一倍）
+      </div>
+      <div id='d_3' className={styles.d3}>
+        这是在css文件中动态修改rootValue为8px后的16px（放大一倍）
+      </div>
+      <div id='d_4' className={styles.d4}>
+        放大一倍
+      </div>
+    </div>
+  )
+}
+
+export default D

playground/spa/src/components/E/index.module.css

@@ -0,0 +1,3 @@
+.e1 {
+  font-size: 16px;
+}

playground/spa/src/components/E/index.tsx

@@ -0,0 +1,13 @@
+import styles from './index.module.css'
+
+const E = () => {
+  return (
+    <div className={'box'}>
+      <div id='e_1' className={styles.e1}>
+        1rem
+      </div>
+    </div>
+  )
+}
+
+export default E

playground/spa/src/index.css

@@ -19,65 +19,10 @@ body {
   -webkit-text-size-adjust: 100%;
 }
 
-a {
-  font-weight: 500;
-  color: #646cff;
-  text-decoration: inherit;
-}
-
-a:hover {
-  color: #535bf2;
-}
-
-body {
-  margin: 0;
-  display: flex;
-  place-items: center;
-  min-width: 320px;
-  min-height: 100vh;
-}
-
-h1 {
-  font-size: 3.2em;
-  line-height: 1.1;
-}
-
-button {
-  border-radius: 8px;
-  border: 1px solid transparent;
-  padding: 0.6em 1.2em;
-  font-size: 1em;
-  font-weight: 500;
-  font-family: inherit;
-  background-color: #1a1a1a;
-  cursor: pointer;
-  transition: border-color 0.25s;
-}
-
-button:hover {
-  border-color: #646cff;
-}
-
-button:focus,
-button:focus-visible {
-  outline: 4px auto -webkit-focus-ring-color;
-}
-
 @media (prefers-color-scheme: light) {
   :root {
     color: #213547;
     background-color: #ffffff;
   }
-
-  a:hover {
-    color: #747bff;
-  }
-
-  button {
-    background-color: #f9f9f9;
-  }
 }
 
-.box {
-  @apply flex flex-col border-2 rounded-lg p-[8px] border-zinc-400;
-}

playground/spa/src/tailwind.css

@@ -1,4 +1,11 @@
 @tailwind base;
+
 @tailwind components;
+
 @tailwind utilities;
+
 @tailwind variants;
+
+.box {
+  @apply flex flex-col border-2 rounded-lg p-[8px] border-zinc-400;
+}

playground/temp-spa/.gitignore

@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

playground/temp-spa/index.html

@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>pxtorem playground</title>
+</head>
+
+<body>
+  <div id="root"></div>
+  <script type="module" src="/src/main.tsx"></script>
+</body>
+
+</html>

playground/temp-spa/package.json

@@ -0,0 +1,29 @@
+{
+  "name": "vite-project",
+  "version": "0.0.0",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "npm run build && vite preview"
+  },
+  "dependencies": {
+    "classnames": "^2.3.2",
+    "modern-flexible": "^0.0.3",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-use": "^17.4.0"
+  },
+  "devDependencies": {
+    "@minko-fe/postcss-pxtorem": "workspace:*",
+    "@types/react": "^18.0.29",
+    "@types/react-dom": "^18.0.11",
+    "@vitejs/plugin-react": "^3.1.0",
+    "postcss": "^8.4.21",
+    "tailwindcss": "^3.2.7",
+    "typescript": "^4.9.5",
+    "vite": "^4.4.9",
+    "vite-plugin-public-typescript": "^1.5.5"
+  }
+}