Skip to content

Commit 7fc0ff9

Browse files
bhoughbhough
committed
fix(parsetohsl): fixes support for 4 space-separated CSS values
fix #605
1 parent bf2bd28 commit 7fc0ff9

File tree

4 files changed

+205
-68
lines changed

4 files changed

+205
-68
lines changed

‎package.json

+11-11
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
11
{
22
"name": "polished",
3-
"version": "4.1.4",
3+
"version": "4.1.5",
44
"description": "A lightweight toolset for writing styles in Javascript.",
55
"license": "MIT",
6-
"author": "Brian Hough <hello@brianhough.net> (https://polished.js.org)",
6+
"author": "Brian Hough <hello@brianhough.co> (https://polished.js.org)",
77
"homepage": "https://polished.js.org",
88
"bugs": "https://github.com/styled-components/polished/issues",
99
"repository": {
@@ -63,19 +63,19 @@
6363
"build:lib": "src/**/*.js"
6464
},
6565
"dependencies": {
66-
"@babel/runtime": "^7.17.2"
66+
"@babel/runtime": "^7.17.8"
6767
},
6868
"devDependencies": {
6969
"@babel/cli": "^7.17.6",
70-
"@babel/core": "^7.17.5",
70+
"@babel/core": "^7.17.8",
7171
"@babel/eslint-parser": "^7.17.0",
7272
"@babel/plugin-transform-runtime": "^7.17.0",
7373
"@babel/polyfill": "^7.12.1",
7474
"@babel/preset-env": "^7.16.11",
7575
"@babel/preset-flow": "^7.16.7",
76-
"@rollup/plugin-babel": "^5.3.0",
76+
"@rollup/plugin-babel": "^5.3.1",
7777
"@rollup/plugin-node-resolve": "^13.1.3",
78-
"@rollup/plugin-replace": "^3.1.0",
78+
"@rollup/plugin-replace": "^4.0.0",
7979
"babel-eslint": "^10.1.0",
8080
"babel-jest": "^27.5.1",
8181
"babel-plugin-add-module-exports": "^1.0.2",
@@ -84,25 +84,25 @@
8484
"cross-env": "^7.0.3",
8585
"cz-conventional-changelog": "^3.1.0",
8686
"documentation": "12.3.0",
87-
"eslint": "^8.9.0",
87+
"eslint": "^8.12.0",
8888
"eslint-config-airbnb-base": "^15.0.0",
8989
"eslint-plugin-import": "^2.25.4",
9090
"flow-bin": "^0.133.0",
9191
"flow-copy-source": "^2.0.8",
9292
"husky": "^7.0.4",
9393
"jest": "^27.5.1",
94-
"lint-staged": "^12.3.4",
94+
"lint-staged": "^12.3.7",
9595
"npm-watch": "^0.11.0",
96-
"prettier": "^2.5.1",
96+
"prettier": "^2.6.1",
9797
"pushstate-server": "^3.1.0",
9898
"ramda": "^0.28.0",
99-
"rollup": "^2.67.3",
99+
"rollup": "^2.70.1",
100100
"rollup-plugin-sourcemaps": "^0.6.3",
101101
"rollup-plugin-terser": "^7.0.2",
102102
"semantic-release": "^19.0.2",
103103
"shx": "^0.3.4",
104104
"tsgen": "1.3.0",
105-
"typescript": "4.5.5",
105+
"typescript": "4.6.3",
106106
"validate-commit-msg": "^2.14.0"
107107
},
108108
"config": {

‎src/color/parseToRgb.js

+3-2
Original file line numberDiff line numberDiff line change
@@ -11,8 +11,8 @@ const reducedHexRegex = /^#[a-fA-F0-9]{3}$/
1111
const reducedRgbaHexRegex = /^#[a-fA-F0-9]{4}$/
1212
const rgbRegex = /^rgb\(\s*(\d{1,3})\s*,\s*(\d{1,3})\s*,\s*(\d{1,3})\s*\)$/i
1313
const rgbaRegex = /^rgba\(\s*(\d{1,3})\s*,\s*(\d{1,3})\s*,\s*(\d{1,3})\s*,\s*([-+]?[0-9]*[.]?[0-9]+)\s*\)$/i
14-
const hslRegex = /^hsl\(\s*(\d{0,3}[.]?[0-9]+)\s*,\s*(\d{1,3}[.]?[0-9]?)%\s*,\s*(\d{1,3}[.]?[0-9]?)%\s*\)$/i
15-
const hslaRegex = /^hsla\(\s*(\d{0,3}[.]?[0-9]+)\s*,\s*(\d{1,3}[.]?[0-9]?)%\s*,\s*(\d{1,3}[.]?[0-9]?)%\s*,\s*([-+]?[0-9]*[.]?[0-9]+)\s*\)$/i
14+
const hslRegex = /^hsl\(\s*(\d{0,3}[.]?[0-9]+(?:deg)?)\s*[,]?\s*(\d{1,3}[.]?[0-9]?)%\s*[,]?\s*(\d{1,3}[.]?[0-9]?)%\s*\)$/i
15+
const hslaRegex = /^hsla\(\s*(\d{0,3}[.]?[0-9]+(?:deg)?)\s*[,]?\s*(\d{1,3}[.]?[0-9]?)%\s*[,]?\s*(\d{1,3}[.]?[0-9]?)%\s*(?:,|\/)\s*([-+]?[0-9]*[.]?[0-9]+)\s*\)$/i
1616

1717
/**
1818
* Returns an RgbColor or RgbaColor object. This utility function is only useful
@@ -85,6 +85,7 @@ export default function parseToRgb(color: string): RgbColor | RgbaColor {
8585
}
8686
const hslMatched = hslRegex.exec(normalizedColor)
8787
if (hslMatched) {
88+
console.log(hslMatched)
8889
const hue = parseInt(`${hslMatched[1]}`, 10)
8990
const saturation = parseInt(`${hslMatched[2]}`, 10) / 100
9091
const lightness = parseInt(`${hslMatched[3]}`, 10) / 100

‎src/color/test/parseToHsl.test.js

+78
Original file line numberDiff line numberDiff line change
@@ -58,6 +58,11 @@ describe('parseToHsl', () => {
5858
lightness: 0.0392156862745098,
5959
saturation: 0.1,
6060
})
61+
expect(parseToHsl('hsl(210deg,10%,4%)')).toEqual({
62+
hue: 210,
63+
lightness: 0.0392156862745098,
64+
saturation: 0.1,
65+
})
6166
})
6267

6368
it('should parse a hsl color representation with a float', () => {
@@ -66,6 +71,37 @@ describe('parseToHsl', () => {
6671
lightness: 0.0392156862745098,
6772
saturation: 0.1,
6873
})
74+
expect(parseToHsl('hsl(210.99deg,10%,4%)')).toEqual({
75+
hue: 210,
76+
lightness: 0.0392156862745098,
77+
saturation: 0.1,
78+
})
79+
})
80+
81+
it('should parse a hsl 4 space-separated color representation', () => {
82+
expect(parseToHsl('hsl(210 10% 4%)')).toEqual({
83+
hue: 210,
84+
lightness: 0.0392156862745098,
85+
saturation: 0.1,
86+
})
87+
expect(parseToHsl('hsl(210deg 10% 4%)')).toEqual({
88+
hue: 210,
89+
lightness: 0.0392156862745098,
90+
saturation: 0.1,
91+
})
92+
})
93+
94+
it('should parse a hsl 4 space-separated color representation with a float', () => {
95+
expect(parseToHsl('hsl(210.99 10% 4%)')).toEqual({
96+
hue: 210,
97+
lightness: 0.0392156862745098,
98+
saturation: 0.1,
99+
})
100+
expect(parseToHsl('hsl(210.99deg 10% 4%)')).toEqual({
101+
hue: 210,
102+
lightness: 0.0392156862745098,
103+
saturation: 0.1,
104+
})
69105
})
70106

71107
it('should parse a hsla color representation', () => {
@@ -75,6 +111,12 @@ describe('parseToHsl', () => {
75111
lightness: 0.4,
76112
saturation: 0.09803921568627451,
77113
})
114+
expect(parseToHsl('hsla(210deg,10%,40%,0.75)')).toEqual({
115+
alpha: 0.75,
116+
hue: 209.99999999999997,
117+
lightness: 0.4,
118+
saturation: 0.09803921568627451,
119+
})
78120
})
79121

80122
it('should parse a hsla color representation with a float', () => {
@@ -84,6 +126,42 @@ describe('parseToHsl', () => {
84126
lightness: 0.4,
85127
saturation: 0.09803921568627451,
86128
})
129+
expect(parseToHsl('hsla(210.99deg,10%,40%,0.75)')).toEqual({
130+
alpha: 0.75,
131+
hue: 209.99999999999997,
132+
lightness: 0.4,
133+
saturation: 0.09803921568627451,
134+
})
135+
})
136+
137+
it('should parse a hsla 4 space-separated color representation', () => {
138+
expect(parseToHsl('hsla(210 10% 40% / 0.75)')).toEqual({
139+
alpha: 0.75,
140+
hue: 209.99999999999997,
141+
lightness: 0.4,
142+
saturation: 0.09803921568627451,
143+
})
144+
expect(parseToHsl('hsla(210deg 10% 40% / 0.75)')).toEqual({
145+
alpha: 0.75,
146+
hue: 209.99999999999997,
147+
lightness: 0.4,
148+
saturation: 0.09803921568627451,
149+
})
150+
})
151+
152+
it('should parse a hsla 4 space-separated color representation with a float', () => {
153+
expect(parseToHsl('hsla(210.99 10% 40% / 0.75)')).toEqual({
154+
alpha: 0.75,
155+
hue: 209.99999999999997,
156+
lightness: 0.4,
157+
saturation: 0.09803921568627451,
158+
})
159+
expect(parseToHsl('hsla(210.99deg 10% 40% / 0.75)')).toEqual({
160+
alpha: 0.75,
161+
hue: 209.99999999999997,
162+
lightness: 0.4,
163+
saturation: 0.09803921568627451,
164+
})
87165
})
88166

89167
it('should throw an error if an invalid color string is provided', () => {

0 commit comments

Comments
 (0)