Needs review
Project:
Critical CSS
Version:
2.0.x-dev
Component:
Code
Priority:
Normal
Category:
Feature request
Assigned:
Reporter:
Created:
15 May 2025 at 22:45 UTC
Updated:
15 May 2025 at 22:55 UTC
Jump to comment: Most recent
With #3420709: Make it more obvious that a Twig template is overridden, 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' -->
* with a black dot icon ▪️ for unused file name suggestions.x with a checkmark icon ✅ for the selected filename suggestion.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>
Start within a Git clone of the project using the version control instructions.
Or, if you do not have SSH keys set up on git.drupalcode.org:
Comments
Comment #2
jwilson3Comment #3
jwilson3Comment #4
jwilson3Comment #6
jwilson3Comment #7
jwilson3