fix(parsetohsl): fixes support for 4 space-separated CSS values

fix #605
styled-components · Apr 3, 2022 · 7fc0ff9 · 7fc0ff9
1 parent bf2bd28
commit 7fc0ff9
Show file tree

Hide file tree

Showing 4 changed files with 205 additions and 68 deletions.
diff --git a/package.json b/package.json
@@ -1,9 +1,9 @@
 {
   "name": "polished",
-  "version": "4.1.4",
+  "version": "4.1.5",
   "description": "A lightweight toolset for writing styles in Javascript.",
   "license": "MIT",
-  "author": "Brian Hough <hello@brianhough.net> (https://polished.js.org)",
+  "author": "Brian Hough <hello@brianhough.co> (https://polished.js.org)",
   "homepage": "https://polished.js.org",
   "bugs": "https://github.com/styled-components/polished/issues",
   "repository": {
@@ -63,19 +63,19 @@
     "build:lib": "src/**/*.js"
   },
   "dependencies": {
-    "@babel/runtime": "^7.17.2"
+    "@babel/runtime": "^7.17.8"
   },
   "devDependencies": {
     "@babel/cli": "^7.17.6",
-    "@babel/core": "^7.17.5",
+    "@babel/core": "^7.17.8",
     "@babel/eslint-parser": "^7.17.0",
     "@babel/plugin-transform-runtime": "^7.17.0",
     "@babel/polyfill": "^7.12.1",
     "@babel/preset-env": "^7.16.11",
     "@babel/preset-flow": "^7.16.7",
-    "@rollup/plugin-babel": "^5.3.0",
+    "@rollup/plugin-babel": "^5.3.1",
     "@rollup/plugin-node-resolve": "^13.1.3",
-    "@rollup/plugin-replace": "^3.1.0",
+    "@rollup/plugin-replace": "^4.0.0",
     "babel-eslint": "^10.1.0",
     "babel-jest": "^27.5.1",
     "babel-plugin-add-module-exports": "^1.0.2",
@@ -84,25 +84,25 @@
     "cross-env": "^7.0.3",
     "cz-conventional-changelog": "^3.1.0",
     "documentation": "12.3.0",
-    "eslint": "^8.9.0",
+    "eslint": "^8.12.0",
     "eslint-config-airbnb-base": "^15.0.0",
     "eslint-plugin-import": "^2.25.4",
     "flow-bin": "^0.133.0",
     "flow-copy-source": "^2.0.8",
     "husky": "^7.0.4",
     "jest": "^27.5.1",
-    "lint-staged": "^12.3.4",
+    "lint-staged": "^12.3.7",
     "npm-watch": "^0.11.0",
-    "prettier": "^2.5.1",
+    "prettier": "^2.6.1",
     "pushstate-server": "^3.1.0",
     "ramda": "^0.28.0",
-    "rollup": "^2.67.3",
+    "rollup": "^2.70.1",
     "rollup-plugin-sourcemaps": "^0.6.3",
     "rollup-plugin-terser": "^7.0.2",
     "semantic-release": "^19.0.2",
     "shx": "^0.3.4",
     "tsgen": "1.3.0",
-    "typescript": "4.5.5",
+    "typescript": "4.6.3",
     "validate-commit-msg": "^2.14.0"
   },
   "config": {

diff --git a/src/color/parseToRgb.js b/src/color/parseToRgb.js
@@ -11,8 +11,8 @@ const reducedHexRegex = /^#[a-fA-F0-9]{3}$/
 const reducedRgbaHexRegex = /^#[a-fA-F0-9]{4}$/
 const rgbRegex = /^rgb\(\s*(\d{1,3})\s*,\s*(\d{1,3})\s*,\s*(\d{1,3})\s*\)$/i
 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
-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
-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
+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
+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
 
 /**
  * Returns an RgbColor or RgbaColor object. This utility function is only useful
@@ -85,6 +85,7 @@ export default function parseToRgb(color: string): RgbColor | RgbaColor {
   }
   const hslMatched = hslRegex.exec(normalizedColor)
   if (hslMatched) {
+    console.log(hslMatched)
     const hue = parseInt(`${hslMatched[1]}`, 10)
     const saturation = parseInt(`${hslMatched[2]}`, 10) / 100
     const lightness = parseInt(`${hslMatched[3]}`, 10) / 100

diff --git a/src/color/test/parseToHsl.test.js b/src/color/test/parseToHsl.test.js
@@ -58,6 +58,11 @@ describe('parseToHsl', () => {
       lightness: 0.0392156862745098,
       saturation: 0.1,
     })
+    expect(parseToHsl('hsl(210deg,10%,4%)')).toEqual({
+      hue: 210,
+      lightness: 0.0392156862745098,
+      saturation: 0.1,
+    })
   })
 
   it('should parse a hsl color representation with a float', () => {
@@ -66,6 +71,37 @@ describe('parseToHsl', () => {
       lightness: 0.0392156862745098,
       saturation: 0.1,
     })
+    expect(parseToHsl('hsl(210.99deg,10%,4%)')).toEqual({
+      hue: 210,
+      lightness: 0.0392156862745098,
+      saturation: 0.1,
+    })
+  })
+
+  it('should parse a hsl 4 space-separated color representation', () => {
+    expect(parseToHsl('hsl(210 10% 4%)')).toEqual({
+      hue: 210,
+      lightness: 0.0392156862745098,
+      saturation: 0.1,
+    })
+    expect(parseToHsl('hsl(210deg 10% 4%)')).toEqual({
+      hue: 210,
+      lightness: 0.0392156862745098,
+      saturation: 0.1,
+    })
+  })
+
+  it('should parse a hsl 4 space-separated color representation with a float', () => {
+    expect(parseToHsl('hsl(210.99 10% 4%)')).toEqual({
+      hue: 210,
+      lightness: 0.0392156862745098,
+      saturation: 0.1,
+    })
+    expect(parseToHsl('hsl(210.99deg 10% 4%)')).toEqual({
+      hue: 210,
+      lightness: 0.0392156862745098,
+      saturation: 0.1,
+    })
   })
 
   it('should parse a hsla color representation', () => {
@@ -75,6 +111,12 @@ describe('parseToHsl', () => {
       lightness: 0.4,
       saturation: 0.09803921568627451,
     })
+    expect(parseToHsl('hsla(210deg,10%,40%,0.75)')).toEqual({
+      alpha: 0.75,
+      hue: 209.99999999999997,
+      lightness: 0.4,
+      saturation: 0.09803921568627451,
+    })
   })
 
   it('should parse a hsla color representation with a float', () => {
@@ -84,6 +126,42 @@ describe('parseToHsl', () => {
       lightness: 0.4,
       saturation: 0.09803921568627451,
     })
+    expect(parseToHsl('hsla(210.99deg,10%,40%,0.75)')).toEqual({
+      alpha: 0.75,
+      hue: 209.99999999999997,
+      lightness: 0.4,
+      saturation: 0.09803921568627451,
+    })
+  })
+
+  it('should parse a hsla 4 space-separated color representation', () => {
+    expect(parseToHsl('hsla(210 10% 40% / 0.75)')).toEqual({
+      alpha: 0.75,
+      hue: 209.99999999999997,
+      lightness: 0.4,
+      saturation: 0.09803921568627451,
+    })
+    expect(parseToHsl('hsla(210deg 10% 40% / 0.75)')).toEqual({
+      alpha: 0.75,
+      hue: 209.99999999999997,
+      lightness: 0.4,
+      saturation: 0.09803921568627451,
+    })
+  })
+
+  it('should parse a hsla 4 space-separated color representation with a float', () => {
+    expect(parseToHsl('hsla(210.99 10% 40% / 0.75)')).toEqual({
+      alpha: 0.75,
+      hue: 209.99999999999997,
+      lightness: 0.4,
+      saturation: 0.09803921568627451,
+    })
+    expect(parseToHsl('hsla(210.99deg 10% 40% / 0.75)')).toEqual({
+      alpha: 0.75,
+      hue: 209.99999999999997,
+      lightness: 0.4,
+      saturation: 0.09803921568627451,
+    })
   })
 
   it('should throw an error if an invalid color string is provided', () => {