diff --git a/test/css/samples/directive-special-character/expected.css b/test/css/samples/directive-special-character/expected.css
new file mode 100644
index 0000000000..8b25d59d2e
--- /dev/null
+++ b/test/css/samples/directive-special-character/expected.css
@@ -0,0 +1 @@
+.foo\:bar.svelte-xyz{color:red}
\ No newline at end of file
diff --git a/test/css/samples/directive-special-character/expected.html b/test/css/samples/directive-special-character/expected.html
new file mode 100644
index 0000000000..40eff4ca21
--- /dev/null
+++ b/test/css/samples/directive-special-character/expected.html
@@ -0,0 +1 @@
+<div class="svelte-xyz foo:bar">Hello world</div>
\ No newline at end of file
diff --git a/test/css/samples/directive-special-character/input.svelte b/test/css/samples/directive-special-character/input.svelte
new file mode 100644
index 0000000000..8f95fe1355
--- /dev/null
+++ b/test/css/samples/directive-special-character/input.svelte
@@ -0,0 +1,11 @@
+<script>
+	const enabled = true;
+</script>
+
+<div class:foo:bar={enabled}>Hello world</div>
+
+<style>
+	.foo\:bar {
+		color: red;
+	}
+</style>