Remix Vanilla Extract Prototype

Overview

If you’re looking to integrate vanilla-extract with Remix, this prototype offers an interesting approach despite some notable tradeoffs. The Remix team has expressed interest in providing official support for vanilla-extract in the future, but until then, this solution presents a viable interim method for developers wanting to enhance their styling capabilities while working with these tools.

The process entails specific setup steps, including installing dependencies and running development servers. However, it requires a careful consideration of how styles are managed and compiled, especially when it comes to the unique architecture that vanilla-extract brings to the table.

Features

• Separation of Processes: A separate tsup process is necessary for generating CSS, JS, and types, as direct integration with the Remix compiler isn’t feasible.
• Manual Style Re-exports: All styles in .css.ts files must be manually re-exported from a central index file, creating a style manifest that must be maintained throughout development.
• Import Requirements: For proper compilation, your Remix code must import styles from /styles, regardless of the directory structure, to ensure styles are correctly processed.
• Single CSS Output: All styles are consolidated into a single index.css file located in /app/styles, which your application’s root route must include.
• Atomic CSS Generation: Utilize Sprinkles to generate lightweight, compression-friendly atomic CSS, reducing the overall file size and helping with performance.
• Type-safe Styling: Access classes at runtime using a type-safe sprinkles function, streamlining the integration of styles within your React components.
• Limited Scalability: While effective for single projects, this solution does not scale well to multi-project design systems that require tree shaking of unused styles, highlighting the need for a more robust architecture in the future.