Skip to content

Commit 6cac2fa

Browse files
hemengke1997hemengke1997
committed
fix: dynamic rootValue in css file not work
1 parent 11bbece commit 6cac2fa

33 files changed

+1744
-104
lines changed

‎playground/spa/__tests__/spa.spec.ts

+75
Original file line numberDiff line numberDiff line change
@@ -48,6 +48,31 @@ describe('pxtorem - width 700', () => {
4848
const fontSize = await getFontsize('#c_1')
4949
expect(fontSize).toBe(`${Number.parseFloat(rem) / 2}px`)
5050
})
51+
52+
test('should d_1 fontsize be rem', async ({ rem }) => {
53+
const fontSize = await getFontsize('#d_1')
54+
expect(fontSize).toBe(rem)
55+
})
56+
57+
test('should d_2 fontsize be half rem', async ({ rem }) => {
58+
const fontSize = await getFontsize('#d_2')
59+
expect(fontSize).toBe(`${Number.parseFloat(rem) / 2}px`)
60+
})
61+
62+
test('should d_3 fontsize be double rem', async ({ rem }) => {
63+
const fontSize = await getFontsize('#d_3')
64+
expect(fontSize).toBe(`${Number.parseFloat(rem) * 2}px`)
65+
})
66+
67+
test('should d_4 fontsize be double rem', async ({ rem }) => {
68+
const fontSize = await getFontsize('#d_4')
69+
expect(fontSize).toBe(`${Number.parseFloat(rem) * 2}px`)
70+
})
71+
72+
test('should e_1 fontsize be rem', async ({ rem }) => {
73+
const fontSize = await getFontsize('#e_1')
74+
expect(fontSize).toBe(rem)
75+
})
5176
})
5277

5378
describe('pxtorem - width 1120', () => {
@@ -91,6 +116,31 @@ describe('pxtorem - width 1120', () => {
91116
const fontSize = await getFontsize('#c_1')
92117
expect(fontSize).toBe(`${Number.parseFloat(rem) / 2}px`)
93118
})
119+
120+
test('should d_1 fontsize be rem', async ({ rem }) => {
121+
const fontSize = await getFontsize('#d_1')
122+
expect(fontSize).toBe(rem)
123+
})
124+
125+
test('should d_2 fontsize be half rem', async ({ rem }) => {
126+
const fontSize = await getFontsize('#d_2')
127+
expect(fontSize).toBe(`${Number.parseFloat(rem) / 2}px`)
128+
})
129+
130+
test('should d_3 fontsize be double rem', async ({ rem }) => {
131+
const fontSize = await getFontsize('#d_3')
132+
expect(fontSize).toBe(`${Number.parseFloat(rem) * 2}px`)
133+
})
134+
135+
test('should d_4 fontsize be double rem', async ({ rem }) => {
136+
const fontSize = await getFontsize('#d_4')
137+
expect(fontSize).toBe(`${Number.parseFloat(rem) * 2}px`)
138+
})
139+
140+
test('should e_1 fontsize be rem', async ({ rem }) => {
141+
const fontSize = await getFontsize('#e_1')
142+
expect(fontSize).toBe(rem)
143+
})
94144
})
95145

96146
describe('pxtorem - width 1960', () => {
@@ -134,4 +184,29 @@ describe('pxtorem - width 1960', () => {
134184
const fontSize = await getFontsize('#c_1')
135185
expect(fontSize).toBe(`${Number.parseFloat(rem) / 2}px`)
136186
})
187+
188+
test('should d_1 fontsize be rem', async ({ rem }) => {
189+
const fontSize = await getFontsize('#d_1')
190+
expect(fontSize).toBe(rem)
191+
})
192+
193+
test('should d_2 fontsize be half rem', async ({ rem }) => {
194+
const fontSize = await getFontsize('#d_2')
195+
expect(fontSize).toBe(`${Number.parseFloat(rem) / 2}px`)
196+
})
197+
198+
test('should d_3 fontsize be double rem', async ({ rem }) => {
199+
const fontSize = await getFontsize('#d_3')
200+
expect(fontSize).toBe(`${Number.parseFloat(rem) * 2}px`)
201+
})
202+
203+
test('should d_4 fontsize be double rem', async ({ rem }) => {
204+
const fontSize = await getFontsize('#d_4')
205+
expect(fontSize).toBe(`${Number.parseFloat(rem) * 2}px`)
206+
})
207+
208+
test('should e_1 fontsize be rem', async ({ rem }) => {
209+
const fontSize = await getFontsize('#e_1')
210+
expect(fontSize).toBe(rem)
211+
})
137212
})

‎playground/spa/package.json

-2
Original file line numberDiff line numberDiff line change
@@ -21,8 +21,6 @@
2121
"@types/react-dom": "^18.0.11",
2222
"@vitejs/plugin-react": "^3.1.0",
2323
"postcss": "^8.4.21",
24-
"postcss-import": "^15.1.0",
25-
"postcss-nested": "^6.0.1",
2624
"tailwindcss": "^3.2.7",
2725
"typescript": "^4.9.5",
2826
"vite": "^4.4.9",

‎playground/spa/src/App.css

-36
Original file line numberDiff line numberDiff line change
@@ -4,39 +4,3 @@
44
padding: 2rem;
55
text-align: center;
66
}
7-
8-
.logo {
9-
height: 6em;
10-
padding: 1.5em;
11-
will-change: filter;
12-
transition: filter 300ms;
13-
}
14-
.logo:hover {
15-
filter: drop-shadow(0 0 2em #646cffaa);
16-
}
17-
.logo.react:hover {
18-
filter: drop-shadow(0 0 2em #61dafbaa);
19-
}
20-
21-
@keyframes logo-spin {
22-
from {
23-
transform: rotate(0deg);
24-
}
25-
to {
26-
transform: rotate(360deg);
27-
}
28-
}
29-
30-
@media (prefers-reduced-motion: no-preference) {
31-
a:nth-of-type(2) .logo {
32-
animation: logo-spin infinite 20s linear;
33-
}
34-
}
35-
36-
.card {
37-
padding: 2em;
38-
}
39-
40-
.read-the-docs {
41-
color: #888;
42-
}

‎playground/spa/src/App.tsx

+4
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,8 @@ import { useWindowSize } from 'react-use'
33
import A from './components/A'
44
import B from './components/B'
55
import C from './components/C'
6+
import D from './components/D'
7+
import E from './components/E'
68
import { DEVICE } from './device'
79
import './App.css'
810

@@ -50,6 +52,8 @@ function App() {
5052
<A />
5153
<B />
5254
<C />
55+
<D />
56+
<E />
5357
</div>
5458
)
5559
}

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

+17
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
.d1 {
2+
font-size: 16px;
3+
}
4+
5+
/* pxtorem?rootValue=32 */
6+
.d2 {
7+
font-size: 16px;
8+
}
9+
10+
/* pxtorem?rootValue=8 */
11+
.d3 {
12+
font-size: 16px;
13+
}
14+
15+
.d4 {
16+
font-size: 16px;
17+
}

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

+22
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
import styles from './index.module.css'
2+
3+
const D = () => {
4+
return (
5+
<div className={'box'}>
6+
<div id='d_1' className={styles.d1}>
7+
这是在css文件中不修改rootValue的16px
8+
</div>
9+
<div id='d_2' className={styles.d2}>
10+
这是在css文件中动态修改rootValue为32px后的16px（缩小一倍）
11+
</div>
12+
<div id='d_3' className={styles.d3}>
13+
这是在css文件中动态修改rootValue为8px后的16px（放大一倍）
14+
</div>
15+
<div id='d_4' className={styles.d4}>
16+
放大一倍
17+
</div>
18+
</div>
19+
)
20+
}
21+
22+
export default D

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

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
.e1 {
2+
font-size: 16px;
3+
}

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

+13
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
import styles from './index.module.css'
2+
3+
const E = () => {
4+
return (
5+
<div className={'box'}>
6+
<div id='e_1' className={styles.e1}>
7+
1rem
8+
</div>
9+
</div>
10+
)
11+
}
12+
13+
export default E

‎playground/spa/src/index.css

-55
Original file line numberDiff line numberDiff line change
@@ -19,65 +19,10 @@ body {
1919
-webkit-text-size-adjust: 100%;
2020
}
2121

22-
a {
23-
font-weight: 500;
24-
color: #646cff;
25-
text-decoration: inherit;
26-
}
27-
28-
a:hover {
29-
color: #535bf2;
30-
}
31-
32-
body {
33-
margin: 0;
34-
display: flex;
35-
place-items: center;
36-
min-width: 320px;
37-
min-height: 100vh;
38-
}
39-
40-
h1 {
41-
font-size: 3.2em;
42-
line-height: 1.1;
43-
}
44-
45-
button {
46-
border-radius: 8px;
47-
border: 1px solid transparent;
48-
padding: 0.6em 1.2em;
49-
font-size: 1em;
50-
font-weight: 500;
51-
font-family: inherit;
52-
background-color: #1a1a1a;
53-
cursor: pointer;
54-
transition: border-color 0.25s;
55-
}
56-
57-
button:hover {
58-
border-color: #646cff;
59-
}
60-
61-
button:focus,
62-
button:focus-visible {
63-
outline: 4px auto -webkit-focus-ring-color;
64-
}
65-
6622
@media (prefers-color-scheme: light) {
6723
:root {
6824
color: #213547;
6925
background-color: #ffffff;
7026
}
71-
72-
a:hover {
73-
color: #747bff;
74-
}
75-
76-
button {
77-
background-color: #f9f9f9;
78-
}
7927
}
8028

81-
.box {
82-
@apply flex flex-col border-2 rounded-lg p-[8px] border-zinc-400;
83-
}

‎playground/spa/src/tailwind.css

+7
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,11 @@
11
@tailwind base;
2+
23
@tailwind components;
4+
35
@tailwind utilities;
6+
47
@tailwind variants;
8+
9+
.box {
10+
@apply flex flex-col border-2 rounded-lg p-[8px] border-zinc-400;
11+
}

‎playground/temp-spa/.gitignore

+24
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
# Logs
2+
logs
3+
*.log
4+
npm-debug.log*
5+
yarn-debug.log*
6+
yarn-error.log*
7+
pnpm-debug.log*
8+
lerna-debug.log*
9+
10+
node_modules
11+
dist
12+
dist-ssr
13+
*.local
14+
15+
# Editor directories and files
16+
.vscode/*
17+
!.vscode/extensions.json
18+
.idea
19+
.DS_Store
20+
*.suo
21+
*.ntvs*
22+
*.njsproj
23+
*.sln
24+
*.sw?

‎playground/temp-spa/index.html

+16
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8" />
6+
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
7+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
8+
<title>pxtorem playground</title>
9+
</head>
10+
11+
<body>
12+
<div id="root"></div>
13+
<script type="module" src="/src/main.tsx"></script>
14+
</body>
15+
16+
</html>

‎playground/temp-spa/package.json

+29
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
{
2+
"name": "vite-project",
3+
"version": "0.0.0",
4+
"private": true,
5+
"type": "module",
6+
"scripts": {
7+
"dev": "vite",
8+
"build": "vite build",
9+
"preview": "npm run build && vite preview"
10+
},
11+
"dependencies": {
12+
"classnames": "^2.3.2",
13+
"modern-flexible": "^0.0.3",
14+
"react": "^18.2.0",
15+
"react-dom": "^18.2.0",
16+
"react-use": "^17.4.0"
17+
},
18+
"devDependencies": {
19+
"@minko-fe/postcss-pxtorem": "workspace:*",
20+
"@types/react": "^18.0.29",
21+
"@types/react-dom": "^18.0.11",
22+
"@vitejs/plugin-react": "^3.1.0",
23+
"postcss": "^8.4.21",
24+
"tailwindcss": "^3.2.7",
25+
"typescript": "^4.9.5",
26+
"vite": "^4.4.9",
27+
"vite-plugin-public-typescript": "^1.5.5"
28+
}
29+
}

0 commit comments

Comments
 (0)