feat(website): unocss

packages/website/.gitignore

@@ -20,6 +20,7 @@ typings/
 .cache/
 build/
 api/
+src/styles/unocss.css
 
 # Miscellaneous
 .tmp/

packages/website/package.json

@@ -4,8 +4,13 @@
 	"description": "A set of builders that you can use when creating your bot",
 	"private": true,
 	"scripts": {
-		"build": "remix build",
-		"dev": "remix dev",
+		"build": "concurrently 'yarn build:css' 'yarn build:remix'",
+		"build:css": "yarn generate:css",
+		"build:remix": "remix build",
+		"dev": "concurrently 'yarn dev:css' 'yarn dev:remix'",
+		"dev:css": "yarn generate:css --watch",
+		"dev:remix": "remix dev",
+		"generate:css": "unocss 'src/**/*.tsx' --out-file ./src/styles/unocss.css",
 		"lint": "prettier --check . && eslint src --ext mjs,js,ts,tsx",
 		"format": "prettier --write . && eslint src --ext mjs,js,ts,tsx --fix"
 	},
@@ -62,8 +67,10 @@
 		"@types/react-dom": "^18.0.5",
 		"@typescript-eslint/eslint-plugin": "^5.27.1",
 		"@typescript-eslint/parser": "^5.27.1",
+		"@unocss/cli": "^0.38.1",
 		"@vitejs/plugin-react": "^1.3.2",
 		"c8": "^7.11.3",
+		"concurrently": "^7.2.1",
 		"cypress": "^10.0.3",
 		"eslint": "^8.17.0",
 		"eslint-config-marine": "^9.4.1",
@@ -76,7 +83,8 @@
 		"msw": "^0.42.1",
 		"prettier": "^2.6.2",
 		"typedoc": "^0.22.17",
-		"typescript": "^4.7.3"
+		"typescript": "^4.7.3",
+		"unocss": "^0.38.1"
 	},
 	"engines": {
 		"node": ">=16.9.0"

packages/website/src/root.tsx

@@ -1,5 +1,12 @@
-import type { MetaFunction } from '@remix-run/node';
+import type { MetaFunction, LinksFunction } from '@remix-run/node';
 import { Links, LiveReload, Meta, Outlet, Scripts, ScrollRestoration } from '@remix-run/react';
+import unocssReset from '@unocss/reset/normalize.css';
+import unocss from './styles/unocss.css';
+
+export const links: LinksFunction = () => [
+	{ rel: 'stylesheet', href: unocssReset },
+	{ rel: 'stylesheet', href: unocss },
+];
 
 export const meta: MetaFunction = () => ({
 	charset: 'utf-8',

packages/website/src/routes/index.tsx

@@ -1,3 +1,3 @@
 export default function IndexRoute() {
-	return <div>Hello World</div>;
+	return <div className="text-2xl">Hello World</div>;
 }

packages/website/types.d.ts

@@ -0,0 +1 @@
+declare module '*.css';

packages/website/unocss.config.ts

@@ -0,0 +1,3 @@
+import { defineConfig } from 'unocss';
+
+export default defineConfig({});