diff --git a/package.json b/package.json index ac04f4b..d0fc29f 100644 --- a/package.json +++ b/package.json @@ -29,6 +29,7 @@ "semicolon": false }, "dependencies": { + "color-sorter": "^2.0.0", "css-color-names": "^0.0.4", "css-shorthand-expand": "^1.2.0", "css-unit-sort": "^1.1.1", diff --git a/src/analyzer/values/colors.js b/src/analyzer/values/colors.js index d74a93a..ec6f945 100644 --- a/src/analyzer/values/colors.js +++ b/src/analyzer/values/colors.js @@ -1,6 +1,7 @@ const valueParser = require('postcss-values-parser') const cssColorNames = require('css-color-names') const tinycolor = require('tinycolor2') +const sortColors = require('color-sorter') const uniquer = require('../../utils/uniquer') @@ -135,10 +136,14 @@ module.exports = declarations => { }, []) const {totalUnique, unique} = uniquer(all) + // Uniquer sorts the colors, so sort them here once more + const sorted = sortColors(unique.map(c => c.value)) + const uniqueSorted = sorted.map(c => unique.find(u => u.value === c)) + return { total: all.length, - unique, + unique: uniqueSorted, totalUnique, - duplicates: withAliases(unique) + duplicates: withAliases(uniqueSorted) } } diff --git a/test/analyzer/values/input.css b/test/analyzer/values/input.css index 209a462..00d4671 100644 --- a/test/analyzer/values/input.css +++ b/test/analyzer/values/input.css @@ -48,10 +48,6 @@ color: hsl(270,60%,70%); color: hsl(270, 60%, 70%); color: hsl(270 60% 70%); - /** tinycolor doesn't support these color formats, so they won't show up as aliases/duplicates */ - color: hsl(270deg, 60%, 70%); - color: hsl(4.71239rad, 60%, 70%); - color: hsl(.75turn, 60%, 70%); /* These examples all specify the same color: a lavender that is 15% opaque. */ color: hsl(270, 60%, 50%, .15); diff --git a/test/analyzer/values/output.json b/test/analyzer/values/output.json index b21db77..09c386d 100644 --- a/test/analyzer/values/output.json +++ b/test/analyzer/values/output.json @@ -1,5 +1,5 @@ { - "total": 93, + "total": 90, "fontfamilies": { "total": 18, "totalUnique": 12, @@ -121,42 +121,42 @@ "count": 1 } ], - "share": 0.043010752688172046 + "share": 0.044444444444444446 }, "colors": { - "total": 39, - "totalUnique": 37, + "total": 36, + "totalUnique": 34, "unique": [ { - "value": "#000", + "value": "tomato", "count": 1 }, { - "value": "#000000", + "value": "#aff034", "count": 1 }, { - "value": "#0000ff00", + "value": "rgb(100, 200, 10)", "count": 1 }, { - "value": "#aaa", + "value": "rgba(100, 200, 10, 0.5)", "count": 1 }, { - "value": "#aff034", + "value": "rgba(100, 200, 10, .5)", "count": 1 }, { - "value": "#d9d9d9", + "value": "hsl(100, 10%, 20%)", "count": 1 }, { - "value": "#dadada", + "value": "hsl(100, 20%, 30%)", "count": 1 }, { - "value": "#fff", + "value": "hsla(100, 20%, 30%, 0.5)", "count": 1 }, { @@ -164,34 +164,27 @@ "count": 1 }, { - "value": "black", - "count": 2 - }, - { - "value": "hsl(.75turn, 60%, 70%)", + "value": "#0000ff00", "count": 1 }, { - "value": "hsl(0,0,0)", + "value": "hsl(270, 60%, 70%)", "count": 1 }, { - "value": "hsl(100, 10%, 20%)", + "value": "hsl(270,60%,70%)", "count": 1 }, { - "value": "hsl(100, 20%, 30%)", + "value": "hsl(270 60% 70%)", "count": 1 }, { - "value": "hsl(270 60% 50% / .15)", - "count": 1 - }, { "value": "hsl(270 60% 50% / 15%)", "count": 1 }, { - "value": "hsl(270 60% 70%)", + "value": "hsl(270 60% 50% / .15)", "count": 1 }, { @@ -203,15 +196,11 @@ "count": 1 }, { - "value": "hsl(270, 60%, 70%)", - "count": 1 - }, - { - "value": "hsl(270,60%,70%)", - "count": 1 + "value": "purple", + "count": 2 }, { - "value": "hsl(270deg, 60%, 70%)", + "value": "white", "count": 1 }, { @@ -219,31 +208,27 @@ "count": 1 }, { - "value": "hsl(4.71239rad, 60%, 70%)", + "value": "#fff", "count": 1 }, { - "value": "hsla(0,0,0,1)", + "value": "rgb(255, 255, 255)", "count": 1 }, { - "value": "hsla(100, 20%, 30%, 0.5)", + "value": "whitesmoke", "count": 1 }, { - "value": "purple", - "count": 2 - }, - { - "value": "rgb(0,0,0)", + "value": "#dadada", "count": 1 }, { - "value": "rgb(100, 200, 10)", + "value": "#d9d9d9", "count": 1 }, { - "value": "rgb(255, 255, 255)", + "value": "#aaa", "count": 1 }, { @@ -251,98 +236,78 @@ "count": 1 }, { - "value": "rgba(100, 200, 10, .5)", + "value": "black", + "count": 2 + }, + { + "value": "hsl(0,0,0)", "count": 1 }, { - "value": "rgba(100, 200, 10, 0.5)", + "value": "#000", "count": 1 }, { - "value": "rgba(2,2,2,.2)", + "value": "rgb(0,0,0)", "count": 1 }, { - "value": "tomato", + "value": "hsla(0,0,0,1)", "count": 1 }, { - "value": "white", + "value": "#000000", "count": 1 }, { - "value": "whitesmoke", + "value": "rgba(2,2,2,.2)", "count": 1 } ], "duplicates": [ { - "count": 8, - "value": "#000", + "value": "rgba(100, 200, 10, .5)", + "count": 2, "aliases": [ { - "value": "#000", - "count": 1 - }, - { - "value": "#000000", - "count": 1 - }, - { - "value": "black", - "count": 2 - }, - { - "value": "hsl(0,0,0)", - "count": 1 - }, - { - "value": "hsla(0,0,0,1)", - "count": 1 - }, - { - "value": "rgb(0,0,0)", - "count": 1 + "count": 1, + "value": "rgba(100, 200, 10, 0.5)" }, { - "value": "rgba(0,0,0,1)", - "count": 1 + "count": 1, + "value": "rgba(100, 200, 10, .5)" } ] }, { - "value": "#fff", - "count": 4, + "value": "hsl(270,60%,70%)", + "count": 3, "aliases": [ { "count": 1, - "value": "#fff" - }, - { - "count": 1, - "value": "hsl(360, 100%, 100%)" + "value": "hsl(270, 60%, 70%)" }, { "count": 1, - "value": "rgb(255, 255, 255)" + "value": "hsl(270,60%,70%)" }, { "count": 1, - "value": "white" + "value": "hsl(270 60% 70%)" } ] }, { - "value": "hsl(270 60% 50% / .15)", + "value": "hsl(270 60% 50% / 15%)", "count": 4, "aliases": [ { "count": 1, - "value": "hsl(270 60% 50% / .15)" + "value": "hsl(270 60% 50% / 15%)" }, { "count": 1, - "value": "hsl(270 60% 50% / 15%)" + "value": "hsl(270 60% 50% / .15)" }, { "count": 1, @@ -355,34 +320,58 @@ ] }, { - "value": "hsl(270 60% 70%)", - "count": 3, + "value": "#fff", + "count": 4, "aliases": [ { "count": 1, - "value": "hsl(270 60% 70%)" + "value": "white" }, { "count": 1, - "value": "hsl(270, 60%, 70%)" + "value": "hsl(360, 100%, 100%)" }, { "count": 1, - "value": "hsl(270,60%,70%)" + "value": "#fff" + }, + { + "count": 1, + "value": "rgb(255, 255, 255)" } ] }, { - "value": "rgba(100, 200, 10, .5)", - "count": 2, + "count": 8, + "value": "#000", "aliases": [ { - "count": 1, - "value": "rgba(100, 200, 10, .5)" + "value": "rgba(0,0,0,1)", + "count": 1 }, { - "count": 1, - "value": "rgba(100, 200, 10, 0.5)" + "value": "black", + "count": 2 + }, + { + "value": "hsl(0,0,0)", + "count": 1 + }, + { + "value": "#000", + "count": 1 + }, + { + "value": "rgb(0,0,0)", + "count": 1 + }, + { + "value": "hsla(0,0,0,1)", + "count": 1 + }, + { + "value": "#000000", + "count": 1 } ] } diff --git a/yarn.lock b/yarn.lock index a29de9f..424074a 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1086,6 +1086,12 @@ color-name@1.1.1: version "1.1.1" resolved "https://registry.yarnpkg.com/color-name/-/color-name-1.1.1.tgz#4b1415304cf50028ea81643643bd82ea05803689" +color-sorter@^2.0.0: + version "2.0.0" + resolved "https://registry.yarnpkg.com/color-sorter/-/color-sorter-2.0.0.tgz#b802344624869234838e26b7baf8e13ae916b192" + dependencies: + tinycolor2 "^1.4.1" + combined-stream@^1.0.5, combined-stream@~1.0.5: version "1.0.6" resolved "https://registry.yarnpkg.com/combined-stream/-/combined-stream-1.0.6.tgz#723e7df6e801ac5613113a7e445a9b69cb632818"