From 8d4e39eb92e60803f40ce2caa401636c48082911 Mon Sep 17 00:00:00 2001
From: Michael Dougall <mdougall@atlassian.com>
Date: Fri, 5 Mar 2021 11:59:42 +1100
Subject: [PATCH 1/3] chore: adds compiled css example

---
 examples/with-compiled-css/.babelrc           |  4 +++
 examples/with-compiled-css/.gitignore         | 34 +++++++++++++++++++
 examples/with-compiled-css/README.md          | 21 ++++++++++++
 examples/with-compiled-css/next.config.js     | 10 ++++++
 examples/with-compiled-css/package.json       | 17 ++++++++++
 .../pages/class-names-box.js                  | 18 ++++++++++
 examples/with-compiled-css/pages/colors.js    |  3 ++
 examples/with-compiled-css/pages/index.js     | 32 +++++++++++++++++
 .../with-compiled-css/pages/styled-button.js  | 12 +++++++
 9 files changed, 151 insertions(+)
 create mode 100644 examples/with-compiled-css/.babelrc
 create mode 100644 examples/with-compiled-css/.gitignore
 create mode 100644 examples/with-compiled-css/README.md
 create mode 100644 examples/with-compiled-css/next.config.js
 create mode 100644 examples/with-compiled-css/package.json
 create mode 100644 examples/with-compiled-css/pages/class-names-box.js
 create mode 100644 examples/with-compiled-css/pages/colors.js
 create mode 100644 examples/with-compiled-css/pages/index.js
 create mode 100644 examples/with-compiled-css/pages/styled-button.js

diff --git a/examples/with-compiled-css/.babelrc b/examples/with-compiled-css/.babelrc
new file mode 100644
index 0000000000000..f8ff435120cbd
--- /dev/null
+++ b/examples/with-compiled-css/.babelrc
@@ -0,0 +1,4 @@
+{
+  "presets": ["@babel/preset-react"],
+  "plugins": ["@babel/plugin-syntax-jsx"]
+}
diff --git a/examples/with-compiled-css/.gitignore b/examples/with-compiled-css/.gitignore
new file mode 100644
index 0000000000000..1437c53f70bc2
--- /dev/null
+++ b/examples/with-compiled-css/.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
diff --git a/examples/with-compiled-css/README.md b/examples/with-compiled-css/README.md
new file mode 100644
index 0000000000000..2d4fd0d1d6c52
--- /dev/null
+++ b/examples/with-compiled-css/README.md
@@ -0,0 +1,21 @@
+# Example app with [Compiled](https://github.com/atlassian-labs/compiled) (CSS-in-JS)
+
+This example features how to use [Compiled](https://github.com/atlassian-labs/compiled) as the build time CSS-in-JS styling solution instead of [styled-jsx](https://github.com/zeit/styled-jsx).
+
+## 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-compiled-css&project-name=with-compiled-css&repository-name=with-compiled-css)
+
+## 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-compiled-css with-compiled-css-app
+# or
+yarn create next-app --example with-compiled-css with-compiled-css-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)).
diff --git a/examples/with-compiled-css/next.config.js b/examples/with-compiled-css/next.config.js
new file mode 100644
index 0000000000000..599c97127dac3
--- /dev/null
+++ b/examples/with-compiled-css/next.config.js
@@ -0,0 +1,10 @@
+module.exports = {
+  webpack: (config) => {
+    config.module.rules.push({
+      test: /\.js$/,
+      use: ['@compiled/webpack-loader'],
+    })
+
+    return config
+  },
+}
diff --git a/examples/with-compiled-css/package.json b/examples/with-compiled-css/package.json
new file mode 100644
index 0000000000000..e603d09f4ecd6
--- /dev/null
+++ b/examples/with-compiled-css/package.json
@@ -0,0 +1,17 @@
+{
+  "name": "with-compiled-css",
+  "version": "1.0.0",
+  "license": "MIT",
+  "scripts": {
+    "dev": "next",
+    "build": "next build",
+    "start": "next start"
+  },
+  "dependencies": {
+    "@compiled/react": "^0.6.7",
+    "@compiled/webpack-loader": "^0.6.7",
+    "next": "latest",
+    "react": "^17.0.1",
+    "react-dom": "^17.0.1"
+  }
+}
diff --git a/examples/with-compiled-css/pages/class-names-box.js b/examples/with-compiled-css/pages/class-names-box.js
new file mode 100644
index 0000000000000..0d1ffd9f10548
--- /dev/null
+++ b/examples/with-compiled-css/pages/class-names-box.js
@@ -0,0 +1,18 @@
+import { ClassNames } from '@compiled/react'
+
+export const BoxStyles = ({ children }) => (
+  <ClassNames>
+    {({ css }) =>
+      children({
+        className: css`
+          display: flex;
+          width: 100px;
+          height: 100px;
+          border: 1px solid red;
+          padding: 8px;
+          flex-direction: column;
+        `,
+      })
+    }
+  </ClassNames>
+)
diff --git a/examples/with-compiled-css/pages/colors.js b/examples/with-compiled-css/pages/colors.js
new file mode 100644
index 0000000000000..727481b475158
--- /dev/null
+++ b/examples/with-compiled-css/pages/colors.js
@@ -0,0 +1,3 @@
+export const primary = 'blue'
+export const secondary = 'purple'
+export const error = 'red'
diff --git a/examples/with-compiled-css/pages/index.js b/examples/with-compiled-css/pages/index.js
new file mode 100644
index 0000000000000..f68e12ad5508c
--- /dev/null
+++ b/examples/with-compiled-css/pages/index.js
@@ -0,0 +1,32 @@
+import '@compiled/react'
+import { BoxStyles } from './class-names-box'
+import { Button } from './styled-button'
+import { secondary, primary } from './colors'
+
+const IndexPage = () => (
+  <BoxStyles>
+    {(props) => (
+      <div {...props}>
+        <Button color={secondary}>Styled button</Button>
+
+        <div
+          css={{
+            marginTop: 8,
+            flexGrow: 1,
+            height: '100%',
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            fontFamily: 'sans-serif',
+            color: primary,
+            border: `1px solid ${primary}`,
+          }}
+        >
+          CSS prop
+        </div>
+      </div>
+    )}
+  </BoxStyles>
+)
+
+export default IndexPage
diff --git a/examples/with-compiled-css/pages/styled-button.js b/examples/with-compiled-css/pages/styled-button.js
new file mode 100644
index 0000000000000..83a257f1ade0c
--- /dev/null
+++ b/examples/with-compiled-css/pages/styled-button.js
@@ -0,0 +1,12 @@
+import { styled } from '@compiled/react'
+
+export const Button = styled.button`
+  color: ${(props) => props.color};
+  border: 1px solid black;
+  background-color: transparent;
+  padding: 6px 8px;
+  border-radius: 3px;
+  width: 100%;
+  font-family: sans-serif;
+  border: 1px solid ${(props) => props.color};
+`

From 1e6dd9603dac669dd60cc8a8c7ac11a724929fc7 Mon Sep 17 00:00:00 2001
From: Michael Dougall <mdougall@atlassian.com>
Date: Fri, 5 Mar 2021 22:08:26 +1100
Subject: [PATCH 2/3] chore: resolves code review comments

---
 examples/with-compiled-css/.babelrc                         | 3 +--
 .../{pages => components}/class-names-box.js                | 3 ++-
 .../{pages => components}/styled-button.js                  | 1 -
 examples/with-compiled-css/pages/index.js                   | 6 +++---
 examples/with-compiled-css/{pages => style}/colors.js       | 0
 5 files changed, 6 insertions(+), 7 deletions(-)
 rename examples/with-compiled-css/{pages => components}/class-names-box.js (81%)
 rename examples/with-compiled-css/{pages => components}/styled-button.js (91%)
 rename examples/with-compiled-css/{pages => style}/colors.js (100%)

diff --git a/examples/with-compiled-css/.babelrc b/examples/with-compiled-css/.babelrc
index f8ff435120cbd..1ff94f7ed28e1 100644
--- a/examples/with-compiled-css/.babelrc
+++ b/examples/with-compiled-css/.babelrc
@@ -1,4 +1,3 @@
 {
-  "presets": ["@babel/preset-react"],
-  "plugins": ["@babel/plugin-syntax-jsx"]
+  "presets": ["next/babel"]
 }
diff --git a/examples/with-compiled-css/pages/class-names-box.js b/examples/with-compiled-css/components/class-names-box.js
similarity index 81%
rename from examples/with-compiled-css/pages/class-names-box.js
rename to examples/with-compiled-css/components/class-names-box.js
index 0d1ffd9f10548..67658c122059e 100644
--- a/examples/with-compiled-css/pages/class-names-box.js
+++ b/examples/with-compiled-css/components/class-names-box.js
@@ -1,4 +1,5 @@
 import { ClassNames } from '@compiled/react'
+import { error } from '../style/colors'
 
 export const BoxStyles = ({ children }) => (
   <ClassNames>
@@ -8,7 +9,7 @@ export const BoxStyles = ({ children }) => (
           display: flex;
           width: 100px;
           height: 100px;
-          border: 1px solid red;
+          border: 1px solid ${error};
           padding: 8px;
           flex-direction: column;
         `,
diff --git a/examples/with-compiled-css/pages/styled-button.js b/examples/with-compiled-css/components/styled-button.js
similarity index 91%
rename from examples/with-compiled-css/pages/styled-button.js
rename to examples/with-compiled-css/components/styled-button.js
index 83a257f1ade0c..bc3a2c58120fc 100644
--- a/examples/with-compiled-css/pages/styled-button.js
+++ b/examples/with-compiled-css/components/styled-button.js
@@ -2,7 +2,6 @@ import { styled } from '@compiled/react'
 
 export const Button = styled.button`
   color: ${(props) => props.color};
-  border: 1px solid black;
   background-color: transparent;
   padding: 6px 8px;
   border-radius: 3px;
diff --git a/examples/with-compiled-css/pages/index.js b/examples/with-compiled-css/pages/index.js
index f68e12ad5508c..3befff44a87d8 100644
--- a/examples/with-compiled-css/pages/index.js
+++ b/examples/with-compiled-css/pages/index.js
@@ -1,7 +1,7 @@
 import '@compiled/react'
-import { BoxStyles } from './class-names-box'
-import { Button } from './styled-button'
-import { secondary, primary } from './colors'
+import { BoxStyles } from '../components/class-names-box'
+import { Button } from '../components/styled-button'
+import { secondary, primary } from '../style/colors'
 
 const IndexPage = () => (
   <BoxStyles>
diff --git a/examples/with-compiled-css/pages/colors.js b/examples/with-compiled-css/style/colors.js
similarity index 100%
rename from examples/with-compiled-css/pages/colors.js
rename to examples/with-compiled-css/style/colors.js

From 07fe7351038f67fd55d315b436cbfa55efecc6a9 Mon Sep 17 00:00:00 2001
From: Michael Dougall <mdougall@atlassian.com>
Date: Sat, 6 Mar 2021 12:19:18 +1100
Subject: [PATCH 3/3] fix: use jsx plugin

---
 examples/with-compiled-css/.babelrc | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/examples/with-compiled-css/.babelrc b/examples/with-compiled-css/.babelrc
index 1ff94f7ed28e1..0acfe0a2a9a72 100644
--- a/examples/with-compiled-css/.babelrc
+++ b/examples/with-compiled-css/.babelrc
@@ -1,3 +1,4 @@
 {
-  "presets": ["next/babel"]
+  "presets": ["next/babel"],
+  "plugins": ["@babel/plugin-syntax-jsx"]
 }