@tideworthy/tidysites 0.1.4 → 0.1.5

package/README.md

@@ -27,7 +27,7 @@ nothing else; it lives in `.tidysites/key`, which is kept out of git.
 | `tidysites page <path> [--html]` | the rendered page, section by section, with the key each section carries |
 | `tidysites schema [type or collection]` | the section types and layouts, or one type's or collection's fields |
 | `tidysites gallery [type]` | a screenshot of every section type and layout in this website's theme, or the first screen of one type |
-| `tidysites fetch <url> [--out dir]` | a page of the site being ported: cleaned HTML, its outline (headings, navigation, images, phones, fonts, colours) and its stylesheets |
+| `tidysites fetch <url> [--out dir]` | a page of the site being ported: cleaned HTML, its outline (headings, navigation, images, phones, fonts, the stylesheet's own variables and colours) and its stylesheets, inline style blocks included |
 | `tidysites rm <collection>/<slug> ...` | delete entry files with their sidecars (`services/*` for every entry of a collection); `push --prune` then removes them from the website |
 | `tidysites publish --yes` | the live site becomes a copy of the preview site |
 

package/bin/tidysites.mjs

@@ -456,6 +456,9 @@ async function fetchCmd(ctx) {
 			/* a stylesheet that will not download is not the port's problem */
 		}
 	}
+	// A page that carries its styles inline (Wix, many builders) has no stylesheet to download: read the <style> blocks too.
+	const inline = [...html.matchAll(/<style\b[^>]*>([\s\S]*?)<\/style>/gi)].map((m) => m[1]).join('\n');
+	if (inline.trim()) { cssTexts.push(inline); writeFileSync(join(outDir, `${base}-inline.css`), inline); }
 	if (cssTexts.length) o.css = cssSummary(cssTexts.join('\n'));
 	writeFileSync(join(outDir, `${base}.raw.html`), html);
 	writeFileSync(join(outDir, `${base}.html`), cleanHtml(html));

package/lib/fetch.mjs

@@ -108,11 +108,18 @@ export function cssSummary(css) {
 		const f = m[1].split(',')[0].replace(/["']/g, '').trim();
 		if (f && !/^(inherit|initial|unset|var\()/.test(f)) fonts.set(f, (fonts.get(f) ?? 0) + 1);
 	}
-	// The site's own names for its colours and fonts, when its stylesheet defines them; a framework's defaults sit below these.
+	// The site's own names for its colours and fonts, when its stylesheet defines them; a framework's defaults sit below
+	// these. A builder often defines a token as another token (--button-fill: rgb(var(--color_48)); --color_48: 254,96,47):
+	// the references are followed so the list reads as colours, and bare channel triplets become rgb().
+	const defined = {};
+	for (const m of css.matchAll(/--([a-zA-Z][\w-]*)\s*:\s*([^;}]+)/g)) if (!(m[1] in defined)) defined[m[1]] = m[2].trim();
+	const resolve = (v, depth = 0) => (depth > 4 ? v : v.replace(/var\(\s*--([\w-]+)\s*(?:,[^)]*)?\)/g, (_, name) => (name in defined ? resolve(defined[name], depth + 1) : `var(--${name})`)));
 	const variables = {};
-	for (const m of css.matchAll(/--([a-zA-Z][\w-]*)\s*:\s*([^;}]+)/g)) {
-		const v = m[2].trim();
-		if (/#[0-9a-f]{3,8}\b|rgba?\(|hsla?\(|font|["'][A-Z][\w ]+["']/i.test(v) && !/^var\(/.test(v)) variables[m[1]] = v;
+	for (const [name, raw] of Object.entries(defined)) {
+		let v = resolve(raw).replace(/rgba?\(\s*(\d{1,3}),\s*(\d{1,3}),\s*(\d{1,3})\s*\)/g, 'rgb($1,$2,$3)');
+		if (/^\d{1,3},\s*\d{1,3},\s*\d{1,3}$/.test(v)) v = `rgb(${v.replace(/\s/g, '')})`;
+		if (/var\(/.test(v)) continue;
+		if (/#[0-9a-f]{3,8}\b|rgba?\(|hsla?\(|font|["'][A-Z][\w ]+["']/i.test(v)) variables[name] = v;
 	}
 	const top = (map, n) => [...map.entries()].sort((a, b) => b[1] - a[1]).slice(0, n).map(([value, count]) => ({ value, count }));
 	return { colors: top(colors, 12), fonts: top(fonts, 6), variables };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tideworthy/tidysites",
-  "version": "0.1.4",
+  "version": "0.1.5",
   "description": "Pull a Tidysites website to files, edit, validate against its content model, push it back, screenshot the result.",
   "type": "module",
   "bin": {