chore: switch into using vite's css?url imports

petar-i-todorov · Feb 13, 2024 · 98f7b8f · 98f7b8f
1 parent 98fa958
commit 98f7b8f
Show file tree

Hide file tree

Showing 6 changed files with 55 additions and 15 deletions.
diff --git a/app/root.tsx b/app/root.tsx
@@ -32,7 +32,7 @@ import {
 	getConfetti,
 } from '#app/utils/confetti.server.ts'
 import { ToastSchema, createCookie, getToast } from '#app/utils/toast.server.ts'
-import '#app/styles/global.css'
+import globalStyles from '#app/styles/global.css?url'
 import Icon from '#app/components/Icon.tsx'
 import Toaster from '#app/components/toast.tsx'
 import { staticPageOptions } from '#app/constants/static-page-options.ts'
@@ -166,6 +166,7 @@ export const links: LinksFunction = () => [
 	{ rel: 'icon', href: favicon, type: 'image/svg+xml' },
 	{ rel: 'apple-touch-icon', href: favicon, type: 'image/svg+xml' },
 	{ rel: 'mask-icon', href: favicon, color: '#000000' },
+	{ rel: 'stylesheet', href: globalStyles },
 ]
 
 function App() {

diff --git a/app/routes/$staticPageSlug.tsx b/app/routes/$staticPageSlug.tsx
@@ -2,14 +2,15 @@ import type BaseBlockContent from '@sanity/block-content-to-react'
 import {
 	type LoaderFunctionArgs,
 	type MetaFunction,
+	type LinksFunction,
 	json,
 } from '@remix-run/node'
 import { useLoaderData } from '@remix-run/react'
 import { BlockContent } from '#app/sanity/block-content.tsx'
 import { loadQuery } from '#app/sanity/loader.server.ts'
 import { createStaticPageQueryBySlug } from '#app/sanity/queries.ts'
-import '#app/styles/block.css'
-import '#app/styles/block-static-page.css'
+import blockStyles from '#app/styles/block.css?url'
+import staticPageStyles from '#app/styles/block-static-page.css?url'
 import { toPlainText } from '#app/sanity/misc.ts'
 import { invariantResponse } from '#app/utils/misc.server.ts'
 import { GeneralErrorBoundary } from '#app/components/error-boundary.tsx'
@@ -18,6 +19,19 @@ export function ErrorBoundary() {
 	return <GeneralErrorBoundary />
 }
 
+export const links: LinksFunction = () => {
+	return [
+		{
+			rel: 'stylesheet',
+			href: blockStyles,
+		},
+		{
+			rel: 'stylesheet',
+			href: staticPageStyles,
+		},
+	]
+}
+
 type StaticPage = {
 	title: string
 	body: React.ComponentProps<typeof BaseBlockContent>['blocks']

diff --git a/app/routes/articles_.$categorySlug_.$postSlug.tsx b/app/routes/articles_.$categorySlug_.$postSlug.tsx
@@ -2,6 +2,7 @@ import {
 	type LoaderFunctionArgs,
 	type MetaFunction,
 	type ActionFunctionArgs,
+	type LinksFunction,
 	json,
 } from '@remix-run/node'
 import {
@@ -23,8 +24,8 @@ import Icon from '#app/components/Icon.tsx'
 import { Link as CustomLink } from '#app/components/ui/link.tsx'
 import { prisma } from '#app/utils/prisma-client.server.ts'
 import { getUser } from '#app/utils/use-user.server'
-import '#app/styles/block.css'
-import '#app/styles/block-post.css'
+import blockStyles from '#app/styles/block.css?url'
+import postStyles from '#app/styles/block-post.css?url'
 import { type loader as rootLoader } from '#app/root.tsx'
 import { type Posts } from '#app/components/posts-block.tsx'
 import {
@@ -36,6 +37,19 @@ import { postReactionTypes } from '#app/constants/post-reactions.ts'
 import { BlockContent } from '#app/sanity/block-content.tsx'
 import { GeneralErrorBoundary } from '#app/components/error-boundary.tsx'
 
+export const links: LinksFunction = () => {
+	return [
+		{
+			rel: 'stylesheet',
+			href: blockStyles,
+		},
+		{
+			rel: 'stylesheet',
+			href: postStyles,
+		},
+	]
+}
+
 export function ErrorBoundary() {
 	const params = useParams()
 

diff --git a/app/routes/author_.$authorSlug.tsx b/app/routes/author_.$authorSlug.tsx
@@ -3,6 +3,7 @@ import clsx from 'clsx'
 import {
 	type LoaderFunctionArgs,
 	type MetaFunction,
+	type LinksFunction,
 	json,
 } from '@remix-run/node'
 import {
@@ -24,13 +25,22 @@ import {
 import { invariantResponse } from '#app/utils/misc.server.ts'
 import { type loader as rootLoader } from '#app/root.tsx'
 import { BlockContent } from '#app/sanity/block-content.tsx'
-import '#app/styles/block.css'
+import blockStyles from '#app/styles/block.css?url'
 import { GeneralErrorBoundary } from '#app/components/error-boundary.tsx'
 
 export function ErrorBoundary() {
 	return <GeneralErrorBoundary />
 }
 
+export const links: LinksFunction = () => {
+	return [
+		{
+			rel: 'stylesheet',
+			href: blockStyles,
+		},
+	]
+}
+
 export const meta: MetaFunction<typeof loader> = ({ data }) => {
 	const authorName = `${data?.author.firstName} "${data?.author.nickname}" ${data?.author.lastName}`
 	const title = data

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -60,6 +60,7 @@
 		"remix-auth-socials": "^2.0.5",
 		"remix-utils": "^7.1.0",
 		"sonner": "^1.2.3",
+		"vite": "^5.1.1",
 		"zod": "^3.22.4"
 	},
 	"devDependencies": {
@@ -90,7 +91,6 @@
 		"tailwindcss": "^3.4.1",
 		"tsx": "^3.12.7",
 		"typescript": "^5.0.4",
-		"vite": "^5.0.11",
 		"vitest": "^1.1.0"
 	},
 	"engines": {