diff --git a/src/generators/dom/index.ts b/src/generators/dom/index.ts
index 00e6d203cf..3e7c7a62f2 100644
--- a/src/generators/dom/index.ts
+++ b/src/generators/dom/index.ts
@@ -269,8 +269,9 @@ export default function dom(
 
 	let result = builder
 		.toString()
-		.replace(/(\\\\)?@(\w*)/g, (match: string, escaped: string, name: string) => {
+		.replace(/(\\\\)?([@#])(\w*)/g, (match: string, escaped: string, sigil: string, name: string) => {
 			if (escaped) return match.slice(2);
+			if (sigil !== '@') return match;
 
 			if (name in shared) {
 				if (options.dev && `${name}Dev` in shared) name = `${name}Dev`;
diff --git a/test/runtime/samples/css/Widget.html b/test/runtime/samples/css/Widget.html
index 1d893b8bcd..ad2b7e681d 100644
--- a/test/runtime/samples/css/Widget.html
+++ b/test/runtime/samples/css/Widget.html
@@ -2,6 +2,6 @@
 
 <style>
 	p {
-		color: red;
+		color: #f00;
 	}
 </style>
diff --git a/test/runtime/samples/css/_config.js b/test/runtime/samples/css/_config.js
index f523d7755b..86b237b410 100644
--- a/test/runtime/samples/css/_config.js
+++ b/test/runtime/samples/css/_config.js
@@ -3,6 +3,6 @@ export default {
 		const [ control, test ] = target.querySelectorAll( 'p' );
 
 		assert.equal( window.getComputedStyle( control ).color, '' );
-		assert.equal( window.getComputedStyle( test ).color, 'red' );
+		assert.equal( window.getComputedStyle( test ).color, 'rgb(255, 0, 0)' );
 	}
 };