Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.
And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.
Support vanilla-extract
See original GitHub issueIs your feature request related to a problem?
Currently it seems that vanilla-extract is not supported in Qwik.
Reproduction:
- npm create qwik@latest
- npm save --save @vanilla-extract/css @vanilla-extract/vite-plugin
qwik v0.11.1
@vanilla-extract v1.9.1
@vanilla-extract/vite-plugin v3.6.1
Update the vanilleExtractPlugin to the vite.config.js
import { defineConfig } from "vite";
import { qwikVite } from "@builder.io/qwik/optimizer";
import { qwikCity } from "@builder.io/qwik-city/vite";
import tsconfigPaths from "vite-tsconfig-paths";
import { vanillaExtractPlugin } from "@vanilla-extract/vite-plugin";
export default defineConfig(() => {
return {
plugins: [vanillaExtractPlugin(), qwikCity(), qwikVite(), tsconfigPaths()],
};
});
Try importing a style:
// index.tsx
import { component$ } from "@builder.io/qwik";
import { container } from "./index.css";
export default component$(() => {
return <section class={`${container}`}>Hello</section>;
});
// index.css.ts
import { style } from "@vanilla-extract/css";
export const container = style({
padding: 10,
border: "5px solid green",
});
We can see the class to be generated correctly:
But when checking the <head> we see no stylesheet injected.
Describe the solution you’d like
Make vanilla-extract work
First things first, would want to make vanilla-extract work.
Add integration
If the goal is to add more integration, we might just want to add an integration similar to tailwind integration.
Describe alternatives you’ve considered
No alternatives currently.
Additional context
Related twitter thread: https://twitter.com/itspatricku/status/1583516637810298881?s=46&t=-Y9jjtm0TKtKI0i817MIlw
Issue Analytics
- State:
- Created a year ago
- Comments:11 (6 by maintainers)
Top Results From Across the Web
Top Related Medium Post
Top Related StackOverflow Question
Troubleshoot Live Code
Top Related Reddit Thread
Top Related Hackernoon Post
Top Related Tweet
Top Related Dev.to Post
Top Related Hashnode Post
Done!
@Patrick-Ullrich This works: https://stackblitz.com/edit/qwik-starter-xk9ctw?file=vite.config.ts,src%2Fcomponents%2Fheader%2Fheader.tsx,vanilla-qwik-vite-plugin.ts,package.json,src%2Fcomponents%2Fheader%2Fheader.css.ts
All you need to do is
in vite config before instantiating the VE plugin