fix: add more css selectors to `print()` (#17330)

* fix: add more css selectors to `print()`

* fix

.changeset/silver-bobcats-lie.md

@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+fix: add more css selectors to `print()`

packages/svelte/src/compiler/print/index.js

@@ -181,6 +181,18 @@ const css_visitors = {
 		}
 	},
 
+	AttributeSelector(node, context) {
+		context.write(`[${node.name}`);
+		if (node.matcher) {
+			context.write(node.matcher);
+			context.write(`"${node.value}"`);
+			if (node.flags) {
+				context.write(` ${node.flags}`);
+			}
+		}
+		context.write(']');
+	},
+
 	Block(node, context) {
 		context.write('{');
 
@@ -221,10 +233,22 @@ const css_visitors = {
 		context.write(`${node.property}: ${node.value};`);
 	},
 
+	IdSelector(node, context) {
+		context.write(`#${node.name}`);
+	},
+
+	NestingSelector(node, context) {
+		context.write('&');
+	},
+
 	Nth(node, context) {
 		context.write(node.value);
 	},
 
+	Percentage(node, context) {
+		context.write(`${node.value}%`);
+	},
+
 	PseudoClassSelector(node, context) {
 		context.write(`:${node.name}`);
 

packages/svelte/tests/print/samples/style/input.svelte

@@ -16,6 +16,7 @@
 
   @keyframes fade {
     from { opacity: 0; }
+    50% { opacity: 0.5; }
     to   { opacity: 1; }
   }
 
@@ -40,4 +41,14 @@
   .container .item, nav > ul.menu {
     color: red;
   }
+  #id-selector { color: red; }
+  [data-attribute] { color: red; }
+  [data-attribute="value"] { color: red; }
+
+  .card {
+    background: white;
+    &:hover {
+      background: gray;
+    }
+  }
 </style>

packages/svelte/tests/print/samples/style/output.svelte

@@ -19,6 +19,9 @@
 		from {
 			opacity: 0;
 		}
+		50%% {
+			opacity: 0.5;
+		}
 		to {
 			opacity: 1;
 		}
@@ -66,4 +69,23 @@
 	nav > ul.menu {
 		color: red;
 	}
+
+	#id-selector {
+		color: red;
+	}
+
+	[data-attribute] {
+		color: red;
+	}
+
+	[data-attribute="value"] {
+		color: red;
+	}
+
+	.card {
+		background: white;
+		&:hover {
+			background: gray;
+		}
+	}
 </style>