'Invalid exports' in vite-plugin-vanilla-extract when loading external library containing style files with file extensions `.css.ts`

Author: tkgrootCreated Apr 30, 2025Updated Jul 28, 2026
Labelspending triage

Describe the bug

vite-plugin-vanilla-extract in an application context in combination with a "third-party" library using web-components with LitElement throws the invalid exports error when the component loads its own styles from an separate file, named styles.css.ts which clashes with the .css.ts files from vanilla-extract.

[vite-plugin-vanilla-extract] Invalid exports.

You can only export plain objects, arrays, strings, numbers and null/undefined.

Creating a style file containing the styles for the web-component called styles.css.ts within the component library for the web-component in MyCustomElement.ts will produce the issue in the application.

Adding an additional option for the vanillaExtractPlugin which offers to set the file extension which is used for files which contains "vanilla-extract" content would most likely solve this issue.

javascript
vanillaExtractPlugin({
  fileExtension: '.css.ts',
});

Reproduction

https://github.com/tkgroot/vanilla-extract-issue/tree/master

System Info

bash
System:
    OS: macOS 13.6.4
    CPU: (10) arm64 Apple M1 Max
    Memory: 127.14 MB / 32.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 22.5.1 - ~/.nvm/versions/node/v22.5.1/bin/node
    npm: 10.9.0 - ~/.nvm/versions/node/v22.5.1/bin/npm
    pnpm: 10.4.1 - ~/.nvm/versions/node/v22.5.1/bin/pnpm
  Browsers:
    Chrome: 132.0.6834.110
    Safari: 17.5

Used Package Manager

npm

Logs

bash

Validations

Source: vanilla-extract-css/vanilla-extract