You cannot modernize with just a text editor. You need a build step.
| Tool | Purpose | | :--- | :--- | | DDEV | Local dev with Node 18+ and PHP 8.2. | | Vite | Ultra-fast HMR for Twig/CSS/JS. | | Storybook (with SDC) | Isolate component dev outside Drupal. | | PHPStorm/VSCode | With Twig SDK for auto-completion of SDC props. | | CSpell | Lint your Twig variables. |
Chapter 3: Mastering Twig 3.x for Drupal 10 modernizing drupal 10 theme development pdf
Chapter 4: Single Directory Components (SDC) – The Game Changer
Chapter 5: CSS Architecture & PostCSS
Chapter 6: JavaScript Modernization
css:
theme:
css/style.css: {}
js:
js/script.js: {}
Problem: Every file is served as-is. No minification, no transpilation, no tree-shaking. You cannot modernize with just a text editor
Instead of loading all CSS/JS globally, attach libraries only to the specific components rendered on the page. Drupal 10’s lazy-loading ensures that if a card component isn't on the page, its CSS isn't downloaded.
/themes/custom/my_theme/components/button/
├── button.component.yml
├── button.twig
├── button.css
└── button.js
Google’s Core Web Vitals penalizes render-blocking CSS and large JS bundles. Modern Drupal 10 theming uses critical CSS extraction and lazy loading, impossible without a modern build toolchain. Chapter 4: Single Directory Components (SDC) – The
Download the PDF for a side-by-side comparison chart of legacy vs. modern theme structures (Page 3).
