isStyleOnlyChanged() — astro Function Reference

Architecture documentation for the isStyleOnlyChanged() function in hmr.ts from the astro codebase.

Function typescript CoreAstro RenderingEngine calls 1 called by 1

Entity Profile

CoreAstro→ RenderingEngine→ isStyleOnlyChanged() — astro Function Reference

Dependency Diagram

graph TD
  2d3b2862_fd36_3b07_5a8f_8b5d48d85545["isStyleOnlyChanged()"]
  3edca240_218c_fab7_1690_9c4cda71a3a9["hmr.ts"]
  2d3b2862_fd36_3b07_5a8f_8b5d48d85545 -->|defined in| 3edca240_218c_fab7_1690_9c4cda71a3a9
  2d40b353_176a_9165_78ff_5d802191ed7e["handleHotUpdate()"]
  2d40b353_176a_9165_78ff_5d802191ed7e -->|calls| 2d3b2862_fd36_3b07_5a8f_8b5d48d85545
  f9f0c303_2508_9047_0978_53e29a078cbe["isArrayEqual()"]
  2d3b2862_fd36_3b07_5a8f_8b5d48d85545 -->|calls| f9f0c303_2508_9047_0978_53e29a078cbe
  style 2d3b2862_fd36_3b07_5a8f_8b5d48d85545 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

packages/astro/src/vite-plugin-astro/hmr.ts lines 58–92

export function isStyleOnlyChanged(oldCode: string, newCode: string) {
	if (oldCode === newCode) return false;

	// Before we can regex-capture style tags, we remove the frontmatter and scripts
	// first as they could contain false-positive style tag matches. At the same time,
	// we can also compare if they have changed and early out.

	// Strip off and compare frontmatter
	let oldFrontmatter = '';
	let newFrontmatter = '';
	oldCode = oldCode.replace(frontmatterRE, (m) => ((oldFrontmatter = m), ''));
	newCode = newCode.replace(frontmatterRE, (m) => ((newFrontmatter = m), ''));
	if (oldFrontmatter !== newFrontmatter) return false;

	// Strip off and compare scripts
	const oldScripts: string[] = [];
	const newScripts: string[] = [];
	oldCode = oldCode.replace(scriptRE, (m) => (oldScripts.push(m), ''));
	newCode = newCode.replace(scriptRE, (m) => (newScripts.push(m), ''));
	if (!isArrayEqual(oldScripts, newScripts)) return false;

	// Finally, we can compare styles
	const oldStyles: string[] = [];
	const newStyles: string[] = [];
	oldCode = oldCode.replace(styleRE, (m) => (oldStyles.push(m), ''));
	newCode = newCode.replace(styleRE, (m) => (newStyles.push(m), ''));

	// Remaining of `oldCode` and `newCode` is the markup, return false if they're different
	if (oldCode !== newCode) return false;

	// Finally, check if only the style changed.
	// The length must also be the same for style only change. If style tags are added/removed,
	// we need to regenerate the main Astro file so that its CSS imports are also added/removed
	return oldStyles.length === newStyles.length && !isArrayEqual(oldStyles, newStyles);
}