Contrib.social

Follow core's new Twig Debug formatting with icons

Open on Drupal.org →
Created on 15 May 2025, 20 days ago

Problem/Motivation

With ✨ Make it more obvious that a Twig template is overridden Fixed , Drupal core started using black squares ▪️, checkboxes ✅ , lightbulbs 💡 to increase readability in the DOM. It would be nice to use the same formatting in the CRITICAL CSS DEBUG section

This module's current output:

<style id="critical-css">
/* CRITICAL CSS DEBUG */
/* FILE NAME SUGGESTIONS:
	 * themes/custom/mytheme/css/critical/1.css
	 * themes/custom/mytheme/css/critical/path-node-1.css
	 * themes/custom/mytheme/css/critical/node-1.css
	 * themes/custom/mytheme/css/critical/path-my-article-title.css
	 * themes/custom/mytheme/css/critical/my-article-title.css
	 x themes/custom/mytheme/css/critical/article.css
	 * themes/custom/mytheme/css/critical/default-critical.css
*/
/* BEGIN OUTPUT from themes/custom/mytheme/css/critical/article.css */
[...]
/* END OUTPUT from themes/custom/mytheme/css/critical/article.css */
</style>

Core theme debugging output:

<!-- THEME DEBUG -->
<!-- THEME HOOK: 'page' -->
<!-- FILE NAME SUGGESTIONS:
   ✅ page--node--article.html.twig
   ▪️ page--node--1.html.twig
   ▪️ page--node--%.html.twig
   ▪️ page--node.html.twig
   ▪️ page.html.twig
-->
<!-- 💡 BEGIN CUSTOM TEMPLATE OUTPUT from 'path/to/page--node--article.html.twig' -->
[...]
<!-- END CUSTOM TEMPLATE OUTPUT from 'path/to/page--node--article.html.twig' -->

Proposed resolution

  1. Replace the asterisk * with a black dot icon ▪️ for unused file name suggestions.
  2. Replace the asterisk x with a checkmark icon ✅ for the selected filename suggestion.
  3. Add a lightbulb icon 💡 before the BEGIN OUTPUT section.

Proposed output:

<style id="critical-css">
/* CRITICAL CSS DEBUG */
/* FILE NAME SUGGESTIONS:
	 ▪️ themes/custom/mytheme/css/critical/1.css
	 ▪️ themes/custom/mytheme/css/critical/path-node-1.css
	 ▪️ themes/custom/mytheme/css/critical/node-1.css
	 ▪️ themes/custom/mytheme/css/critical/path-my-article-title.css
	 ▪️ themes/custom/mytheme/css/critical/my-article-title.css
	 ✅  themes/custom/mytheme/css/critical/article.css
	 ▪️ themes/custom/mytheme/css/critical/default-critical.css
*/
/* 💡 BEGIN OUTPUT from themes/custom/mytheme/css/critical/article.css */
[...]
/* END OUTPUT from themes/custom/mytheme/css/critical/article.css */
</style>

Remaining tasks

User interface changes

API changes

Data model changes

✨ Feature request
Status

Active

Version

2.0

Component

Code

Created by

🇪🇨Ecuador jwilson3

Live updates comments and jobs are added and updated live.
Sign in to follow issues

Merge Requests

Comments & Activities

contrib.social Blog FAQ Discussions
Production build 0.71.5 2024