v1.7.2: Consolidated CSS style tags and improved variable handling in parentheses

Author: Frank van Viegen

CHANGELOG.md

@@ -1,5 +1,11 @@
 # Changelog
 
+### 1.7.2 (2026-01-28)
+
+**Fixes:**
+- `insertCss` and `insertGlobalCss` no longer litter the DOM with style-tags, instead maintaining just a single tag for all inserted CSS.
+- The `$` CSS variable shorthand now works within parenthesis, e.g. `width: calc(100% - $sidebarWidth);`, but not within `url( ... )`.
+
 ### 1.7.1 (2026-01-27)
 
 **Fixes:**

package.json

@@ -1,6 +1,6 @@
 {
   "name": "aberdeen",
-  "version": "1.7.1",
+  "version": "1.7.2",
   "author": "Frank van Viegen",
   "main": "dist-min/aberdeen.js",
   "devDependencies": {

src/aberdeen.ts

@@ -1803,8 +1803,8 @@ export function setSpacingCssVars(base = 1, unit = 'rem'): void {
 	}
 }
 
-// Matches: (1) parenthesized content, (2) quoted content, (3) $varName at start or after space
-const CSS_VAR_PATTERN = /(\([^)]*\))|("[^"]*")|(^| )\$(\w+)/g;
+// Matches: (1) url() content, (2) quoted content, (3) $varName at start or after space
+const CSS_VAR_PATTERN = /(\burl\([^)]*\))|("[^"]*")|(^| )\$(\w+)/g;
 const DIGIT_FIRST = /^\d/;
 
 /**
@@ -1822,28 +1822,6 @@ function cssVarRef(value: string): string {
 	});
 }
 
-// Automatically mount cssVars style tag to document.head when cssVars is not empty
-if (typeof document !== "undefined") {
-	leakScope(() => {
-		$(() => {
-			if (!isEmpty(cssVars)) {
-				mount(document.head, () => {
-					$('style', () => {
-						let css = ":root {\n";
-						for(const [key, value] of Object.entries(cssVars)) {
-							const varName = DIGIT_FIRST.test(String(key)) ? `m${key}` : key;
-							css += `  --${varName}: ${value};\n`;
-						}
-						css += "}";
-						$(`#${css}`);
-					});
-				});
-			}
-		});
-	});
-}
-
-
 let darkModeState: {value: boolean} | undefined;
 
 /**
@@ -2349,9 +2327,15 @@ let cssCount = 0;
 export function insertCss(style: string | object): string {
 	const prefix = `.AbdStl${++cssCount}`;
 	const css = typeof style === 'string' ? styleStringToCss(style, prefix) : objectToCss(style, prefix);
-	if (css) $(`style#${css}`);
+	if (css) {
+		let cnt = cssSnippetCount++;
+		cssSnippets[cnt] = css;
+		clean(() => delete cssSnippets[cnt]);
+	}
 	return prefix;
 }
+let cssSnippets = proxy({} as Record<number, string>);
+let cssSnippetCount = 0;
 
 function combinePrefixSelector(prefix: string, key: string): string {
 	const sel = [];
@@ -2478,7 +2462,11 @@ function styleStringToCss(styleStr: string, selector: string): string {
  */
 export function insertGlobalCss(style: object) {
 	const css = objectToCss(style, "");
-	if (css) $(`style#${css}`);
+	if (css) {
+		let cnt = cssSnippetCount++;
+		cssSnippets[cnt] = css;
+		clean(() => delete cssSnippets[cnt]);
+	}
 }
 
 const CSS_SHORT: Record<string, string | string[]> = {
@@ -3183,3 +3171,28 @@ export function withEmitHandler(
 }
 
 
+// Automatically add cssVars and cssSnippets (from insertCss) into a <head> style tag
+if (typeof document !== "undefined") {
+	leakScope(() => {
+		$(() => {
+			if (isEmpty(cssSnippets) && isEmpty(cssVars)) return;
+			mount(document.head, () => {
+				$('style.abd', () => {
+					onEach(cssSnippets, (value) => {
+						$('#', value);
+					});
+					$(() => {
+						if (isEmpty(cssVars)) return;
+						let css = ":root{";
+						for(const [key, value] of Object.entries(cssVars)) {
+							const varName = DIGIT_FIRST.test(String(key)) ? `m${key}` : key;
+							css += `--${varName}:${value};`;
+						}
+						css += "}\n";
+						$('#', css);
+					})
+				});
+			});
+		});
+	});
+}

tests/cssShortcuts.test.ts

@@ -1,18 +1,7 @@
 import { test, expect } from "bun:test";
-import { assertBody, assertCss, passTime } from "./helpers";
+import { assertBody, getCss, assertCss, passTime } from "./helpers";
 import { $, cssVars, setSpacingCssVars, insertCss } from "../src/aberdeen";
 
-/** Get the full CSS content from the :root style tag in head */
-function getHeadCss(): string {
-	let css = '';
-	(document.head as any).visit((el: Element) => {
-		if (el.tagName === 'style') {
-			css += el.textContent;
-		}
-	});
-	return css;
-}
-
 // Property shortcuts
 test('margin shortcuts', () => {
 	$('div m:10px'); assertBody(`div{margin:10px}`);
@@ -85,27 +74,26 @@ test('cssVars automatically creates :root style tag when not empty', async () =>
 	await passTime();
 
 	// Check that the spacing vars are in :root (auto-mounted because cssVars is not empty)
-	const css = getHeadCss();
-	expect(css).toContain('--m3: 1rem;');
-	expect(css).toContain('--m4: 2rem;');
+	const css = getCss();
+	expect(css).toContain('--m3:1rem;');
+	expect(css).toContain('--m4:2rem;');
 });
 
 test('cssVars changes update :root style tag', async () => {
 	cssVars.changing = 'red';
-	await passTime();
 
 	// Verify initial value
-	let css = getHeadCss();
-	expect(css).toContain('--changing: red');
+	await passTime();
+	assertCss(
+		`:root{--changing:red;}`
+	);
 
 	// Change value
 	cssVars.changing = 'blue';
 	await passTime();
-	
-	// Verify updated value AND old value is gone
-	css = getHeadCss();
-	expect(css).toContain('--changing: blue');
-	expect(css).not.toContain('--changing: red');
+	assertCss(
+		`:root{--changing:blue;}`
+	);
 });
 
 // Edge cases
@@ -119,11 +107,12 @@ test('false value clears style', () => {
 	assertBody(`div`);
 });
 
-test('insertCss() supports shortcuts and cssVars', () => {
+test('insertCss() supports shortcuts and cssVars', async () => {
 	const cls = insertCss({
 		"&": "mv:$3 fg:$primary",
 		"&:hover": "bg:blue"
 	});
+	await passTime();
 	assertCss(
 		`${cls}{margin-top:var(--m3);margin-bottom:var(--m3);color:var(--primary);}`,
 		`${cls}:hover{background:blue;}`

tests/fakedom.ts

@@ -25,13 +25,6 @@ class Node {
     if (idx < 0) throw new Error("not part of siblings!?");
     return siblings[idx + delta];
   }
-
-  visit(visitor: (el: Node) => void) {
-    visitor(this);
-    for(let c of this.childNodes) {
-      c.visit(visitor);
-    }
-  }
 }
 
 class Element extends Node {

tests/helpers.ts

@@ -38,19 +38,19 @@ export function assertBody(expected: string): void {
 	if (actual !== expected) throw new Error(`assertBody failed\nActual:   ${actual}\nExpected: ${expected}`)
 }
 
-export function assertCss(...expected: string[]) {
-	const found: string[] = [];
-	for (const root of [document.head, document.body]) {
-		(root as any).visit((el: Element) => {
-			if (el.tagName === 'style') {
-				for(let style of el.textContent.trim().split("\n")) {
-					if (style) {
-						found.push(style);
-					}
-				}
-			}
-		});
+/** Get the full CSS content from the :root style tag in head */
+export function getCss(): string {
+	let css = '';
+	for(const el of document.head.childNodes) {
+		if (el instanceof Element && el.tagName === 'style') {
+			css += el.textContent + "\n";
+		}
 	}
+	return css;
+}
+
+export function assertCss(...expected: string[]) {
+	const found = getCss().split("\n").map(s => s.trim()).filter(s => s);
 	expect(found).toEqual(expected);
 }
 

tests/insertCss.test.ts

@@ -1,9 +1,10 @@
 import { test } from "bun:test";
 import { insertCss, insertGlobalCss } from "../src/aberdeen";
-import { assertCss } from './helpers';
+import { assertCss, passTime } from './helpers';
 
 test('Basic style', async () => {
   let cls = insertCss('color:red');
+  await passTime();
   assertCss(`${cls}{color:red;}`);
 });
 
@@ -15,6 +16,7 @@ test('Complex selectors', async () => {
     "body > &": 'margin-bottom:20px',
     "body > & span": 'font-size:20',
   })
+  await passTime();
   assertCss(
     `${cls}{margin:5;}`,
     `${cls} .x .y{font-weight:bold;}`,
@@ -29,6 +31,7 @@ test('Global style', async () => {
     '*': 'margin:4',
     'h1': 'color:red',
   });
+  await passTime();
   assertCss(
     `*{margin:4;}`,
     `h1{color:red;}`,
@@ -44,6 +47,7 @@ test('Nested selectors with object values', async () => {
       '&:active': 'transform:scale(0.95)',
     },
   });
+  await passTime();
   assertCss(
     `${cls}{display:flex;}`,
     `${cls} button{background:blue;padding:var(--m2);}`,
@@ -61,6 +65,7 @@ test('Media query with object containing multiple selectors', async () => {
       'input': 'font-size:16px',
     },
   });
+  await passTime();
   assertCss(
     `${cls}{display:flex;}`,
     `@media (max-width: 600px){`,
@@ -76,6 +81,7 @@ test('Media query with string value', async () => {
     '&': 'color:black',
     '@media (prefers-color-scheme: dark)': 'color:white',
   });
+  await passTime();
   assertCss(
     `${cls}{color:black;}`,
     `@media (prefers-color-scheme: dark){`,
@@ -98,6 +104,7 @@ test('Media queries nested deeply get bubbled to outside', async () => {
       },
     },
   });
+  await passTime();
   assertCss(
     `${cls}{display:grid;}`,
     `${cls} main{padding:var(--m4);}`,
@@ -114,6 +121,7 @@ test('Quoted values (e.g., content property)', async () => {
     '&::before': `content: "★"; color:gold mr:$1`,
     '&::after': `content: "\\00A0"; display:inline-block`,
   });
+  await passTime();
   assertCss(
     `${cls}::before{content:"★";color:gold;margin-right:var(--m1);}`,
     `${cls}::after{content:"\\00A0";display:inline-block;}`,
@@ -124,6 +132,7 @@ test('Multi-word values with space-colon-semicolon syntax', async () => {
   let cls = insertCss({
     '&': `border: 1px solid blue; transition: all 0.3s ease;`,
   });
+  await passTime();
   assertCss(
     `${cls}{border:1px solid blue;transition:all 0.3s ease;}`,
   );
@@ -133,6 +142,7 @@ test('Grid template areas with multiple quoted strings', async () => {
   let cls = insertCss({
     '&': `grid-template-areas: "header header" "sidebar content" "footer footer";`,
   });
+  await passTime();
   assertCss(
     `${cls}{grid-template-areas:"header header" "sidebar content" "footer footer";}`,
   );
@@ -145,6 +155,7 @@ test('Handles unions combined with further nested selectors', async () => {
       '&:hover, &.active': 'color:darkblue'
     },
   });
+  await passTime();
   assertCss(
     `${cls} button,${cls} a.link{color:blue;}`,
     `${cls} button:hover,${cls} button.active,${cls} a.link:hover,${cls} a.link.active{color:darkblue;}`,