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

emotion-js · Feb 22, 2021 · 418daad · 418daad
1 parent 06b3147
commit 418daad
Show file tree

Hide file tree

Showing 6 changed files with 26 additions and 1 deletion.
diff --git a/.changeset/fair-buses-drop.md b/.changeset/fair-buses-drop.md
@@ -0,0 +1,5 @@
+---
+'@emotion/serialize': patch
+---
+
+Fix incorrectly throwing error on the gradient content values
diff --git a/packages/css/test/__snapshots__/warnings.test.js.snap b/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);

diff --git a/packages/css/test/warnings.test.js b/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)'

diff --git a/packages/react/__tests__/__snapshots__/warnings.js.snap b/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);

diff --git a/packages/react/__tests__/warnings.js b/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)'

diff --git a/packages/serialize/src/index.js b/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',