test @rules in css

test/css/index.js

@@ -6,7 +6,8 @@ describe( 'css', () => {
 	fs.readdirSync( 'test/css/samples' ).forEach( dir => {
 		if ( dir[0] === '.' ) return;
 
-		const solo = exists( `test/css/samples/${dir}/solo` );
+		// add .solo to a sample directory name to only run that test
+		const solo = /\.solo/.test( dir );
 
 		if ( solo && process.env.CI ) {
 			throw new Error( 'Forgot to remove `solo: true` from test' );

test/css/samples/keyframes/expected.css

@@ -0,0 +1,9 @@
+
+	@keyframes svelte-4112859982-why {
+		0% { color: red; }
+		100% { color: blue; }
+	}
+
+	[svelte-4112859982].animated, [svelte-4112859982] .animated {
+		animation: svelte-4112859982-why 2s;
+	}

test/css/samples/keyframes/input.html

@@ -0,0 +1,12 @@
+<div class='animated'>animated</div>
+
+<style>
+	@keyframes why {
+		0% { color: red; }
+		100% { color: blue; }
+	}
+
+	.animated {
+		animation: why 2s;
+	}
+</style>

test/css/samples/media-query/expected.css

@@ -0,0 +1,6 @@
+
+	@media (min-width: 400px) {
+		[svelte-2352010302].large-screen, [svelte-2352010302] .large-screen {
+			display: block;
+		}
+	}

test/css/samples/media-query/input.html

@@ -0,0 +1,9 @@
+<div class='large-screen'>animated</div>
+
+<style>
+	@media (min-width: 400px) {
+		.large-screen {
+			display: block;
+		}
+	}
+</style>