Skip to content

Commit f067894

Browse files
Simon-He95Simon-He95
committed
fix: empty rules
close: #60
1 parent bac6501 commit f067894

File tree

5 files changed

+176
-1
lines changed

5 files changed

+176
-1
lines changed

‎src/transformCss.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,7 @@ import {
2525
import { wrapperVueTemplate } from './wrapperVueTemplate'
2626

2727
const tailReg = /:?:(.+)/ // :after
28-
const emptyClass = /[,\w>.#\-+:[\]="'\s()]+\{\}\n/g
28+
const emptyClass = /[@,\w>.#\-+:[\]="'\s()]+\{\}\n/g
2929

3030
interface Position {
3131
column: number

‎test/__snapshots__/all.test.ts.snap‎

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2016,6 +2016,41 @@ function onTagClick() {
20162016
",
20172017
"
20182018
2019+
----- complex7.vue -------
2020+
2021+
<template>
2022+
<div class="waterfall-container layout-pd">
2023+
<el-card shadow="hover" header="瀑布屏（布局一）" class="mb15">
2024+
<div class="waterfall-first grid grid-flow-row-dense auto-rows-[20px]">
2025+
<div class="waterfall-first-item w-[100%] bg-[var(--el-color-primary)] text-[var(--el-color-white)] transition-all transition-duration-0.3s transition-ease-[ease] rounded-[3px] nth-of-type-row-auto/span nth-of-type-8 [&:hover]-shadow-[0_2px_12px_0_rgba(0,0,0,0.1)] [&:hover]-transition='all [&:hover]-duration-0.3s [&:hover]-ease-[ease]' [&:hover]-cursor-pointer" v-for="v in 30" :key="v" v-waves>
2026+
<div class="w100 h100 flex">
2027+
<span class="flex-margin">{{ v }}</span>
2028+
</div>
2029+
</div>
2030+
</div>
2031+
</el-card>
2032+
<el-card shadow="hover" header="瀑布屏（布局二）">
2033+
<div class="waterfall-last grid grid-flow-row-dense auto-rows-[minmax(188px,20vmin)] grid-cols-14">
2034+
<div class="waterfall-last-item h-[100%] bg-[var(--el-color-primary)] text-[var(--el-color-white)] transition-all transition-duration-0.3s transition-ease-[ease] rounded-[3px] [&:hover]-shadow-[0_2px_12px_0_rgba(0,0,0,0.1)] [&:hover]-transition='all [&:hover]-duration-0.3s [&:hover]-ease-[ease]' [&:hover]-cursor-pointer nth-of-type-col-auto/span nth-of-type-3" v-for="v in 30" :key="v" v-waves="'light'">
2035+
<div class="w100 h100 flex">
2036+
<span class="flex-margin">{{ v }}</span>
2037+
</div>
2038+
</div>
2039+
</div>
2040+
</el-card>
2041+
</div>
2042+
</template>
2043+
2044+
<script setup lang="ts" name="pagesWaterfall">
2045+
// 此处需有内容（注释也得），否则缓存将失败
2046+
</script>
2047+
2048+
<style scoped>
2049+
.waterfall-container .waterfall-first {grid-template-columns: repeat(auto-fill, minmax(188px, 1fr));grid-gap: 0.25em}.waterfall-container .waterfall-last {grid-gap: 0.25em}@media (min-width: 576px) and (min-width: 1024px)
2050+
</style>
2051+
",
2052+
"
2053+
20192054
----- demo1.vue -------
20202055
20212056
<template>

‎test/__snapshots__/complex7.test.ts.snap‎

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
<template>
2+
<div class="waterfall-container layout-pd">
3+
<el-card shadow="hover" header="瀑布屏（布局一）" class="mb15">
4+
<div class="waterfall-first grid grid-flow-row-dense auto-rows-[20px]">
5+
<div class="waterfall-first-item w-[100%] bg-[var(--el-color-primary)] text-[var(--el-color-white)] transition-all transition-duration-0.3s transition-ease-[ease] rounded-[3px] nth-of-type-row-auto/span nth-of-type-8 [&:hover]-shadow-[0_2px_12px_0_rgba(0,0,0,0.1)] [&:hover]-transition='all [&:hover]-duration-0.3s [&:hover]-ease-[ease]' [&:hover]-cursor-pointer" v-for="v in 30" :key="v" v-waves>
6+
<div class="w100 h100 flex">
7+
<span class="flex-margin">{{ v }}</span>
8+
</div>
9+
</div>
10+
</div>
11+
</el-card>
12+
<el-card shadow="hover" header="瀑布屏（布局二）">
13+
<div class="waterfall-last grid grid-flow-row-dense auto-rows-[minmax(188px,20vmin)] grid-cols-14">
14+
<div class="waterfall-last-item h-[100%] bg-[var(--el-color-primary)] text-[var(--el-color-white)] transition-all transition-duration-0.3s transition-ease-[ease] rounded-[3px] [&:hover]-shadow-[0_2px_12px_0_rgba(0,0,0,0.1)] [&:hover]-transition='all [&:hover]-duration-0.3s [&:hover]-ease-[ease]' [&:hover]-cursor-pointer nth-of-type-col-auto/span nth-of-type-3" v-for="v in 30" :key="v" v-waves="'light'">
15+
<div class="w100 h100 flex">
16+
<span class="flex-margin">{{ v }}</span>
17+
</div>
18+
</div>
19+
</div>
20+
</el-card>
21+
</div>
22+
</template>
23+
24+
<script setup lang="ts" name="pagesWaterfall">
25+
// 此处需有内容（注释也得），否则缓存将失败
26+
</script>
27+
28+
<style scoped>
29+
.waterfall-container .waterfall-first {grid-template-columns: repeat(auto-fill, minmax(188px, 1fr));grid-gap: 0.25em}.waterfall-container .waterfall-last {grid-gap: 0.25em}@media (min-width: 576px) and (min-width: 1024px)
30+
</style>

‎test/demo/complex7.vue‎

Lines changed: 98 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,98 @@
1+
<template>
2+
<div class="waterfall-container layout-pd">
3+
<el-card shadow="hover" header="瀑布屏（布局一）" class="mb15">
4+
<div class="waterfall-first">
5+
<div class="waterfall-first-item" v-for="v in 30" :key="v" v-waves>
6+
<div class="w100 h100 flex">
7+
<span class="flex-margin">{{ v }}</span>
8+
</div>
9+
</div>
10+
</div>
11+
</el-card>
12+
<el-card shadow="hover" header="瀑布屏（布局二）">
13+
<div class="waterfall-last">
14+
<div class="waterfall-last-item" v-for="v in 30" :key="v" v-waves="'light'">
15+
<div class="w100 h100 flex">
16+
<span class="flex-margin">{{ v }}</span>
17+
</div>
18+
</div>
19+
</div>
20+
</el-card>
21+
</div>
22+
</template>
23+
24+
<script setup lang="ts" name="pagesWaterfall">
25+
// 此处需有内容（注释也得），否则缓存将失败
26+
</script>
27+
28+
<style scoped lang="scss">
29+
.waterfall-container {
30+
.waterfall-first {
31+
display: grid;
32+
grid-template-columns: repeat(auto-fill, minmax(188px, 1fr));
33+
grid-gap: 0.25em;
34+
grid-auto-flow: row dense;
35+
grid-auto-rows: 20px;
36+
.waterfall-first-item {
37+
width: 100%;
38+
background: var(--el-color-primary);
39+
color: var(--el-color-white);
40+
transition: all 0.3s ease;
41+
border-radius: 3px;
42+
&:nth-of-type(3n + 1) {
43+
grid-row: auto / span 5;
44+
}
45+
&:nth-of-type(3n + 2) {
46+
grid-row: auto / span 6;
47+
}
48+
&:nth-of-type(3n + 3) {
49+
grid-row: auto / span 8;
50+
}
51+
&:hover {
52+
box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
53+
transition: all 0.3s ease;
54+
cursor: pointer;
55+
}
56+
}
57+
}
58+
.waterfall-last {
59+
display: grid;
60+
grid-gap: 0.25em;
61+
grid-auto-flow: row dense;
62+
grid-auto-rows: minmax(188px, 20vmin);
63+
grid-template-columns: 1fr;
64+
.waterfall-last-item {
65+
height: 100%;
66+
background: var(--el-color-primary);
67+
color: var(--el-color-white);
68+
transition: all 0.3s ease;
69+
border-radius: 3px;
70+
&:hover {
71+
box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
72+
transition: all 0.3s ease;
73+
cursor: pointer;
74+
}
75+
}
76+
}
77+
@media (min-width: 576px) {
78+
.waterfall-last {
79+
grid-template-columns: repeat(7, 1fr);
80+
.waterfall-last-item {
81+
&:nth-of-type(9n + 9) {
82+
grid-column: auto / span 2;
83+
}
84+
}
85+
}
86+
}
87+
@media (min-width: 576px) and (min-width: 1024px) {
88+
.waterfall-last {
89+
grid-template-columns: repeat(14, 1fr);
90+
.waterfall-last-item {
91+
&:nth-of-type(15n + 15) {
92+
grid-column: auto / span 3;
93+
}
94+
}
95+
}
96+
}
97+
}
98+
</style>

‎test/transformCode.test.ts‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -192,6 +192,18 @@ describe('single demo complex6.vue', async () => {
192192
})
193193
})
194194

195+
describe('single demo complex7.vue', async () => {
196+
const _path = './test/demo/complex7.vue'
197+
const demo = await fsp.readFile(_path, 'utf-8')
198+
199+
it('complex.vue', async () => {
200+
const filepath = path.resolve(process.cwd(), _path)
201+
await expect(
202+
await transformCode(demo, { filepath, type: 'vue' }),
203+
).toMatchFileSnapshot('./__snapshots__/complex7.test.ts.snap')
204+
})
205+
})
206+
195207
describe('debug mode', () => {
196208
it('should output debug logs when debug mode is enabled', async () => {
197209
const testVueCode = `<template>

0 commit comments

Comments
 (0)