diff --git a/site/contents.js b/site/contents.js index 769b4b051..35e2dc3df 100644 --- a/site/contents.js +++ b/site/contents.js @@ -48,7 +48,16 @@ const contents = [ { group: 'integrations', label: 'Integrations', - pages: ['vite', 'esbuild', 'webpack', 'next', 'parcel', 'rollup', 'gatsby'], + pages: [ + 'esbuild', + 'gatsby', + 'next', + 'parcel', + 'remix', + 'rollup', + 'vite', + 'webpack', + ], }, ]; diff --git a/site/docs/integrations/remix.md b/site/docs/integrations/remix.md new file mode 100644 index 000000000..087e52060 --- /dev/null +++ b/site/docs/integrations/remix.md @@ -0,0 +1,24 @@ +--- +title: Remix +parent: integrations +--- + +# Remix + +[Remix](https://remix.run) provides support for Vanilla Extract out of the box. See [Vanilla Extract | Remix](https://remix.run/docs/en/main/styling/vanilla-extract) for details. + +Remix's (unstable) Vite compiler works with the [Vite integration]. It's as simple as adding the `@vanilla-extract/vite-plugin` to your Vite config: + +```js +import { unstable_vitePlugin as remix } from '@remix-run/dev'; +import { vanillaExtractPlugin } from '@vanilla-extract/vite-plugin'; +import { defineConfig } from 'vite'; + +export default defineConfig({ + plugins: [remix(), vanillaExtractPlugin()] +}); +``` + +See [Vite (Unstable) | Remix](https://remix.run/docs/en/main/future/vite#add-vanilla-extract-plugin) for more details. + +[vite integration]: /documentation/integrations/vite