Stack Overflow
Stack Overflow

Questions tagged [vanilla-extract]

For questions about the vanilla-extract CSS library, vanilla-extract.style

vanilla-extract is a “CSS Modules-in-TypeScript” but with scoped CSS Variables and heaps more.

Features

  • Type-safe static CSS: All styles generated at build time — just like Sass, LESS, etc, but with the power of TypeScript.

  • First-class theming: Create a single global theme or create multiple themes, all with type-safe token contracts.

  • Framework agnostic: Official integrations are provided for webpack, esbuild, Vite, Snowpack and Next.js.

  • Built for extension: Use libraries like Sprinkles, Recipes and Dessert Box — or create your own!

Installation

npm install @vanilla-extract/css
11 questions
19
votes
1 answer

Using vanilla-extract as the styling engine for Material-UI

Some background Our team has been using Material-UI (MUI) for quite some time, and we love it. With the release of MUI v5, we took the time to check which styling solution we would use next, since JSS is being abandoned by the MUI team. We ended up…
panepeter
  • 3,224
  • 1
  • 29
  • 41
5
votes
2 answers

How to style child elements with vanilla extract?

I am starting to use vanilla extract to style a NextJS app. Is there any way to style child elements from the parent without creating another class? I have an structure like this in the react component:
  • a
    • …
David Rios
  • 377
  • 4
  • 9
3
votes
1 answer

Apply :hover::after / :hover::before on Gatsby using vanilla-extract

I'm trying to add a dynamic underline. When hovering the element I can't change the "after" or "before elements using CSS. I know this can be done with plain CSS, but its not working with vanilla-extract: import { style } from…
Franco Petra
  • 688
  • 7
  • 18
2
votes
0 answers

"Error: Styles were unable to be assigned to a file" when building React app

Running npm run build returns this error. I believe it was working properly 3-4 months ago and, in fact, npm run dev works great. I suspect it has something to do with the removal requirement of the @vanilla-extract/babel-plugin >…
user1883163
  • 133
  • 9
0
votes
1 answer

How to style first table cell in Vanilla Extract?

I am trying to make a rounded in Vanilla Extract but having a hard time understanding how to select specific children. How does one select tbody tr:first-child td:first-child? table { border-collapse: separate; } tbody td { …
ViktorMS
  • 1,112
  • 10
  • 25
0
votes
0 answers

chakra-ui & css question: Show html text inside Popover

I want to show html text
  • test
  • test
  • test
inside popover when I hover "HOVER HERE". This is what I want↓ testtesttest Here is my code HOVER…
amu03
  • 129
  • 11
0
votes
0 answers

Class styles differ between local and Netlify deploy preview using Vanilla Extract

I'm finding a bizarre difference between my local and my netlify deploy preview (which are confirmed to be pointed at the same commit) in my Gatsby React app. Notice how in the screenshot, the default styles for the class .iavlle9 are being applied…
Jonathan Tuzman
  • 11,568
  • 18
  • 69
  • 129
0
votes
1 answer

@vanilla-extract/css - is there a way to export stylesheet CSS for shadow DOM

I am looking at @vanilla-extract/css for my styling in React app. The method style exports a className from the *.css.ts file but I require inline styling for Shadow DOM encapsulation. I was checking @stitches/react it provides a way called…
cs1193
  • 1,090
  • 1
  • 16
  • 28
0
votes
1 answer

How to set background image in vanilla-extract/css

I am currently new to vanilla-extract/CSS and I have a relative simple question, I am trying to set background image to the body of my html using vanilla-extract and I cant get it right I am getting failed to compile error. I am building my project…
James_kahosh
  • 65
  • 1
  • 1
  • 5
0
votes
1 answer

how to use vanilla-extract for `style` attribute?

Have a following sample of code which I want migrate to vanilla-extract, my main question is how to generate styles for style attribute in this case? // in ColorToken.tsx function ColorToken(props: { name: string; value?: string }) { return ( …
Anton Dozortsev
  • 4,782
  • 5
  • 34
  • 69
0
votes
1 answer

Import image with vanilla-extract and esbuild

I have a problem with images importing using vanilla-extract and esbuild my build file: const { build } = require("esbuild"); const { vanillaExtractPlugin } = require("@vanilla-extract/esbuild-plugin"); (async () => { await build({ …
dm.shpak
  • 335
  • 1
  • 7