Skip to content

Commit 2f37068

Browse files
tonyganchtonyganch
committed
Less: Add tests for sort-order option
1 parent 39cd1d8 commit 2f37068

1 file changed

Lines changed: 313 additions & 0 deletions

File tree

‎test/less.js‎

Lines changed: 313 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,313 @@
1+
var Comb = require('../lib/csscomb');
2+
var assert = require('assert');
3+
4+
describe('LESS', function() {
5+
var comb;
6+
var config;
7+
var input;
8+
var expected;
9+
10+
beforeEach(function() {
11+
comb = new Comb();
12+
});
13+
14+
afterEach(function() {
15+
comb.configure(config);
16+
assert.equal(comb.processString(input, 'less'), expected);
17+
});
18+
19+
describe('Parsing', function() {
20+
it('Should parse nested rules', function() {
21+
config = { 'sort-order': [
22+
['top', 'color']
23+
] };
24+
25+
input = 'div { color: tomato; a { top: 0; } }';
26+
27+
expected = 'div { color: tomato; a { top: 0; } }';
28+
});
29+
30+
it('Should parse operations', function() {
31+
config = {};
32+
33+
input = 'div {\n' +
34+
' @base: 5%;\n' +
35+
' @filler: @base * 2;\n' +
36+
' @other: @base + @filler;\n' +
37+
' color: #888 / 4;\n' +
38+
' background-color: @base-color + #111;\n' +
39+
' height: 100% / 2 + @filler;\n' +
40+
' }';
41+
42+
expected = 'div {\n' +
43+
' @base: 5%;\n' +
44+
' @filler: @base * 2;\n' +
45+
' @other: @base + @filler;\n' +
46+
' color: #888 / 4;\n' +
47+
' background-color: @base-color + #111;\n' +
48+
' height: 100% / 2 + @filler;\n' +
49+
' }';
50+
});
51+
52+
it('Should parse parent selector &', function() {
53+
config = { 'sort-order': [
54+
['top', 'left', 'color']
55+
] };
56+
57+
input = 'div { color: tomato; &.top { color: nani; top: 0; } left: 0; }';
58+
59+
expected = 'div { left: 0; color: tomato; &.top {top: 0; color: nani; }}';
60+
});
61+
62+
it('Should parse variables', function() {
63+
config = {};
64+
65+
input = '@red: tomato; div { color: @tomato; top: @@foo; }';
66+
67+
expected = '@red: tomato; div { color: @tomato; top: @@foo; }';
68+
});
69+
70+
it('Should parse interpolated variables inside selectors', function() {
71+
config = { 'sort-order': [
72+
['top', 'left', 'color']
73+
] };
74+
75+
input = 'div.@{nani} {color:tomato;top:0;}';
76+
77+
expected = 'div.@{nani} {top:0;color:tomato;}';
78+
});
79+
80+
it('Should parse interpolated variables inside values', function() {
81+
config = { 'sort-order': [
82+
['top', 'left', 'color']
83+
] };
84+
85+
input = 'div {color:@{tomato};top:0;}';
86+
87+
expected = 'div {top:0;color:@{tomato};}';
88+
});
89+
90+
it('Should parse @import', function() {
91+
config = {};
92+
93+
input = 'div { @import "foo.css"; top: 0; }';
94+
95+
expected = 'div { @import "foo.css"; top: 0; }';
96+
});
97+
98+
it('Should parse included mixins', function() {
99+
config = {};
100+
101+
input = 'div { .mixin; top: 0; }';
102+
103+
expected = 'div { .mixin; top: 0; }';
104+
});
105+
106+
it('Should parse nested @media', function() {
107+
config = {};
108+
109+
input = 'div {\n' +
110+
' @media screen and (orientation: landscape) {\n' +
111+
' color: tomato;\n' +
112+
' }\n' +
113+
' top: 0;\n' +
114+
'}';
115+
116+
expected = 'div {\n' +
117+
' @media screen and (orientation: landscape) {\n' +
118+
' color: tomato;\n' +
119+
' }\n' +
120+
' top: 0;\n' +
121+
'}';
122+
});
123+
});
124+
125+
describe('Sorting', function() {
126+
it('Should sort properties inside rules', function() {
127+
config = { 'sort-order': [
128+
['top', 'color']
129+
] };
130+
131+
input = 'div { color: tomato; top: 0; }';
132+
133+
expected = 'div {top: 0; color: tomato; }';
134+
});
135+
136+
it('Should sort properties inside nested rules', function() {
137+
config = { 'sort-order': [
138+
['top', 'color']
139+
] };
140+
141+
input = 'div { color: tomato; a { color: nani; top: 0; } }';
142+
143+
expected = 'div { color: tomato; a {top: 0; color: nani; } }';
144+
});
145+
146+
it('Should sort properties divided by nested rules', function() {
147+
config = { 'sort-order': [
148+
['top', 'left', 'color']
149+
] };
150+
151+
input = 'div { color: tomato; a { color: nani; top: 0; } left: 0; }';
152+
153+
expected = 'div { left: 0; color: tomato; a {top: 0; color: nani; }}';
154+
});
155+
156+
it('Should group declarations with proper comments and spaces (single line)', function() {
157+
config = { 'sort-order': [
158+
['top', 'color']
159+
] };
160+
161+
input = 'div {/* 1 */ color: tomato; /* 2 */ top: 0; /* 3 */ /* 4 */}';
162+
163+
expected = 'div {top: 0; /* 3 */ /* 4 *//* 1 */ color: tomato; /* 2 */ }';
164+
});
165+
166+
it('Should group declarations with proper comments and spaces (multiple lines). Test 1', function() {
167+
config = { 'sort-order': [
168+
['top', 'color']
169+
] };
170+
171+
input = 'div {\n' +
172+
' color: tomato; /* 1 */\n' +
173+
' /* 2 */\n' +
174+
' /* 3 */\n' +
175+
' top: 0; /* 4 */\n' +
176+
' /* 5 */\n' +
177+
'}';
178+
179+
expected = 'div {\n' +
180+
' /* 2 */\n' +
181+
' /* 3 */\n' +
182+
' top: 0; /* 4 */\n' +
183+
' color: tomato; /* 1 */\n' +
184+
' /* 5 */\n' +
185+
'}';
186+
});
187+
188+
it('Should group declarations with proper comments and spaces (multiple lines). Test 2', function() {
189+
config = { 'sort-order': [
190+
['$variable', 'color']
191+
] };
192+
193+
input = 'p {\n' +
194+
' /* One hell of a comment */\n' +
195+
' color: tomato;\n' +
196+
' // Get in line!\n' +
197+
' @var: white;\n' +
198+
' }';
199+
200+
expected = 'p {\n' +
201+
' // Get in line!\n' +
202+
' @var: white;\n' +
203+
' /* One hell of a comment */\n' +
204+
' color: tomato;\n' +
205+
' }';
206+
});
207+
208+
it('Should group declarations with proper comments and spaces (multiple lines). Test 3', function() {
209+
config = { 'sort-order': [
210+
['$variable', 'color']
211+
] };
212+
213+
input = 'p {\n' +
214+
' color: tomato; /* One hell of a comment */\n' +
215+
' @var: white; // Get in line!\n' +
216+
' }';
217+
218+
expected = 'p {\n' +
219+
' @var: white; // Get in line!\n' +
220+
' color: tomato; /* One hell of a comment */\n' +
221+
' }';
222+
});
223+
224+
it('Should divide properties from different groups with an empty line', function() {
225+
config = { 'sort-order': [
226+
['top'], ['color']
227+
] };
228+
229+
input = 'div {\n' +
230+
' color: tomato;\n' +
231+
' top: 0;\n' +
232+
'}';
233+
234+
expected = 'div {\n' +
235+
' top: 0;\n' +
236+
'\n' +
237+
' color: tomato;\n' +
238+
'}';
239+
});
240+
241+
it('Should sort variables', function() {
242+
config = { 'sort-order': [
243+
['$variable', 'color']
244+
] };
245+
246+
input = 'div { color: @red; @red: tomato; }';
247+
248+
expected = 'div {@red: tomato; color: @red; }';
249+
});
250+
251+
it('Should sort imports', function() {
252+
config = { 'sort-order': [
253+
['$import', 'color']
254+
] };
255+
256+
input = 'div { color: tomato; @import "foo.css"; }';
257+
258+
expected = 'div {@import "foo.css"; color: tomato; }';
259+
});
260+
261+
it('Should sort included mixins. Test 1', function() {
262+
config = { 'sort-order': [
263+
['$include', 'color', 'border-top', 'border-bottom']
264+
] };
265+
266+
input = '.bordered {\n' +
267+
' border-bottom: solid 2px black;\n' +
268+
' border-top: dotted 1px black;\n' +
269+
' }\n' +
270+
'#menu a {\n' +
271+
' color: #111;\n' +
272+
' .bordered;\n' +
273+
' }\n' +
274+
'.post a {\n' +
275+
' color: red;\n' +
276+
' .bordered;\n' +
277+
' }';
278+
279+
expected = '.bordered {\n' +
280+
' border-top: dotted 1px black;\n' +
281+
' border-bottom: solid 2px black;\n' +
282+
' }\n' +
283+
'#menu a {\n' +
284+
' .bordered;\n' +
285+
' color: #111;\n' +
286+
' }\n' +
287+
'.post a {\n' +
288+
' .bordered;\n' +
289+
' color: red;\n' +
290+
' }';
291+
});
292+
293+
it('Should sort included mixins. Test 2', function() {
294+
config = { 'sort-order': [
295+
['$include', 'top', 'color']
296+
] };
297+
298+
input = '.test {\n' +
299+
' .test1();\n' +
300+
' color: tomato;\n' +
301+
' .test2();\n' +
302+
' top: 0;\n' +
303+
' }';
304+
305+
expected = '.test {\n' +
306+
' .test1();\n' +
307+
' .test2();\n' +
308+
' top: 0;\n' +
309+
' color: tomato;\n' +
310+
' }';
311+
});
312+
});
313+
});

0 commit comments

Comments
 (0)