Importing into a .css.ts file breaks style (SWC) #614
Replies: 1 comment
-
Can you elaborate on the use-case on why this is needed? I'm not able to reproduce this. I found this Discussion just trying to confirm whether importing values from another TypeScript file would work in Vanilla Extract. The docs don't have any examples listed for it. My use-case was that my existing setup had tokens defined in TypeScript files. And I wanted to use the same tokens in Vanilla Extract files. Seems to work fine. Minimal Example: // Theme.ts
export const Theme = {
font: `'Inter var', -apple-system, BlinkMacSystemFont`,
} // Typography.css.ts
import { style } from "@vanilla-extract/css";
import { Theme } from "../Theme";
export const base = style({
fontFamily: Theme.font.sansSerif,
}) // Typography.tsx
import { base } from "./Typography.css";
export function Typography({ children }) {
return <p className={base}>{children}</p>
} The generated file after build contains the correct styles. .zbkr780 {
font-family: 'Inter var', -apple-system, BlinkMacSystemFont;
} And the correct class name is applied to the component too. For reference, here are my respective configs for Rollup and Webpack. |
Beta Was this translation helpful? Give feedback.
-
Has anyone run into this issue?
Vanilla extract works well as long as I don't import anything besides
@vanilla-extract/css
.If I import and use anything from a module, the style is not included in .css bundle. I can tell the style code is running and the imported variable can be read because I can log it in the dev server terminal.
update: I've also tried it with both SWC and ESBuild loaders, they both break in the same way
I assume it has to do with using SWC with webpack, instead of babel.Here's my config.
Beta Was this translation helpful? Give feedback.
All reactions