1+ let { equal, throws } = require ( 'uvu/assert' )
2+ let { test } = require ( 'uvu' )
13let postcss = require ( 'postcss' )
24
35let plugin = require ( './' )
46
5- function run ( input , output , opts ) {
7+ function run ( input , output , opts ) {
68 let result = postcss ( [ plugin ( opts ) ] ) . process ( input , { from : '/test.css' } )
7- expect ( result . css ) . toEqual ( output )
8- expect ( result . warnings ( ) ) . toHaveLength ( 0 )
9+ equal ( result . css , output )
10+ equal ( result . warnings ( ) . length , 0 )
911}
1012
11- it ( 'unwraps rule inside rule' , ( ) => {
13+ test ( 'unwraps rule inside rule' , ( ) => {
1214 run (
1315 'a { a: 1 } a { a: 1; b { b: 2; c { c: 3 } } }' ,
1416 'a { a: 1 } a { a: 1; } a b { b: 2; } a b c { c: 3 }'
1517 )
1618} )
1719
18- it ( 'cleans rules after unwrap' , ( ) => {
20+ test ( 'cleans rules after unwrap' , ( ) => {
1921 run ( 'a { b .one {} b .two {} }' , 'a b .one {} a b .two {}' )
2022} )
2123
22- it ( 'preserve empty rules if preserveEmpty is set to true' , ( ) => {
24+ test ( 'preserve empty rules if preserveEmpty is set to true' , ( ) => {
2325 run ( 'a { b .one {} b .two {} }' , 'a { } a b .one {} a b .two {}' , {
2426 preserveEmpty : true
2527 } )
2628} )
2729
28- it ( 'hoists at-root' , ( ) => {
30+ test ( 'hoists at-root' , ( ) => {
2931 run ( 'a { & {} @at-root { b {} } }' , 'a {} b {}' )
3032} )
3133
32- it ( 'at-root short hand' , ( ) => {
34+ test ( 'at-root short hand' , ( ) => {
3335 run ( 'a { & {} @at-root b { } }' , 'a {} b {}' )
3436} )
3537
36- it ( 'replaces ampersand' , ( ) => {
38+ test ( 'replaces ampersand' , ( ) => {
3739 run ( 'a { body &:hover b {} }' , 'body a:hover b {}' )
3840} )
3941
40- it ( 'replaces ampersands' , ( ) => {
42+ test ( 'replaces ampersands' , ( ) => {
4143 run ( 'a { &:hover, &:active {} }' , 'a:hover, a:active {}' )
4244} )
4345
44- it ( 'replaces ampersand in string' , ( ) => {
46+ test ( 'replaces ampersand in string' , ( ) => {
4547 run ( '.block { &_elem {} }' , '.block_elem {}' )
4648} )
4749
48- it ( 'unwrap rules inside at-rules' , ( ) => {
50+ test ( 'unwrap rules inside at-rules' , ( ) => {
4951 run (
5052 '@media (max-width: 500px) { a { b {} } }' ,
5153 '@media (max-width: 500px) { a b {} }'
5254 )
5355} )
5456
55- it ( 'unwraps at-rule' , ( ) => {
57+ test ( 'unwraps at-rule' , ( ) => {
5658 run (
5759 'a { b { @media screen { width: auto } } }' ,
5860 '@media screen {a b { width: auto } }'
5961 )
6062} )
6163
62- it ( 'unwraps at-rule with rules' , ( ) => {
64+ test ( 'unwraps at-rule with rules' , ( ) => {
6365 run (
6466 'a { @media screen { b { color: black } } }' ,
6567 '@media screen { a b { color: black } }'
6668 )
6769} )
6870
69- it ( 'unwraps font-face to top level css' , ( ) => {
71+ test ( 'unwraps font-face to top level css' , ( ) => {
7072 run (
7173 '.a { @font-face { font-family:font; src:url() format("woff"); } }' ,
7274 '@font-face { font-family:font; src:url() format("woff"); }'
7375 )
7476} )
7577
76- it ( 'unwraps multiple fonts to top level css' , ( ) => {
78+ test ( 'unwraps multiple fonts to top level css' , ( ) => {
7779 run (
7880 '.a { @font-face { font-family:f1; } @font-face { font-family:f2; }}' ,
7981 '@font-face { font-family:f1; } @font-face { font-family:f2; }'
8082 )
8183} )
8284
83- it ( 'unwraps at-rules' , ( ) => {
85+ test ( 'unwraps at-rules' , ( ) => {
8486 run (
8587 'a { a: 1 } a { @media screen { @supports (a: 1) { a: 1 } } }' ,
8688 'a { a: 1 } @media screen { @supports (a: 1) { a { a: 1 } } }'
8789 )
8890} )
8991
90- it ( 'unwraps at-rules with interleaved properties' , ( ) => {
92+ test ( 'unwraps at-rules with interleaved properties' , ( ) => {
9193 run (
9294 'a { a: 1 } a { color: red; @media screen { @supports (a: 1) { a: 1 } } background: green }' ,
9395 'a { a: 1 } a { color: red; } @media screen { @supports (a: 1) { a { a: 1 } } } a { background: green }'
9496 )
9597} )
9698
97- it ( 'does not move custom at-rules' , ( ) => {
99+ test ( 'does not move custom at-rules' , ( ) => {
98100 run (
99101 '.one { @mixin test; } .two { @media screen { @mixin test; } } .three { @media screen { @mixin test { color: black } } } .four { @phone { color: black } }' ,
100102 '.one { @mixin test; } @media screen { .two { @mixin test } } @media screen { .three { @mixin test { color: black } } } @phone { .four { color: black } }' ,
101103 { bubble : [ 'phone' ] }
102104 )
103105} )
104106
105- it ( 'does not move custom at-rules placed under nested bubbling ones' , ( ) => {
107+ test ( 'does not move custom at-rules placed under nested bubbling ones' , ( ) => {
106108 run (
107109 '.one { @supports (color: black) { @media screen { @mixin test; } } } .two { @supports (color: black) { @media screen { @mixin test { color: black } } } }' ,
108110 '@supports (color: black) { @media screen {.one { @mixin test } } } @supports (color: black) { @media screen { .two { @mixin test { color: black } } } }'
109111 )
110112} )
111113
112- it ( 'supports bubble option with at-name' , ( ) => {
114+ test ( 'supports bubble option with at-name' , ( ) => {
113115 run ( 'a { @phone { color: black } }' , '@phone {a { color: black } }' , {
114116 bubble : [ '@phone' ]
115117 } )
116118} )
117119
118- it ( 'unwraps keyframes' , ( ) => {
120+ test ( 'unwraps keyframes' , ( ) => {
119121 run (
120122 'a { color: white; @keyframes name { to { color: black } } }' ,
121123 'a { color: white; } @keyframes name { to { color: black } }'
122124 )
123125} )
124126
125- it ( 'supports unwrap option with at-name' , ( ) => {
127+ test ( 'supports unwrap option with at-name' , ( ) => {
126128 run ( 'a { @phone { color: black } }' , '@phone { color: black }' , {
127129 unwrap : [ '@phone' ]
128130 } )
129131} )
130132
131- it ( 'processes comma' , ( ) => {
133+ test ( 'processes comma' , ( ) => {
132134 run ( '.one, .two { a {} }' , '.one a, .two a {}' )
133135} )
134136
135- it ( 'processes comma with ampersand' , ( ) => {
137+ test ( 'processes comma with ampersand' , ( ) => {
136138 run ( '.one, .two { &:hover {} }' , '.one:hover, .two:hover {}' )
137139} )
138140
139- it ( 'processes comma inside' , ( ) => {
141+ test ( 'processes comma inside' , ( ) => {
140142 run ( 'a, b { .one, .two {} }' , 'a .one, a .two, b .one, b .two {}' )
141143} )
142144
143- it ( 'clears empty selector after comma' , ( ) => {
145+ test ( 'clears empty selector after comma' , ( ) => {
144146 run ( 'a, b { .one, .two, {} }' , 'a .one, a .two, b .one, b .two {}' )
145147} )
146148
147- it ( 'moves comment with rule' , ( ) => {
149+ test ( 'moves comment with rule' , ( ) => {
148150 run ( 'a { /*B*/ b {} }' , '/*B*/ a b {}' )
149151} )
150152
151- it ( 'moves comment with at-rule' , ( ) => {
153+ test ( 'moves comment with at-rule' , ( ) => {
152154 run ( 'a { /*B*/ @media { one: 1 } }' , '/*B*/ @media {a { one: 1 } }' )
153155} )
154156
155- it ( 'moves comment with declaration' , ( ) => {
157+ test ( 'moves comment with declaration' , ( ) => {
156158 run ( 'a { @media { /*B*/ one: 1 } }' , '@media {a { /*B*/ one: 1 } }' )
157159} )
158160
159- it ( 'saves order of rules' , ( ) => {
161+ test ( 'saves order of rules' , ( ) => {
160162 run ( '.one { & .two {} & .tree {} }' , '.one .two {} .one .tree {}' )
161163} )
162164
163- it ( 'copies rule for declarations after nested rule' , ( ) => {
165+ test ( 'copies rule for declarations after nested rule' , ( ) => {
164166 run (
165167 'a { a: 1; &b { b: 2 } c: 1; &c { d: 5 } e: 6 } c { f: 1 }' ,
166168 'a { a: 1; } ab { b: 2 } a { c: 1; } ac { d: 5 } a { e: 6; } c { f: 1 }'
167169 )
168170} )
169171
170- it ( 'copies rule for declarations after nested rule and before at-rule' , ( ) => {
172+ test ( 'copies rule for declarations after nested rule and before at-rule' , ( ) => {
171173 run (
172174 'a { &b { a: 1 } b: 2; @media { c: 3 } }' ,
173175 'ab { a: 1 } a { b: 2 } @media {a { c: 3 } }'
174176 )
175177} )
176178
177- it ( 'does not replace ampersand inside string' , ( ) => {
179+ test ( 'does not replace ampersand inside string' , ( ) => {
178180 run (
179181 'div { &[data-category="sound & vision"] {} }' ,
180182 'div[data-category="sound & vision"] {}'
181183 )
182184} )
183185
184- it ( 'replaces ampersand in adjacent sibling selector' , ( ) => {
186+ test ( 'replaces ampersand in adjacent sibling selector' , ( ) => {
185187 run ( 'div { & + & {} }' , 'div + div {}' )
186188} )
187189
188- it ( 'replaces ampersands in not selector' , ( ) => {
190+ test ( 'replaces ampersands in not selector' , ( ) => {
189191 run ( '.a { &:not(&.no) {} }' , '.a:not(.a.no) {}' )
190192} )
191193
192- it ( 'correctly replaces tail ampersands' , ( ) => {
194+ test ( 'correctly replaces tail ampersands' , ( ) => {
193195 run ( '.a { .b & {} }' , '.b .a {}' )
194196} )
195197
196- it ( 'correctly replaces tail ampersands that are nested further down' , ( ) => {
198+ test ( 'correctly replaces tail ampersands that are nested further down' , ( ) => {
197199 run ( '.a { .b { .c & {} } }' , '.c .a .b {}' )
198200} )
199201
200- it ( 'correctly replaces tail ampersands that are nested inside ampersand rules' , ( ) => {
202+ test ( 'correctly replaces tail ampersands that are nested inside ampersand rules' , ( ) => {
201203 run ( '.a { &:hover { .b { .c & {} } } }' , '.c .a:hover .b {}' )
202204} )
203205
204- it ( 'preserves child order when replacing tail ampersands' , ( ) => {
206+ test ( 'preserves child order when replacing tail ampersands' , ( ) => {
205207 run (
206208 '.a { color: red; .first {} @mixinFirst; .b & {} @mixinLast; .last {} }' ,
207209 '.a { color: red; } .a .first {} .a { @mixinFirst; } .b .a {} .a { @mixinLast; } .a .last {}'
208210 )
209211} )
210212
211- it ( 'handles :host selector case' , ( ) => {
213+ test ( 'handles :host selector case' , ( ) => {
212214 run ( ':host { &(:focus) {} }' , ':host(:focus) {}' )
213215} )
214216
215- it ( 'works with other visitors' , ( ) => {
217+ test ( 'works with other visitors' , ( ) => {
216218 let css = 'a{b{color:red}@mixin;}'
217219 let mixinPlugin = ( ) => {
218220 return {
219221 postcssPlugin : 'mixin' ,
220222 AtRule : {
221- mixin ( node ) {
223+ mixin ( node ) {
222224 node . replaceWith ( '.in{.deep{color:blue}}' )
223225 }
224226 }
@@ -228,16 +230,16 @@ it('works with other visitors', () => {
228230 let out = postcss ( [ plugin , mixinPlugin ] ) . process ( css , {
229231 from : undefined
230232 } ) . css
231- expect ( out ) . toEqual ( 'a b{color:red}a .in .deep{color:blue}' )
233+ equal ( out , 'a b{color:red}a .in .deep{color:blue}' )
232234} )
233235
234- it ( 'works with other visitors #2' , ( ) => {
236+ test ( 'works with other visitors #2' , ( ) => {
235237 let css = 'a { @mixin; b {color:red} }'
236238 let mixinPlugin = ( ) => {
237239 return {
238240 postcssPlugin : 'mixin' ,
239241 AtRule : {
240- mixin ( node ) {
242+ mixin ( node ) {
241243 node . replaceWith ( '.in { .deep {color:blue} }' )
242244 }
243245 }
@@ -247,30 +249,32 @@ it('works with other visitors #2', () => {
247249 let out = postcss ( [ plugin , mixinPlugin ] ) . process ( css , {
248250 from : undefined
249251 } ) . css
250- expect ( out ) . toEqual ( 'a .in .deep {color:blue} a b {color:red}' )
252+ equal ( out , 'a .in .deep {color:blue} a b {color:red}' )
251253} )
252254
253- it ( 'shows clear errors on missed semicolon' , ( ) => {
255+ test ( 'shows clear errors on missed semicolon' , ( ) => {
254256 let css = 'a{\n color: black\n @mixin b { }\n}\n'
255- expect ( ( ) => {
257+ throws ( ( ) => {
256258 css = postcss ( [ plugin ] ) . process ( css , { from : undefined } ) . css
257- } ) . toThrow ( '2:3: Missed semicolon' )
259+ } , '2:3: Missed semicolon' )
258260} )
259261
260- it ( 'shows clear errors on other errors' , ( ) => {
262+ test ( 'shows clear errors on other errors' , ( ) => {
261263 let css = 'a{\n -Option/root { }\n}\n'
262- expect ( ( ) => {
264+ throws ( ( ) => {
263265 css = postcss ( [ plugin ] ) . process ( css , { from : undefined } ) . css
264- } ) . toThrow ( ':2:3: Unexpected' )
266+ } , ':2:3: Unexpected' )
265267} )
266268
267- it ( 'third level dependencies' , ( ) => {
269+ test ( 'third level dependencies' , ( ) => {
268270 run (
269271 '.text {&:hover{border-color: red;&:before{color: red;}}}' ,
270272 '.text:hover{border-color: red;}.text:hover:before{color: red;}'
271273 )
272274} )
273275
274- it ( 'third level dependencies #2' , ( ) => {
276+ test ( 'third level dependencies #2' , ( ) => {
275277 run ( '.selector{:global{h2{color:pink}}}' , '.selector :global h2{color:pink}' )
276278} )
279+
280+ test . run ( )
0 commit comments