Fix unresolved variables wrongly replaced with v (#30)

hyrious · web-flow · commit 580af17a72cd · 2024-03-23T02:21:16.000+09:00
diff --git a/index.js b/index.js
@@ -40,11 +40,16 @@ function extractColors(colors, name, ast) {
 		}
 	}
 
-	colors[name]['--base-size-8'] = '8px';
-	colors[name]['--base-size-16'] = '16px';
-	colors[name]['--base-text-weight-normal'] = '400';
-	colors[name]['--base-text-weight-medium'] = '500';
-	colors[name]['--base-text-weight-semibold'] = '600';
+	function addDeclaration(property, value) {
+		colors[name].push({type: 'declaration', property, value});
+		colors[name][property] = value;
+	}
+
+	addDeclaration('--base-size-8', '8px');
+	addDeclaration('--base-size-16', '16px');
+	addDeclaration('--base-text-weight-normal', '400');
+	addDeclaration('--base-text-weight-medium', '500');
+	addDeclaration('--base-text-weight-semibold', '600');
 }
 
 // https://github.com/gjtorikian/html-pipeline/blob/main/lib/html_pipeline/sanitization_filter.rb
@@ -322,7 +327,7 @@ function applyColors(colors, rules) {
 						return colors[name];
 					}
 
-					return match[0];
+					return match;
 				});
 			}
 		}
@@ -446,12 +451,17 @@ export default async function getCSS({
 
 	// Find all variables used across all styles
 	const usedVariables = new Set(rules.flatMap(rule => rule.declarations.flatMap(({value}) => {
-		let match = /var\((?<name>[-\w]+?)\)/.exec(value)?.groups.name;
-		if (match === '--color-text-primary') {
-			match = '--color-fg-default';
-		}
+		const matches = [];
+		const re = /var\((?<name>[-\w]+?)[,)]/g;
+		let match = null;
+		do {
+			match = re.exec(value);
+			if (match) {
+				matches.push(match.groups.name);
+			}
+		} while (match);
 
-		return match ? [match] : [];
+		return matches;
 	})));
 
 	const colorSchemeLight = {type: 'declaration', property: 'color-scheme', value: 'light'};
diff --git a/test.js b/test.js
@@ -36,6 +36,12 @@ const html = `<!DOCTYPE html>
 <body class="markdown-body">
 <article class="markdown-body" style="padding: 1em; max-width: 42em; margin: 0px auto;">
 ${fixture}
+
+<div class="markdown-alert markdown-alert-note" dir="auto">
+  <p class="markdown-alert-title" dir="auto"><svg class="octicon octicon-info mr-2" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path d="M0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8Zm8-6.5a6.5 6.5 0 1 0 0 13 6.5 6.5 0 0 0 0-13ZM6.5 7.75A.75.75 0 0 1 7.25 7h1a.75.75 0 0 1 .75.75v2.75h.25a.75.75 0 0 1 0 1.5h-2a.75.75 0 0 1 0-1.5h.25v-2h-.25a.75.75 0 0 1-.75-.75ZM8 6a1 1 0 1 1 0-2 1 1 0 0 1 0 2Z"></path></svg>Note</p>
+  <p dir="auto">Highlights information that users should take into account, even when skimming.</p>
+</div>
+
 </article>
 <select style="position: fixed; top: 1em; right: 1em; font-size: 16px;"
 				onchange="theme.href=this.value">
@@ -71,6 +77,12 @@ const htmlVars = `<!DOCTYPE html>
 <body class="markdown-body">
 <article class="markdown-body" style="padding: 1em; max-width: 42em; margin: 0px auto;">
 ${fixture}
+
+<div class="markdown-alert markdown-alert-note" dir="auto">
+  <p class="markdown-alert-title" dir="auto"><svg class="octicon octicon-info mr-2" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path d="M0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8Zm8-6.5a6.5 6.5 0 1 0 0 13 6.5 6.5 0 0 0 0-13ZM6.5 7.75A.75.75 0 0 1 7.25 7h1a.75.75 0 0 1 .75.75v2.75h.25a.75.75 0 0 1 0 1.5h-2a.75.75 0 0 1 0-1.5h.25v-2h-.25a.75.75 0 0 1-.75-.75ZM8 6a1 1 0 1 1 0-2 1 1 0 0 1 0 2Z"></path></svg>Note</p>
+  <p dir="auto">Highlights information that users should take into account, even when skimming.</p>
+</div>
+
 </article>
 <select style="position: fixed; top: 1em; right: 1em; font-size: 16px;"
 				onchange="theme.href=this.value">
