babel-plugin-macros VS vite

One of the more promising alternatives is twin.macro - a Babel macro that processes Tailwind classes to generate JS objects understandable by various CSS-in-JS libraries. The developer experience (DX) of using it is amazing as you not only get all of Tailwind’s features without much change to your code, but you also get much more flexibility - all that on top of the traditional benefits of CSS-in-JS. Here’s an example code:

For example with Babel you could use babel-plugin-macros to execute this file at compile time and replace the file contents with the result of the computation. So appSettings would only have the configs for the current environment and nothing more and your source wouldn't need to change much.

It does require babel-plugin-macros which should also help with keeping things nice and performant in production. The package is part of a larger initiative im trying to achieve which is to create file-system based routing for all mainstream React and React Native routing packages. I have done everything I can to keep it as boilerplate free as I can. To give an example

MacroError: The macro you imported from "undefined" is being executed outside the context of compilation with babel-plugin-macros. This indicates that you don't have the babel plugin "babel-plugin-macros" configured correctly. Please see the documentation for how to configure babel-plugin-macros properly: https://github.com/kentcdodds/babel-plugin-macros/blob/master/other/docs/user.md

Yes, it also does that. https://github.com/kentcdodds/babel-plugin-macros

babel-plugin-macros

⭐ vitejs/vite — 80,325 stars, 8,117 forks

As Tanner Linsley, creator of TanStack, has explained, TanStack Start and its server components are designed to be "additive" to React — not a replacement for its core primitives. They're framework-agnostic and built on Vite. You opt into server-side capabilities when you need them, not because the framework demands it.

If you are developing a production application, we recommend using TypeScript with type-aware lint rules enabled. Check out the TS template for information on how to integrate TypeScript and typescript-eslint in your project.

If you've ever tried to use CesiumJS with Vite, you know the ritual. Before you can render a globe you have to:

VoidZero launch week is drawing to a close, and the world of Javascript development has just been given a significant boost. If you follow developments in build tools, you’ll know that fragmentation is rife, and that it’s difficult to stay at the cutting edge without using the best tool for each task. With the latest announcements regarding Vite, Oxlint and Vitest, Evan You team is taking a major step towards the goal of unifying everything to improve performance and simplicity.

Vite as your build tool, now even faster with Vite 8

Suddenly or not, today we have superpower instruments that may tremendously facilitate the creation of such a universal chassis. TypeScript and Vite being the most prominent ones.

Vite 8 has been a huge disappointment:

https://github.com/vitejs/vite/issues/21939

Build filesizes have doubled... No build speed gain is worth that...

I would take a slightly longer build time for half the filesize any day