Drupal Theming With SDC, Vite, And UnoCSS

Vite is a front end development tool for bundling assets and hot reloading code during development. Many of us are already using CSS tools like sass, which need to be compiled before deployment. Javascript has taken over the front end, and now also needs to be compiled to run correctly. That used to mean transpiling ES6 code to make it compatible for browsers, but now involves bundling dependencies in module imports. As we add more tools, the build slows down. Previous tools like compass and grunt were just ruby and node scripts, but the current generation of tools use compiled binaries in languages like rust and go, so they are much faster. See also Bun, Rollup, Parcel, ESBuild. Vite compiles code quickly, but it's main advantage over other options is that it runs a server in dev mode that can hot reload in your browser when code changes. The speed lets you load it up with your favorite tools and still see your changes instantly. UnoCSS is a tailwind engine, with some enhancements for development speed and configuration. I have worked with Vite and UnoCSS extensively over the last year, across several projects. I also contributed some patches to the Vite module to make it compatible with SDC components. In this session, I'll share my vite/unocss setup and explain how to use it with SDC components.