chore: adds compiled css example (#22786)

Hiya! I was asked to add an example of how to use [Compiled](https://compiledcssinjs.com/) with Next.js, figured I might as well at it to the source 😄. Let me know if there's any changes needed.

examples/with-compiled-css/.babelrc

@@ -0,0 +1,4 @@
+{
+  "presets": ["next/babel"],
+  "plugins": ["@babel/plugin-syntax-jsx"]
+}

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

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)).

examples/with-compiled-css/components/class-names-box.js

@@ -0,0 +1,19 @@
+import { ClassNames } from '@compiled/react'
+import { error } from '../style/colors'
+
+export const BoxStyles = ({ children }) => (
+  <ClassNames>
+    {({ css }) =>
+      children({
+        className: css`
+          display: flex;
+          width: 100px;
+          height: 100px;
+          border: 1px solid ${error};
+          padding: 8px;
+          flex-direction: column;
+        `,
+      })
+    }
+  </ClassNames>
+)

examples/with-compiled-css/components/styled-button.js

@@ -0,0 +1,11 @@
+import { styled } from '@compiled/react'
+
+export const Button = styled.button`
+  color: ${(props) => props.color};
+  background-color: transparent;
+  padding: 6px 8px;
+  border-radius: 3px;
+  width: 100%;
+  font-family: sans-serif;
+  border: 1px solid ${(props) => props.color};
+`

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
+  },
+}

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"
+  }
+}

examples/with-compiled-css/pages/index.js

@@ -0,0 +1,32 @@
+import '@compiled/react'
+import { BoxStyles } from '../components/class-names-box'
+import { Button } from '../components/styled-button'
+import { secondary, primary } from '../style/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

examples/with-compiled-css/style/colors.js

@@ -0,0 +1,3 @@
+export const primary = 'blue'
+export const secondary = 'purple'
+export const error = 'red'