From da41a55f293fef40546129e1fe2ac238ec64a7f5 Mon Sep 17 00:00:00 2001
From: Simon Huber <huber.simon@protonmail.com>
Date: Sat, 13 Dec 2025 11:17:22 +0100
Subject: [PATCH] Root stylesheet refresh - Stylesheets in single `<style>`
 tags (#8130)

* 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
---
 core/modules/startup/render.js                |  24 +-
 core/modules/startup/windows.js               |  16 +-
 core/modules/widgets/view.js                  | 553 +++++++++++-------
 core/templates/tiddlywiki5.html.tid           |   1 +
 core/ui/RootStylesheet.tid                    |  15 +
 .../5.4.0/#8130 - root-stylesheet-refresh.tid |  17 +
 6 files changed, 402 insertions(+), 224 deletions(-)
 create mode 100644 core/ui/RootStylesheet.tid
 create mode 100644 editions/tw5.com/tiddlers/releasenotes/5.4.0/#8130 - root-stylesheet-refresh.tid

diff --git a/core/modules/startup/render.js b/core/modules/startup/render.js
index 43ef48207..c97b87dae 100644
--- a/core/modules/startup/render.js
+++ b/core/modules/startup/render.js
@@ -18,6 +18,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 +45,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 +60,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");
diff --git a/core/modules/startup/windows.js b/core/modules/startup/windows.js
index 39a2f59d6..3fa70d127 100644
--- a/core/modules/startup/windows.js
+++ b/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);
diff --git a/core/modules/widgets/view.js b/core/modules/widgets/view.js
index e7c808645..e20c4f07a 100755
--- a/core/modules/widgets/view.js
+++ b/core/modules/widgets/view.js
@@ -9,215 +9,376 @@ View widget
 
 "use strict";
 
-var Widget = require("$:/core/modules/widgets/widget.js").widget;
-
-var ViewWidget = function(parseTreeNode,options) {
-	this.initialise(parseTreeNode,options);
-};
+const Widget = require("$:/core/modules/widgets/widget.js").widget;
 
 /*
-Inherit from the base widget class
+==========================================
+ViewHandler Base Class
+==========================================
+Base class for all view format handlers.
+Provides common functionality and defines the interface for subclasses.
 */
-ViewWidget.prototype = new Widget();
-
-/*
-Render this widget into the DOM
-*/
-ViewWidget.prototype.render = function(parent,nextSibling) {
-	this.parentDomNode = parent;
-	this.computeAttributes();
-	this.execute();
-	if(this.text) {
-		var textNode = this.document.createTextNode(this.text);
-		parent.insertBefore(textNode,nextSibling);
-		this.domNodes.push(textNode);
-	} else {
-		this.makeChildWidgets();
-		this.renderChildren(parent,nextSibling);
+class ViewHandler {
+	constructor(widget) {
+		this.widget = widget;
+		this.wiki = widget.wiki;
+		this.document = widget.document;
+		this.viewTitle = widget.viewTitle;
+		this.viewField = widget.viewField;
+		this.viewIndex = widget.viewIndex;
+		this.viewSubtiddler = widget.viewSubtiddler;
+		this.viewTemplate = widget.viewTemplate;
+		this.viewMode = widget.viewMode;
 	}
-};
 
-/*
-Compute the internal state of the widget
-*/
-ViewWidget.prototype.execute = function() {
-	// Get parameters from our attributes
-	this.viewTitle = this.getAttribute("tiddler",this.getVariable("currentTiddler"));
-	this.viewSubtiddler = this.getAttribute("subtiddler");
-	this.viewField = this.getAttribute("field","text");
-	this.viewIndex = this.getAttribute("index");
-	this.viewFormat = this.getAttribute("format","text");
-	this.viewTemplate = this.getAttribute("template","");
-	this.viewMode = this.getAttribute("mode","block");
-	switch(this.viewFormat) {
-		case "htmlwikified":
-			this.text = this.getValueAsHtmlWikified(this.viewMode);
-			break;
-		case "plainwikified":
-			this.text = this.getValueAsPlainWikified(this.viewMode);
-			break;
-		case "htmlencodedplainwikified":
-			this.text = this.getValueAsHtmlEncodedPlainWikified(this.viewMode);
-			break;
-		case "htmlencoded":
-			this.text = this.getValueAsHtmlEncoded();
-			break;
-		case "htmltextencoded":
-			this.text = this.getValueAsHtmlTextEncoded();
-			break;
-		case "urlencoded":
-			this.text = this.getValueAsUrlEncoded();
-			break;
-		case "doubleurlencoded":
-			this.text = this.getValueAsDoubleUrlEncoded();
-			break;
-		case "date":
-			this.text = this.getValueAsDate(this.viewTemplate);
-			break;
-		case "relativedate":
-			this.text = this.getValueAsRelativeDate();
-			break;
-		case "stripcomments":
-			this.text = this.getValueAsStrippedComments();
-			break;
-		case "jsencoded":
-			this.text = this.getValueAsJsEncoded();
-			break;
-		default: // "text"
-			this.text = this.getValueAsText();
-			break;
+	render(parent, nextSibling) {
+		this.text = this.getValue();
+		this.createTextNode(parent, nextSibling);
 	}
-};
 
-/*
-The various formatter functions are baked into this widget for the moment. Eventually they will be replaced by macro functions
-*/
+	getValue() {
+		return this.widget.getValueAsText();
+	}
 
-/*
-Retrieve the value of the widget. Options are:
-asString: Optionally return the value as a string
-*/
-ViewWidget.prototype.getValue = function(options) {
-	options = options || {};
-	var value = options.asString ? "" : undefined;
-	if(this.viewIndex) {
-		value = this.wiki.extractTiddlerDataItem(this.viewTitle,this.viewIndex);
-	} else {
-		var tiddler;
-		if(this.viewSubtiddler) {
-			tiddler = this.wiki.getSubTiddler(this.viewTitle,this.viewSubtiddler);
+	createTextNode(parent, nextSibling) {
+		if(this.text) {
+			const textNode = this.document.createTextNode(this.text);
+			parent.insertBefore(textNode, nextSibling);
+			this.widget.domNodes.push(textNode);
 		} else {
-			tiddler = this.wiki.getTiddler(this.viewTitle);
-		}
-		if(tiddler) {
-			if(this.viewField === "text" && !this.viewSubtiddler) {
-				// Calling getTiddlerText() triggers lazy loading of skinny tiddlers
-				value = this.wiki.getTiddlerText(this.viewTitle);
-			} else {
-				if($tw.utils.hop(tiddler.fields,this.viewField)) {
-					if(options.asString) {
-						value = tiddler.getFieldString(this.viewField);
-					} else {
-						value = tiddler.fields[this.viewField];
-					}
-				}
-			}
-		} else {
-			if(this.viewField === "title") {
-				value = this.viewTitle;
-			}
+			this.widget.makeChildWidgets();
+			this.widget.renderChildren(parent, nextSibling);
 		}
 	}
-	return value;
-};
 
-ViewWidget.prototype.getValueAsText = function() {
-	return this.getValue({asString: true});
-};
-
-ViewWidget.prototype.getValueAsHtmlWikified = function(mode) {
-	return this.wiki.renderText("text/html","text/vnd.tiddlywiki",this.getValueAsText(),{
-		parseAsInline: mode !== "block",
-		parentWidget: this
-	});
-};
-
-ViewWidget.prototype.getValueAsPlainWikified = function(mode) {
-	return this.wiki.renderText("text/plain","text/vnd.tiddlywiki",this.getValueAsText(),{
-		parseAsInline: mode !== "block",
-		parentWidget: this
-	});
-};
-
-ViewWidget.prototype.getValueAsHtmlEncodedPlainWikified = function(mode) {
-	return $tw.utils.htmlEncode(this.wiki.renderText("text/plain","text/vnd.tiddlywiki",this.getValueAsText(),{
-		parseAsInline: mode !== "block",
-		parentWidget: this
-	}));
-};
-
-ViewWidget.prototype.getValueAsHtmlEncoded = function() {
-	return $tw.utils.htmlEncode(this.getValueAsText());
-};
-
-ViewWidget.prototype.getValueAsHtmlTextEncoded = function() {
-	return $tw.utils.htmlTextEncode(this.getValueAsText());
-};
-
-ViewWidget.prototype.getValueAsUrlEncoded = function() {
-	return $tw.utils.encodeURIComponentExtended(this.getValueAsText());
-};
-
-ViewWidget.prototype.getValueAsDoubleUrlEncoded = function() {
-	return $tw.utils.encodeURIComponentExtended($tw.utils.encodeURIComponentExtended(this.getValueAsText()));
-};
-
-ViewWidget.prototype.getValueAsDate = function(format) {
-	format = format || "YYYY MM DD 0hh:0mm";
-	var value = $tw.utils.parseDate(this.getValue());
-	if(value && $tw.utils.isDate(value) && value.toString() !== "Invalid Date") {
-		return $tw.utils.formatDateString(value,format);
-	} else {
-		return "";
-	}
-};
-
-ViewWidget.prototype.getValueAsRelativeDate = function(format) {
-	var value = $tw.utils.parseDate(this.getValue());
-	if(value && $tw.utils.isDate(value) && value.toString() !== "Invalid Date") {
-		return $tw.utils.getRelativeDate((new Date()) - (new Date(value))).description;
-	} else {
-		return "";
-	}
-};
-
-ViewWidget.prototype.getValueAsStrippedComments = function() {
-	var lines = this.getValueAsText().split("\n"),
-		out = [];
-	for(var line=0; line<lines.length; line++) {
-		var text = lines[line];
-		if(!/^\s*\/\/#/.test(text)) {
-			out.push(text);
-		}
-	}
-	return out.join("\n");
-};
-
-ViewWidget.prototype.getValueAsJsEncoded = function() {
-	return $tw.utils.stringify(this.getValueAsText());
-};
-
-/*
-Selectively refreshes the widget if needed. Returns true if the widget or any of its children needed re-rendering
-*/
-ViewWidget.prototype.refresh = function(changedTiddlers) {
-	var changedAttributes = this.computeAttributes();
-	if(changedAttributes.tiddler || changedAttributes.field || changedAttributes.index || changedAttributes.template || changedAttributes.format || changedTiddlers[this.viewTitle]) {
-		this.refreshSelf();
-		return true;
-	} else {
+	refresh() {
+		var self = this;
 		return false;
 	}
+}
+
+/*
+==========================================
+Wikified View Handler Base
+==========================================
+Base class for wikified view handlers
+*/
+class WikifiedViewHandler extends ViewHandler {
+	constructor(widget) {
+		super(widget);
+		this.fakeWidget = null;
+		this.fakeNode = null;
+	}
+
+	render(parent, nextSibling) {
+		this.createFakeWidget();
+		this.text = this.getValue();
+		this.createWikifiedTextNode(parent, nextSibling);
+	}
+
+	createFakeWidget() {
+		this.fakeWidget = this.wiki.makeTranscludeWidget(this.viewTitle, {
+			document: $tw.fakeDocument,
+			field: this.viewField,
+			index: this.viewIndex,
+			parseAsInline: this.viewMode !== "block",
+			mode: this.viewMode === "block" ? "block" : "inline",
+			parentWidget: this.widget,
+			subTiddler: this.viewSubtiddler
+		});
+		this.fakeNode = $tw.fakeDocument.createElement("div");
+		this.fakeWidget.makeChildWidgets();
+		this.fakeWidget.render(this.fakeNode, null);
+	}
+
+	createWikifiedTextNode(parent, nextSibling) {
+		const textNode = this.document.createTextNode(this.text || "");
+		parent.insertBefore(textNode, nextSibling);
+		this.widget.domNodes.push(textNode);
+	}
+
+	refresh(changedTiddlers) {
+		const refreshed = this.fakeWidget.refresh(changedTiddlers);
+		if(refreshed) {
+			const newText = this.getValue();
+			if(newText !== this.text) {
+				this.widget.domNodes[0].textContent = newText;
+				this.text = newText;
+			}
+		}
+		return refreshed;
+	}
+}
+
+/*
+==========================================
+Text View Handler
+==========================================
+Default handler for plain text display
+*/
+class TextViewHandler extends ViewHandler {}
+
+/*
+==========================================
+HTML Wikified View Handler
+==========================================
+Handler for wikified HTML content
+*/
+class HTMLWikifiedViewHandler extends WikifiedViewHandler {
+	getValue() {
+		return this.fakeNode.innerHTML;
+	}
+}
+
+/*
+==========================================
+Plain Wikified View Handler
+==========================================
+Handler for wikified plain text content
+*/
+class PlainWikifiedViewHandler extends WikifiedViewHandler {
+	getValue() {
+		return this.fakeNode.textContent;
+	}
+}
+
+/*
+==========================================
+HTML Encoded Plain Wikified View Handler
+==========================================
+Handler for HTML-encoded wikified plain text
+*/
+class HTMLEncodedPlainWikifiedViewHandler extends WikifiedViewHandler {
+	getValue() {
+		return $tw.utils.htmlEncode(this.fakeNode.textContent);
+	}
+}
+
+/*
+==========================================
+HTML Encoded View Handler
+==========================================
+Handler for HTML-encoded text
+*/
+class HTMLEncodedViewHandler extends ViewHandler {
+	getValue() {
+		return $tw.utils.htmlEncode(this.widget.getValueAsText());
+	}
+}
+
+/*
+==========================================
+HTML Text Encoded View Handler
+==========================================
+Handler for HTML text-encoded content
+*/
+class HTMLTextEncodedViewHandler extends ViewHandler {
+	getValue() {
+		return $tw.utils.htmlTextEncode(this.widget.getValueAsText());
+	}
+}
+
+/*
+==========================================
+URL Encoded View Handler
+==========================================
+Handler for URL-encoded text
+*/
+class URLEncodedViewHandler extends ViewHandler {
+	getValue() {
+		return $tw.utils.encodeURIComponentExtended(this.widget.getValueAsText());
+	}
+}
+
+/*
+==========================================
+Double URL Encoded View Handler
+==========================================
+Handler for double URL-encoded text
+*/
+class DoubleURLEncodedViewHandler extends ViewHandler {
+	getValue() {
+		const text = this.widget.getValueAsText();
+		return $tw.utils.encodeURIComponentExtended($tw.utils.encodeURIComponentExtended(text));
+	}
+}
+
+/*
+==========================================
+Date View Handler
+==========================================
+Handler for date formatting
+*/
+class DateViewHandler extends ViewHandler {
+	getValue() {
+		const format = this.viewTemplate || "YYYY MM DD 0hh:0mm";
+		const rawValue = this.widget.getValueAsText();
+		const value = $tw.utils.parseDate(rawValue);
+		if(value && $tw.utils.isDate(value) && value.toString() !== "Invalid Date") {
+			return $tw.utils.formatDateString(value, format);
+		} else {
+			return "";
+		}
+	}
+}
+
+/*
+==========================================
+Relative Date View Handler
+==========================================
+Handler for relative date display
+*/
+class RelativeDateViewHandler extends ViewHandler {
+	getValue() {
+		const rawValue = this.widget.getValueAsText();
+		const value = $tw.utils.parseDate(rawValue);
+		if(value && $tw.utils.isDate(value) && value.toString() !== "Invalid Date") {
+			return $tw.utils.getRelativeDate((new Date()) - (new Date(value))).description;
+		} else {
+			return "";
+		}
+	}
+}
+
+/*
+==========================================
+Strip Comments View Handler
+==========================================
+Handler for stripping comments from text
+*/
+class StripCommentsViewHandler extends ViewHandler {
+	getValue() {
+		const lines = this.widget.getValueAsText().split("\n");
+		const out = [];
+		for(const text of lines) {
+			if(!/^\s*\/\/#/.test(text)) {
+				out.push(text);
+			}
+		}
+		return out.join("\n");
+	}
+}
+
+/*
+==========================================
+JS Encoded View Handler
+==========================================
+Handler for JavaScript string encoding
+*/
+class JSEncodedViewHandler extends ViewHandler {
+	getValue() {
+		return $tw.utils.stringify(this.widget.getValueAsText());
+	}
+}
+
+/*
+==========================================
+ViewHandlerFactory
+==========================================
+Factory for creating appropriate view handlers based on format
+*/
+const ViewHandlerFactory = {
+	handlers: {
+		"text": TextViewHandler,
+		"htmlwikified": HTMLWikifiedViewHandler,
+		"plainwikified": PlainWikifiedViewHandler,
+		"htmlencodedplainwikified": HTMLEncodedPlainWikifiedViewHandler,
+		"htmlencoded": HTMLEncodedViewHandler,
+		"htmltextencoded": HTMLTextEncodedViewHandler,
+		"urlencoded": URLEncodedViewHandler,
+		"doubleurlencoded": DoubleURLEncodedViewHandler,
+		"date": DateViewHandler,
+		"relativedate": RelativeDateViewHandler,
+		"stripcomments": StripCommentsViewHandler,
+		"jsencoded": JSEncodedViewHandler
+	},
+	
+	createHandler(format, widget) {
+		const HandlerClass = this.handlers[format] || this.handlers["text"];
+		return new HandlerClass(widget);
+	},
+	
+	registerHandler(format, handlerClass) {
+		this.handlers[format] = handlerClass;
+	}
 };
 
-exports.view = ViewWidget;
+/*
+==========================================
+ViewWidget
+==========================================
+Main widget class that orchestrates view handlers
+*/
+class ViewWidget extends Widget {
+	constructor(parseTreeNode, options) {
+		super();
+		this.initialise(parseTreeNode, options);
+	}
+
+	render(parent, nextSibling) {
+		this.parentDomNode = parent;
+		this.computeAttributes();
+		this.execute();
+		this.viewHandler = ViewHandlerFactory.createHandler(this.viewFormat, this);
+		this.viewHandler.render(parent, nextSibling);
+	}
+
+	execute() {
+		this.viewTitle = this.getAttribute("tiddler", this.getVariable("currentTiddler"));
+		this.viewSubtiddler = this.getAttribute("subtiddler");
+		this.viewField = this.getAttribute("field", "text");
+		this.viewIndex = this.getAttribute("index");
+		this.viewFormat = this.getAttribute("format", "text");
+		this.viewTemplate = this.getAttribute("template", "");
+		this.viewMode = this.getAttribute("mode", "block");
+	}
+
+	getValue(options = {}) {
+		let value = options.asString ? "" : undefined;
+		if(this.viewIndex) {
+			value = this.wiki.extractTiddlerDataItem(this.viewTitle, this.viewIndex);
+		} else {
+			let tiddler;
+			if(this.viewSubtiddler) {
+				tiddler = this.wiki.getSubTiddler(this.viewTitle, this.viewSubtiddler);
+			} else {
+				tiddler = this.wiki.getTiddler(this.viewTitle);
+			}
+			if(tiddler) {
+				if(this.viewField === "text" && !this.viewSubtiddler) {
+					value = this.wiki.getTiddlerText(this.viewTitle);
+				} else {
+					if($tw.utils.hop(tiddler.fields, this.viewField)) {
+						if(options.asString) {
+							value = tiddler.getFieldString(this.viewField);
+						} else {
+							value = tiddler.fields[this.viewField];
+						}
+					}
+				}
+			} else {
+				if(this.viewField === "title") {
+					value = this.viewTitle;
+				}
+			}
+		}
+		return value;
+	}
+
+	getValueAsText() {
+		return this.getValue({asString: true});
+	}
+
+	refresh(changedTiddlers) {
+		const changedAttributes = this.computeAttributes();
+		if(changedAttributes.tiddler || changedAttributes.field || changedAttributes.index || 
+		   changedAttributes.template || changedAttributes.format || changedTiddlers[this.viewTitle]) {
+			this.refreshSelf();
+			return true;
+		} else {
+			return this.viewHandler.refresh(changedTiddlers);
+		}
+	}
+}
+
+exports.view = ViewWidget;
\ No newline at end of file
diff --git a/core/templates/tiddlywiki5.html.tid b/core/templates/tiddlywiki5.html.tid
index 721b3d9ce..c38cde960 100644
--- a/core/templates/tiddlywiki5.html.tid
+++ b/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 ~~-->
diff --git a/core/ui/RootStylesheet.tid b/core/ui/RootStylesheet.tid
new file mode 100644
index 000000000..aca3b3ac9
--- /dev/null
+++ b/core/ui/RootStylesheet.tid
@@ -0,0 +1,15 @@
+title: $:/core/ui/RootStylesheet
+code-body: yes
+
+\import [subfilter{$:/core/config/GlobalImportFilter}]
+\whitespace trim
+<$let currentTiddler={{$:/language}} languageTitle={{!!name}}>
+	<style type="text/css">
+		<$view tiddler="$:/themes/tiddlywiki/vanilla/reset" format="text" mode="block"/>
+	</style>
+	<$list filter="[all[shadows+tiddlers]tag[$:/tags/Stylesheet]!is[draft]] -[[$:/themes/tiddlywiki/vanilla/reset]]">
+		<style type="text/css">
+			<$view format={{{ [<currentTiddler>tag[$:/tags/Stylesheet/Static]then[text]else[plainwikified]] }}} mode="block"/>
+		</style>
+	</$list>
+</$let>
diff --git a/editions/tw5.com/tiddlers/releasenotes/5.4.0/#8130 - root-stylesheet-refresh.tid b/editions/tw5.com/tiddlers/releasenotes/5.4.0/#8130 - root-stylesheet-refresh.tid
new file mode 100644
index 000000000..f1ee3073e
--- /dev/null
+++ b/editions/tw5.com/tiddlers/releasenotes/5.4.0/#8130 - root-stylesheet-refresh.tid	
@@ -0,0 +1,17 @@
+title: $:/changenotes/5.4.0/#8130
+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/8130
+github-contributors: BurningTreeC
+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.
+
+As part of these changes, the 'view widget' has also been updated. It can now respond dynamically to changes in the 'wikified' formats as well.
\ No newline at end of file