first commit

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,40 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.*
+.yarn/*
+!.yarn/patches
+!.yarn/plugins
+!.yarn/releases
+!.yarn/versions
+
+# 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
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts

examples/with-compiled-css/README.md

@@ -0,0 +1,25 @@
+# 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/vercel/styled-jsx).
+
+## Deploy your own
+
+[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?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), [Yarn](https://yarnpkg.com/lang/en/docs/cli/create/), or [pnpm](https://pnpm.io) to bootstrap the example:
+
+```bash
+npx create-next-app --example with-compiled-css with-compiled-css-app
+```
+
+```bash
+yarn create next-app --example with-compiled-css with-compiled-css-app
+```
+
+```bash
+pnpm 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,11 @@
+/** @type {import('next').NextConfig} */
+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,15 @@
+{
+  "private": true,
+  "scripts": {
+    "dev": "next",
+    "build": "next build",
+    "start": "next start"
+  },
+  "dependencies": {
+    "@compiled/react": "^0.6.7",
+    "@compiled/webpack-loader": "^0.6.7",
+    "next": "latest",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
+  }
+}

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";