From c02b12145a94df011e0fd6ffd54197a4d9369783 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mateusz=20Burzy=C5=84ski?= <mateuszburzynski@gmail.com>
Date: Thu, 15 Sep 2022 10:28:27 +0200
Subject: [PATCH] Fixed an issue that prevented using `content:
 "element(name)"` (#2896)

---
 .changeset/rude-bats-check.md                           | 5 +++++
 packages/react/__tests__/__snapshots__/warnings.js.snap | 1 +
 packages/react/__tests__/warnings.js                    | 6 ++++--
 packages/serialize/src/index.js                         | 2 +-
 4 files changed, 11 insertions(+), 3 deletions(-)
 create mode 100644 .changeset/rude-bats-check.md

diff --git a/.changeset/rude-bats-check.md b/.changeset/rude-bats-check.md
new file mode 100644
index 000000000..4a82e4ca2
--- /dev/null
+++ b/.changeset/rude-bats-check.md
@@ -0,0 +1,5 @@
+---
+'@emotion/serialize': patch
+---
+
+Fixed an issue that prevented using `content: "element(name)"`. This is a valid special value and doesn't need to be quoted.
diff --git a/packages/react/__tests__/__snapshots__/warnings.js.snap b/packages/react/__tests__/__snapshots__/warnings.js.snap
index 3b9bb460a..3a8debc49 100644
--- a/packages/react/__tests__/__snapshots__/warnings.js.snap
+++ b/packages/react/__tests__/__snapshots__/warnings.js.snap
@@ -23,6 +23,7 @@ exports[`does not warn when valid values are passed for the content property 1`]
   content: counters(section_counter, ".");
   content: attr(value string);
   content: open-quote counter(chapter_counter);
+  content: element(name);
 }
 
 <div
diff --git a/packages/react/__tests__/warnings.js b/packages/react/__tests__/warnings.js
index f92343258..782c6257a 100644
--- a/packages/react/__tests__/warnings.js
+++ b/packages/react/__tests__/warnings.js
@@ -30,7 +30,9 @@ const validValues = [
   'counter(chapter_counter)',
   'counters(section_counter, ".")',
   'attr(value string)',
-  'open-quote counter(chapter_counter)'
+  'open-quote counter(chapter_counter)',
+  // https://github.com/emotion-js/emotion/issues/2895
+  'element(name)'
 ]
 
 beforeEach(() => {
@@ -43,7 +45,7 @@ it('does not warn when valid values are passed for the content property', () =>
   expect(renderer.create(<div css={style} />).toJSON()).toMatchSnapshot()
 })
 
-const invalidValues = ['this is not valid', '']
+const invalidValues = ['this is not valid', '', 'element']
 
 it('does warn when invalid values are passed for the content property', () => {
   // $FlowFixMe
diff --git a/packages/serialize/src/index.js b/packages/serialize/src/index.js
index d27f510dd..8352ba935 100644
--- 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 =
-    /(var|attr|counters?|url|(((repeating-)?(linear|radial))|conic)-gradient)\(|(no-)?(open|close)-quote/
+    /(var|attr|counters?|url|element|(((repeating-)?(linear|radial))|conic)-gradient)\(|(no-)?(open|close)-quote/
   let contentValues = ['normal', 'none', 'initial', 'inherit', 'unset']
 
   let oldProcessStyleValue = processStyleValue