From 830dd0e6d071c98bc0b4b0ecc99dd21a93f057b9 Mon Sep 17 00:00:00 2001
From: Lucas Weng <30640930+lucasweng@users.noreply.github.com>
Date: Wed, 17 Mar 2021 00:53:27 +0800
Subject: [PATCH] Fixed the issue with incorrectly throwing errors on valid
 content values containing `open-quote` (#2279)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* Fix incorrectly throwing error on valid content values in dev

* Remove invalid regex pattern `calc`

* Remove invalid content value `counter`

* Several content values can be used simultaneously, except for `normal`, `none` and global values

* Update .changeset/sweet-donkeys-film.md

Co-authored-by: Mateusz Burzyński <mateuszburzynski@gmail.com>
---
 .changeset/sweet-donkeys-film.md                  |  5 +++++
 .../css/test/__snapshots__/warnings.test.js.snap  |  2 +-
 packages/css/test/warnings.test.js                |  4 ++--
 .../__tests__/__snapshots__/warnings.js.snap      |  2 +-
 packages/react/__tests__/warnings.js              |  4 ++--
 packages/serialize/src/index.js                   | 15 ++-------------
 6 files changed, 13 insertions(+), 19 deletions(-)
 create mode 100644 .changeset/sweet-donkeys-film.md

diff --git a/.changeset/sweet-donkeys-film.md b/.changeset/sweet-donkeys-film.md
new file mode 100644
index 000000000..9186f7b2a
--- /dev/null
+++ b/.changeset/sweet-donkeys-film.md
@@ -0,0 +1,5 @@
+---
+'@emotion/serialize': patch
+---
+
+Fixed the issue with incorrectly throwing errors on valid content values containing `open-quote`.
diff --git a/packages/css/test/__snapshots__/warnings.test.js.snap b/packages/css/test/__snapshots__/warnings.test.js.snap
index 937a9da85..036eeb043 100644
--- a/packages/css/test/__snapshots__/warnings.test.js.snap
+++ b/packages/css/test/__snapshots__/warnings.test.js.snap
@@ -4,7 +4,6 @@ exports[`does not warn when valid values are passed for the content property 1`]
 .emotion-0 {
   content: normal;
   content: none;
-  content: counter;
   content: open-quote;
   content: close-quote;
   content: no-open-quote;
@@ -22,6 +21,7 @@ exports[`does not warn when valid values are passed for the content property 1`]
   content: counter(chapter_counter);
   content: counters(section_counter, ".");
   content: attr(value string);
+  content: open-quote counter(chapter_counter);
 }
 
 <div
diff --git a/packages/css/test/warnings.test.js b/packages/css/test/warnings.test.js
index a7fb83520..b8403c2e3 100644
--- a/packages/css/test/warnings.test.js
+++ b/packages/css/test/warnings.test.js
@@ -11,7 +11,6 @@ console.error = jest.fn()
 const validValues = [
   'normal',
   'none',
-  'counter',
   'open-quote',
   'close-quote',
   'no-open-quote',
@@ -28,7 +27,8 @@ const validValues = [
   'conic-gradient(hotpink, #8be9fd)',
   'counter(chapter_counter)',
   'counters(section_counter, ".")',
-  'attr(value string)'
+  'attr(value string)',
+  'open-quote counter(chapter_counter)'
 ]
 
 afterEach(() => {
diff --git a/packages/react/__tests__/__snapshots__/warnings.js.snap b/packages/react/__tests__/__snapshots__/warnings.js.snap
index 64d4331f8..467e6d8aa 100644
--- a/packages/react/__tests__/__snapshots__/warnings.js.snap
+++ b/packages/react/__tests__/__snapshots__/warnings.js.snap
@@ -4,7 +4,6 @@ exports[`does not warn when valid values are passed for the content property 1`]
 .emotion-0 {
   content: normal;
   content: none;
-  content: counter;
   content: open-quote;
   content: close-quote;
   content: no-open-quote;
@@ -22,6 +21,7 @@ exports[`does not warn when valid values are passed for the content property 1`]
   content: counter(chapter_counter);
   content: counters(section_counter, ".");
   content: attr(value string);
+  content: open-quote counter(chapter_counter);
 }
 
 <div
diff --git a/packages/react/__tests__/warnings.js b/packages/react/__tests__/warnings.js
index b9d42ea05..820dc3241 100644
--- a/packages/react/__tests__/warnings.js
+++ b/packages/react/__tests__/warnings.js
@@ -11,7 +11,6 @@ console.error = jest.fn()
 const validValues = [
   'normal',
   'none',
-  'counter',
   'open-quote',
   'close-quote',
   'no-open-quote',
@@ -28,7 +27,8 @@ const validValues = [
   'conic-gradient(hotpink, #8be9fd)',
   'counter(chapter_counter)',
   'counters(section_counter, ".")',
-  'attr(value string)'
+  'attr(value string)',
+  'open-quote counter(chapter_counter)'
 ]
 
 beforeEach(() => {
diff --git a/packages/serialize/src/index.js b/packages/serialize/src/index.js
index 13334e081..58d30954c 100644
--- a/packages/serialize/src/index.js
+++ b/packages/serialize/src/index.js
@@ -61,19 +61,8 @@ let processStyleValue = (
 }
 
 if (process.env.NODE_ENV !== 'production') {
-  let contentValuePattern = /(attr|calc|counters?|url|(((repeating-)?(linear|radial))|conic)-gradient)\(/
-  let contentValues = [
-    'normal',
-    'none',
-    'counter',
-    'open-quote',
-    'close-quote',
-    'no-open-quote',
-    'no-close-quote',
-    'initial',
-    'inherit',
-    'unset'
-  ]
+  let contentValuePattern = /(attr|counters?|url|(((repeating-)?(linear|radial))|conic)-gradient)\(|(no-)?(open|close)-quote/
+  let contentValues = ['normal', 'none', 'initial', 'inherit', 'unset']
 
   let oldProcessStyleValue = processStyleValue