Fix incorrectly throwing error on the gradient content values (#2264)

Author: lucasweng

.changeset/fair-buses-drop.md

@@ -0,0 +1,5 @@
+---
+'@emotion/serialize': patch
+---
+
+Fix incorrectly throwing error on the gradient content values

packages/css/test/__snapshots__/warnings.test.js.snap

@@ -14,6 +14,11 @@ exports[`does not warn when valid values are passed for the content property 1`]
   content: "some thing";
   content: 'another thing';
   content: url("http://www.example.com/test.png");
+  content: linear-gradient(hotpink, #8be9fd);
+  content: radial-gradient(hotpink, #8be9fd);
+  content: repeating-linear-gradient(hotpink, #8be9fd);
+  content: repeating-radial-gradient(hotpink, #8be9fd);
+  content: conic-gradient(hotpink, #8be9fd);
   content: counter(chapter_counter);
   content: counters(section_counter, ".");
   content: attr(value string);

packages/css/test/warnings.test.js

@@ -21,6 +21,11 @@ const validValues = [
   '"some thing"',
   "'another thing'",
   'url("http://www.example.com/test.png")',
+  'linear-gradient(hotpink, #8be9fd)',
+  'radial-gradient(hotpink, #8be9fd)',
+  'repeating-linear-gradient(hotpink, #8be9fd)',
+  'repeating-radial-gradient(hotpink, #8be9fd)',
+  'conic-gradient(hotpink, #8be9fd)',
   'counter(chapter_counter)',
   'counters(section_counter, ".")',
   'attr(value string)'

packages/react/__tests__/__snapshots__/warnings.js.snap

@@ -14,6 +14,11 @@ exports[`does not warn when valid values are passed for the content property 1`]
   content: "some thing";
   content: 'another thing';
   content: url("http://www.example.com/test.png");
+  content: linear-gradient(hotpink, #8be9fd);
+  content: radial-gradient(hotpink, #8be9fd);
+  content: repeating-linear-gradient(hotpink, #8be9fd);
+  content: repeating-radial-gradient(hotpink, #8be9fd);
+  content: conic-gradient(hotpink, #8be9fd);
   content: counter(chapter_counter);
   content: counters(section_counter, ".");
   content: attr(value string);

packages/react/__tests__/warnings.js

@@ -21,6 +21,11 @@ const validValues = [
   '"some thing"',
   "'another thing'",
   'url("http://www.example.com/test.png")',
+  'linear-gradient(hotpink, #8be9fd)',
+  'radial-gradient(hotpink, #8be9fd)',
+  'repeating-linear-gradient(hotpink, #8be9fd)',
+  'repeating-radial-gradient(hotpink, #8be9fd)',
+  'conic-gradient(hotpink, #8be9fd)',
   'counter(chapter_counter)',
   'counters(section_counter, ".")',
   'attr(value string)'

packages/serialize/src/index.js

@@ -61,7 +61,7 @@ let processStyleValue = (
 }
 
 if (process.env.NODE_ENV !== 'production') {
-  let contentValuePattern = /(attr|calc|counters?|url)\(/
+  let contentValuePattern = /(attr|calc|counters?|url|(((repeating-)?(linear|radial))|conic)-gradient)\(/
   let contentValues = [
     'normal',
     'none',