Support vanilla-extract styling

[lwhiteley]

Description

Add native nx support for vanilla-extract styling

Motivation

Not sure what the ideology behind choosing which css libraries are used as options in nx or what criteria they must meet to be suppported natively.

Ive been playing around with vanilla-extract. I did a POC with it and nx and so far seems like a simple cohesion.

However, the custom webpack config is a bit hacky and could be improved by either supporting it natively or having a nicer way to add custom css webpack configs

Suggested Implementation

• integration with generators
• react template (components, apps)
• offered as a styling option when creating an nx workspace
• similar to all other alternatives for react styling options
• storybook?

useful links:

• https://vanilla-extract.style/
• https://github.com/vanilla-extract-css/vanilla-extract
• https://dev.to/nayaabkhan/vanilla-extract-stitches-a-comparison-58c2
• https://dev.to/lwhiteley/using-vanilla-extract-in-an-nx-workspace-webpack-4p3n
• https://github.com/lwhiteley/nx-vanilla-extract-setup/blob/main/apps/example-web/webpack.config.js
• https://github.com/lwhiteley/nx-vanilla-extract-setup/blob/main/apps/example-web/project.json#L19
• https://github.com/lwhiteley/nx-vanilla-extract-setup/blob/main/apps/example-web/src/app/app.css.ts
• https://dev.to/whoisryosuke/using-nx-for-react-and-typescript-monorepos-2g4n

[FrozenPandaz]

Hm, sounds interesting.

Ultimately, we can't support every method of styling though. Would someone be interested in maintaining a plugin for vanilla-extract?

[sebastiandg7]

@FrozenPandaz volunteer here! I was thinking just about contributing to the official plugins to support vanilla-extract. Yet, how could it be approached with a separate plugin without having to change the build executor for an app or creating a custom webpack/rollup config file (why the plugin then)?

[asherccohen]

This would be great.

Any suggestion how to fix JEST not generating the styles?The suggested transformer is not working.

[asherccohen]

Is there interest in building something around VE?
At least giving indications of how we can get JEST to work would be great, I'm blocked with an important PR since all my tests are broken.

[asherccohen]

See #12653

[github-actions]

This issue has been automatically marked as stale because it hasn't had any recent activity. It will be closed in 14 days if no further activity occurs.
If we missed this issue please reply to keep it active.
Thanks for being a part of the Nx community! 🙏

[github-actions]

This issue has been closed for more than 30 days. If this issue is still occuring, please open a new issue with more recent context.