Use the CSS content property to populate an element's src, value, inner-text, etc

Gigabyte5671 · Gigabyte5671 · commit 8b167416e9e4 · 2023-05-26T17:42:00.000+12:00
diff --git a/README.md b/README.md
@@ -29,16 +29,19 @@ const html = cssToHtml(css);
 Input:
 ```css
 h1 {
+	content: 'Awesome!';
 	color: grey;
 }
 p > button.rounded {
+	content: 'Click here';
 	background: #fff;
 	border-radius: 8px;
 }
 p > button.rounded:hover {
 	background: #ddd;
 }
 a img#logo {
+	content: 'https://example.com/image';
 	display: block;
 	width: 1.5em;
 	height: 1.5em;
@@ -48,10 +51,10 @@ a img#logo {
 Output:
 ```html
 <body>
-	<h1></h1>
+	<h1>Awesome!</h1>
 	<p>
-		<button class="rounded"></button>
+		<button class="rounded">Click here</button>
 	</p>
-	<a><img id="logo"></a>
+	<a><img src="https://example.com/image" id="logo"></a>
 </body>
 ```
diff --git a/src/Generator.ts b/src/Generator.ts
@@ -138,6 +138,49 @@ export function cssToHtml(css: CSSRuleList | string): HTMLBodyElement {
 				descriptor.clear();
 			}
 		}
+
+		// If the rule has a `content` property, populate the element with the specified content appropriately.
+		let content = rule.style.content;
+		const element = descriptor.previousElement;
+		if (content && element) {
+			// Strip any quote marks from around the content string.
+			if (/(?:'|")/.test(content.charAt(0)) && /(?:'|")/.test(content.charAt(content.length - 1))) {
+				content = content.substring(1, content.length - 1);
+			}
+			// Place the content in the `href` property of anchor elements.
+			if (element instanceof HTMLAnchorElement) {
+				element.href = content;
+			}
+			// Place the content in the `src` property of audio, iframe, image, and video elements.
+			else if (
+				element instanceof HTMLAudioElement
+				|| element instanceof HTMLIFrameElement
+				|| element instanceof HTMLImageElement
+				|| element instanceof HTMLVideoElement
+			) {
+				element.src = content;
+			}
+			// Place the content in the `placeholder` property of input and textarea elements.
+			else if (
+				element instanceof HTMLInputElement
+				|| element instanceof HTMLTextAreaElement
+			) {
+				element.placeholder = content;
+			}
+			// Use the content as inner-text and place it in the `value` property of option elements.
+			else if (element instanceof HTMLOptionElement) {
+				element.innerText = content;
+				element.value = content;
+			}
+			// Place the content in the `value` property of select elements.
+			else if (element instanceof HTMLSelectElement) {
+				element.value = content;
+			}
+			// Use the content as inner-text for all other elements.
+			else {
+				element.innerText = content;
+			}
+		}
 	}
 
 	return output;
diff --git a/tests/index.js b/tests/index.js
@@ -8,9 +8,11 @@ const input = `
 	box-sizing: border-box;
 }
 a {
+	content: 'https://example.com/';
 	border-radius: 10px;
 }
 button {
+	content: 'Click me';
 	background-color: red;
 }
 button:hover {
@@ -22,6 +24,7 @@ button:hover {
 	background-color: red;
 }
 nav    a#logo.icon> img {
+	content: 'https://example.com/image';
 	display: block;
 }
 .pie .pastry.crenelations {

Original file line number	Diff line number	Diff line change
@@ -8,9 +8,11 @@ const input = `
`8`	`8`	`box-sizing: border-box;`
`9`	`9`	`}`
`10`	`10`	`a {`
	`11`	`+ content: 'https://example.com/';`
`11`	`12`	`border-radius: 10px;`
`12`	`13`	`}`
`13`	`14`	`button {`
	`15`	`+ content: 'Click me';`
`14`	`16`	`background-color: red;`
`15`	`17`	`}`
`16`	`18`	`button:hover {`
`@@ -22,6 +24,7 @@ button:hover {`
`22`	`24`	`background-color: red;`
`23`	`25`	`}`
`24`	`26`	`nav a#logo.icon> img {`
	`27`	`+ content: 'https://example.com/image';`
`25`	`28`	`display: block;`
`26`	`29`	`}`
`27`	`30`	`.pie .pastry.crenelations {`