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);
}
{
@@ -43,7 +45,7 @@ it('does not warn when valid values are passed for the content property', () =>
expect(renderer.create(
).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