Skip to content

Commit c52f409

Browse files
authored
move to ESM and remove swizzle functionality (#69)
* Move to ESM * Add declarations * Add `engines` field * Fixes * Updates
1 parent d9b04bb commit c52f409

File tree

8 files changed

+217
-181
lines changed

8 files changed

+217
-181
lines changed

.github/workflows/main.yml

Lines changed: 5 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -10,13 +10,12 @@ jobs:
1010
fail-fast: false
1111
matrix:
1212
node-version:
13-
- 17
14-
- 16
15-
- 14
16-
- 12
13+
- 22
14+
- 20
15+
- 18
1716
steps:
18-
- uses: actions/checkout@v2
19-
- uses: actions/setup-node@v2
17+
- uses: actions/checkout@v4
18+
- uses: actions/setup-node@v4
2019
with:
2120
node-version: ${{ matrix.node-version }}
2221
- run: npm install

.npmrc

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1 @@
1-
save-exact = true
2-
package-lock = false
3-
update-notifier = false
1+
package-lock=false

README.md

Lines changed: 16 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -4,10 +4,8 @@
44
55
## Install
66

7-
With [npm](http://npmjs.org/):
8-
9-
```console
10-
$ npm install color-string
7+
```sh
8+
npm install color-string
119
```
1210

1311
## Usage
@@ -44,19 +42,18 @@ colorString.get.rgb('invalid color string') // null
4442
### Generation
4543

4644
```js
47-
colorString.to.hex([255, 255, 255]) // "#FFFFFF"
48-
colorString.to.hex([0, 0, 255, 0.4]) // "#0000FF66"
49-
colorString.to.hex([0, 0, 255], 0.4) // "#0000FF66"
50-
colorString.to.rgb([255, 255, 255]) // "rgb(255, 255, 255)"
51-
colorString.to.rgb([0, 0, 255, 0.4]) // "rgba(0, 0, 255, 0.4)"
52-
colorString.to.rgb([0, 0, 255], 0.4) // "rgba(0, 0, 255, 0.4)"
53-
colorString.to.rgb.percent([0, 0, 255]) // "rgb(0%, 0%, 100%)"
54-
colorString.to.keyword([255, 255, 0]) // "yellow"
55-
colorString.to.hsl([360, 100, 100]) // "hsl(360, 100%, 100%)"
56-
colorString.to.hwb([50, 3, 15]) // "hwb(50, 3%, 15%)"
57-
58-
// all functions also support swizzling
59-
colorString.to.rgb(0, [0, 255], 0.4) // "rgba(0, 0, 255, 0.4)"
60-
colorString.to.rgb([0, 0], [255], 0.4) // "rgba(0, 0, 255, 0.4)"
61-
colorString.to.rgb([0], 0, [255, 0.4]) // "rgba(0, 0, 255, 0.4)"
45+
colorString.to.hex(255, 255, 255) // "#FFFFFF"
46+
colorString.to.hex(0, 0, 255, 0.4) // "#0000FF66"
47+
colorString.to.hex(0, 0, 255, 0.4) // "#0000FF66"
48+
colorString.to.rgb(255, 255, 255) // "rgb(255, 255, 255)"
49+
colorString.to.rgb(0, 0, 255, 0.4) // "rgba(0, 0, 255, 0.4)"
50+
colorString.to.rgb(0, 0, 255, 0.4) // "rgba(0, 0, 255, 0.4)"
51+
colorString.to.rgb.percent(0, 0, 255) // "rgb(0%, 0%, 100%)"
52+
colorString.to.keyword(255, 255, 0) // "yellow"
53+
colorString.to.hsl(360, 100, 100) // "hsl(360, 100%, 100%)"
54+
colorString.to.hwb(50, 3, 15) // "hwb(50, 3%, 15%)"
6255
```
56+
57+
## License
58+
59+
MIT

index.d.ts

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
export type Model = 'rgb' | 'hsl' | 'hwb';
2+
3+
export type ColorString = {
4+
get: {
5+
(color: string): {model: Model; value: number[]} | undefined;
6+
rgb: (color: string) => number[] | undefined;
7+
hsl: (color: string) => number[] | undefined;
8+
hwb: (color: string) => number[] | undefined;
9+
};
10+
to: {
11+
hex: (r: number, g: number, b: number, a?: number) => string | undefined;
12+
rgb: {
13+
(r: number, g: number, b: number, a?: number): string | undefined;
14+
percent: (r: number, g: number, b: number, a?: number) => string | undefined;
15+
};
16+
keyword: (r: number, g: number, b: number, a?: number) => string | undefined;
17+
hsl: (h: number, s: number, l: number, a?: number) => string | undefined;
18+
hwb: (h: number, w: number, b: number, a?: number) => string | undefined;
19+
};
20+
};
21+
22+
declare const colorString: ColorString;
23+
export default colorString;

index.js

Lines changed: 76 additions & 88 deletions
Original file line numberDiff line numberDiff line change
@@ -1,118 +1,112 @@
1-
/* MIT license */
2-
var colorNames = require('color-name');
3-
var swizzle = require('simple-swizzle');
4-
var hasOwnProperty = Object.hasOwnProperty;
1+
import colorNames from 'color-name';
52

6-
var reverseNames = Object.create(null);
3+
const reverseNames = Object.create(null);
74

8-
// create a list of reverse color names
9-
for (var name in colorNames) {
10-
if (hasOwnProperty.call(colorNames, name)) {
5+
// Create a list of reverse color names
6+
for (const name in colorNames) {
7+
if (Object.hasOwn(colorNames, name)) {
118
reverseNames[colorNames[name]] = name;
129
}
1310
}
1411

15-
var cs = module.exports = {
12+
const cs = {
1613
to: {},
17-
get: {}
14+
get: {},
1815
};
1916

2017
cs.get = function (string) {
21-
var prefix = string.substring(0, 3).toLowerCase();
22-
var val;
23-
var model;
18+
const prefix = string.slice(0, 3).toLowerCase();
19+
let value;
20+
let model;
2421
switch (prefix) {
25-
case 'hsl':
26-
val = cs.get.hsl(string);
22+
case 'hsl': {
23+
value = cs.get.hsl(string);
2724
model = 'hsl';
2825
break;
29-
case 'hwb':
30-
val = cs.get.hwb(string);
26+
}
27+
28+
case 'hwb': {
29+
value = cs.get.hwb(string);
3130
model = 'hwb';
3231
break;
33-
default:
34-
val = cs.get.rgb(string);
32+
}
33+
34+
default: {
35+
value = cs.get.rgb(string);
3536
model = 'rgb';
3637
break;
38+
}
3739
}
3840

39-
if (!val) {
41+
if (!value) {
4042
return null;
4143
}
4244

43-
return {model: model, value: val};
45+
return {model, value};
4446
};
4547

4648
cs.get.rgb = function (string) {
4749
if (!string) {
4850
return null;
4951
}
5052

51-
var abbr = /^#([a-f0-9]{3,4})$/i;
52-
var hex = /^#([a-f0-9]{6})([a-f0-9]{2})?$/i;
53-
var rgba = /^rgba?\(\s*([+-]?\d+)(?=[\s,])\s*(?:,\s*)?([+-]?\d+)(?=[\s,])\s*(?:,\s*)?([+-]?\d+)\s*(?:[,|\/]\s*([+-]?[\d\.]+)(%?)\s*)?\)$/;
54-
var per = /^rgba?\(\s*([+-]?[\d\.]+)\%\s*,?\s*([+-]?[\d\.]+)\%\s*,?\s*([+-]?[\d\.]+)\%\s*(?:[,|\/]\s*([+-]?[\d\.]+)(%?)\s*)?\)$/;
55-
var keyword = /^(\w+)$/;
53+
const abbr = /^#([a-f\d]{3,4})$/i;
54+
const hex = /^#([a-f\d]{6})([a-f\d]{2})?$/i;
55+
const rgba = /^rgba?\(\s*([+-]?\d+)(?=[\s,])\s*(?:,\s*)?([+-]?\d+)(?=[\s,])\s*(?:,\s*)?([+-]?\d+)\s*(?:[,|/]\s*([+-]?[\d.]+)(%?)\s*)?\)$/;
56+
const per = /^rgba?\(\s*([+-]?[\d.]+)%\s*,?\s*([+-]?[\d.]+)%\s*,?\s*([+-]?[\d.]+)%\s*(?:[,|/]\s*([+-]?[\d.]+)(%?)\s*)?\)$/;
57+
const keyword = /^(\w+)$/;
5658

57-
var rgb = [0, 0, 0, 1];
58-
var match;
59-
var i;
60-
var hexAlpha;
59+
let rgb = [0, 0, 0, 1];
60+
let match;
61+
let i;
62+
let hexAlpha;
6163

6264
if (match = string.match(hex)) {
6365
hexAlpha = match[2];
6466
match = match[1];
6567

6668
for (i = 0; i < 3; i++) {
6769
// https://jsperf.com/slice-vs-substr-vs-substring-methods-long-string/19
68-
var i2 = i * 2;
69-
rgb[i] = parseInt(match.slice(i2, i2 + 2), 16);
70+
const i2 = i * 2;
71+
rgb[i] = Number.parseInt(match.slice(i2, i2 + 2), 16);
7072
}
7173

7274
if (hexAlpha) {
73-
rgb[3] = parseInt(hexAlpha, 16) / 255;
75+
rgb[3] = Number.parseInt(hexAlpha, 16) / 255;
7476
}
7577
} else if (match = string.match(abbr)) {
7678
match = match[1];
7779
hexAlpha = match[3];
7880

7981
for (i = 0; i < 3; i++) {
80-
rgb[i] = parseInt(match[i] + match[i], 16);
82+
rgb[i] = Number.parseInt(match[i] + match[i], 16);
8183
}
8284

8385
if (hexAlpha) {
84-
rgb[3] = parseInt(hexAlpha + hexAlpha, 16) / 255;
86+
rgb[3] = Number.parseInt(hexAlpha + hexAlpha, 16) / 255;
8587
}
8688
} else if (match = string.match(rgba)) {
8789
for (i = 0; i < 3; i++) {
88-
rgb[i] = parseInt(match[i + 1], 0);
90+
rgb[i] = Number.parseInt(match[i + 1], 10);
8991
}
9092

9193
if (match[4]) {
92-
if (match[5]) {
93-
rgb[3] = parseFloat(match[4]) * 0.01;
94-
} else {
95-
rgb[3] = parseFloat(match[4]);
96-
}
94+
rgb[3] = match[5] ? Number.parseFloat(match[4]) * 0.01 : Number.parseFloat(match[4]);
9795
}
9896
} else if (match = string.match(per)) {
9997
for (i = 0; i < 3; i++) {
100-
rgb[i] = Math.round(parseFloat(match[i + 1]) * 2.55);
98+
rgb[i] = Math.round(Number.parseFloat(match[i + 1]) * 2.55);
10199
}
102100

103101
if (match[4]) {
104-
if (match[5]) {
105-
rgb[3] = parseFloat(match[4]) * 0.01;
106-
} else {
107-
rgb[3] = parseFloat(match[4]);
108-
}
102+
rgb[3] = match[5] ? Number.parseFloat(match[4]) * 0.01 : Number.parseFloat(match[4]);
109103
}
110104
} else if (match = string.match(keyword)) {
111105
if (match[1] === 'transparent') {
112106
return [0, 0, 0, 0];
113107
}
114108

115-
if (!hasOwnProperty.call(colorNames, match[1])) {
109+
if (!Object.hasOwn(colorNames, match[1])) {
116110
return null;
117111
}
118112

@@ -127,6 +121,7 @@ cs.get.rgb = function (string) {
127121
for (i = 0; i < 3; i++) {
128122
rgb[i] = clamp(rgb[i], 0, 255);
129123
}
124+
130125
rgb[3] = clamp(rgb[3], 0, 1);
131126

132127
return rgb;
@@ -137,15 +132,15 @@ cs.get.hsl = function (string) {
137132
return null;
138133
}
139134

140-
var hsl = /^hsla?\(\s*([+-]?(?:\d{0,3}\.)?\d+)(?:deg)?\s*,?\s*([+-]?[\d\.]+)%\s*,?\s*([+-]?[\d\.]+)%\s*(?:[,|\/]\s*([+-]?(?=\.\d|\d)(?:0|[1-9]\d*)?(?:\.\d*)?(?:[eE][+-]?\d+)?)\s*)?\)$/;
141-
var match = string.match(hsl);
135+
const hsl = /^hsla?\(\s*([+-]?(?:\d{0,3}\.)?\d+)(?:deg)?\s*,?\s*([+-]?[\d.]+)%\s*,?\s*([+-]?[\d.]+)%\s*(?:[,|/]\s*([+-]?(?=\.\d|\d)(?:0|[1-9]\d*)?(?:\.\d*)?(?:[eE][+-]?\d+)?)\s*)?\)$/;
136+
const match = string.match(hsl);
142137

143138
if (match) {
144-
var alpha = parseFloat(match[4]);
145-
var h = ((parseFloat(match[1]) % 360) + 360) % 360;
146-
var s = clamp(parseFloat(match[2]), 0, 100);
147-
var l = clamp(parseFloat(match[3]), 0, 100);
148-
var a = clamp(isNaN(alpha) ? 1 : alpha, 0, 1);
139+
const alpha = Number.parseFloat(match[4]);
140+
const h = ((Number.parseFloat(match[1]) % 360) + 360) % 360;
141+
const s = clamp(Number.parseFloat(match[2]), 0, 100);
142+
const l = clamp(Number.parseFloat(match[3]), 0, 100);
143+
const a = clamp(Number.isNaN(alpha) ? 1 : alpha, 0, 1);
149144

150145
return [h, s, l, a];
151146
}
@@ -158,24 +153,22 @@ cs.get.hwb = function (string) {
158153
return null;
159154
}
160155

161-
var hwb = /^hwb\(\s*([+-]?\d{0,3}(?:\.\d+)?)(?:deg)?\s*,\s*([+-]?[\d\.]+)%\s*,\s*([+-]?[\d\.]+)%\s*(?:,\s*([+-]?(?=\.\d|\d)(?:0|[1-9]\d*)?(?:\.\d*)?(?:[eE][+-]?\d+)?)\s*)?\)$/;
162-
var match = string.match(hwb);
156+
const hwb = /^hwb\(\s*([+-]?\d{0,3}(?:\.\d+)?)(?:deg)?\s*,\s*([+-]?[\d.]+)%\s*,\s*([+-]?[\d.]+)%\s*(?:,\s*([+-]?(?=\.\d|\d)(?:0|[1-9]\d*)?(?:\.\d*)?(?:[eE][+-]?\d+)?)\s*)?\)$/;
157+
const match = string.match(hwb);
163158

164159
if (match) {
165-
var alpha = parseFloat(match[4]);
166-
var h = ((parseFloat(match[1]) % 360) + 360) % 360;
167-
var w = clamp(parseFloat(match[2]), 0, 100);
168-
var b = clamp(parseFloat(match[3]), 0, 100);
169-
var a = clamp(isNaN(alpha) ? 1 : alpha, 0, 1);
160+
const alpha = Number.parseFloat(match[4]);
161+
const h = ((Number.parseFloat(match[1]) % 360) + 360) % 360;
162+
const w = clamp(Number.parseFloat(match[2]), 0, 100);
163+
const b = clamp(Number.parseFloat(match[3]), 0, 100);
164+
const a = clamp(Number.isNaN(alpha) ? 1 : alpha, 0, 1);
170165
return [h, w, b, a];
171166
}
172167

173168
return null;
174169
};
175170

176-
cs.to.hex = function () {
177-
var rgba = swizzle(arguments);
178-
171+
cs.to.hex = function (...rgba) {
179172
return (
180173
'#' +
181174
hexDouble(rgba[0]) +
@@ -187,56 +180,51 @@ cs.to.hex = function () {
187180
);
188181
};
189182

190-
cs.to.rgb = function () {
191-
var rgba = swizzle(arguments);
192-
183+
cs.to.rgb = function (...rgba) {
193184
return rgba.length < 4 || rgba[3] === 1
194185
? 'rgb(' + Math.round(rgba[0]) + ', ' + Math.round(rgba[1]) + ', ' + Math.round(rgba[2]) + ')'
195186
: 'rgba(' + Math.round(rgba[0]) + ', ' + Math.round(rgba[1]) + ', ' + Math.round(rgba[2]) + ', ' + rgba[3] + ')';
196187
};
197188

198-
cs.to.rgb.percent = function () {
199-
var rgba = swizzle(arguments);
200-
201-
var r = Math.round(rgba[0] / 255 * 100);
202-
var g = Math.round(rgba[1] / 255 * 100);
203-
var b = Math.round(rgba[2] / 255 * 100);
189+
cs.to.rgb.percent = function (...rgba) {
190+
const r = Math.round(rgba[0] / 255 * 100);
191+
const g = Math.round(rgba[1] / 255 * 100);
192+
const b = Math.round(rgba[2] / 255 * 100);
204193

205194
return rgba.length < 4 || rgba[3] === 1
206195
? 'rgb(' + r + '%, ' + g + '%, ' + b + '%)'
207196
: 'rgba(' + r + '%, ' + g + '%, ' + b + '%, ' + rgba[3] + ')';
208197
};
209198

210-
cs.to.hsl = function () {
211-
var hsla = swizzle(arguments);
199+
cs.to.hsl = function (...hsla) {
212200
return hsla.length < 4 || hsla[3] === 1
213201
? 'hsl(' + hsla[0] + ', ' + hsla[1] + '%, ' + hsla[2] + '%)'
214202
: 'hsla(' + hsla[0] + ', ' + hsla[1] + '%, ' + hsla[2] + '%, ' + hsla[3] + ')';
215203
};
216204

217-
// hwb is a bit different than rgb(a) & hsl(a) since there is no alpha specific syntax
205+
// Hwb is a bit different than rgb(a) & hsl(a) since there is no alpha specific syntax
218206
// (hwb have alpha optional & 1 is default value)
219-
cs.to.hwb = function () {
220-
var hwba = swizzle(arguments);
221-
222-
var a = '';
207+
cs.to.hwb = function (...hwba) {
208+
let a = '';
223209
if (hwba.length >= 4 && hwba[3] !== 1) {
224210
a = ', ' + hwba[3];
225211
}
226212

227213
return 'hwb(' + hwba[0] + ', ' + hwba[1] + '%, ' + hwba[2] + '%' + a + ')';
228214
};
229215

230-
cs.to.keyword = function (rgb) {
216+
cs.to.keyword = function (...rgb) {
231217
return reverseNames[rgb.slice(0, 3)];
232218
};
233219

234-
// helpers
235-
function clamp(num, min, max) {
236-
return Math.min(Math.max(min, num), max);
220+
// Helpers
221+
function clamp(number_, min, max) {
222+
return Math.min(Math.max(min, number_), max);
237223
}
238224

239-
function hexDouble(num) {
240-
var str = Math.round(num).toString(16).toUpperCase();
241-
return (str.length < 2) ? '0' + str : str;
225+
function hexDouble(number_) {
226+
const string_ = Math.round(number_).toString(16).toUpperCase();
227+
return (string_.length < 2) ? '0' + string_ : string_;
242228
}
229+
230+
export default cs;

0 commit comments

Comments
 (0)