|
1 | 1 | import type { PseudoVariantUtilities } from '../src/pseudo' |
2 | | -import { createGenerator } from '@unocss/core' |
| 2 | +import { createGenerator, symbols } from '@unocss/core' |
3 | 3 | import { h } from '@unocss/preset-wind4/utils' |
4 | 4 | import { expect, it } from 'vitest' |
5 | 5 | import { |
@@ -135,6 +135,91 @@ it('nested named groups containing hyphens', async () => { |
135 | 135 | `) |
136 | 136 | }) |
137 | 137 |
|
| 138 | +it('arbitrary tagged pseudo variant order', async () => { |
| 139 | + const uno = await createGenerator({ |
| 140 | + variants: [ |
| 141 | + ...createTaggedPseudoClasses({}, utils), |
| 142 | + ], |
| 143 | + rules: [ |
| 144 | + [/^foo-(\d)$/, ([_, a]) => ({ text: `foo-${a}` })], |
| 145 | + ], |
| 146 | + }) |
| 147 | + |
| 148 | + const css = await uno.generate([ |
| 149 | + 'foo-1', |
| 150 | + 'group-hover:foo-2', |
| 151 | + 'group-[.on]:foo-3', |
| 152 | + 'group-not-[.off]:foo-4', |
| 153 | + 'peer-[.on]:foo-5', |
| 154 | + ]).then(r => r.css) |
| 155 | + |
| 156 | + expect(css.indexOf('foo-1')).toBeLessThan(css.indexOf('foo-3')) |
| 157 | + expect(css.indexOf('foo-1')).toBeLessThan(css.indexOf('foo-4')) |
| 158 | + expect(css.indexOf('foo-1')).toBeLessThan(css.indexOf('foo-5')) |
| 159 | + expect(css.indexOf('foo-5')).toBeLessThan(css.indexOf('foo-2')) |
| 160 | + expect(css) |
| 161 | + .toMatchInlineSnapshot(` |
| 162 | + "/* layer: default */ |
| 163 | + .foo-1{text:foo-1;} |
| 164 | + .group:not(.off) .group-not-\\[\\.off\\]\\:foo-4{text:foo-4;} |
| 165 | + .group.on .group-\\[\\.on\\]\\:foo-3{text:foo-3;} |
| 166 | + .peer.on~.peer-\\[\\.on\\]\\:foo-5{text:foo-5;} |
| 167 | + .group:hover .group-hover\\:foo-2{text:foo-2;}" |
| 168 | + `) |
| 169 | +}) |
| 170 | + |
| 171 | +it('arbitrary tagged pseudo variant keeps the rule sort', async () => { |
| 172 | + const uno = await createGenerator({ |
| 173 | + variants: [ |
| 174 | + ...createTaggedPseudoClasses({}, utils), |
| 175 | + ], |
| 176 | + rules: [ |
| 177 | + // the declared sorts are the reverse of the alphabetical order of the tokens, |
| 178 | + // so only a rule sort that survives the variant can produce `foo-b` first |
| 179 | + [/^foo-(\w)$/, ([_, a]) => ({ [symbols.sort]: a === 'a' ? 20 : 10, color: `foo-${a}` })], |
| 180 | + ], |
| 181 | + }) |
| 182 | + |
| 183 | + const css = await uno.generate([ |
| 184 | + 'group-[.on]:foo-a', |
| 185 | + 'group-[.on]:foo-b', |
| 186 | + ]).then(r => r.css) |
| 187 | + |
| 188 | + expect(css.indexOf('foo-b')).toBeLessThan(css.indexOf('foo-a')) |
| 189 | + expect(css) |
| 190 | + .toMatchInlineSnapshot(` |
| 191 | + "/* layer: default */ |
| 192 | + .group.on .group-\\[\\.on\\]\\:foo-b{color:foo-b;} |
| 193 | + .group.on .group-\\[\\.on\\]\\:foo-a{color:foo-a;}" |
| 194 | + `) |
| 195 | +}) |
| 196 | + |
| 197 | +it('colon-only pseudo class sorts by its own index', async () => { |
| 198 | + const uno = await createGenerator({ |
| 199 | + variants: [ |
| 200 | + ...createPseudoClassesAndElements(utils), |
| 201 | + ], |
| 202 | + rules: [ |
| 203 | + [/^foo-(\w)$/, ([_, a]) => ({ [symbols.sort]: a === 'a' ? 20 : 10, color: `foo-${a}` })], |
| 204 | + ], |
| 205 | + }) |
| 206 | + |
| 207 | + const css = await uno.generate([ |
| 208 | + 'backdrop:foo-a', |
| 209 | + 'backdrop:foo-b', |
| 210 | + ]).then(r => r.css) |
| 211 | + |
| 212 | + // `backdrop` lives only in `PseudoClassesColon`, so finding its index there is what |
| 213 | + // keeps the pseudo order in charge instead of the rule sort |
| 214 | + expect(css.indexOf('foo-a')).toBeLessThan(css.indexOf('foo-b')) |
| 215 | + expect(css) |
| 216 | + .toMatchInlineSnapshot(` |
| 217 | + "/* layer: default */ |
| 218 | + .backdrop\\:foo-a::backdrop{color:foo-a;} |
| 219 | + .backdrop\\:foo-b::backdrop{color:foo-b;}" |
| 220 | + `) |
| 221 | +}) |
| 222 | + |
138 | 223 | it('pseudo class functions', async () => { |
139 | 224 | const uno = await createGenerator({ |
140 | 225 | variants: [ |
|
0 commit comments