-
Notifications
You must be signed in to change notification settings - Fork 322
Description
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.
vanillaExtractPlugin({
fileExtension: '.css.ts',
});
Reproduction
https://github.com/tkgroot/vanilla-extract-issue/tree/master
System Info
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
Validations
- Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
- The provided reproduction is a minimal reproducible example of the bug.