Skip to content

Commit b91f292

Browse files
bartvenemanbartveneman
authored
Sort colors (#60)
1 parent e91cdf8 commit b91f292

File tree

5 files changed

+99
-102
lines changed

5 files changed

+99
-102
lines changed

‎package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -29,6 +29,7 @@
2929
"semicolon": false
3030
},
3131
"dependencies": {
32+
"color-sorter": "^2.0.0",
3233
"css-color-names": "^0.0.4",
3334
"css-shorthand-expand": "^1.2.0",
3435
"css-unit-sort": "^1.1.1",

‎src/analyzer/values/colors.js‎

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
const valueParser = require('postcss-values-parser')
22
const cssColorNames = require('css-color-names')
33
const tinycolor = require('tinycolor2')
4+
const sortColors = require('color-sorter')
45

56
const uniquer = require('../../utils/uniquer')
67

@@ -135,10 +136,14 @@ module.exports = declarations => {
135136
}, [])
136137
const {totalUnique, unique} = uniquer(all)
137138

139+
// Uniquer sorts the colors, so sort them here once more
140+
const sorted = sortColors(unique.map(c => c.value))
141+
const uniqueSorted = sorted.map(c => unique.find(u => u.value === c))
142+
138143
return {
139144
total: all.length,
140-
unique,
145+
unique: uniqueSorted,
141146
totalUnique,
142-
duplicates: withAliases(unique)
147+
duplicates: withAliases(uniqueSorted)
143148
}
144149
}

‎test/analyzer/values/input.css‎

Lines changed: 0 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -48,10 +48,6 @@
4848
color: hsl(270,60%,70%);
4949
color: hsl(270, 60%, 70%);
5050
color: hsl(270 60% 70%);
51-
/** tinycolor doesn't support these color formats, so they won't show up as aliases/duplicates */
52-
color: hsl(270deg, 60%, 70%);
53-
color: hsl(4.71239rad, 60%, 70%);
54-
color: hsl(.75turn, 60%, 70%);
5551

5652
/* These examples all specify the same color: a lavender that is 15% opaque. */
5753
color: hsl(270, 60%, 50%, .15);

‎test/analyzer/values/output.json‎

Lines changed: 85 additions & 96 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
{
2-
"total": 93,
2+
"total": 90,
33
"fontfamilies": {
44
"total": 18,
55
"totalUnique": 12,
@@ -121,77 +121,70 @@
121121
"count": 1
122122
}
123123
],
124-
"share": 0.043010752688172046
124+
"share": 0.044444444444444446
125125
},
126126
"colors": {
127-
"total": 39,
128-
"totalUnique": 37,
127+
"total": 36,
128+
"totalUnique": 34,
129129
"unique": [
130130
{
131-
"value": "#000",
131+
"value": "tomato",
132132
"count": 1
133133
},
134134
{
135-
"value": "#000000",
135+
"value": "#aff034",
136136
"count": 1
137137
},
138138
{
139-
"value": "#0000ff00",
139+
"value": "rgb(100, 200, 10)",
140140
"count": 1
141141
},
142142
{
143-
"value": "#aaa",
143+
"value": "rgba(100, 200, 10, 0.5)",
144144
"count": 1
145145
},
146146
{
147-
"value": "#aff034",
147+
"value": "rgba(100, 200, 10, .5)",
148148
"count": 1
149149
},
150150
{
151-
"value": "#d9d9d9",
151+
"value": "hsl(100, 10%, 20%)",
152152
"count": 1
153153
},
154154
{
155-
"value": "#dadada",
155+
"value": "hsl(100, 20%, 30%)",
156156
"count": 1
157157
},
158158
{
159-
"value": "#fff",
159+
"value": "hsla(100, 20%, 30%, 0.5)",
160160
"count": 1
161161
},
162162
{
163163
"value": "Aqua",
164164
"count": 1
165165
},
166166
{
167-
"value": "black",
168-
"count": 2
169-
},
170-
{
171-
"value": "hsl(.75turn, 60%, 70%)",
167+
"value": "#0000ff00",
172168
"count": 1
173169
},
174170
{
175-
"value": "hsl(0,0,0)",
171+
"value": "hsl(270, 60%, 70%)",
176172
"count": 1
177173
},
178174
{
179-
"value": "hsl(100, 10%, 20%)",
175+
"value": "hsl(270,60%,70%)",
180176
"count": 1
181177
},
182178
{
183-
"value": "hsl(100, 20%, 30%)",
179+
"value": "hsl(270 60% 70%)",
184180
"count": 1
185181
},
186182
{
187-
"value": "hsl(270 60% 50% / .15)",
188-
"count": 1
189-
}, {
190183
"value": "hsl(270 60% 50% / 15%)",
191184
"count": 1
192185
},
193186
{
194-
"value": "hsl(270 60% 70%)",
187+
"value": "hsl(270 60% 50% / .15)",
195188
"count": 1
196189
},
197190
{
@@ -203,146 +196,118 @@
203196
"count": 1
204197
},
205198
{
206-
"value": "hsl(270, 60%, 70%)",
207-
"count": 1
208-
},
209-
{
210-
"value": "hsl(270,60%,70%)",
211-
"count": 1
199+
"value": "purple",
200+
"count": 2
212201
},
213202
{
214-
"value": "hsl(270deg, 60%, 70%)",
203+
"value": "white",
215204
"count": 1
216205
},
217206
{
218207
"value": "hsl(360, 100%, 100%)",
219208
"count": 1
220209
},
221210
{
222-
"value": "hsl(4.71239rad, 60%, 70%)",
211+
"value": "#fff",
223212
"count": 1
224213
},
225214
{
226-
"value": "hsla(0,0,0,1)",
215+
"value": "rgb(255, 255, 255)",
227216
"count": 1
228217
},
229218
{
230-
"value": "hsla(100, 20%, 30%, 0.5)",
219+
"value": "whitesmoke",
231220
"count": 1
232221
},
233222
{
234-
"value": "purple",
235-
"count": 2
236-
},
237-
{
238-
"value": "rgb(0,0,0)",
223+
"value": "#dadada",
239224
"count": 1
240225
},
241226
{
242-
"value": "rgb(100, 200, 10)",
227+
"value": "#d9d9d9",
243228
"count": 1
244229
},
245230
{
246-
"value": "rgb(255, 255, 255)",
231+
"value": "#aaa",
247232
"count": 1
248233
},
249234
{
250235
"value": "rgba(0,0,0,1)",
251236
"count": 1
252237
},
253238
{
254-
"value": "rgba(100, 200, 10, .5)",
239+
"value": "black",
240+
"count": 2
241+
},
242+
{
243+
"value": "hsl(0,0,0)",
255244
"count": 1
256245
},
257246
{
258-
"value": "rgba(100, 200, 10, 0.5)",
247+
"value": "#000",
259248
"count": 1
260249
},
261250
{
262-
"value": "rgba(2,2,2,.2)",
251+
"value": "rgb(0,0,0)",
263252
"count": 1
264253
},
265254
{
266-
"value": "tomato",
255+
"value": "hsla(0,0,0,1)",
267256
"count": 1
268257
},
269258
{
270-
"value": "white",
259+
"value": "#000000",
271260
"count": 1
272261
},
273262
{
274-
"value": "whitesmoke",
263+
"value": "rgba(2,2,2,.2)",
275264
"count": 1
276265
}
277266
],
278267
"duplicates": [
279268
{
280-
"count": 8,
281-
"value": "#000",
269+
"value": "rgba(100, 200, 10, .5)",
270+
"count": 2,
282271
"aliases": [
283272
{
284-
"value": "#000",
285-
"count": 1
286-
},
287-
{
288-
"value": "#000000",
289-
"count": 1
290-
},
291-
{
292-
"value": "black",
293-
"count": 2
294-
},
295-
{
296-
"value": "hsl(0,0,0)",
297-
"count": 1
298-
},
299-
{
300-
"value": "hsla(0,0,0,1)",
301-
"count": 1
302-
},
303-
{
304-
"value": "rgb(0,0,0)",
305-
"count": 1
273+
"count": 1,
274+
"value": "rgba(100, 200, 10, 0.5)"
306275
},
307276
{
308-
"value": "rgba(0,0,0,1)",
309-
"count": 1
277+
"count": 1,
278+
"value": "rgba(100, 200, 10, .5)"
310279
}
311280
]
312281
},
313282
{
314-
"value": "#fff",
315-
"count": 4,
283+
"value": "hsl(270,60%,70%)",
284+
"count": 3,
316285
"aliases": [
317286
{
318287
"count": 1,
319-
"value": "#fff"
320-
},
321-
{
322-
"count": 1,
323-
"value": "hsl(360, 100%, 100%)"
288+
"value": "hsl(270, 60%, 70%)"
324289
},
325290
{
326291
"count": 1,
327-
"value": "rgb(255, 255, 255)"
292+
"value": "hsl(270,60%,70%)"
328293
},
329294
{
330295
"count": 1,
331-
"value": "white"
296+
"value": "hsl(270 60% 70%)"
332297
}
333298
]
334299
},
335300
{
336-
"value": "hsl(270 60% 50% / .15)",
301+
"value": "hsl(270 60% 50% / 15%)",
337302
"count": 4,
338303
"aliases": [
339304
{
340305
"count": 1,
341-
"value": "hsl(270 60% 50% / .15)"
306+
"value": "hsl(270 60% 50% / 15%)"
342307
},
343308
{
344309
"count": 1,
345-
"value": "hsl(270 60% 50% / 15%)"
310+
"value": "hsl(270 60% 50% / .15)"
346311
},
347312
{
348313
"count": 1,
@@ -355,34 +320,58 @@
355320
]
356321
},
357322
{
358-
"value": "hsl(270 60% 70%)",
359-
"count": 3,
323+
"value": "#fff",
324+
"count": 4,
360325
"aliases": [
361326
{
362327
"count": 1,
363-
"value": "hsl(270 60% 70%)"
328+
"value": "white"
364329
},
365330
{
366331
"count": 1,
367-
"value": "hsl(270, 60%, 70%)"
332+
"value": "hsl(360, 100%, 100%)"
368333
},
369334
{
370335
"count": 1,
371-
"value": "hsl(270,60%,70%)"
336+
"value": "#fff"
337+
},
338+
{
339+
"count": 1,
340+
"value": "rgb(255, 255, 255)"
372341
}
373342
]
374343
},
375344
{
376-
"value": "rgba(100, 200, 10, .5)",
377-
"count": 2,
345+
"count": 8,
346+
"value": "#000",
378347
"aliases": [
379348
{
380-
"count": 1,
381-
"value": "rgba(100, 200, 10, .5)"
349+
"value": "rgba(0,0,0,1)",
350+
"count": 1
382351
},
383352
{
384-
"count": 1,
385-
"value": "rgba(100, 200, 10, 0.5)"
353+
"value": "black",
354+
"count": 2
355+
},
356+
{
357+
"value": "hsl(0,0,0)",
358+
"count": 1
359+
},
360+
{
361+
"value": "#000",
362+
"count": 1
363+
},
364+
{
365+
"value": "rgb(0,0,0)",
366+
"count": 1
367+
},
368+
{
369+
"value": "hsla(0,0,0,1)",
370+
"count": 1
371+
},
372+
{
373+
"value": "#000000",
374+
"count": 1
386375
}
387376
]
388377
}

0 commit comments

Comments
 (0)