Refactor stylesheets in single <style> tags (#9554)

* Create RootStylesheet.tid

* put stylesheets into single <style> tags

* viewHandler should not be a widget

* format RootStylesheet

* add ROOT_STYLESHEET_TITLE constant

* use let widget in RootStylesheet

* use view widget from #8135 for testing

* reformat RootStylesheet

* update view widget

* update view widget

* update view widget

* update view widget

* update view widget

* update view widget

* trying to fix the date parsing

* refactor view widget with more extensible architecture

* remove performance instrumentation

* hardcode reset and base stylesheets

* adopt ES2017 syntax for view widget

* don't hardcode vanilla/base

* remove unused constructors

* remove unused variable

* make refresh method static

* trying to fix missingThis

* add changenote

* revert change in vanilla/base

* Revert changes to the view widget

* Refactor RootStylesheet.tid
* Use transclude widget instead of view widget
* Remove hardcoded noramlize.css

* Add comment for debugging

* Migrate some templates to use RootStylesheet

* Remove PAGE_STYLESHEET_TITLE
Since it is no longer used in render.js

* Update change note

---------

Co-authored-by: Simon Huber <huber.simon@protonmail.com>

core/modules/startup/render.js

@@ -17,7 +17,7 @@ exports.synchronous = true;
 
 // Default story and history lists
 var PAGE_TITLE_TITLE = "$:/core/wiki/title";
-var PAGE_STYLESHEET_TITLE = "$:/core/ui/PageStylesheet";
+var ROOT_STYLESHEET_TITLE = "$:/core/ui/RootStylesheet";
 var PAGE_TEMPLATE_TITLE = "$:/core/ui/RootTemplate";
 
 // Time (in ms) that we defer refreshing changes to draft tiddlers
@@ -44,22 +44,13 @@ exports.startup = function() {
 			publishTitle();
 		}
 	});
-	// Set up the styles
-	$tw.styleWidgetNode = $tw.wiki.makeTranscludeWidget(PAGE_STYLESHEET_TITLE,{document: $tw.fakeDocument});
-	$tw.styleContainer = $tw.fakeDocument.createElement("style");
-	$tw.styleWidgetNode.render($tw.styleContainer,null);
-	$tw.styleWidgetNode.assignedStyles = $tw.styleContainer.textContent;
-	$tw.styleElement = document.createElement("style");
-	$tw.styleElement.innerHTML = $tw.styleWidgetNode.assignedStyles;
-	document.head.insertBefore($tw.styleElement,document.head.firstChild);
+
+	var styleParser = $tw.wiki.parseTiddler(ROOT_STYLESHEET_TITLE,{parseAsInline: true}),
+		styleWidgetNode = $tw.wiki.makeWidget(styleParser,{document: document});
+	styleWidgetNode.render(document.head,null);
+
 	$tw.wiki.addEventListener("change",$tw.perf.report("styleRefresh",function(changes) {
-		if($tw.styleWidgetNode.refresh(changes,$tw.styleContainer,null)) {
-			var newStyles = $tw.styleContainer.textContent;
-			if(newStyles !== $tw.styleWidgetNode.assignedStyles) {
-				$tw.styleWidgetNode.assignedStyles = newStyles;
-				$tw.styleElement.innerHTML = $tw.styleWidgetNode.assignedStyles;
-			}
-		}
+		styleWidgetNode.refresh(changes,document.head,null);
 	}));
 	// Display the $:/core/ui/PageTemplate tiddler to kick off the display
 	$tw.perf.report("mainRender",function() {
@@ -68,7 +59,7 @@ exports.startup = function() {
 		$tw.utils.addClass($tw.pageContainer,"tc-page-container-wrapper");
 		document.body.insertBefore($tw.pageContainer,document.body.firstChild);
 		$tw.pageWidgetNode.render($tw.pageContainer,null);
-   		$tw.hooks.invokeHook("th-page-refreshed");
+		$tw.hooks.invokeHook("th-page-refreshed");
 	})();
 	// Remove any splash screen elements
 	var removeList = document.querySelectorAll(".tc-remove-when-wiki-loaded");

core/modules/startup/windows.js

@@ -63,24 +63,16 @@ exports.startup = function() {
 			$tw.eventBus.emit("window:closed",{windowID});
 		},false);
 		// Set up the styles
-		var styleWidgetNode = $tw.wiki.makeTranscludeWidget("$:/core/ui/PageStylesheet",{
-				document: $tw.fakeDocument,
-				variables: variables,
-				importPageMacros: true}),
-			styleContainer = $tw.fakeDocument.createElement("style");
-		styleWidgetNode.render(styleContainer,null);
-		var styleElement = srcDocument.createElement("style");
-		styleElement.innerHTML = styleContainer.textContent;
-		srcDocument.head.insertBefore(styleElement,srcDocument.head.firstChild);
+		var styleParser = $tw.wiki.parseTiddler("$:/core/ui/RootStylesheet",{parseAsInline: true}),
+			styleWidgetNode = $tw.wiki.makeWidget(styleParser,{document: srcDocument});
+		styleWidgetNode.render(srcDocument.head,null);
 		// Render the text of the tiddler
 		var parser = $tw.wiki.parseTiddler(template),
 			widgetNode = $tw.wiki.makeWidget(parser,{document: srcDocument, parentWidget: $tw.rootWidget, variables: variables});
 		widgetNode.render(srcDocument.body,srcDocument.body.firstChild);
 		// Function to handle refreshes
 		refreshHandler = function(changes) {
-			if(styleWidgetNode.refresh(changes,styleContainer,null)) {
-				styleElement.innerHTML = styleContainer.textContent;
-			}
+			styleWidgetNode.refresh(changes);
 			widgetNode.refresh(changes);
 		};
 		$tw.wiki.addEventListener("change",refreshHandler);

core/templates/exporters/StaticRiver.tid

@@ -22,9 +22,7 @@ extension: .html
 <div id="styleArea">
 {{$:/boot/boot.css||$:/core/templates/css-tiddler}}
 </div>
-<style type="text/css">
-{{$:/core/ui/PageStylesheet||$:/core/templates/wikified-tiddler}}
-</style>
+{{$:/core/ui/RootStylesheet||$:/core/templates/wikified-tiddler}}
 </head>
 <body class="tc-body">
 {{$:/StaticBanner||$:/core/templates/html-tiddler}}

core/templates/static.template.html.tid

@@ -23,9 +23,7 @@ type: text/vnd.tiddlywiki-html
 <div id="styleArea">
 {{$:/boot/boot.css||$:/core/templates/css-tiddler}}
 </div>
-<style type="text/css">
-{{$:/core/ui/PageStylesheet||$:/core/templates/wikified-tiddler}}
-</style>
+{{$:/core/ui/RootStylesheet||$:/core/templates/wikified-tiddler}}
 </head>
 <body class="tc-body">
 {{$:/StaticBanner||$:/core/templates/html-tiddler}}

core/templates/tiddlywiki5.html.tid

@@ -25,6 +25,7 @@ title: $:/core/templates/tiddlywiki5.html
 `{{{ [enlist<saveTiddlerAndShadowsFilter>tag[$:/core/wiki/rawmarkup]] ||$:/core/templates/plain-text-tiddler}}}
 {{{ [enlist<saveTiddlerAndShadowsFilter>tag[$:/tags/RawMarkup]] ||$:/core/templates/plain-text-tiddler}}}
 {{{ [enlist<saveTiddlerAndShadowsFilter>tag[$:/tags/RawMarkupWikified]] ||$:/core/templates/raw-static-tiddler}}}`
+<!--~~ Style section start ~~-->
 </head>
 <body class="tc-body">
 <!--~~ Raw markup for the top of the body section ~~-->

core/ui/RootStylesheet.tid

@@ -0,0 +1,13 @@
+title: $:/core/ui/RootStylesheet
+code-body: yes
+
+\import [subfilter{$:/core/config/GlobalImportFilter}]
+\whitespace trim
+<$let currentTiddler={{$:/language}} languageTitle={{!!name}}>
+	<$list filter="[all[shadows+tiddlers]tag[$:/tags/Stylesheet]!is[draft]]">
+		<style type="text/css">
+			<$text text={{{ [<currentTiddler>addprefix[/* ]addsuffix[ */]] }}}/>
+			<$transclude $tiddler=<<currentTiddler>> $output="text/plain" $mode="block"/>
+		</style>
+	</$list>
+</$let>

editions/tw5.com/tiddlers/releasenotes/5.4.0/#8130 - root-stylesheet-refresh.tid

@@ -0,0 +1,15 @@
+title: $:/changenotes/5.4.0/#9554
+created: 20251212171804335
+modified: 20251212171804335
+tags: $:/tags/ChangeNote
+change-type: performance
+change-category: internal
+description: Different Stylesheets are now included as single `<style>` tags in the Header
+release: 5.4.0
+github-links: https://github.com/TiddlyWiki/TiddlyWiki5/pull/9554
+github-contributors: BurningTreeC Leilei332
+type: text/vnd.tiddlywiki
+
+Previously, all stylesheets were combined in a single `<style>` tag in the `<head>`.
+
+Now, a separate `<style>` tag is created in the `<head>` for each stylesheet.