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 <mateuszburzynski@gmail.com>
emotion-js · Apr 5, 2022 · d935762 · d935762
1 parent 1a25293
commit d935762
Show file tree

Hide file tree

Showing 6 changed files with 12 additions and 1 deletion.
diff --git a/.changeset/young-deers-cheat.md 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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