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
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 exportserror when the component loads its own styles from an separate file, namedstyles.css.tswhich clashes with the.css.tsfiles from vanilla-extract.Creating a style file containing the styles for the web-component called
styles.css.tswithin the component library for the web-component inMyCustomElement.tswill 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.
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.5Used Package Manager
npm
Logs
Validations