Update "no component selectors" error message (#2727)

* Update "no component selectors" error message The message now references the swc Emotion plugin which also supports component selectors, like @emotion/babel-plugin. * Add changeset for "no component selecters" error message change * Update .changeset/big-years-relate.md Co-authored-by: Mateusz Burzyński <[email protected]>
emotion-js · Apr 28, 2022 · 26e4e3e · 26e4e3e
1 parent 6c2d7a6
commit 26e4e3e
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 8 deletions.
diff --git a/.changeset/big-years-relate.md b/.changeset/big-years-relate.md
@@ -0,0 +1,5 @@
+---
+'@emotion/serialize': patch
+---
+
+Changed the error message "Component selectors can only be used in conjunction with @emotion/babel-plugin" to reference the new SWC Emotion plugin which will support component selectors soon.
diff --git a/packages/css/test/no-babel/__snapshots__/index.test.js.snap b/packages/css/test/no-babel/__snapshots__/index.test.js.snap
@@ -12,11 +12,11 @@ exports[`css @supports 1`] = `
 />
 `;
 
-exports[`css component as selectors (object syntax) 1`] = `"Component selectors can only be used in conjunction with @emotion/babel-plugin."`;
+exports[`css component as selectors (object syntax) 1`] = `"Component selectors can only be used in conjunction with @emotion/babel-plugin, the swc Emotion plugin, or another Emotion-aware compiler transform."`;
 
 exports[`css component as selectors (object syntax) 2`] = `"The above error occurred in the <Styled(div)> component:"`;
 
-exports[`css component selectors without target 1`] = `"Component selectors can only be used in conjunction with @emotion/babel-plugin."`;
+exports[`css component selectors without target 1`] = `"Component selectors can only be used in conjunction with @emotion/babel-plugin, the swc Emotion plugin, or another Emotion-aware compiler transform."`;
 
 exports[`css composition 1`] = `
 .emotion-0 {

diff --git a/packages/serialize/src/index.js b/packages/serialize/src/index.js
@@ -106,6 +106,11 @@ if (process.env.NODE_ENV !== 'production') {
   }
 }
 
+const noComponentSelectorMessage =
+  'Component selectors can only be used in conjunction with ' +
+  '@emotion/babel-plugin, the swc Emotion plugin, or another Emotion-aware ' +
+  'compiler transform.'
+
 function handleInterpolation(
   mergedProps: void | Object,
   registered: RegisteredCache | void,
@@ -119,9 +124,7 @@ function handleInterpolation(
       process.env.NODE_ENV !== 'production' &&
       interpolation.toString() === 'NO_COMPONENT_SELECTOR'
     ) {
-      throw new Error(
-        'Component selectors can only be used in conjunction with @emotion/babel-plugin.'
-      )
+      throw new Error(noComponentSelectorMessage)
     }
     return interpolation
   }
@@ -247,9 +250,7 @@ function createStringFromObject(
           key === 'NO_COMPONENT_SELECTOR' &&
           process.env.NODE_ENV !== 'production'
         ) {
-          throw new Error(
-            'Component selectors can only be used in conjunction with @emotion/babel-plugin.'
-          )
+          throw new Error(noComponentSelectorMessage)
         }
         if (
           Array.isArray(value) &&