Astro Integration

[kennetpostigo]

Hi 👋

Does anyone know if it's possible to integrate vanilla-extract with Astro?

[AndrewLeedham]

👋 from what I understand Astro uses Vite under the hood, so you would likely just need to include the Vanilla Extract Vite plugin in your astro config: https://docs.astro.build/en/reference/configuration-reference/#vite

[mattcompiles]

Happy to accept a PR if anyone wants to work on this.

[susickypavel]

Hi 👋, It seems like no one has made a take on this one so far. I'd be thrilled to fix the issue with Astro as I see it as a match made in heaven (and at this point I'm too annoyed by using untyped CSS solutions 😁)

There was a point by an Astro maintainer regarding what should be done in the plugin to fix it (withastro/astro#2536 (comment)). I'll try to look into that and see if I can work something out.

[refactorized]

https://github.com/codiume/orbit/tree/main/packages/astro-vanilla-extract seems to be it, but this page is first on google.

[susickypavel]

https://github.com/codiume/orbit/tree/main/packages/astro-vanilla-extract seems to be it, but this page is first on google.

Since this integration only modifies the Astro config to include the official Vanilla Extract Vite plugin, it's better to use the vite plugin directly.

[Seanmclem]

does it work better now, with the plugin? SSR and SSG too?

[b8zeek]

It is possible! 🚀 That is amazing!

Install Vanilla Extract:

yarn add @vanilla-extract/css

Install Vanila Extract Vite integration:

yarn add -D @vanilla-extract/vite-plugin

Add Vanilla Extract Vite plugin to the Astro configuration:

import { defineConfig } from 'astro/config'
import { vanillaExtractPlugin } from '@vanilla-extract/vite-plugin'

// https://astro.build/config
export default defineConfig({
    vite: {
        plugins: [vanillaExtractPlugin()]
    }
})

Enjoy! 🥳

button.css.ts

import { style } from '@vanilla-extract/css'

export const button = style({
    padding: '0.5rem 1rem',
    border: 'none',
    borderRadius: '0.25rem',
    color: 'white',
    background: '#333'
})

Button.astro

---
import { button } from './button.css'
---

<button class={button}>Click Me!</button>

🍀