From 90296fc05608f5c5efe1eb3b784cdfb7a1dac84b Mon Sep 17 00:00:00 2001
From: Paolo Priotto <p.priotto@epages.com>
Date: Thu, 30 Nov 2023 08:43:04 +0100
Subject: [PATCH] fix: turned out to be a little more complex

---
 src/__tests__/to-have-style.js |  6 ++++++
 src/to-have-style.js           | 17 +++++++++++------
 2 files changed, 17 insertions(+), 6 deletions(-)

diff --git a/src/__tests__/to-have-style.js b/src/__tests__/to-have-style.js
index b01dd85..5991a7e 100644
--- a/src/__tests__/to-have-style.js
+++ b/src/__tests__/to-have-style.js
@@ -70,6 +70,7 @@ describe('.toHaveStyle', () => {
       background-color: black;
       color: white;
       float: left;
+      --var-name: 0px;
       transition: opacity 0.2s ease-out, top 0.3s cubic-bezier(1.175, 0.885, 0.32, 1.275);
     }
   `
@@ -92,6 +93,11 @@ describe('.toHaveStyle', () => {
       ),
     ).toThrowError()
 
+    // Custom property names are case sensitive
+    expect(() =>
+      expect(container.querySelector('.label')).toHaveStyle('--VAR-NAME: 0px;'),
+    ).toThrowError()
+
     // Make sure the test fails if the css syntax is not valid
     expect(() =>
       expect(container.querySelector('.label')).not.toHaveStyle(
diff --git a/src/to-have-style.js b/src/to-have-style.js
index aba3ce6..010e2a5 100644
--- a/src/to-have-style.js
+++ b/src/to-have-style.js
@@ -17,12 +17,17 @@ function getStyleDeclaration(document, css) {
 function isSubset(styles, computedStyle) {
   return (
     !!Object.keys(styles).length &&
-    Object.entries(styles).every(
-      ([prop, value]) =>
-        computedStyle[prop] === value ||
-        computedStyle.getPropertyValue(prop) === value ||
-        computedStyle.getPropertyValue(prop.toLowerCase()) === value,
-    )
+    Object.entries(styles).every(([prop, value]) => {
+      const isCustomProperty = prop.startsWith('--')
+      const spellingVariants = [prop]
+      if (!isCustomProperty) spellingVariants.push(prop.toLowerCase())
+
+      return spellingVariants.some(
+        name =>
+          computedStyle[name] === value ||
+          computedStyle.getPropertyValue(name) === value,
+      )
+    })
   )
 }