diff --git a/.changeset/silver-bobcats-lie.md b/.changeset/silver-bobcats-lie.md new file mode 100644 index 0000000000..c51262f95d --- /dev/null +++ b/.changeset/silver-bobcats-lie.md @@ -0,0 +1,5 @@ +--- +'svelte': patch +--- + +fix: add more css selectors to `print()` diff --git a/packages/svelte/src/compiler/print/index.js b/packages/svelte/src/compiler/print/index.js index abd8b56297..8b39bdd739 100644 --- a/packages/svelte/src/compiler/print/index.js +++ b/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}`); diff --git a/packages/svelte/tests/print/samples/style/input.svelte b/packages/svelte/tests/print/samples/style/input.svelte index 94312774ec..afa00bee7a 100644 --- a/packages/svelte/tests/print/samples/style/input.svelte +++ b/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; + } + } diff --git a/packages/svelte/tests/print/samples/style/output.svelte b/packages/svelte/tests/print/samples/style/output.svelte index 0f87f10941..03168cccae 100644 --- a/packages/svelte/tests/print/samples/style/output.svelte +++ b/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; + } + }