Using vanilla-extract with remix

[matthova]

Howdy y'all 👋🏻

First off, love the project. Thanks for all you do.

I gave a shot at integrating vanilla-extract with remix last night, but hit a wall.
I added the vanilla extract esbuild plugin everywhere that remix is calling eslint.build, which is creating a correct css file 🌈
Where I'm stuck now is how to consume the file from a route.
I would imagine one would import the css file and add it to the link array.

This turns into a bit of a chicken/egg problem because the build creates a unique hash for each file, but you need to know that hash in order to include the file. This resolves itself with most files (the same way as with create-react-app), but not for dynamic files (not really dynamic, but the file's hash changes whenever the content changes)

Here's a basic snippet:

// app/utils/poc.css.ts
import { style } from "@vanilla-extract/css";

export const poc = style({
  display: "flex",
});

// app/routes/index.tsx
...
import * as styles from "../utils/mvp.css";

export let links: LinksFunction = () => {
  return [
    { rel: "stylesheet", href: "hmmm-how-do-i-get-this-hashed-url" },
  ];
};

export default function Index() {
  return (
    <div className={styles.poc}>
      Hello World
    </div>
  );
}

I believe this is a detail that needs to be sorted out on the Remix side of things, but wanted to poke at the idea to see if a different approach could make sense, especially given a server-side-rendering framework, maybe I should be building the css on-the-fly 🤔

[mattcompiles]

We chatted briefly with the Remix guys on twitter about this. We would love to support Remix but for now the Remix way of handling styles is incompatible with vanilla-extract. Mostly due to the styles having to return URLs, where as vanilla-extract returns references to your styles (like CSS modules).

[matthova]

Thank you for the link to the conversation. Seems like a tough set of constraints to balance.
I love the idea of handling it all in esbuild.
For now, my approach will be a bit bloated, with a hacky script script that compiles foo.css.ts into foo.css.
Will give that a shot and see what I learn in the process.

[ToniMaunde]

How has it been going so far with the

hacky script script that compiles foo.css.ts into foo.css ?

[wanbinkimoon]

There is any update on this?
would be really wonderful to combine vanilla-extract and remix!
I'm looking forward to this

[mattcompiles]

Not sure what update we can give. We support esbuild which remix is built upon, however the way remix currently handles the importing of CSS prohibits vanilla-extract from working the way it is designed to. I'd suggest raising the issue with the remix team rather than us.

[danielberndt]

Just discovered this PR within remix to support css-modules. I assume that a vanilla-extract integration would share a lot of these entry points.

[wanbinkimoon]

this is sooo sweet <3

[dagda1]

PR got closed

[kishek2000]

Hey! Just wondering if we have any updates on this? Would really be a great help if we can use vanilla extract with remix

Thanks!

[ssijak]

I was hoping to use vanilla extract on my new remix project, bummer to see it is not yet supported.

[wanbinkimoon]

remix team discussing about css modules here
remix-run/remix#2214

[jbovenschen]

For anyone still wondering if it can be possible to use vanilla-extract with remix it is possible. I wrote an example for the remix-esbuild-overide package. https://github.com/aiji42/remix-esbuild-override/tree/main/examples/vanilla-extract

One thing to always take in mind is that the remix team is not officially supporting this kind of extensions and it can always break in a future release.

[ancashoria]

This looks promising. It works locally for me, but when I deploy to Vercel, the browser requests inexistent css files. The file hash is wrong. In the artifacts I can see the generated css files, but they have different hash. Could this happen because NOTE: Compilation is executed twice, once for the server and once for the browser.?

[jbovenschen]

Don't know yet, what I was expecting was that it would be fine due to the compilation just generating the CSS file and loading it as a raw assets, like the remix docs describe. Can you provide some steps how to reproduce it?

[ancashoria]

You can reproduce it in this repo:
https://github.com/ancashoria/simple-remix
It's deployed here: https://simple-remix-livid.vercel.app

[jbovenschen]

@ancashoria Thanks for the repository, I didn't find any time yet to fix the issue, but I think you right that it's due to the generated classNames which are stored at; https://github.com/aiji42/remix-esbuild-override/blob/main/examples/vanilla-extract/vanilla-extract-esbuild-plugin.js#L25. Like you mentioned remix indeed run's multiple times so the plugin will be invoked more then once. I think that part where the hashes / file paths are stored should be moved to the module scope instead of being available only in the plugin.

[matthova]

For anyone still wondering if it can be possible to use vanilla-extract with remix it is possible. I wrote an example for the remix-esbuild-overide package. https://github.com/aiji42/remix-esbuild-override/tree/main/examples/vanilla-extract

One thing to always take in mind is that the remix team is not officially supporting this kind of extensions and it can always break in a future release.

@ancashoria I'm guessing there's some nuance with how files are handled that is different with vercel's stack, which is a bummer

I was able to get this repo up and running with cloudflare workers 🎉
@jbovenschen thanks for sharing your work!

[markdalgleish]

I made a prototype of compiling all vanilla-extract styles in a separate tsup process, then importing the built output into a Remix app. Obviously not the ideal, but I think it's a decent workaround at smaller scales until we get official support. https://github.com/markdalgleish/remix-vanilla-extract-prototype

[TranquilMarmot]

Came here to see if this was possible and lo and behold a PR was just opened for it 😄

remix-run/remix#5040

Excited to give it a try when it's available 👀