Skip to content

Commit 0e1bdf8

Browse files
chu121su12chu121su12
authored
fix(transformer-directives): fix declaration sorting (#668)
1 parent b07065a commit 0e1bdf8

File tree

4 files changed

+68
-57
lines changed

4 files changed

+68
-57
lines changed

‎packages/transformer-directives/src/index.ts

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -98,6 +98,11 @@ export async function transformDirectives(css: string, uno: UnoGenerator, filena
9898

9999
list.insertList(insertNodeAst.children, item)
100100
}
101+
else if (node.block.children.toArray().length === 1) {
102+
const newNodeCss = `${parentSelector}{${body}}`
103+
const insertNodeAst = parse(newNodeCss) as StyleSheet
104+
list.insertList(insertNodeAst.children, item)
105+
}
101106
else {
102107
const rules = new List<string>()
103108
.fromArray(body
@@ -119,5 +124,11 @@ export async function transformDirectives(css: string, uno: UnoGenerator, filena
119124

120125
await Promise.all(stack)
121126

127+
ast.children = ast.children.filter((cssNode) => {
128+
if ('block' in cssNode)
129+
return (cssNode.block?.children.toArray().length ?? 1) !== 0
130+
return true
131+
})
132+
122133
return generate(ast)
123134
}

‎test/__snapshots__/transformer-directives.test.ts.snap

Lines changed: 42 additions & 42 deletions
Original file line numberDiff line numberDiff line change
@@ -92,15 +92,6 @@ html.dark {
9292
.cursor-pen {
9393
cursor: url(https://api.iconify.design/mdi:lead-pencil.svg) 2 18, auto;
9494
}
95-
@media (prefers-color-scheme: dark) {
96-
.select-dark {
97-
--un-bg-opacity: 1;
98-
background-color: rgba(31, 41, 55, var(--un-bg-opacity));
99-
}
100-
}
101-
.select-dark:focus {
102-
--un-ring-opacity: 1;
103-
}
10495
.select-dark {
10596
display: block;
10697
width: 100%;
@@ -134,8 +125,14 @@ html.dark {
134125
--un-ring-color: rgba(31, 41, 55, var(--un-ring-opacity));
135126
--un-ring-opacity: 0.75;
136127
}
137-
.icon-btn:hover {
138-
opacity: 1;
128+
@media (prefers-color-scheme: dark) {
129+
.select-dark {
130+
--un-bg-opacity: 1;
131+
background-color: rgba(31, 41, 55, var(--un-bg-opacity));
132+
}
133+
}
134+
.select-dark:focus {
135+
--un-ring-opacity: 1;
139136
}
140137
.icon-btn {
141138
display: inline-block;
@@ -152,11 +149,8 @@ html.dark {
152149
transition-duration: 200ms;
153150
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
154151
}
155-
@media (prefers-color-scheme: dark) {
156-
.d-header {
157-
--un-bg-opacity: 1;
158-
background-color: rgba(45, 45, 45, var(--un-bg-opacity));
159-
}
152+
.icon-btn:hover {
153+
opacity: 1;
160154
}
161155
.d-header {
162156
position: sticky;
@@ -203,11 +197,10 @@ html.dark {
203197
-webkit-backdrop-filter: var(--un-backdrop-filter);
204198
backdrop-filter: var(--un-backdrop-filter);
205199
}
206-
@media (min-width: 1024px) {
207-
.d-container {
208-
padding-left: 1.5rem;
209-
padding-right: 1.5rem;
210-
padding-top: 3rem;
200+
@media (prefers-color-scheme: dark) {
201+
.d-header {
202+
--un-bg-opacity: 1;
203+
background-color: rgba(45, 45, 45, var(--un-bg-opacity));
211204
}
212205
}
213206
.d-container {
@@ -218,20 +211,12 @@ html.dark {
218211
padding-right: 0.5rem;
219212
padding-top: 2rem;
220213
}
221-
input:focus {
222-
--un-ring-inset: var(--un-empty, /*!*/ /*!*/);
223-
--un-ring-offset-width: 0px;
224-
--un-ring-offset-color: #fff;
225-
--un-ring-width: 0px;
226-
--un-ring-color: rgba(147, 197, 253, 0.5);
227-
--un-ring-width: 1px;
228-
--un-ring-offset-shadow: var(--un-ring-inset) 0 0 0
229-
var(--un-ring-offset-width) var(--un-ring-offset-color);
230-
--un-ring-shadow: var(--un-ring-inset) 0 0 0
231-
calc(var(--un-ring-width) + var(--un-ring-offset-width))
232-
var(--un-ring-color);
233-
box-shadow: var(--un-ring-offset-shadow), var(--un-ring-shadow),
234-
var(--un-shadow, 0 0 #0000);
214+
@media (min-width: 1024px) {
215+
.d-container {
216+
padding-left: 1.5rem;
217+
padding-right: 1.5rem;
218+
padding-top: 3rem;
219+
}
235220
}
236221
input {
237222
border-radius: 0.25rem;
@@ -244,13 +229,7 @@ input {
244229
outline: 2px solid transparent;
245230
outline-offset: 2px;
246231
}
247-
.btn:disabled {
248-
cursor: not-allowed;
249-
opacity: 0.6;
250-
}
251-
.btn:focus {
252-
outline: 2px solid transparent;
253-
outline-offset: 2px;
232+
input:focus {
254233
--un-ring-inset: var(--un-empty, /*!*/ /*!*/);
255234
--un-ring-offset-width: 0px;
256235
--un-ring-offset-color: #fff;
@@ -265,6 +244,10 @@ input {
265244
box-shadow: var(--un-ring-offset-shadow), var(--un-ring-shadow),
266245
var(--un-shadow, 0 0 #0000);
267246
}
247+
.btn:disabled {
248+
cursor: not-allowed;
249+
opacity: 0.6;
250+
}
268251
.btn {
269252
border-radius: 0.25rem;
270253
--un-bg-opacity: 1;
@@ -279,5 +262,22 @@ input {
279262
--un-text-opacity: 1;
280263
color: rgba(255, 255, 255, var(--un-text-opacity));
281264
}
265+
.btn:focus {
266+
outline: 2px solid transparent;
267+
outline-offset: 2px;
268+
--un-ring-inset: var(--un-empty, /*!*/ /*!*/);
269+
--un-ring-offset-width: 0px;
270+
--un-ring-offset-color: #fff;
271+
--un-ring-width: 0px;
272+
--un-ring-color: rgba(147, 197, 253, 0.5);
273+
--un-ring-width: 1px;
274+
--un-ring-offset-shadow: var(--un-ring-inset) 0 0 0
275+
var(--un-ring-offset-width) var(--un-ring-offset-color);
276+
--un-ring-shadow: var(--un-ring-inset) 0 0 0
277+
calc(var(--un-ring-width) + var(--un-ring-offset-width))
278+
var(--un-ring-color);
279+
box-shadow: var(--un-ring-offset-shadow), var(--un-ring-shadow),
280+
var(--un-shadow, 0 0 #0000);
281+
}
282282
"
283283
`;

‎test/assets/apply.css

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -18,12 +18,12 @@ html.dark {
1818
@apply bg-purple-500 bg-opacity-75;
1919

2020
position: fixed;
21-
z-index: 1031;
21+
@apply z-1031;
2222
top: 0;
2323
left: 0;
2424

2525
width: 100%;
26-
height: 2px;
26+
@apply h-[2px];
2727
}
2828

2929
.hover-transform {

‎test/transformer-directives.test.ts

Lines changed: 13 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -52,7 +52,10 @@ describe('transformer-directives', () => {
5252
)
5353
expect(result)
5454
.toMatchInlineSnapshot(`
55-
"@media (min-width: 768px) {
55+
".btn {
56+
margin: 0.25rem;
57+
}
58+
@media (min-width: 768px) {
5659
.btn {
5760
margin: 0.5rem;
5861
}
@@ -62,9 +65,6 @@ describe('transformer-directives', () => {
6265
margin: 0.75rem;
6366
}
6467
}
65-
.btn {
66-
margin: 0.25rem;
67-
}
6868
"
6969
`)
7070
})
@@ -75,16 +75,16 @@ describe('transformer-directives', () => {
7575
)
7676
expect(result)
7777
.toMatchInlineSnapshot(`
78-
".btn:hover {
78+
".btn {
79+
grid-template-columns: repeat(2, minmax(0, 1fr));
80+
grid-template-rows: repeat(4, minmax(0, 1fr));
81+
}
82+
.btn:hover {
7983
border-width: 1px;
8084
border-style: solid;
8185
--un-bg-opacity: 1;
8286
background-color: rgba(255, 255, 255, var(--un-bg-opacity));
8387
}
84-
.btn {
85-
grid-template-columns: repeat(2, minmax(0, 1fr));
86-
grid-template-rows: repeat(4, minmax(0, 1fr));
87-
}
8888
"
8989
`)
9090
})
@@ -213,13 +213,13 @@ describe('transformer-directives', () => {
213213
)
214214
expect(result)
215215
.toMatchInlineSnapshot(`
216-
".dark .btn {
216+
".btn {
217217
--un-bg-opacity: 1;
218-
background-color: rgba(0, 0, 0, var(--un-bg-opacity));
218+
background-color: rgba(255, 255, 255, var(--un-bg-opacity));
219219
}
220-
.btn {
220+
.dark .btn {
221221
--un-bg-opacity: 1;
222-
background-color: rgba(255, 255, 255, var(--un-bg-opacity));
222+
background-color: rgba(0, 0, 0, var(--un-bg-opacity));
223223
}
224224
"
225225
`)

0 commit comments

Comments
 (0)