Vite: is there a way to import files in .css.ts files?

[dkzlv]

Currently importing an image fails with this error:

[plugin:vanilla-extract] Build failed with 1 error:
Check.css.ts:6:16: error: No loader is configured for ".png" files: pic.png

, even though it works fine in a regular .ts file.

[wobsoriano]

.css.ts is working fine on my end with latest vite version. Try this in your vite config

export default defineConfig({
  assetsInclude: ['**/*.png'],
  ...
})

[AndrewLeedham]

This is probably because Vanilla Extract runs .css.ts files in esbuild to generate the stylesheets, regardless of which plugin you use. There is currently no way to add loaders or configure esbuild here. Curious what your use case is?

[dkzlv]

@wobsoriano Unfortunately, this doesn't help, here's a repro.

@AndrewLeedham Pretty basic, I would say, mostly linking to static resources: fonts, images for backgrounds/pseudo-selectors.

[AndrewLeedham]

@dkzlv Makes sense. I think having the ability to configure esbuild would be a good addition, it would also be a better way of doing this: #661

[willbattel]

Yeah I'm trying use static assets in my CSS, such as for a custom <li> bullet style, but we're facing the same limitation.

import { style } from "@vanilla-extract/css";

import myIcon from '../assets/icons/MyIcon.svg'

export const myListItem = style({
    listStyle: `url(${myIcon})`,
})

[plugin:vanilla-extract] Build failed with 1 error:
src/components/MyComponent.css.ts:6:25: error: No loader is configured for ".svg" files: src/assets/icons/MyIcon.svg

Is this something we can get working with some tweaking of esbuild?

[johanneslumpe]

Is there something the community can help with here? It's not possible to use a file loader right now because it requires defining the outDir for esbuild, which isn't exposed in the current esbuild options.

[wobsoriano]

Made a simple plugin that fixes this

https://github.com/wobsoriano/esbuild-vanilla-image-loader

import { vanillaExtractPlugin } from '@vanilla-extract/vite-plugin'
import { ImageLoader } from 'esbuild-vanilla-image-loader'

export default defineConfig({
  plugins: [
    vanillaExtractPlugin({
      esbuildOptions: {
        plugins: [ImageLoader()],
      }
    }),
  ],
})

// App.css.ts

import { style } from '@vanilla-extract/css'
import Icon from '../assets/icons/Icon.svg'

export const myListItem = style({
    listStyle: `url(${myIcon})`,
})

The plugin transforms the imported image to a JS file that default exports the file path so that Vite can read it.

[MananTank]

@wobsoriano Works perfectly! Awesome job

[viridia]

I ran into this same issue as well (using Vite) - I have a bunch of custom cursors (pngs). What I ended up doing is putting all the cursors in their own stylesheet that uses CSS modules rather than vanilla extract. It's an ugly hack but at least I'm unblocked.

I tried the plugin and couldn't get it to work - the url that it produced had the wrong path.

[yume-chan]

I'm using Solid-Start, If I directly write relative paths in url(), it's not handled by vanilla-extract, but will be handled by vite itself! (I guess when vanilla-extract gives the generated CSS to vite)

Run npm run build:

The issue is that vanilla-extract inserts a wrong style sheet in development mode:

It overrides the correct property below

[askoufis]

@dkzlv This issues seems solved by the addition of esbuildOptions to the esbuild, vite and rollup plugins. The docs were missing for vite and rollup, but I've added that in #1120. Please re-open the issue, or raise a new issue with a reproduction if there is still a problem.

[kasper573]

Why would we not want this to be dealt with automatically in all vanilla extract integrations? Referencing assets from css files is a very normal workflow.

Specially since type safety is one of the primary goals of vanilla extract, I expect to be able to do something like this:

import { style } from "@vanilla-extract/css";
import imageUrl from "./image.png";

export const safeImage = style({
  background: `url(${imageUrl})`
});

Rather than having to work around like this:

export const unsafeImage = style({
  background: `url(<path-from-project-root>/image.png)` // Not only is it unsafe, I also need an absolute reference 
});

[kasper573]

EDIT: My comment that was previously posted here has been turned into a discussion thread instead: #1208