diff --git a/examples/with-windicss/.gitignore b/examples/with-windicss/.gitignore new file mode 100644 index 000000000000..c87c9b392c02 --- /dev/null +++ b/examples/with-windicss/.gitignore @@ -0,0 +1,36 @@ +# 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* +.pnpm-debug.log* + +# local env files +.env*.local + +# vercel +.vercel + +# typescript +*.tsbuildinfo +next-env.d.ts diff --git a/examples/with-windicss/README.md b/examples/with-windicss/README.md new file mode 100644 index 000000000000..1aa9b915cfab --- /dev/null +++ b/examples/with-windicss/README.md @@ -0,0 +1,23 @@ +# Next.js + WindiCSS Example + +This example shows how to use [WindiCSS](https://windicss.org/) with Next.js. + +## Deploy your own + +Deploy the example using [Vercel](https://vercel.com?utm_source=github&utm_medium=readme&utm_campaign=next-example) or preview live with [StackBlitz](https://stackblitz.com/github/vercel/next.js/tree/canary/examples/hello-world) + +[![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-windicss&project-name=with-windicss&repository-name=with-windicss) + +## 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-windicss +# or +yarn create next-app --example with-windicss +# or +pnpm create next-app --example with-windicss +``` + +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-windicss/next.config.js b/examples/with-windicss/next.config.js new file mode 100644 index 000000000000..097b1a1fe9d5 --- /dev/null +++ b/examples/with-windicss/next.config.js @@ -0,0 +1,12 @@ +/** @type {import('next').NextConfig} */ +const WindiCSSWebpackPlugin = require('windicss-webpack-plugin') + +const nextConfig = { + reactStrictMode: true, + webpack: (config) => { + config.plugins.push(new WindiCSSWebpackPlugin()) + return config + }, +} + +module.exports = nextConfig diff --git a/examples/with-windicss/package.json b/examples/with-windicss/package.json new file mode 100644 index 000000000000..7bb0cde680cf --- /dev/null +++ b/examples/with-windicss/package.json @@ -0,0 +1,20 @@ +{ + "private": true, + "scripts": { + "dev": "next dev", + "build": "next build", + "start": "next start" + }, + "dependencies": { + "next": "latest", + "react": "18.2.0", + "react-dom": "18.2.0" + }, + "devDependencies": { + "@types/node": "17.0.21", + "@types/react": "17.0.40", + "typescript": "4.6.2", + "windicss": "3.5.1", + "windicss-webpack-plugin": "1.6.7" + } +} diff --git a/examples/with-windicss/pages/_app.tsx b/examples/with-windicss/pages/_app.tsx new file mode 100644 index 000000000000..1aabbd32a807 --- /dev/null +++ b/examples/with-windicss/pages/_app.tsx @@ -0,0 +1,9 @@ +import '../styles/globals.css' +import type { AppProps } from 'next/app' +import 'windi.css' + +function MyApp({ Component, pageProps }: AppProps) { + return +} + +export default MyApp diff --git a/examples/with-windicss/pages/index.tsx b/examples/with-windicss/pages/index.tsx new file mode 100644 index 000000000000..94e17a5facfb --- /dev/null +++ b/examples/with-windicss/pages/index.tsx @@ -0,0 +1,86 @@ +import type { NextPage } from 'next' +import Head from 'next/head' +import Image from 'next/image' + +const Home: NextPage = () => { + return ( +
+ + Create Next App + + + +
+

+ Welcome to{' '} + + Next.js! + +

+ +

+ Get started by editing{' '} + + pages/index.tsx + +

+ +
+ +

Documentation →

+

+ Find in-depth information about Next.js features and API. +

+ + + +

Learn →

+

+ Learn about Next.js in an interactive course with quizzes! +

+ + + +

Examples →

+

+ Discover and deploy boilerplate example Next.js projects. +

+ + + +

Deploy →

+

+ Instantly deploy your Next.js site to a public URL with Vercel. +

+ +
+
+ + +
+ ) +} + +export default Home diff --git a/examples/with-windicss/public/favicon.ico b/examples/with-windicss/public/favicon.ico new file mode 100644 index 000000000000..718d6fea4835 Binary files /dev/null and b/examples/with-windicss/public/favicon.ico differ diff --git a/examples/with-windicss/public/vercel.svg b/examples/with-windicss/public/vercel.svg new file mode 100644 index 000000000000..fbf0e25a651c --- /dev/null +++ b/examples/with-windicss/public/vercel.svg @@ -0,0 +1,4 @@ + + + \ No newline at end of file diff --git a/examples/with-windicss/styles/globals.css b/examples/with-windicss/styles/globals.css new file mode 100644 index 000000000000..e5e2dcc23baf --- /dev/null +++ b/examples/with-windicss/styles/globals.css @@ -0,0 +1,16 @@ +html, +body { + padding: 0; + margin: 0; + font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, + Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif; +} + +a { + color: inherit; + text-decoration: none; +} + +* { + box-sizing: border-box; +} diff --git a/examples/with-windicss/tsconfig.json b/examples/with-windicss/tsconfig.json new file mode 100644 index 000000000000..99710e857874 --- /dev/null +++ b/examples/with-windicss/tsconfig.json @@ -0,0 +1,20 @@ +{ + "compilerOptions": { + "target": "es5", + "lib": ["dom", "dom.iterable", "esnext"], + "allowJs": true, + "skipLibCheck": true, + "strict": true, + "forceConsistentCasingInFileNames": true, + "noEmit": true, + "esModuleInterop": true, + "module": "esnext", + "moduleResolution": "node", + "resolveJsonModule": true, + "isolatedModules": true, + "jsx": "preserve", + "incremental": true + }, + "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"], + "exclude": ["node_modules"] +} diff --git a/examples/with-windicss/windi.config.ts b/examples/with-windicss/windi.config.ts new file mode 100644 index 000000000000..b11366f9ec54 --- /dev/null +++ b/examples/with-windicss/windi.config.ts @@ -0,0 +1,8 @@ +import { defineConfig } from 'windicss/helpers' + +export default defineConfig({ + extract: { + include: ['**/*.{jsx,tsx,css}'], + exclude: ['node_modules', '.git', '.next'], + }, +})