fix: add more css selectors to print()

.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>