setup unocss

adnanfajlur · Sep 27, 2024 · 2f1bdd2 · 2f1bdd2
1 parent 7f40699
commit 2f1bdd2
Show file tree

Hide file tree

Showing 8 changed files with 889 additions and 376 deletions.
diff --git a/.eslintrc.cjs b/.eslintrc.cjs
@@ -6,79 +6,83 @@
 
 /** @type {import('eslint').Linter.Config} */
 module.exports = {
-  root: true,
-  parserOptions: {
-    ecmaVersion: "latest",
-    sourceType: "module",
-    ecmaFeatures: {
-      jsx: true,
-    },
-  },
-  env: {
-    browser: true,
-    commonjs: true,
-    es6: true,
-  },
-  ignorePatterns: ["!**/.server", "!**/.client"],
+	root: true,
+	parserOptions: {
+		ecmaVersion: 'latest',
+		sourceType: 'module',
+		ecmaFeatures: {
+			jsx: true,
+		},
+	},
+	env: {
+		browser: true,
+		commonjs: true,
+		es6: true,
+	},
+	ignorePatterns: ['!**/.server', '!**/.client'],
 
-  // Base config
-  extends: ["eslint:recommended"],
+	// Base config
+	extends: ['eslint:recommended'],
 
-  overrides: [
-    // React
-    {
-      files: ["**/*.{js,jsx,ts,tsx}"],
-      plugins: ["react", "jsx-a11y"],
-      extends: [
-        "plugin:react/recommended",
-        "plugin:react/jsx-runtime",
-        "plugin:react-hooks/recommended",
-        "plugin:jsx-a11y/recommended",
-      ],
-      settings: {
-        react: {
-          version: "detect",
-        },
-        formComponents: ["Form"],
-        linkComponents: [
-          { name: "Link", linkAttribute: "to" },
-          { name: "NavLink", linkAttribute: "to" },
-        ],
-        "import/resolver": {
-          typescript: {},
-        },
-      },
-    },
+	overrides: [
+		// React
+		{
+			files: ['**/*.{js,jsx,ts,tsx}'],
+			plugins: ['react', 'jsx-a11y'],
+			extends: [
+				'plugin:react/recommended',
+				'plugin:react/jsx-runtime',
+				'plugin:react-hooks/recommended',
+				'plugin:jsx-a11y/recommended',
+			],
+			settings: {
+				react: {
+					version: 'detect',
+				},
+				formComponents: ['Form'],
+				linkComponents: [
+					{ name: 'Link', linkAttribute: 'to' },
+					{ name: 'NavLink', linkAttribute: 'to' },
+				],
+				'import/resolver': {
+					typescript: {},
+				},
+			},
+		},
 
-    // Typescript
-    {
-      files: ["**/*.{ts,tsx}"],
-      plugins: ["@typescript-eslint", "import"],
-      parser: "@typescript-eslint/parser",
-      settings: {
-        "import/internal-regex": "^~/",
-        "import/resolver": {
-          node: {
-            extensions: [".ts", ".tsx"],
-          },
-          typescript: {
-            alwaysTryTypes: true,
-          },
-        },
-      },
-      extends: [
-        "plugin:@typescript-eslint/recommended",
-        "plugin:import/recommended",
-        "plugin:import/typescript",
-      ],
-    },
+		// Typescript
+		{
+			files: ['**/*.{ts,tsx}'],
+			plugins: ['@typescript-eslint', 'import'],
+			parser: '@typescript-eslint/parser',
+			settings: {
+				'import/internal-regex': '^~/',
+				'import/resolver': {
+					node: {
+						extensions: ['.ts', '.tsx'],
+					},
+					typescript: {
+						alwaysTryTypes: true,
+					},
+				},
+			},
+			extends: [
+				'plugin:@typescript-eslint/recommended',
+				'plugin:import/recommended',
+				'plugin:import/typescript',
+			],
+		},
 
-    // Node
-    {
-      files: [".eslintrc.cjs"],
-      env: {
-        node: true,
-      },
-    },
-  ],
-};
+		// Node
+		{
+			files: ['.eslintrc.cjs'],
+			env: {
+				node: true,
+			},
+		},
+	],
+
+	rules: {
+		'import/no-unresolved': ['erroe', { ignore: '^virtual:' }],
+	},
+}
diff --git a/app/root.tsx b/app/root.tsx
@@ -1,8 +1,9 @@
 // Import styles of packages that you've installed.
 // All packages except `@mantine/hooks` require styles imports
-import { ColorSchemeScript, MantineProvider } from '@mantine/core'
 import '@mantine/core/styles.css'
+import 'virtual:uno.css'
 
+import { ColorSchemeScript, MantineProvider } from '@mantine/core'
 import type { LinksFunction } from '@remix-run/node'
 import { Links, Meta, Outlet, Scripts, ScrollRestoration } from '@remix-run/react'
 import { theme } from './configs/theme.config'

diff --git a/app/routes/_index.tsx b/app/routes/_index.tsx
@@ -10,7 +10,7 @@ export const meta: MetaFunction = () => {
 
 export default function Index() {
 	return (
-		<div className="flex h-screen items-center justify-center">
+		<div className="flex flex-col h-screen items-center justify-center gap-4">
 			<p>Hello world</p>
 			<Button>Click me</Button>
 		</div>