Support pure comments and styles attributes

docs/advanced-features/compiler.md

@@ -187,6 +187,37 @@ First, update to the latest version of Next.js: `npm install next@latest`. Then,
 }
 ```
 
+### Emotion
+
+We're working to port `@emotion/babel-plugin` to the Next.js Compiler.
+
+First, update to the latest version of Next.js: `npm install next@latest`. Then, update your `next.config.js` file:
+
+```js
+// next.config.js
+
+module.exports = {
+  compiler: {
+    //
+    emotion: boolean | {
+      // default is true. It will be disabled when build type is production.
+      sourceMap?: boolean,
+      // default is 'dev-only'.
+      autoLabel?: 'never' | 'dev-only' | 'always',
+      // default is '[local]'.
+      // Allowed values: `[local]` `[filename]` and `[dirname]`
+      // This option only works when autoLabel is set to 'dev-only' or 'always'.
+      // It allows you to define the format of the resulting label.
+      // The format is defined via string where variable parts are enclosed in square brackets [].
+      // For example labelFormat: "my-classname--[local]", where [local] will be replaced with the name of the variable the result is assigned to.
+      labelFormat?: string,
+    },
+  },
+}
+```
+
+Only `importMap` in `@emotion/babel-plugin` is not supported for now.
+
 ## Experimental Features
 
 ### Minification

examples/with-emotion-swc/next.config.js

@@ -3,9 +3,7 @@
 const nextConfig = {
   reactStrictMode: true,
   compiler: {
-    emotion: {
-      enabled: true,
-    },
+    emotion: true,
   },
 }
 

examples/with-emotion-swc/pages/_app.js

@@ -1,10 +1,15 @@
+import createCache from '@emotion/cache'
+import { CacheProvider } from '@emotion/react'
+
 import { globalStyles } from '../shared/styles'
 
+const cache = createCache({ key: 'next' })
+
 const App = ({ Component, pageProps }) => (
-  <>
+  <CacheProvider value={cache}>
     {globalStyles}
     <Component {...pageProps} />
-  </>
+  </CacheProvider>
 )
 
 export default App

examples/with-emotion-swc/pages/index.js

@@ -1,7 +1,13 @@
+import { css } from '@emotion/react'
 import { Animated, Basic, bounce, Combined, Pink } from '../shared/styles'
 
 const Home = () => (
-  <div>
+  <div
+    css={css`
+      display: flex;
+      flex-direction: column;
+    `}
+  >
     <Basic>Cool Styles</Basic>
     <Pink>Pink text</Pink>
     <Combined>