refactor(vanilla-extract): migrate to built-in Vanilla Extract support (#213)

Author: markdalgleish

vanilla-extract/.eslintrc.js

@@ -1,5 +1,4 @@
 /** @type {import('eslint').Linter.Config} */
 module.exports = {
   extends: ["@remix-run/eslint-config", "@remix-run/eslint-config/node"],
-  ignorePatterns: ["app/styles/**/*"],
 };

vanilla-extract/.gitignore

@@ -4,5 +4,3 @@ node_modules
 /build
 /public/build
 .env
-
-/app/styles

vanilla-extract/.styles/index.ts

@@ -1,6 +1,6 @@
-# vanilla-extract example
+# Vanilla Extract example
 
-Integrate Remix with [vanilla-extract.](https://vanilla-extract.style)
+Integrate Remix with [Vanilla Extract.](https://vanilla-extract.style)
 
 ## Preview
 
@@ -10,33 +10,19 @@ Open this example on [CodeSandbox](https://codesandbox.com):
 
 ## Example
 
-This example shows how to use vanilla-extract in Remix. Vanilla-extract is a zero-runtime CSS-in-TypeScript library that converts `.css.ts` files into static CSS at build time, providing first-class support for local-scoping of classes, variables, themes and more.
-
-## Architecture and Tradeoffs
-
-- A separate [tsup](https://github.com/egoist/tsup) process is needed to generate CSS, JavaScript and type definitions, whereas vanilla-extract is typically hooked up to your bundler. Effectively we're treating vanilla-extract more like a traditional CSS preprocessor like [Sass](https://sass-lang.com) or [Less.](https://lesscss.org)
-- All styles from `.css.ts` files need to be manually re-exported from `/.styles/index.ts` which is then compiled into `/app/styles` for the Remix app to consume. You can think of it as maintaining a style manifest file. Conceptually this is the same as writing an `index.scss` file in Sass, except that JavaScript code and type definitions are generated in addition to CSS.
-- All styles are built into `/app/styles/index.css` which your Remix app needs to include via a `links` function.
-- Remix app code always needs to import styles from `~/styles`, even if a `.css.ts` file is in the same directory as the Remix code that imports it. If you don't do this, your vanilla-extract styles won't be compiled properly as they will go directly through the Remix compiler.
-- You can keep the file size down using [Sprinkles](https://vanilla-extract.style/documentation/packages/sprinkles) which generates compression-friendly atomic CSS. You can then access these classes at runtime via the type-safe `sprinkles` function.
-- To reduce boilerplate in your React code, Sprinkles can be wired up to a `Box` component as demonstrated in this project, allowing you to access atomic styles via props.
+This example shows how to use the built-in Vanilla Extract support in Remix. Vanilla Extract is a zero-runtime CSS-in-TypeScript library that converts `.css.ts` files into static CSS at build time, providing first-class support for local-scoping of classes, variables, themes and more.
 
 ## Relevant Files
 
-- [tsup.config.js](./tsup.config.js) where tsup is configured with the vanilla-extract esbuild plugin.
-- [package.json](./package.json) where tsup is hooked up to the `dev` and `build` scripts using [npm-run-all.](http://npmjs.com/package/npm-run-all)
-- [.styles/index.ts](./.styles/index.ts) where everything generated by vanilla-extract is re-exported for the Remix app to consume.
-- [.styles/global.css.ts](./.styles/global.css.ts) where global styles are defined.
-- [.styles/sprinkles.css.ts](./.styles/sprinkles.css.ts) where utility classes are configured using Sprinkles.
-- [app/root.tsx](./app/root.tsx) where the generated CSS file is imported into the Remix app.
+- [remix.config.js](./remix.config.js) where the `future.unstable_vanillaExtract` flag is enabled.
+- [app/root.tsx](./app/root.tsx) where the CSS bundle is imported into the Remix app, provided by the `@remix-run/css-bundle` package.
+- [app/global.css.ts](./.styles/global.css.ts) where global styles are defined.
+- [app/components/Box/sprinkles.css.ts](./.styles/sprinkles.css.ts) where utility classes are configured using Sprinkles.
 - [app/components/Box/Box.ts](./app/components/Box/Box.ts) where the utility classes generated by Sprinkles are hooked up to a primitive `Box` component.
-- [app/components/Text/Text.tsx](./app/components/Text/Text.tsx) where you can see an example of component-level styles being imported from `~/styles`.
+- [app/components/Text/Text.tsx](./app/components/Text/Text.tsx) where you can see an example of component-level styles being consumed.
 - [app/components/Text/Text.css.ts](./app/components/Text/Text.css.ts) where you can see an example of component-level styles being defined.
-- [.eslintrc](.eslintrc) where everything in the generated `/app/styles` directory is added to ESLint's `ignorePatterns`.
-- [.gitignore](.gitignore) where the generated `/app/styles` directory is added to the ignore list.
 
 ## Related Links
 
 - [vanilla-extract](https://vanilla-extract.style)
 - [Sprinkles](https://vanilla-extract.style/documentation/packages/sprinkles)
-- [tsup](https://tsup.egoist.dev)

vanilla-extract/README.md

@@ -8,11 +8,10 @@
 import type { ClassValue } from "clsx";
 import clsx from "clsx";
 import type { AllHTMLAttributes, ElementType } from "react";
-import { createElement } from "react";
-import { forwardRef } from "react";
+import { createElement, forwardRef } from "react";
 
-import type { Sprinkles } from "~/styles";
-import { sprinkles } from "~/styles";
+import type { Sprinkles } from "./sprinkles.css";
+import { sprinkles } from "./sprinkles.css";
 
 interface ExtendedBoxProps extends Sprinkles {
   as?: ElementType;

vanilla-extract/app/components/Box/Box.ts

@@ -1,18 +1,8 @@
-/**
- * Note that styles are imported from "~/styles" rather than
- * "./Text.css.ts". This is because we need to import the
- * compiled output from the vanilla-extract build step,
- * otherwise our `.css.ts` files would go through the Remix
- * compiler and wouldn't generate any static CSS.
- */
 import type { ReactNode } from "react";
 
-import { componentStyles } from "~/styles";
-
 import { Box } from "../Box/Box";
 
-// Select the styles that we scoped to this component
-const styles = componentStyles.Text;
+import * as styles from "./Text.css";
 
 export function Text({
   children,

vanilla-extract/.styles/sprinkles.css.ts renamed to vanilla-extract/app/components/Box/sprinkles.css.ts

@@ -1,4 +1,7 @@
-import type { MetaFunction } from "@remix-run/node";
+import "./global.css";
+
+import { cssBundleHref } from "@remix-run/css-bundle";
+import type { LinksFunction, MetaFunction } from "@remix-run/node";
 import {
   Links,
   LiveReload,
@@ -8,16 +11,9 @@ import {
   ScrollRestoration,
 } from "@remix-run/react";
 
-import vanillaExtractStyles from "~/styles/index.css";
-
-export function links() {
-  return [
-    {
-      rel: "stylesheet",
-      href: vanillaExtractStyles,
-    },
-  ];
-}
+export const links: LinksFunction = () => {
+  return cssBundleHref ? [{ rel: "stylesheet", href: cssBundleHref }] : [];
+};
 
 export const meta: MetaFunction = () => ({
   charset: "utf-8",

vanilla-extract/app/components/Text/Text.tsx

@@ -4,22 +4,18 @@
     "*.css.ts"
   ],
   "scripts": {
-    "build": "run-s \"build:*\"",
-    "build:css": "npm run generate:css",
-    "build:remix": "remix build",
-    "dev": "run-p \"dev:*\"",
-    "dev:css": "npm run generate:css -- --watch",
-    "dev:remix": "remix dev",
-    "generate:css": "tsup",
+    "build": "remix build",
+    "dev": "remix dev",
     "start": "remix-serve build",
     "typecheck": "tsc"
   },
   "dependencies": {
+    "@remix-run/css-bundle": "~1.14.2",
     "@remix-run/node": "~1.14.2",
     "@remix-run/react": "~1.14.2",
     "@remix-run/serve": "~1.14.2",
-    "@vanilla-extract/css": "^1.9.0",
-    "@vanilla-extract/sprinkles": "^1.5.0",
+    "@vanilla-extract/css": "^1.11.0",
+    "@vanilla-extract/sprinkles": "^1.5.2",
     "clsx": "^1.2.1",
     "isbot": "^3.6.5",
     "react": "^18.2.0",
@@ -30,10 +26,7 @@
     "@remix-run/eslint-config": "~1.14.2",
     "@types/react": "^18.0.25",
     "@types/react-dom": "^18.0.8",
-    "@vanilla-extract/esbuild-plugin": "^2.1.0",
     "eslint": "^8.27.0",
-    "npm-run-all": "^4.1.5",
-    "tsup": "^6.2.3",
     "typescript": "^4.8.4"
   },
   "engines": {