Fixed an issue that prevented using content: "element(name)" (#2896)

.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.

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

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

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