Fixed a false positive warning for content properties that included var() (#2700)

* Allow for CSS variables in content property

* Update tests

* Fixup tests

* Create young-deers-cheat.md

Co-authored-by: Mateusz Burzyński <[email protected]>

Author: arturmuller

.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()`.

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);

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)',

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);

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)',

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