He replaced it with a modern, lean setup. He wrote a custom theme.libraries.yml that imported a single ES6 entry point:
import fetchData from './api.js'; document.querySelectorAll('[data-dynamic-counter]').forEach((el) => once('counter', el).forEach(async (element) => const data = await fetchData('/api/stats'); element.textContent = data.views; ); );
“How?” the client asked, bewildered. luca lusso modernizing drupal 10 theme development
The old theme relied on jQuery UI and a carousel plugin from 2014. Luca opened libraries.yml and grimaced. He deleted the entire jQuery block.
His mission was clear: modernize it without breaking the live site for more than a weekend. He replaced it with a modern, lean setup
<div class="node node--type-article node--view-mode-teaser"> <h2> label </h2> <div class="content"> content </div> </div> Luca shook his head. Too much logic. Too many global classes. He rewrote it:
Luca smiled. “I stopped theming Drupal like it was 2015. I started theming it like it’s a modern React app—but without the complexity. It’s just Twig, ES6, and a proper build pipeline.” Luca opened libraries
The real magic came when he integrated Tailwind’s @layer components with Drupal’s SDC (Single Directory Components). He configured postcss.config.js to scan the components/ folder. Now, unused CSS was purged automatically. Build times dropped from 12 seconds to 0.8 seconds.