Update dependencies and switch to pax with tailwind

PaystackHQ · Jul 25, 2024 · 2f71a69 · 2f71a69
1 parent 853ced9
commit 2f71a69
Show file tree

Hide file tree

Showing 7 changed files with 37 additions and 121 deletions.
diff --git a/README.md b/README.md
@@ -15,6 +15,7 @@ npx create-remix@latest --template PaystackHQ/remix-app-template
 - Unit testing with [Vitest](https://vitest.dev) and [Testing Library](https://testing-library.com)
 - Code formatting with [Prettier](https://prettier.io)
 - Linting with [ESLint](https://eslint.org)
+- Styling with Pax and [TailwindCss](https://tailwindcss.com/)
 - Static Types with [TypeScript](https://typescriptlang.org)
 
 ## Development

diff --git a/app/entry.server.tsx b/app/entry.server.tsx
diff --git a/app/root.tsx b/app/root.tsx
@@ -1,4 +1,3 @@
-import { getCssText } from '@paystackhq/pax';
 import { cssBundleHref } from '@remix-run/css-bundle';
 import type { LinksFunction, LoaderFunctionArgs } from '@remix-run/node';
 import { json } from '@remix-run/node';
@@ -12,7 +11,10 @@ import {
 } from '@remix-run/react';
 import { type ReactNode } from 'react';
 
+import tailwindStyles from './tailwind.css?url';
+
 export const links: LinksFunction = () => [
+  { rel: 'stylesheet', href: tailwindStyles },
   ...(cssBundleHref ? [{ rel: 'stylesheet', href: cssBundleHref }] : []),
 ];
 
@@ -28,11 +30,6 @@ const Document = ({ children }: { children: ReactNode }) => {
         <meta name="viewport" content="width=device-width,initial-scale=1" />
         <Meta />
         <Links />
-        <style
-          id="stitches"
-          dangerouslySetInnerHTML={{ __html: getCssText() }}
-          suppressHydrationWarning
-        />
       </head>
       <body>
         {children}

diff --git a/app/tailwind.css b/app/tailwind.css
@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
diff --git a/mocks/index.js b/mocks/index.js
@@ -1,11 +1,15 @@
-const { rest } = require("msw");
+const { http, HttpResponse } = require("msw");
 const { setupServer } = require("msw/node");
 
 // put one-off handlers that don't really need an entire file to themselves here
 const miscHandlers = [
-  rest.post(`${process.env.REMIX_DEV_HTTP_ORIGIN}/ping`, (req) =>
-    req.passthrough()
-  ),
+  http.get('https://example.com/user', () => {
+    return HttpResponse.json({
+      id: 'c7b3d8e0-5e0b-4b0f-8b3a-3b9f4b3d3b3d',
+      firstName: 'John',
+      lastName: 'Maverick',
+    });
+  }),
 ];
 
 const server = setupServer(...miscHandlers);

diff --git a/package.json b/package.json
@@ -18,14 +18,15 @@
     "validate": "run-p \"test -- --run\" lint typecheck test:e2e:run"
   },
   "dependencies": {
-    "@paystackhq/pax": "^1.12.3",
+    "@paystackhq/pax": "^1.16.0-tailwind.20",
     "@remix-run/css-bundle": "*",
     "@remix-run/node": "*",
     "@remix-run/react": "*",
     "@remix-run/serve": "*",
     "isbot": "^3.6.12",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "remix": "^2.10.3",
     "tiny-invariant": "^1.3.1"
   },
   "devDependencies": {
@@ -41,30 +42,31 @@
     "@types/react-dom": "^18.2.6",
     "@vitejs/plugin-react": "^4.0.1",
     "@vitest/coverage-v8": "^0.32.2",
-    "autoprefixer": "^10.4.14",
+    "autoprefixer": "^10.4.19",
     "binode": "^1.0.5",
     "cookie": "^0.5.0",
     "cross-env": "^7.0.3",
-    "cypress": "^12.16.0",
+    "cypress": "^13.13.1",
     "eslint": "^8.43.0",
     "eslint-config-prettier": "^8.8.0",
     "eslint-plugin-cypress": "^2.13.3",
     "eslint-plugin-import": "^2.28.0",
     "eslint-plugin-markdown": "^3.0.0",
     "happy-dom": "^9.20.3",
-    "msw": "^1.2.2",
+    "msw": "^2.3.4",
     "npm-run-all": "^4.1.5",
-    "postcss": "^8.4.24",
-    "prettier": "2.8.8",
+    "postcss": "^8.4.40",
+    "prettier": "^3.3.3",
     "start-server-and-test": "^2.0.0",
+    "tailwindcss": "^3.4.6",
     "ts-node": "^10.9.1",
     "tsconfig-paths": "^4.2.0",
     "typescript": "^5.1.3",
-    "vite": "^4.3.9",
+    "vite": "^5.3.5",
     "vite-tsconfig-paths": "^3.6.0",
-    "vitest": "^0.32.2"
+    "vitest": "^2.0.4"
   },
   "engines": {
-    "node": ">=18"
+    "node": ">=20"
   }
 }
diff --git a/tailwind.config.ts b/tailwind.config.ts
@@ -0,0 +1,11 @@
+import type { Config } from 'tailwindcss';
+import { paxPreset } from '@paystackhq/pax';
+
+export default {
+  content: [
+    './app/**/*.{js,jsx,ts,tsx}',
+    './node_modules/@paystackhq/pax/**/*.js',
+  ],
+  theme: {},
+  presets: [paxPreset],
+} satisfies Config;