Next.js

Next.js: Lightning CSS Gets Superpowers & Turbopack Performance Wins

Today brings major CSS flexibility with the new experimental.lightningCssFeatures config option, letting developers override browser targets for specific CSS features. Meanwhile, the Turbopack team delivered impressive performance optimizations across persistence, hashing, and error rendering, plus some solid developer experience improvements.

Duration: PT3M59S

https://podlog.io/listen/next-js-36fde2ae/episode/next-js-lightning-css-gets-superpowers-turbopack-performance-wins-3b14fe76

Transcript

Hey there, fellow developers! Welcome back to another episode of the Next.js podcast. I'm your host, and wow, do we have some exciting changes to dig into today from March 11th, 2026.

So picture this - you're working with modern CSS features like light-dark color schemes, but you need more control over when they get transpiled. Well, the Next.js team just made your day with a fantastic new addition. Tobias Koppers merged a game-changing PR that introduces the experimental.lightningCssFeatures config option. This is honestly one of those features that makes you think "why didn't we have this before?"

Here's the story - until now, Lightning CSS would only transpile features based on your browser targets. But what if you wanted to force transpilation of a feature that browsers technically support but maybe has spotty implementation? Or what if you wanted to preserve certain CSS as-is for downstream tooling? Now you can do exactly that with include and exclude arrays in your Next config. It's like having a precision scalpel instead of a blunt hammer for your CSS transformations.

The implementation is really thoughtful too - they've got 21 individual features plus composite groups, all using a single source of truth in Rust that both Webpack and Turbopack paths leverage. The testing approach is particularly clever, targeting browsers that do support light-dark functions but forcing transpilation anyway to verify the override works.

Now, speaking of Turbopack, Luke Sandberg has been absolutely crushing it with performance optimizations. We got three major wins today that are all about making your builds faster and more efficient. First up, he tackled the persistence layer with some brilliant hashing improvements. The team switched from a hash library that was heap-allocating 192 bytes on every call to one that's allocation-free. That's the kind of low-level optimization that adds up to real-world speed improvements.

But the really interesting change is how they're handling database snapshots now. Instead of cloning task storage objects before encoding them - which was eating up 22% of snapshot time - they're now encoding directly from references. It's one of those changes that shows deep system thinking. Sure, it holds read locks a bit longer, but since those don't block other readers and writing threads are rare anyway, it's a smart tradeoff.

The third Turbopack win is moving error code frame rendering to the native side instead of passing data back and forth between JavaScript and Rust. As Luke put it, "it's silly to pass frame information from turbopack to js just to have js pass the same information back to native code." Sometimes the best optimizations are just eliminating unnecessary round trips.

We also got some great developer experience improvements. Benjamin Woodruff solved a long-standing frustration where you'd have to run pnpm install twice on fresh checkouts. Now there's a preinstall script that creates stub binaries, breaking that catch-22. It's one of those quality-of-life fixes that makes the contributor experience so much smoother.

On the documentation front, Joseph added comprehensive security guidance for Server Actions across multiple docs pages. Security is never glamorous, but it's absolutely critical, and having clear guidance baked into the docs where developers need it is fantastic.

For today's focus, if you're using Lightning CSS in your projects, definitely check out the new lightningCssFeatures config option. It opens up so many possibilities for fine-tuning your CSS pipeline. And if you're contributing to Next.js or working with large codebases, take a look at some of these persistence and performance patterns - there are great lessons in thinking about allocation patterns and minimizing unnecessary work.

That's a wrap for today's episode! The Next.js ecosystem keeps getting more powerful and more performant. Keep building amazing things, and we'll catch you next time with more updates from the cutting edge of web development. Until then, happy coding!