chore: add vanilla extract

SquiggleTools · Feb 20, 2024 · a96e2cd · a96e2cd
1 parent 4d5fe66
commit a96e2cd
Show file tree

Hide file tree

Showing 7 changed files with 40 additions and 12 deletions.
diff --git a/.eslintrc.cjs b/.eslintrc.cjs
@@ -50,15 +50,6 @@ module.exports = {
 				"jsdoc/require-returns": "off",
 			},
 		},
-		{
-			files: "**/*.md/*.ts",
-			rules: {
-				"n/no-missing-import": [
-					"error",
-					{ allowModules: ["boston-ts-website"] },
-				],
-			},
-		},
 		{
 			excludedFiles: ["**/*.md/*.ts"],
 			extends: [
@@ -135,6 +126,7 @@ module.exports = {
 		"@typescript-eslint/no-unused-vars": ["error", { caughtErrors: "all" }],
 
 		// These on-by-default rules don't work well for this repo and we like them off.
+		"n/no-missing-import": "off",
 		"n/no-unpublished-import": "off",
 		"no-case-declarations": "off",
 		"no-constant-condition": "off",

diff --git a/app/HeroHeading.css.ts b/app/HeroHeading.css.ts
@@ -0,0 +1,7 @@
+import { style } from "@vanilla-extract/css";
+
+export const root = style({
+	background: "white",
+	border: "solid 1px",
+	color: "#454545",
+});
diff --git a/app/HeroHeading.tsx b/app/HeroHeading.tsx
@@ -0,0 +1,7 @@
+import React from "react";
+
+import * as styles from "./HeroHeading.css";
+
+export function HeroHeading({ children }: React.PropsWithChildren) {
+	return <h1 className={styles.root}>{children}</h1>;
+}
diff --git a/app/root.tsx b/app/root.tsx
@@ -1,5 +1,14 @@
+import type { LinksFunction } from "@remix-run/node";
+
+import { cssBundleHref } from "@remix-run/css-bundle";
 import { Links, LiveReload, Meta, Outlet, Scripts } from "@remix-run/react";
 
+import { HeroHeading } from "./HeroHeading.js";
+
+export const links: LinksFunction = () => [
+	...(cssBundleHref ? [{ href: cssBundleHref, rel: "stylesheet" }] : []),
+];
+
 export default function App() {
 	return (
 		<html>
@@ -9,7 +18,7 @@ export default function App() {
 				<Links />
 			</head>
 			<body>
-				<h1>Hello world!</h1>
+				<HeroHeading>Hello world!</HeroHeading>
 				<Outlet />
 
 				<Scripts />

diff --git a/package.json b/package.json
@@ -25,10 +25,12 @@
 		"*": "prettier --ignore-unknown --write"
 	},
 	"dependencies": {
+		"@remix-run/css-bundle": "^2.6.0",
 		"@remix-run/dev": "^2.6.0",
 		"@remix-run/express": "^2.6.0",
 		"@remix-run/node": "^2.6.0",
 		"@remix-run/react": "^2.6.0",
+		"@vanilla-extract/css": "^1.14.1",
 		"express": "^4.18.2",
 		"isbot": "4",
 		"react": "^18.2.0",

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/tsconfig.json b/tsconfig.json
@@ -6,8 +6,8 @@
 		"esModuleInterop": true,
 		"isolatedModules": true,
 		"jsx": "react-jsx",
-		"module": "NodeNext",
-		"moduleResolution": "NodeNext",
+		"module": "ESNext",
+		"moduleResolution": "Bundler",
 		"noEmit": true,
 		"outDir": "lib",
 		"paths": {