color-sorter - npm Package Compare versions

Comparing version 4.0.1 to 5.0.0

color-sorter.js

@@ -1,5 +0,8 @@
-const tinycolor = require('tinycolor2')
+const {colord, extend} = require('colord')
+const namesPlugin = require('colord/plugins/names')
 
+extend([namesPlugin])
+
 const convert = color => {
-	const {h: hue, s: saturation, l: lightness, a: alpha} = tinycolor(
+	const {h: hue, s: saturation, l: lightness, a: alpha} = colord(
 		color
@@ -21,12 +24,2 @@ ).toHsl()
 
-	// Move fully transparent colors to the back and
-	// sort by A-Z if both colors are fully transparent
-	if (colorA.alpha === 0 || colorB.alpha === 0) {
-		if (colorA.alpha === colorB.alpha) {
-			return colorA.authored.toLowerCase().localeCompare(colorB.authored.toLowerCase())
-		}
-
-		return colorB.alpha - colorA.alpha
-	}
-
 	// Move grey-ish values to the back
@@ -58,5 +51,7 @@ if (
 	// Sort by transparency, least transparent first
-	if (colorA.alpha !== colorB.alpha) {
-		return colorB.alpha - colorA.alpha
+	if (colorA.alpha === colorB.alpha) {
+		return colorA.authored.toLowerCase().localeCompare(colorB.authored.toLowerCase())
 	}
+
+	return colorB.alpha - colorA.alpha
 }
@@ -63,0 +58,0 @@

package.json

 {
   "name": "color-sorter",
-  "version": "4.0.1",
-  "description": "Sort colors by hue, then saturation.",
+  "version": "5.0.0",
+  "description": "Sort colors in a visually pleasing way.",
   "homepage": "https://www.projectwallace.com/oss",
@@ -10,3 +10,6 @@ "main": "color-sorter.js",
   },
-  "repository": "bartveneman/color-sorter",
+  "engines": {
+    "node": ">=10"
+  },
+  "repository": "projectwallace/color-sorter",
   "keywords": [
@@ -24,12 +27,12 @@ "css",
   "bugs": {
-    "url": "https://github.com/bartveneman/color-sorter/issues"
+    "url": "https://github.com/projectwallace/color-sorter/issues"
   },
   "dependencies": {
-    "tinycolor2": "^1.4.1"
+    "colord": "^1.1.0"
   },
   "devDependencies": {
     "@bartveneman/eslint-config-bv": "0.0.2",
-    "ava": "^3.5.0",
-    "eslint": "^6.3.0",
-    "nyc": "^15.0.0"
+    "ava": "^3.15.0",
+    "eslint": "^7.24.0",
+    "nyc": "^15.1.0"
   },
@@ -36,0 +39,0 @@ "eslintConfig": {

readme.md

 # color-sorter
 
 [![NPM Version](https://img.shields.io/npm/v/color-sorter.svg)](https://www.npmjs.com/package/color-sorter)
-[![Build Status](https://travis-ci.org/bartveneman/color-sorter.svg?branch=master)](https://travis-ci.org/bartveneman/color-sorter)
+![Build](https://github.com/bartveneman/color-sorter/workflows/Node.js%20Package/badge.svg?branch=master)
 [![Known Vulnerabilities](https://snyk.io/test/github/bartveneman/color-sorter/badge.svg)](https://snyk.io/test/github/bartveneman/color-sorter)
@@ -11,2 +11,4 @@ ![Dependencies Status](https://img.shields.io/david/bartveneman/color-sorter.svg)
 
+![Color sorter](https://repository-images.githubusercontent.com/142018423/f0333800-be49-11ea-8033-0e3df5daf1ab)
+
 Sort CSS colors by hue, then by saturation. Black-grey-white colors (colors with
@@ -66,4 +68,3 @@ 0% saturation) are shifted to the end. Fully transparent colors are placed at
   @projectwallace/css-analyzer
-- [Gromit](https://github.com/bartveneman/gromit-cli) - A test framework to
-  assert that CSS doesn't exceeds certain thresholds
+- [Constyble](https://github.com/bartveneman/constyble) - A CSS complexity linter, based on css-analyzer. Don't let your CSS grow beyond the thresholds that you provide.
 
@@ -70,0 +71,0 @@ ## License

test.js

@@ -28,4 +28,4 @@ const test = require('ava')
 			hue: 0,
-			saturation: 1,
-			lightness: 0.5,
+			saturation: 100,
+			lightness: 50,
 			alpha: 1,
@@ -61,3 +61,3 @@ authored: color.authored
 		'hsl(0, 50%, 50%)',
-		'hsl(50, 50%, 50%)',
+		'hsl(50, 20%, 50%)',
 		'hsl(50, 100%, 50%)'
@@ -68,4 +68,4 @@ ]
 		'hsl(0, 100%, 50%)',
-		'hsl(50, 100%, 50%)',
-		'hsl(50, 50%, 50%)'
+		'hsl(50, 20%, 50%)',
+		'hsl(50, 100%, 50%)'
 	]
@@ -127,4 +127,4 @@ const actual = colorSorter(colors)
 		'hsla(0, 0, 10%, 1)',
-		'hsla(0, 0, 0, 0)',
-		'hsla(0, 0, 10%, 0)'
+		'hsla(0, 0, 10%, 0)',
+		'hsla(0, 0, 0, 0)'
 	]
@@ -136,8 +136,64 @@ const actual = colorSorter(colors)
 
-test('Fully transparent colors are shifted to the end', t => {
-	const colors = ['hsla(0, 0, 0, 0)', 'hsla(0, 0, 0, .5)', 'hsla(0, 0, 0, 1)']
+test('Fully transparent colors are sorted along their opaque companions', t => {
+	const colors = ['rgba(255, 0, 0, 0)', 'hsla(0, 100%, 50%, 0.1)', 'red']
 	const actual = colorSorter(colors)
-	const expected = ['hsla(0, 0, 0, 1)', 'hsla(0, 0, 0, .5)', 'hsla(0, 0, 0, 0)']
+	const expected = ['red', 'hsla(0, 100%, 50%, 0.1)', 'rgba(255, 0, 0, 0)']
 
 	t.deepEqual(actual, expected)
 })
+
+test('smoke test', t => {
+	const colors = [
+		'#4b4747',
+		'#d70c0b',
+		'#f00',
+		'#f22b24',
+		'#ff6930',
+		'#eb6c1e',
+		'#eb6d1e',
+		'#f57917',
+		'#ff8a0a',
+		'#f7a336',
+		'#feb95a',
+		'#eca920',
+		'#f1c15d',
+		'#f1c260',
+		'#ff0',
+		'#c8d05b',
+		'#ccd557',
+		'#d2ff52',
+		'#10ac47',
+		'#04a03b',
+		'#03fff3',
+		'#25bbc3',
+		'#38d7df',
+		'#15b8ec',
+		'#00adea',
+		'#8e34c9',
+		'#9a3dd1',
+		'#cd66f6',
+		'#fff',
+		'rgba(255,255,255,0.2)',
+		'rgba(255,255,255,0.07)',
+		'#f9f9f9',
+		'#f4f4f4',
+		'#f2f2f2',
+		'#e4e4e4',
+		'#ddd',
+		'#c0c0c0',
+		'#666',
+		'#4a4a4a',
+		'#1d1d1d',
+		'#0d0d0d',
+		'#000',
+		'rgba(0,0,0,0.8)',
+		'rgba(0,0,0,0.6)',
+		'rgba(0,0,0,0.4)',
+		'rgba(0,0,0,0.1)',
+		'rgba(0,0,0,0.05)'
+	]
+	const expected = [...colors]
+	const actual = colorSorter(colors)
+
+	t.deepEqual(actual, expected)
+})

No alert changes

Improved metrics

Total package byte prevSize

17253

increased by6.05%

Number of package files

13

increased by8.33%

Lines of code

223

increased by28.16%

Number of lines in readme file

72

increased by1.41%

Dependency changes

• + Addedcolord@^1.1.0

• + Addedcolord@1.7.2(transitive)

• - Removedtinycolor2@^1.4.1

• - Removedtinycolor2@1.6.0(transitive)