SourceMap

examples/with-emotion-swc/.gitignore

@@ -0,0 +1,34 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# local env files
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+# vercel
+.vercel

examples/with-emotion-swc/README.md

@@ -0,0 +1,31 @@
+# Emotion Example
+
+Extract and inline critical css with
+[@emotion/css](https://github.com/emotion-js/emotion/tree/master/packages/css),
+[@emotion/server](https://github.com/emotion-js/emotion/tree/master/packages/server),
+[@emotion/react](https://github.com/emotion-js/emotion/tree/master/packages/react),
+and [@emotion/styled](https://github.com/emotion-js/emotion/tree/master/packages/styled).
+
+## Preview
+
+Preview the example live on [StackBlitz](http://stackblitz.com/):
+
+[![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/vercel/next.js/tree/canary/examples/with-emotion)
+
+## Deploy your own
+
+Deploy the example using [Vercel](https://vercel.com?utm_source=github&utm_medium=readme&utm_campaign=next-example):
+
+[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/git/external?repository-url=https://github.com/vercel/next.js/tree/canary/examples/with-emotion&project-name=with-emotion&repository-name=with-emotion)
+
+## How to use
+
+Execute [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app) with [npm](https://docs.npmjs.com/cli/init) or [Yarn](https://yarnpkg.com/lang/en/docs/cli/create/) to bootstrap the example:
+
+```bash
+npx create-next-app --example with-emotion with-emotion-app
+# or
+yarn create next-app --example with-emotion with-emotion-app
+```
+
+Deploy it to the cloud with [Vercel](https://vercel.com/new?utm_source=github&utm_medium=readme&utm_campaign=next-example) ([Documentation](https://nextjs.org/docs/deployment)).

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

@@ -0,0 +1,12 @@
+/** @type {import('next').NextConfig} */
+
+const nextConfig = {
+  reactStrictMode: true,
+  compiler: {
+    emotion: {
+      enabled: true,
+    },
+  },
+}
+
+module.exports = nextConfig

examples/with-emotion-swc/package.json

@@ -0,0 +1,15 @@
+{
+  "private": true,
+  "scripts": {
+    "dev": "next",
+    "build": "next build",
+    "start": "next start"
+  },
+  "dependencies": {
+    "@emotion/react": "11.8.1",
+    "@emotion/styled": "11.8.1",
+    "next": "latest",
+    "react": "17.0.2",
+    "react-dom": "17.0.2"
+  }
+}

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

@@ -0,0 +1,10 @@
+import { globalStyles } from '../shared/styles'
+
+const App = ({ Component, pageProps }) => (
+  <>
+    {globalStyles}
+    <Component {...pageProps} />
+  </>
+)
+
+export default App

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

@@ -0,0 +1,14 @@
+import { Animated, Basic, bounce, Combined, Pink } from '../shared/styles'
+
+const Home = () => (
+  <div>
+    <Basic>Cool Styles</Basic>
+    <Pink>Pink text</Pink>
+    <Combined>
+      With <code>:hover</code>.
+    </Combined>
+    <Animated animation={bounce}>Let's bounce.</Animated>
+  </div>
+)
+
+export default Home

examples/with-emotion-swc/shared/styles.js

@@ -0,0 +1,72 @@
+import { css, Global, keyframes } from '@emotion/react'
+import styled from '@emotion/styled'
+
+export const globalStyles = (
+  <Global
+    styles={css`
+      html,
+      body {
+        padding: 3rem 1rem;
+        margin: 0;
+        background: papayawhip;
+        min-height: 100%;
+        font-family: Helvetica, Arial, sans-serif;
+        font-size: 24px;
+      }
+    `}
+  />
+)
+
+export const basicStyles = css({
+  backgroundColor: 'white',
+  color: 'cornflowerblue',
+  border: '1px solid lightgreen',
+  borderRight: 'none',
+  borderBottom: 'none',
+  boxShadow: '5px 5px 0 0 lightgreen, 10px 10px 0 0 lightyellow',
+  transition: 'all 0.1s linear',
+  margin: '3rem 0',
+  padding: '1rem 0.5rem',
+})
+
+export const hoverStyles = css`
+  &:hover {
+    color: white;
+    background-color: lightgray;
+    border-color: aqua;
+    box-shadow: -15px -15px 0 0 aqua, -30px -30px 0 0 cornflowerblue;
+  }
+`
+export const bounce = keyframes`
+  from {
+    transform: scale(1.01);
+  }
+  to {
+    transform: scale(0.99);
+  }
+`
+
+export const Basic = styled.div`
+  ${basicStyles};
+`
+
+export const Combined = styled.div`
+  ${basicStyles};
+  ${hoverStyles};
+  & code {
+    background-color: linen;
+  }
+`
+
+export const Pink = styled.div(basicStyles, {
+  color: 'hotpink',
+})
+
+export const Animated = styled.div`
+  ${basicStyles};
+  ${hoverStyles};
+  & code {
+    background-color: linen;
+  }
+  animation: ${({ animation }) => animation} 0.2s infinite ease-in-out alternate;
+`

package.json

@@ -148,9 +148,9 @@
     "react-dom": "17.0.2",
     "react-dom-18": "npm:react-dom@18.0.0-rc.0",
     "react-ssr-prepass": "1.0.8",
+    "react-virtualized": "9.22.3",
     "relay-compiler": "13.0.2",
     "relay-runtime": "13.0.2",
-    "react-virtualized": "9.22.3",
     "release": "6.3.0",
     "request-promise-core": "1.1.2",
     "resolve-from": "5.0.0",

packages/next-swc/crates/core/Cargo.toml

@@ -7,6 +7,7 @@ version = "0.0.0"
 crate-type = ["cdylib", "rlib"]
 
 [dependencies]
+base64 = "0.13"
 byteorder = "1"
 chrono = "0.4"
 easy-error = "1.0.0"