Skip to content

Commit

Permalink
Merge 6ebed13 into fc02953
Browse files Browse the repository at this point in the history
  • Loading branch information
@bartveneman
bartveneman committed Sep 4, 2018
2 parents fc02953 + 6ebed13 commit 600d573
Show file tree
Hide file tree
Showing 7 changed files with 245 additions and 8 deletions.
3 changes: 2 additions & 1 deletion package.json
View file
Expand Up @@ -35,7 +35,8 @@
"path": "^0.12.7",
"postcss": "^7.0.1",
"postcss-values-parser": "^1.5.0",
"specificity": "^0.4.0"
"specificity": "^0.4.0",
"tinycolor2": "^1.4.1"
},
"devDependencies": {
"ava": "^0.25.0",
Expand Down
3 changes: 2 additions & 1 deletion readme.md
View file
Expand Up @@ -158,7 +158,8 @@ analyze('foo {}')
// colors: {
// total: 0,
// totalUnique: 0,
// unique: []
// unique: [],
// duplicates: []
// },
// fontfamilies: {
// total: 0,
Expand Down
81 changes: 80 additions & 1 deletion src/analyzer/values/colors.js
View file
@@ -1,5 +1,6 @@
const valueParser = require('postcss-values-parser')
const cssColorNames = require('css-color-names')
const tinycolor = require('tinycolor2')

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

Expand Down Expand Up @@ -47,6 +48,81 @@ function extractColorsFromDeclaration(declaration) {
return declaration
}

const addCount = color => {
return {
...color,
count: color.aliases.reduce((acc, curr) => {
return acc + curr.count
}, 0)
}
}

const addShortestNotation = color => {
return {
...color,
value: [...color.aliases].sort((a, b) => {
return a.value.length - b.value.length
}).shift().value
}
}

const addAliases = (acc, curr) => {
if (!acc[curr.key]) {
acc[curr.key] = {
key: curr.key,
aliases: []
}
}

acc[curr.key] = {
...acc[curr.key],
aliases: [...acc[curr.key].aliases, curr]
}

return acc
}

const filterDuplicateColors = color => {
// Filter out the actual duplicate colors
return color.aliases.length > 1
}

const validateColor = color => {
return tinycolor(color.value).isValid()
}

const normalizeColors = color => {
// Add a normalized value
return {
...color,
key: tinycolor(color.value).toHslString()
}
}

const rmTmpProps = color => {
// Remove temporary props that were needed for analysis
const {key, ...restColor} = color
return {
...restColor,
aliases: color.aliases.map(alias => {
const {key, ...restAlias} = alias
return restAlias
})
}
}

const withAliases = colors => Object
.values(
colors
.filter(validateColor)
.map(normalizeColors)
.reduce(addAliases, {})
)
.filter(filterDuplicateColors)
.map(addCount)
.map(addShortestNotation)
.map(rmTmpProps)

module.exports = declarations => {
const all = declarations
.map(extractColorsFromDeclaration)
Expand All @@ -55,9 +131,12 @@ module.exports = declarations => {
.reduce((allColors, declarationColors) => {
return [...allColors, ...declarationColors]
}, [])
const {totalUnique, unique} = uniquer(all)

return {
total: all.length,
...uniquer(all)
unique,
totalUnique,
duplicates: withAliases(unique)
}
}
3 changes: 2 additions & 1 deletion test/analyzer/index.js
View file
Expand Up @@ -141,7 +141,8 @@ test('Returns the correct analysis object structure', async t => {
colors: {
total: 0,
totalUnique: 0,
unique: []
unique: [],
duplicates: []
},
fontfamilies: {
total: 0,
Expand Down
11 changes: 11 additions & 0 deletions test/analyzer/values/input.css
View file
Expand Up @@ -48,6 +48,7 @@
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%);
Expand All @@ -57,6 +58,16 @@
color: hsl(270, 60%, 50%, 15%);
color: hsl(270 60% 50% / .15);
color: hsl(270 60% 50% / 15%);

/* Duplicate colors */
color: #000;
color: #000000;
color: black;
color: black; /* duplicate */
color: rgb(0,0,0);
color: rgba(0,0,0,1);
color: hsl(0,0,0);
color: hsla(0,0,0,1);
}
.color-keyword {
outline: 1px solid tomato;
Expand Down
148 changes: 144 additions & 4 deletions test/analyzer/values/output.json
View file
@@ -1,5 +1,5 @@
{
"total": 83,
"total": 91,
"fontfamilies": {
"total": 18,
"totalUnique": 12,
Expand Down Expand Up @@ -121,12 +121,20 @@
"count": 1
}
],
"share": 0.04819277108433735
"share": 0.04395604395604396
},
"colors": {
"total": 29,
"totalUnique": 28,
"total": 37,
"totalUnique": 35,
"unique": [
{
"value": "#000",
"count": 1
},
{
"value": "#000000",
"count": 1
},
{
"value": "#0000ff00",
"count": 1
Expand All @@ -147,10 +155,18 @@
"value": "Aqua",
"count": 1
},
{
"value": "black",
"count": 2
},
{
"value": "hsl(.75turn, 60%, 70%)",
"count": 1
},
{
"value": "hsl(0,0,0)",
"count": 1
},
{
"value": "hsl(100, 10%, 20%)",
"count": 1
Expand Down Expand Up @@ -198,6 +214,10 @@
"value": "hsl(4.71239rad, 60%, 70%)",
"count": 1
},
{
"value": "hsla(0,0,0,1)",
"count": 1
},
{
"value": "hsla(100, 20%, 30%, 0.5)",
"count": 1
Expand All @@ -206,6 +226,10 @@
"value": "purple",
"count": 2
},
{
"value": "rgb(0,0,0)",
"count": 1
},
{
"value": "rgb(100, 200, 10)",
"count": 1
Expand All @@ -214,6 +238,10 @@
"value": "rgb(255, 255, 255)",
"count": 1
},
{
"value": "rgba(0,0,0,1)",
"count": 1
},
{
"value": "rgba(100, 200, 10, .5)",
"count": 1
Expand All @@ -238,6 +266,118 @@
"value": "whitesmoke",
"count": 1
}
],
"duplicates": [
{
"count": 8,
"value": "#000",
"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
},
{
"value": "rgba(0,0,0,1)",
"count": 1
}
]
},
{
"value": "#fff",
"count": 4,
"aliases": [
{
"count": 1,
"value": "#fff"
},
{
"count": 1,
"value": "hsl(360, 100%, 100%)"
},
{
"count": 1,
"value": "rgb(255, 255, 255)"
},
{
"count": 1,
"value": "white"
}
]
},
{
"value": "hsl(270 60% 50% / .15)",
"count": 4,
"aliases": [
{
"count": 1,
"value": "hsl(270 60% 50% / .15)"
},
{
"count": 1,
"value": "hsl(270 60% 50% / 15%)"
},
{
"count": 1,
"value": "hsl(270, 60%, 50%, .15)"
},
{
"count": 1,
"value": "hsl(270, 60%, 50%, 15%)"
}
]
},
{
"value": "hsl(270 60% 70%)",
"count": 3,
"aliases": [
{
"count": 1,
"value": "hsl(270 60% 70%)"
},
{
"count": 1,
"value": "hsl(270, 60%, 70%)"
},
{
"count": 1,
"value": "hsl(270,60%,70%)"
}
]
},
{
"value": "rgba(100, 200, 10, .5)",
"count": 2,
"aliases": [
{
"count": 1,
"value": "rgba(100, 200, 10, .5)"
},
{
"count": 1,
"value": "rgba(100, 200, 10, 0.5)"
}
]
}
]
}
}
4 changes: 4 additions & 0 deletions yarn.lock
View file
Expand Up @@ -4474,6 +4474,10 @@ timed-out@^4.0.0:
version "4.0.1"
resolved "https://registry.yarnpkg.com/timed-out/-/timed-out-4.0.1.tgz#f32eacac5a175bea25d7fab565ab3ed8741ef56f"

tinycolor2@^1.4.1:
version "1.4.1"
resolved "https://registry.yarnpkg.com/tinycolor2/-/tinycolor2-1.4.1.tgz#f4fad333447bc0b07d4dc8e9209d8f39a8ac77e8"

tmp@^0.0.33:
version "0.0.33"
resolved "https://registry.yarnpkg.com/tmp/-/tmp-0.0.33.tgz#6d34335889768d21b2bcda0aa277ced3b1bfadf9"
Expand Down

0 comments on commit 600d573

Please sign in to comment.