[system] Warns if the hex color contains trailing space (#44538)

mui · Dec 12, 2024 · df5821c · df5821c
1 parent 6b5d751
commit df5821c
Show file tree

Hide file tree

Showing 3 changed files with 166 additions and 124 deletions.
diff --git a/packages/mui-system/src/colorManipulator/colorManipulator.js b/packages/mui-system/src/colorManipulator/colorManipulator.js
@@ -33,6 +33,14 @@ export function hexToRgb(color) {
     colors = colors.map((n) => n + n);
   }
 
+  if (process.env.NODE_ENV !== 'production') {
+    if (color.length !== color.trim().length) {
+      console.error(
+        `MUI: The color: "${color}" is invalid. Make sure the color input doesn't contain leading/trailing space.`,
+      );
+    }
+  }
+
   return colors
     ? `rgb${colors.length === 4 ? 'a' : ''}(${colors
         .map((n, index) => {

diff --git a/packages/mui-system/src/colorManipulator/colorManipulator.test.js b/packages/mui-system/src/colorManipulator/colorManipulator.test.js
@@ -299,6 +299,16 @@ describe('utils/colorManipulator', () => {
         alpha('white', 0.4);
       }).toThrowMinified('MUI: Unsupported `white` color');
     });
+
+    it('warns if the color contains space at the end', () => {
+      let result;
+      expect(() => {
+        result = alpha('#aa0099 ', 0.5);
+      }).toErrorDev([
+        'MUI: The color: "aa0099 " is invalid. Make sure the color input doesn\'t contain leading/trailing space.',
+      ]);
+      expect(result).to.equal('rgba(170, 0, 153, 0.5)');
+    });
   });
 
   describe('darken', () => {