Skip to content

Commit 6e063d4

Browse files
machourmachour
authored
refactor(unocss): Switch to V2 + Vite (#487)
1 parent 776593c commit 6e063d4

File tree

11 files changed

+158
-57
lines changed

11 files changed

+158
-57
lines changed

‎unocss/.eslintrc.cjs

Lines changed: 84 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,84 @@
1+
/**
2+
* This is intended to be a basic starting point for linting in your app.
3+
* It relies on recommended configs out of the box for simplicity, but you can
4+
* and should modify this configuration to best suit your team's needs.
5+
*/
6+
7+
/** @type {import('eslint').Linter.Config} */
8+
module.exports = {
9+
root: true,
10+
parserOptions: {
11+
ecmaVersion: "latest",
12+
sourceType: "module",
13+
ecmaFeatures: {
14+
jsx: true,
15+
},
16+
},
17+
env: {
18+
browser: true,
19+
commonjs: true,
20+
es6: true,
21+
},
22+
ignorePatterns: ["!**/.server", "!**/.client"],
23+
24+
// Base config
25+
extends: ["eslint:recommended"],
26+
27+
overrides: [
28+
// React
29+
{
30+
files: ["**/*.{js,jsx,ts,tsx}"],
31+
plugins: ["react", "jsx-a11y"],
32+
extends: [
33+
"plugin:react/recommended",
34+
"plugin:react/jsx-runtime",
35+
"plugin:react-hooks/recommended",
36+
"plugin:jsx-a11y/recommended",
37+
],
38+
settings: {
39+
react: {
40+
version: "detect",
41+
},
42+
formComponents: ["Form"],
43+
linkComponents: [
44+
{ name: "Link", linkAttribute: "to" },
45+
{ name: "NavLink", linkAttribute: "to" },
46+
],
47+
"import/resolver": {
48+
typescript: {},
49+
},
50+
},
51+
},
52+
53+
// Typescript
54+
{
55+
files: ["**/*.{ts,tsx}"],
56+
plugins: ["@typescript-eslint", "import"],
57+
parser: "@typescript-eslint/parser",
58+
settings: {
59+
"import/internal-regex": "^~/",
60+
"import/resolver": {
61+
node: {
62+
extensions: [".ts", ".tsx"],
63+
},
64+
typescript: {
65+
alwaysTryTypes: true,
66+
},
67+
},
68+
},
69+
extends: [
70+
"plugin:@typescript-eslint/recommended",
71+
"plugin:import/recommended",
72+
"plugin:import/typescript",
73+
],
74+
},
75+
76+
// Node
77+
{
78+
files: [".eslintrc.cjs"],
79+
env: {
80+
node: true,
81+
},
82+
},
83+
],
84+
};

‎unocss/.eslintrc.js

Lines changed: 0 additions & 4 deletions
This file was deleted.

‎unocss/.gitignore

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,8 +2,7 @@ node_modules
22

33
/.cache
44
/build
5-
/public/build
65
.env
76

87
# UnoCSS generated css file
9-
/app/styles/uno.css
8+
/app/styles/uno.css

‎unocss/README.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -25,4 +25,4 @@ You can add more presets in [`unocss.config.ts`](./unocss.config.ts).
2525
## Related Links
2626

2727
- [UnoCSS GitHub](https://github.com/unocss/unocss)
28-
- [UnoCSS Docs](https://uno.antfu.me)
28+
- [UnoCSS Website](https://unocss.dev/)

‎unocss/app/root.tsx

Lines changed: 11 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,40 +1,38 @@
1-
import type { LinksFunction, MetaFunction } from "@remix-run/node";
1+
import { LinksFunction } from "@remix-run/node";
22
import {
33
Links,
4-
LiveReload,
54
Meta,
65
Outlet,
76
Scripts,
87
ScrollRestoration,
98
} from "@remix-run/react";
10-
import reset from "@unocss/reset/tailwind.css";
9+
import reset from "@unocss/reset/tailwind.css?url";
1110

12-
import uno from "~/styles/uno.css";
13-
14-
export const meta: MetaFunction = () => ({
15-
charset: "utf-8",
16-
title: "New Remix App",
17-
viewport: "width=device-width,initial-scale=1",
18-
});
11+
import uno from "~/styles/uno.css?url";
1912

2013
export const links: LinksFunction = () => [
2114
{ rel: "stylesheet", href: reset },
2215
{ rel: "stylesheet", href: uno },
2316
];
2417

25-
export default function App() {
18+
export function Layout({ children }: { children: React.ReactNode }) {
2619
return (
2720
<html lang="en">
2821
<head>
22+
<meta charSet="utf-8" />
23+
<meta name="viewport" content="width=device-width, initial-scale=1" />
2924
<Meta />
3025
<Links />
3126
</head>
3227
<body>
33-
<Outlet />
28+
{children}
3429
<ScrollRestoration />
3530
<Scripts />
36-
<LiveReload />
3731
</body>
3832
</html>
3933
);
4034
}
35+
36+
export default function App() {
37+
return <Outlet />;
38+
}

‎unocss/app/routes/_index.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,7 @@ const Index = () => {
2424

2525
return (
2626
<main className="py-16 px-4 max-w-screen-md mx-auto w-full">
27-
<h1 className="text-4xl font-bold mb-6">Welcome to Remix + UnoCSS 💿</h1>
27+
<h1 className="text-4xl font-bold mb-6">Welcome to Remix + UnoCSS 💿</h1>
2828

2929
<ul className="list-disc grid gap-2 px-4.5">
3030
{links.map((link) => (

‎unocss/package.json

Lines changed: 29 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,38 +1,49 @@
11
{
2+
"name": "unocss",
23
"private": true,
34
"sideEffects": false,
5+
"type": "module",
46
"scripts": {
57
"build": "run-s \"build:*\"",
68
"build:css": "npm run generate:css",
7-
"build:remix": "remix build",
9+
"build:remix": "remix vite:build",
810
"dev": "run-p \"dev:*\"",
911
"dev:css": "npm run generate:css -- --watch",
10-
"dev:remix": "remix dev",
12+
"dev:remix": "remix vite:dev",
1113
"generate:css": "unocss './app/**/*.{js,ts,jsx,tsx}' -o ./app/styles/uno.css",
12-
"start": "remix-serve build",
14+
"lint": "eslint --ignore-path .gitignore --cache --cache-location ./node_modules/.cache/eslint .",
15+
"start": "remix-serve ./build/server/index.js",
1316
"typecheck": "tsc"
1417
},
1518
"dependencies": {
16-
"@remix-run/node": "^1.19.3",
17-
"@remix-run/react": "^1.19.3",
18-
"@remix-run/serve": "^1.19.3",
19-
"isbot": "^3.6.5",
19+
"@remix-run/node": "^2.9.2",
20+
"@remix-run/react": "^2.9.2",
21+
"@remix-run/serve": "^2.9.2",
22+
"isbot": "^4.1.0",
2023
"react": "^18.2.0",
2124
"react-dom": "^18.2.0"
2225
},
2326
"devDependencies": {
24-
"@remix-run/dev": "^1.19.3",
25-
"@remix-run/eslint-config": "^1.19.3",
26-
"@types/react": "^18.0.25",
27-
"@types/react-dom": "^18.0.8",
28-
"@unocss/cli": "^0.46.4",
29-
"@unocss/reset": "^0.46.4",
30-
"eslint": "^8.27.0",
27+
"@remix-run/dev": "^2.9.2",
28+
"@types/react": "^18.2.20",
29+
"@types/react-dom": "^18.2.7",
30+
"@typescript-eslint/eslint-plugin": "^6.7.4",
31+
"@typescript-eslint/parser": "^6.7.4",
32+
"@unocss/cli": "^0.60.3",
33+
"@unocss/reset": "^0.60.3",
34+
"eslint": "^8.38.0",
35+
"eslint-import-resolver-typescript": "^3.6.1",
36+
"eslint-plugin-import": "^2.28.1",
37+
"eslint-plugin-jsx-a11y": "^6.7.1",
38+
"eslint-plugin-react": "^7.33.2",
39+
"eslint-plugin-react-hooks": "^4.6.0",
3140
"npm-run-all": "^4.1.5",
32-
"typescript": "^4.8.4",
33-
"unocss": "^0.46.4"
41+
"typescript": "^5.1.6",
42+
"unocss": "^0.60.3",
43+
"vite": "^5.1.0",
44+
"vite-tsconfig-paths": "^4.2.1"
3445
},
3546
"engines": {
36-
"node": ">=14.0.0"
47+
"node": ">=20.0.0"
3748
}
38-
}
49+
}

‎unocss/remix.config.js

Lines changed: 0 additions & 11 deletions
This file was deleted.

‎unocss/remix.env.d.ts

Lines changed: 0 additions & 2 deletions
This file was deleted.

‎unocss/tsconfig.json

Lines changed: 15 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,32 @@
11
{
2-
"include": ["remix.env.d.ts", "**/*.ts", "**/*.tsx"],
2+
"include": [
3+
"**/*.ts",
4+
"**/*.tsx",
5+
"**/.server/**/*.ts",
6+
"**/.server/**/*.tsx",
7+
"**/.client/**/*.ts",
8+
"**/.client/**/*.tsx"
9+
],
310
"compilerOptions": {
4-
"lib": ["DOM", "DOM.Iterable", "ES2019"],
11+
"lib": ["DOM", "DOM.Iterable", "ES2022"],
12+
"types": ["@remix-run/node", "vite/client"],
513
"isolatedModules": true,
614
"esModuleInterop": true,
715
"jsx": "react-jsx",
8-
"moduleResolution": "node",
16+
"module": "ESNext",
17+
"moduleResolution": "Bundler",
918
"resolveJsonModule": true,
10-
"target": "ES2019",
19+
"target": "ES2022",
1120
"strict": true,
1221
"allowJs": true,
22+
"skipLibCheck": true,
1323
"forceConsistentCasingInFileNames": true,
1424
"baseUrl": ".",
1525
"paths": {
1626
"~/*": ["./app/*"]
1727
},
1828

19-
// Remix takes care of building everything in `remix build`.
29+
// Vite takes care of building everything, not tsc.
2030
"noEmit": true
2131
}
2232
}

0 commit comments

Comments
 (0)