From d935762131b1474f2474296ee4706f7ecd59b6dd Mon Sep 17 00:00:00 2001
From: Artur Muller <me@arturmuller.com>
Date: Tue, 5 Apr 2022 19:31:56 +0200
Subject: [PATCH] Fixed a false positive warning for `content` properties that
 included `var()` (#2700)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* Allow for CSS variables in content property

* Update tests

* Fixup tests

* Create young-deers-cheat.md

Co-authored-by: Mateusz Burzyński <mateuszburzynski@gmail.com>
---
 .changeset/young-deers-cheat.md                         | 7 +++++++
 packages/css/test/__snapshots__/warnings.test.js.snap   | 1 +
 packages/css/test/warnings.test.js                      | 1 +
 packages/react/__tests__/__snapshots__/warnings.js.snap | 1 +
 packages/react/__tests__/warnings.js                    | 1 +
 packages/serialize/src/index.js                         | 2 +-
 6 files changed, 12 insertions(+), 1 deletion(-)
 create mode 100644 .changeset/young-deers-cheat.md

diff --git a/.changeset/young-deers-cheat.md b/.changeset/young-deers-cheat.md
new file mode 100644
index 000000000..aabe27ec0
--- /dev/null
+++ b/.changeset/young-deers-cheat.md
@@ -0,0 +1,7 @@
+---
+"@emotion/css": patch
+"@emotion/react": patch
+"@emotion/serialize": patch
+---
+
+Fixed a false positive warning for `content` properties that included `var()`.
diff --git a/packages/css/test/__snapshots__/warnings.test.js.snap b/packages/css/test/__snapshots__/warnings.test.js.snap
index 036eeb043..cb3ceae10 100644
--- a/packages/css/test/__snapshots__/warnings.test.js.snap
+++ b/packages/css/test/__snapshots__/warnings.test.js.snap
@@ -12,6 +12,7 @@ exports[`does not warn when valid values are passed for the content property 1`]
   content: inherit;
   content: "some thing";
   content: 'another thing';
+  content: var(--variable-name);
   content: url("http://www.example.com/test.png");
   content: linear-gradient(hotpink, #8be9fd);
   content: radial-gradient(hotpink, #8be9fd);
diff --git a/packages/css/test/warnings.test.js b/packages/css/test/warnings.test.js
index b8403c2e3..ca2da6a5a 100644
--- a/packages/css/test/warnings.test.js
+++ b/packages/css/test/warnings.test.js
@@ -19,6 +19,7 @@ const validValues = [
   'inherit',
   '"some thing"',
   "'another thing'",
+  'var(--variable-name)',
   'url("http://www.example.com/test.png")',
   'linear-gradient(hotpink, #8be9fd)',
   'radial-gradient(hotpink, #8be9fd)',
diff --git a/packages/react/__tests__/__snapshots__/warnings.js.snap b/packages/react/__tests__/__snapshots__/warnings.js.snap
index 467e6d8aa..0e6ded386 100644
--- a/packages/react/__tests__/__snapshots__/warnings.js.snap
+++ b/packages/react/__tests__/__snapshots__/warnings.js.snap
@@ -12,6 +12,7 @@ exports[`does not warn when valid values are passed for the content property 1`]
   content: inherit;
   content: "some thing";
   content: 'another thing';
+  content: var(--variable-name);
   content: url("http://www.example.com/test.png");
   content: linear-gradient(hotpink, #8be9fd);
   content: radial-gradient(hotpink, #8be9fd);
diff --git a/packages/react/__tests__/warnings.js b/packages/react/__tests__/warnings.js
index 3808f0808..14cb56a17 100644
--- a/packages/react/__tests__/warnings.js
+++ b/packages/react/__tests__/warnings.js
@@ -19,6 +19,7 @@ const validValues = [
   'inherit',
   '"some thing"',
   "'another thing'",
+  'var(--variable-name)',
   'url("http://www.example.com/test.png")',
   'linear-gradient(hotpink, #8be9fd)',
   'radial-gradient(hotpink, #8be9fd)',
diff --git a/packages/serialize/src/index.js b/packages/serialize/src/index.js
index 3b8e3ba2e..08bb1067d 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 =
-    /(attr|counters?|url|(((repeating-)?(linear|radial))|conic)-gradient)\(|(no-)?(open|close)-quote/
+    /(var|attr|counters?|url|(((repeating-)?(linear|radial))|conic)-gradient)\(|(no-)?(open|close)-quote/
   let contentValues = ['normal', 'none', 'initial', 'inherit', 'unset']
 
   let oldProcessStyleValue = processStyleValue