From 817e1f5e0a52bf4885205e07a1114c246b081bac Mon Sep 17 00:00:00 2001 From: Almaz Date: Thu, 29 Aug 2019 21:57:02 +0200 Subject: [PATCH 1/4] Fixed css selectors specificity --- src/compiler/compile/css/Selector.ts | 14 +++++++++++--- .../samples/attribute-selector-bind/expected.css | 2 +- .../attribute-selector-only-name/expected.css | 2 +- .../attribute-selector-unquoted/expected.css | 2 +- test/css/samples/basic/expected.css | 2 +- test/css/samples/css-vars/expected.css | 2 +- .../directive-special-character/expected.css | 2 +- test/css/samples/empty-rule-dev/expected.css | 2 +- test/css/samples/global-keyframes/expected.css | 2 +- .../samples/keyframes-autoprefixed/expected.css | 2 +- test/css/samples/keyframes-from-to/expected.css | 2 +- test/css/samples/keyframes/expected.css | 2 +- test/css/samples/local-inside-global/expected.css | 2 +- test/css/samples/media-query-word/expected.css | 2 +- test/css/samples/media-query/expected.css | 2 +- test/css/samples/nested/expected.css | 2 +- test/css/samples/not-selector/expected.css | 2 +- .../expected.css | 2 +- .../expected.css | 2 +- .../expected.css | 2 +- .../expected.css | 2 +- .../expected.css | 2 +- .../expected.css | 2 +- .../expected.css | 2 +- .../expected.css | 2 +- .../expected.css | 2 +- .../expected.css | 2 +- .../expected.css | 2 +- .../expected.css | 2 +- .../expected.css | 2 +- .../expected.css | 2 +- .../expected.css | 2 +- .../expected.css | 2 +- .../samples/omit-scoping-attribute-id/expected.css | 2 +- .../samples/omit-scoping-attribute/expected.css | 2 +- test/css/samples/pseudo-element/expected.css | 2 +- test/css/samples/spread/expected.css | 2 +- test/css/samples/supports-query/expected.css | 2 +- test/css/samples/universal-selector/expected.css | 2 +- .../expected.css | 2 +- test/css/samples/unknown-at-rule/expected.css | 2 +- .../samples/unused-selector-leading/expected.css | 2 +- .../samples/unused-selector-ternary/expected.css | 2 +- test/css/samples/unused-selector/expected.css | 2 +- .../collapses-text-around-comments/expected.js | 4 ++-- test/js/samples/css-media-query/expected.js | 4 ++-- .../samples/styles-nested/_expected.css | 4 ++-- .../samples/styles/_expected.css | 2 +- 48 files changed, 61 insertions(+), 53 deletions(-) diff --git a/src/compiler/compile/css/Selector.ts b/src/compiler/compile/css/Selector.ts index d99af7a11028..e4bf8ea64005 100644 --- a/src/compiler/compile/css/Selector.ts +++ b/src/compiler/compile/css/Selector.ts @@ -64,21 +64,29 @@ export default class Selector { } transform(code: MagicString, attr: string) { + const should_double_up_attr = this.blocks.filter(block => block.should_encapsulate).length === 1; + function encapsulate_block(block: Block) { let i = block.selectors.length; + let encapsulationAttr = attr; + + if (should_double_up_attr) { + encapsulationAttr = attr + attr; + } + while (i--) { const selector = block.selectors[i]; if (selector.type === 'PseudoElementSelector' || selector.type === 'PseudoClassSelector') { if (selector.name !== 'root') { - if (i === 0) code.prependRight(selector.start, attr); + if (i === 0) code.prependRight(selector.start, encapsulationAttr); } continue; } if (selector.type === 'TypeSelector' && selector.name === '*') { - code.overwrite(selector.start, selector.end, attr); + code.overwrite(selector.start, selector.end, encapsulationAttr); } else { - code.appendLeft(selector.end, attr); + code.appendLeft(selector.end, encapsulationAttr); } break; diff --git a/test/css/samples/attribute-selector-bind/expected.css b/test/css/samples/attribute-selector-bind/expected.css index 20543c5c8e07..9dc2fcc42f6e 100644 --- a/test/css/samples/attribute-selector-bind/expected.css +++ b/test/css/samples/attribute-selector-bind/expected.css @@ -1 +1 @@ -details[open].svelte-xyz{color:red} \ No newline at end of file +details[open].svelte-xyz.svelte-xyz{color:red} \ No newline at end of file diff --git a/test/css/samples/attribute-selector-only-name/expected.css b/test/css/samples/attribute-selector-only-name/expected.css index e2bbf5b48c59..3ff721d49122 100644 --- a/test/css/samples/attribute-selector-only-name/expected.css +++ b/test/css/samples/attribute-selector-only-name/expected.css @@ -1 +1 @@ -[foo].svelte-xyz{color:red}[baz].svelte-xyz{color:blue} \ No newline at end of file +[foo].svelte-xyz.svelte-xyz{color:red}[baz].svelte-xyz.svelte-xyz{color:blue} \ No newline at end of file diff --git a/test/css/samples/attribute-selector-unquoted/expected.css b/test/css/samples/attribute-selector-unquoted/expected.css index 9f8f88a352eb..7199e49c003f 100644 --- a/test/css/samples/attribute-selector-unquoted/expected.css +++ b/test/css/samples/attribute-selector-unquoted/expected.css @@ -1 +1 @@ -[foo=bar].svelte-xyz{color:red} \ No newline at end of file +[foo=bar].svelte-xyz.svelte-xyz{color:red} \ No newline at end of file diff --git a/test/css/samples/basic/expected.css b/test/css/samples/basic/expected.css index d466e8df9658..1a8bdff7c6de 100644 --- a/test/css/samples/basic/expected.css +++ b/test/css/samples/basic/expected.css @@ -1 +1 @@ -div.svelte-xyz{color:red} \ No newline at end of file +div.svelte-xyz.svelte-xyz{color:red} \ No newline at end of file diff --git a/test/css/samples/css-vars/expected.css b/test/css/samples/css-vars/expected.css index c2bd56375b1f..2c3986541bcc 100644 --- a/test/css/samples/css-vars/expected.css +++ b/test/css/samples/css-vars/expected.css @@ -1 +1 @@ -:root{--root-test:20}div.svelte-xyz{--test:10} \ No newline at end of file +:root{--root-test:20}div.svelte-xyz.svelte-xyz{--test:10} \ No newline at end of file diff --git a/test/css/samples/directive-special-character/expected.css b/test/css/samples/directive-special-character/expected.css index 8b25d59d2e0b..730df36d9194 100644 --- a/test/css/samples/directive-special-character/expected.css +++ b/test/css/samples/directive-special-character/expected.css @@ -1 +1 @@ -.foo\:bar.svelte-xyz{color:red} \ No newline at end of file +.foo\:bar.svelte-xyz.svelte-xyz{color:red} \ No newline at end of file diff --git a/test/css/samples/empty-rule-dev/expected.css b/test/css/samples/empty-rule-dev/expected.css index 4013e47e5d3a..cb3cea0c0dbe 100644 --- a/test/css/samples/empty-rule-dev/expected.css +++ b/test/css/samples/empty-rule-dev/expected.css @@ -1 +1 @@ -.foo.svelte-xyz{} \ No newline at end of file +.foo.svelte-xyz.svelte-xyz{} \ No newline at end of file diff --git a/test/css/samples/global-keyframes/expected.css b/test/css/samples/global-keyframes/expected.css index 8e716d136df4..3b70bae786fc 100644 --- a/test/css/samples/global-keyframes/expected.css +++ b/test/css/samples/global-keyframes/expected.css @@ -1 +1 @@ -@keyframes why{0%{color:red}100%{color:blue}}.animated.svelte-xyz{animation:why 2s}.also-animated.svelte-xyz{animation:not-defined-here 2s} \ No newline at end of file +@keyframes why{0%{color:red}100%{color:blue}}.animated.svelte-xyz.svelte-xyz{animation:why 2s}.also-animated.svelte-xyz.svelte-xyz{animation:not-defined-here 2s} \ No newline at end of file diff --git a/test/css/samples/keyframes-autoprefixed/expected.css b/test/css/samples/keyframes-autoprefixed/expected.css index d9866778a917..b1273fead8e1 100644 --- a/test/css/samples/keyframes-autoprefixed/expected.css +++ b/test/css/samples/keyframes-autoprefixed/expected.css @@ -1 +1 @@ -@keyframes svelte-xyz-why{0%{color:red}100%{color:blue}}@-webkit-keyframes svelte-xyz-why{0%{color:red}100%{color:blue}}@-moz-keyframes svelte-xyz-why{0%{color:red}100%{color:blue}}@-o-keyframes svelte-xyz-why{0%{color:red}100%{color:blue}}.animated.svelte-xyz{-webkit-animation:svelte-xyz-why 2s;animation:svelte-xyz-why 2s}.also-animated.svelte-xyz{-webkit-animation:not-defined-here 2s;animation:not-defined-here 2s} \ No newline at end of file +@keyframes svelte-xyz-why{0%{color:red}100%{color:blue}}@-webkit-keyframes svelte-xyz-why{0%{color:red}100%{color:blue}}@-moz-keyframes svelte-xyz-why{0%{color:red}100%{color:blue}}@-o-keyframes svelte-xyz-why{0%{color:red}100%{color:blue}}.animated.svelte-xyz.svelte-xyz{-webkit-animation:svelte-xyz-why 2s;animation:svelte-xyz-why 2s}.also-animated.svelte-xyz.svelte-xyz{-webkit-animation:not-defined-here 2s;animation:not-defined-here 2s} \ No newline at end of file diff --git a/test/css/samples/keyframes-from-to/expected.css b/test/css/samples/keyframes-from-to/expected.css index c8ee60194c80..76693ed358cf 100644 --- a/test/css/samples/keyframes-from-to/expected.css +++ b/test/css/samples/keyframes-from-to/expected.css @@ -1 +1 @@ -@keyframes svelte-xyz-why{from{color:red}to{color:blue}}.animated.svelte-xyz{animation:svelte-xyz-why 2s} \ No newline at end of file +@keyframes svelte-xyz-why{from{color:red}to{color:blue}}.animated.svelte-xyz.svelte-xyz{animation:svelte-xyz-why 2s} \ No newline at end of file diff --git a/test/css/samples/keyframes/expected.css b/test/css/samples/keyframes/expected.css index a6a1176dae46..218aa2522352 100644 --- a/test/css/samples/keyframes/expected.css +++ b/test/css/samples/keyframes/expected.css @@ -1 +1 @@ -@keyframes svelte-xyz-why{0%{color:red}100%{color:blue}}.animated.svelte-xyz{animation:svelte-xyz-why 2s}.also-animated.svelte-xyz{animation:not-defined-here 2s} \ No newline at end of file +@keyframes svelte-xyz-why{0%{color:red}100%{color:blue}}.animated.svelte-xyz.svelte-xyz{animation:svelte-xyz-why 2s}.also-animated.svelte-xyz.svelte-xyz{animation:not-defined-here 2s} \ No newline at end of file diff --git a/test/css/samples/local-inside-global/expected.css b/test/css/samples/local-inside-global/expected.css index 40af67afbaf6..f960d4c78276 100644 --- a/test/css/samples/local-inside-global/expected.css +++ b/test/css/samples/local-inside-global/expected.css @@ -1 +1 @@ -div .foo.svelte-xyz{color:red}div>.foo.svelte-xyz{font-weight:bold} \ No newline at end of file +div .foo.svelte-xyz.svelte-xyz{color:red}div>.foo.svelte-xyz.svelte-xyz{font-weight:bold} \ No newline at end of file diff --git a/test/css/samples/media-query-word/expected.css b/test/css/samples/media-query-word/expected.css index d2a288ed7278..e3ec204b8229 100644 --- a/test/css/samples/media-query-word/expected.css +++ b/test/css/samples/media-query-word/expected.css @@ -1 +1 @@ -@media only screen and (min-width: 400px){div.svelte-xyz{color:red}} \ No newline at end of file +@media only screen and (min-width: 400px){div.svelte-xyz.svelte-xyz{color:red}} \ No newline at end of file diff --git a/test/css/samples/media-query/expected.css b/test/css/samples/media-query/expected.css index 8ea74bf3b1a4..d08f53153d73 100644 --- a/test/css/samples/media-query/expected.css +++ b/test/css/samples/media-query/expected.css @@ -1 +1 @@ -@media(min-width: 400px){.large-screen.svelte-xyz{display:block}} \ No newline at end of file +@media(min-width: 400px){.large-screen.svelte-xyz.svelte-xyz{display:block}} \ No newline at end of file diff --git a/test/css/samples/nested/expected.css b/test/css/samples/nested/expected.css index 87ca7335f666..afdb2c5c8fda 100644 --- a/test/css/samples/nested/expected.css +++ b/test/css/samples/nested/expected.css @@ -1 +1 @@ -.foo.svelte-xyz{color:red}.bar.svelte-xyz{font-style:italic} \ No newline at end of file +.foo.svelte-xyz.svelte-xyz{color:red}.bar.svelte-xyz.svelte-xyz{font-style:italic} \ No newline at end of file diff --git a/test/css/samples/not-selector/expected.css b/test/css/samples/not-selector/expected.css index 83a819a9e0c2..dbc6edd5f68f 100644 --- a/test/css/samples/not-selector/expected.css +++ b/test/css/samples/not-selector/expected.css @@ -1 +1 @@ -.svelte-xyz:not(.foo){color:red} \ No newline at end of file +.svelte-xyz.svelte-xyz:not(.foo){color:red} \ No newline at end of file diff --git a/test/css/samples/omit-scoping-attribute-attribute-selector-contains/expected.css b/test/css/samples/omit-scoping-attribute-attribute-selector-contains/expected.css index 4d1d8d14ff7c..48488b229239 100644 --- a/test/css/samples/omit-scoping-attribute-attribute-selector-contains/expected.css +++ b/test/css/samples/omit-scoping-attribute-attribute-selector-contains/expected.css @@ -1 +1 @@ -[data-foo*='bar'].svelte-xyz{color:red} \ No newline at end of file +[data-foo*='bar'].svelte-xyz.svelte-xyz{color:red} \ No newline at end of file diff --git a/test/css/samples/omit-scoping-attribute-attribute-selector-equals-case-insensitive/expected.css b/test/css/samples/omit-scoping-attribute-attribute-selector-equals-case-insensitive/expected.css index 80b6feebca1c..2c3699990149 100644 --- a/test/css/samples/omit-scoping-attribute-attribute-selector-equals-case-insensitive/expected.css +++ b/test/css/samples/omit-scoping-attribute-attribute-selector-equals-case-insensitive/expected.css @@ -1 +1 @@ -[data-foo='bar' i].svelte-xyz{color:red} \ No newline at end of file +[data-foo='bar' i].svelte-xyz.svelte-xyz{color:red} \ No newline at end of file diff --git a/test/css/samples/omit-scoping-attribute-attribute-selector-equals-dynamic/expected.css b/test/css/samples/omit-scoping-attribute-attribute-selector-equals-dynamic/expected.css index fd8a9a15eeb6..cb0b85b62f60 100644 --- a/test/css/samples/omit-scoping-attribute-attribute-selector-equals-dynamic/expected.css +++ b/test/css/samples/omit-scoping-attribute-attribute-selector-equals-dynamic/expected.css @@ -1 +1 @@ -[data-foo='bar'].svelte-xyz{color:red} \ No newline at end of file +[data-foo='bar'].svelte-xyz.svelte-xyz{color:red} \ No newline at end of file diff --git a/test/css/samples/omit-scoping-attribute-attribute-selector-equals/expected.css b/test/css/samples/omit-scoping-attribute-attribute-selector-equals/expected.css index fd8a9a15eeb6..cb0b85b62f60 100644 --- a/test/css/samples/omit-scoping-attribute-attribute-selector-equals/expected.css +++ b/test/css/samples/omit-scoping-attribute-attribute-selector-equals/expected.css @@ -1 +1 @@ -[data-foo='bar'].svelte-xyz{color:red} \ No newline at end of file +[data-foo='bar'].svelte-xyz.svelte-xyz{color:red} \ No newline at end of file diff --git a/test/css/samples/omit-scoping-attribute-attribute-selector-pipe-equals/expected.css b/test/css/samples/omit-scoping-attribute-attribute-selector-pipe-equals/expected.css index 95f6faeb028e..6c00808dfb0c 100644 --- a/test/css/samples/omit-scoping-attribute-attribute-selector-pipe-equals/expected.css +++ b/test/css/samples/omit-scoping-attribute-attribute-selector-pipe-equals/expected.css @@ -1 +1 @@ -[data-foo|='bar'].svelte-xyz{color:red} \ No newline at end of file +[data-foo|='bar'].svelte-xyz.svelte-xyz{color:red} \ No newline at end of file diff --git a/test/css/samples/omit-scoping-attribute-attribute-selector-prefix/expected.css b/test/css/samples/omit-scoping-attribute-attribute-selector-prefix/expected.css index 3a30f1f017e8..d2279d908dff 100644 --- a/test/css/samples/omit-scoping-attribute-attribute-selector-prefix/expected.css +++ b/test/css/samples/omit-scoping-attribute-attribute-selector-prefix/expected.css @@ -1 +1 @@ -[data-foo^='bar'].svelte-xyz{color:red} \ No newline at end of file +[data-foo^='bar'].svelte-xyz.svelte-xyz{color:red} \ No newline at end of file diff --git a/test/css/samples/omit-scoping-attribute-attribute-selector-suffix/expected.css b/test/css/samples/omit-scoping-attribute-attribute-selector-suffix/expected.css index de8d18cc3b33..aa540ce5db30 100644 --- a/test/css/samples/omit-scoping-attribute-attribute-selector-suffix/expected.css +++ b/test/css/samples/omit-scoping-attribute-attribute-selector-suffix/expected.css @@ -1 +1 @@ -[data-foo$='bar'].svelte-xyz{color:red} \ No newline at end of file +[data-foo$='bar'].svelte-xyz.svelte-xyz{color:red} \ No newline at end of file diff --git a/test/css/samples/omit-scoping-attribute-attribute-selector-word-equals/expected.css b/test/css/samples/omit-scoping-attribute-attribute-selector-word-equals/expected.css index fabcbade4df0..12bd34a49bce 100644 --- a/test/css/samples/omit-scoping-attribute-attribute-selector-word-equals/expected.css +++ b/test/css/samples/omit-scoping-attribute-attribute-selector-word-equals/expected.css @@ -1 +1 @@ -[data-foo~='bar'].svelte-xyz{color:red} \ No newline at end of file +[data-foo~='bar'].svelte-xyz.svelte-xyz{color:red} \ No newline at end of file diff --git a/test/css/samples/omit-scoping-attribute-attribute-selector/expected.css b/test/css/samples/omit-scoping-attribute-attribute-selector/expected.css index ddb620207d2b..be9e02b82c2f 100644 --- a/test/css/samples/omit-scoping-attribute-attribute-selector/expected.css +++ b/test/css/samples/omit-scoping-attribute-attribute-selector/expected.css @@ -1 +1 @@ -[autoplay].svelte-xyz{color:red} \ No newline at end of file +[autoplay].svelte-xyz.svelte-xyz{color:red} \ No newline at end of file diff --git a/test/css/samples/omit-scoping-attribute-class-dynamic/expected.css b/test/css/samples/omit-scoping-attribute-class-dynamic/expected.css index 431f7041061e..1235588b8880 100644 --- a/test/css/samples/omit-scoping-attribute-class-dynamic/expected.css +++ b/test/css/samples/omit-scoping-attribute-class-dynamic/expected.css @@ -1 +1 @@ -.foo.svelte-xyz{color:red} \ No newline at end of file +.foo.svelte-xyz.svelte-xyz{color:red} \ No newline at end of file diff --git a/test/css/samples/omit-scoping-attribute-class-static/expected.css b/test/css/samples/omit-scoping-attribute-class-static/expected.css index 431f7041061e..1235588b8880 100644 --- a/test/css/samples/omit-scoping-attribute-class-static/expected.css +++ b/test/css/samples/omit-scoping-attribute-class-static/expected.css @@ -1 +1 @@ -.foo.svelte-xyz{color:red} \ No newline at end of file +.foo.svelte-xyz.svelte-xyz{color:red} \ No newline at end of file diff --git a/test/css/samples/omit-scoping-attribute-descendant-global-inner-class/expected.css b/test/css/samples/omit-scoping-attribute-descendant-global-inner-class/expected.css index f3653403a5b9..55857f37bd2c 100644 --- a/test/css/samples/omit-scoping-attribute-descendant-global-inner-class/expected.css +++ b/test/css/samples/omit-scoping-attribute-descendant-global-inner-class/expected.css @@ -1 +1 @@ -.foo.svelte-xyz .bar{color:red} \ No newline at end of file +.foo.svelte-xyz.svelte-xyz .bar{color:red} \ No newline at end of file diff --git a/test/css/samples/omit-scoping-attribute-descendant-global-inner-multiple/expected.css b/test/css/samples/omit-scoping-attribute-descendant-global-inner-multiple/expected.css index 74e641549f0e..7a240f6b0e9b 100644 --- a/test/css/samples/omit-scoping-attribute-descendant-global-inner-multiple/expected.css +++ b/test/css/samples/omit-scoping-attribute-descendant-global-inner-multiple/expected.css @@ -1 +1 @@ -div.svelte-xyz>p>em{color:red} \ No newline at end of file +div.svelte-xyz.svelte-xyz>p>em{color:red} \ No newline at end of file diff --git a/test/css/samples/omit-scoping-attribute-descendant-global-inner/expected.css b/test/css/samples/omit-scoping-attribute-descendant-global-inner/expected.css index 338c90ab19ca..8afb336fbd37 100644 --- a/test/css/samples/omit-scoping-attribute-descendant-global-inner/expected.css +++ b/test/css/samples/omit-scoping-attribute-descendant-global-inner/expected.css @@ -1 +1 @@ -div.svelte-xyz>p{color:red} \ No newline at end of file +div.svelte-xyz.svelte-xyz>p{color:red} \ No newline at end of file diff --git a/test/css/samples/omit-scoping-attribute-descendant-global-outer-multiple/expected.css b/test/css/samples/omit-scoping-attribute-descendant-global-outer-multiple/expected.css index 5d1af4c251d3..e9664c9840d3 100644 --- a/test/css/samples/omit-scoping-attribute-descendant-global-outer-multiple/expected.css +++ b/test/css/samples/omit-scoping-attribute-descendant-global-outer-multiple/expected.css @@ -1 +1 @@ -div>section>p.svelte-xyz{color:red} \ No newline at end of file +div>section>p.svelte-xyz.svelte-xyz{color:red} \ No newline at end of file diff --git a/test/css/samples/omit-scoping-attribute-descendant-global-outer/expected.css b/test/css/samples/omit-scoping-attribute-descendant-global-outer/expected.css index 3666ce8f7fb2..43eeac51f355 100644 --- a/test/css/samples/omit-scoping-attribute-descendant-global-outer/expected.css +++ b/test/css/samples/omit-scoping-attribute-descendant-global-outer/expected.css @@ -1 +1 @@ -div>p.svelte-xyz{color:red} \ No newline at end of file +div>p.svelte-xyz.svelte-xyz{color:red} \ No newline at end of file diff --git a/test/css/samples/omit-scoping-attribute-id/expected.css b/test/css/samples/omit-scoping-attribute-id/expected.css index 0e9e9f8b2949..64760db71b53 100644 --- a/test/css/samples/omit-scoping-attribute-id/expected.css +++ b/test/css/samples/omit-scoping-attribute-id/expected.css @@ -1 +1 @@ -#foo.svelte-xyz{color:red} \ No newline at end of file +#foo.svelte-xyz.svelte-xyz{color:red} \ No newline at end of file diff --git a/test/css/samples/omit-scoping-attribute/expected.css b/test/css/samples/omit-scoping-attribute/expected.css index 5d8d69ac33a7..571e07eaf451 100644 --- a/test/css/samples/omit-scoping-attribute/expected.css +++ b/test/css/samples/omit-scoping-attribute/expected.css @@ -1 +1 @@ -p.svelte-xyz{color:red} \ No newline at end of file +p.svelte-xyz.svelte-xyz{color:red} \ No newline at end of file diff --git a/test/css/samples/pseudo-element/expected.css b/test/css/samples/pseudo-element/expected.css index bb380d40417c..d48d1dcb2673 100644 --- a/test/css/samples/pseudo-element/expected.css +++ b/test/css/samples/pseudo-element/expected.css @@ -1 +1 @@ -span.svelte-xyz::after{content:'i am a pseudo-element'}span.svelte-xyz:first-child{color:red}span.svelte-xyz:last-child::after{color:blue} \ No newline at end of file +span.svelte-xyz.svelte-xyz::after{content:'i am a pseudo-element'}span.svelte-xyz.svelte-xyz:first-child{color:red}span.svelte-xyz.svelte-xyz:last-child::after{color:blue} \ No newline at end of file diff --git a/test/css/samples/spread/expected.css b/test/css/samples/spread/expected.css index dc433318e8bc..5a38e3716c74 100644 --- a/test/css/samples/spread/expected.css +++ b/test/css/samples/spread/expected.css @@ -1 +1 @@ -.foo.svelte-xyz{color:red;font-size:2em;font-family:'Comic Sans MS'} \ No newline at end of file +.foo.svelte-xyz.svelte-xyz{color:red;font-size:2em;font-family:'Comic Sans MS'} \ No newline at end of file diff --git a/test/css/samples/supports-query/expected.css b/test/css/samples/supports-query/expected.css index 3fdef34d6e31..c28067a7af82 100644 --- a/test/css/samples/supports-query/expected.css +++ b/test/css/samples/supports-query/expected.css @@ -1 +1 @@ -@supports (display: grid){.maybe-grid.svelte-xyz{display:grid}} \ No newline at end of file +@supports (display: grid){.maybe-grid.svelte-xyz.svelte-xyz{display:grid}} \ No newline at end of file diff --git a/test/css/samples/universal-selector/expected.css b/test/css/samples/universal-selector/expected.css index 3eda95e44618..76460629eb7d 100644 --- a/test/css/samples/universal-selector/expected.css +++ b/test/css/samples/universal-selector/expected.css @@ -1 +1 @@ -.svelte-xyz{color:red} \ No newline at end of file +.svelte-xyz.svelte-xyz{color:red} \ No newline at end of file diff --git a/test/css/samples/unknown-at-rule-with-following-rules/expected.css b/test/css/samples/unknown-at-rule-with-following-rules/expected.css index 31c3bf9c6f1d..025966cf9c91 100644 --- a/test/css/samples/unknown-at-rule-with-following-rules/expected.css +++ b/test/css/samples/unknown-at-rule-with-following-rules/expected.css @@ -1 +1 @@ -div.svelte-xyz{@apply --funky-div;} \ No newline at end of file +div.svelte-xyz.svelte-xyz{@apply --funky-div;} \ No newline at end of file diff --git a/test/css/samples/unknown-at-rule/expected.css b/test/css/samples/unknown-at-rule/expected.css index 31c3bf9c6f1d..025966cf9c91 100644 --- a/test/css/samples/unknown-at-rule/expected.css +++ b/test/css/samples/unknown-at-rule/expected.css @@ -1 +1 @@ -div.svelte-xyz{@apply --funky-div;} \ No newline at end of file +div.svelte-xyz.svelte-xyz{@apply --funky-div;} \ No newline at end of file diff --git a/test/css/samples/unused-selector-leading/expected.css b/test/css/samples/unused-selector-leading/expected.css index ff57dc09b92f..02dfae359db7 100644 --- a/test/css/samples/unused-selector-leading/expected.css +++ b/test/css/samples/unused-selector-leading/expected.css @@ -1 +1 @@ -.bar.svelte-xyz{color:red} \ No newline at end of file +.bar.svelte-xyz.svelte-xyz{color:red} \ No newline at end of file diff --git a/test/css/samples/unused-selector-ternary/expected.css b/test/css/samples/unused-selector-ternary/expected.css index 16fbddce586c..6c46e9a3c386 100644 --- a/test/css/samples/unused-selector-ternary/expected.css +++ b/test/css/samples/unused-selector-ternary/expected.css @@ -1 +1 @@ -.active.svelte-xyz{color:red}.inactive.svelte-xyz{color:blue} \ No newline at end of file +.active.svelte-xyz.svelte-xyz{color:red}.inactive.svelte-xyz.svelte-xyz{color:blue} \ No newline at end of file diff --git a/test/css/samples/unused-selector/expected.css b/test/css/samples/unused-selector/expected.css index 431f7041061e..1235588b8880 100644 --- a/test/css/samples/unused-selector/expected.css +++ b/test/css/samples/unused-selector/expected.css @@ -1 +1 @@ -.foo.svelte-xyz{color:red} \ No newline at end of file +.foo.svelte-xyz.svelte-xyz{color:red} \ No newline at end of file diff --git a/test/js/samples/collapses-text-around-comments/expected.js b/test/js/samples/collapses-text-around-comments/expected.js index 6fef0f9490d8..da32e2da5e58 100644 --- a/test/js/samples/collapses-text-around-comments/expected.js +++ b/test/js/samples/collapses-text-around-comments/expected.js @@ -16,7 +16,7 @@ import { function add_css() { var style = element("style"); style.id = "svelte-1a7i8ec-style"; - style.textContent = "p.svelte-1a7i8ec{color:red}"; + style.textContent = "p.svelte-1a7i8ec.svelte-1a7i8ec{color:red}"; append(document.head, style); } @@ -63,4 +63,4 @@ class Component extends SvelteComponent { } } -export default Component; \ No newline at end of file +export default Component; diff --git a/test/js/samples/css-media-query/expected.js b/test/js/samples/css-media-query/expected.js index f4776700599d..fac7a97ee6b8 100644 --- a/test/js/samples/css-media-query/expected.js +++ b/test/js/samples/css-media-query/expected.js @@ -14,7 +14,7 @@ import { function add_css() { var style = element("style"); style.id = "svelte-1slhpfn-style"; - style.textContent = "@media(min-width: 1px){div.svelte-1slhpfn{color:red}}"; + style.textContent = "@media(min-width: 1px){div.svelte-1slhpfn.svelte-1slhpfn{color:red}}"; append(document.head, style); } @@ -46,4 +46,4 @@ class Component extends SvelteComponent { } } -export default Component; \ No newline at end of file +export default Component; diff --git a/test/server-side-rendering/samples/styles-nested/_expected.css b/test/server-side-rendering/samples/styles-nested/_expected.css index 775ae8a91cff..61ba741dbc75 100644 --- a/test/server-side-rendering/samples/styles-nested/_expected.css +++ b/test/server-side-rendering/samples/styles-nested/_expected.css @@ -1,2 +1,2 @@ -div.svelte-bzh57p{color:red} -div.svelte-4yw8vx{color:green} \ No newline at end of file +div.svelte-bzh57p.svelte-bzh57p{color:red} +div.svelte-4yw8vx.svelte-4yw8vx{color:green} \ No newline at end of file diff --git a/test/server-side-rendering/samples/styles/_expected.css b/test/server-side-rendering/samples/styles/_expected.css index 2025c64f841b..15e5c35b8904 100644 --- a/test/server-side-rendering/samples/styles/_expected.css +++ b/test/server-side-rendering/samples/styles/_expected.css @@ -1 +1 @@ -div.svelte-bzh57p{color:red} \ No newline at end of file +div.svelte-bzh57p.svelte-bzh57p{color:red} \ No newline at end of file From f92f7765b26e45e43194db3668f68b0de7bc1dc7 Mon Sep 17 00:00:00 2001 From: Almaz Date: Mon, 14 Oct 2019 21:23:42 +0200 Subject: [PATCH 2/4] Fix weired selectors --- test/css/samples/weird-selectors/expected.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/test/css/samples/weird-selectors/expected.css b/test/css/samples/weird-selectors/expected.css index d4ead167515d..03d2eb5731db 100644 --- a/test/css/samples/weird-selectors/expected.css +++ b/test/css/samples/weird-selectors/expected.css @@ -1 +1 @@ -.-foo.svelte-xyz{color:red}[title='['].svelte-xyz{color:blue} \ No newline at end of file +.-foo.svelte-xyz.svelte-xyz{color:red}[title='['].svelte-xyz.svelte-xyz{color:blue} \ No newline at end of file From 0b045386ee45adf8b6df264af510d30cd3cd16cd Mon Sep 17 00:00:00 2001 From: Tan Li Hau Date: Mon, 23 Dec 2019 09:09:44 +0800 Subject: [PATCH 3/4] feat preserve encapsulated css specificity --- src/compiler/compile/css/Selector.ts | 26 ++++++++++++------- src/compiler/compile/css/Stylesheet.ts | 19 ++++++++++---- .../samples/preserve-specificity/expected.css | 1 + .../preserve-specificity/expected.html | 12 +++++++++ .../samples/preserve-specificity/input.svelte | 24 +++++++++++++++++ 5 files changed, 67 insertions(+), 15 deletions(-) create mode 100644 test/css/samples/preserve-specificity/expected.css create mode 100644 test/css/samples/preserve-specificity/expected.html create mode 100644 test/css/samples/preserve-specificity/input.svelte diff --git a/src/compiler/compile/css/Selector.ts b/src/compiler/compile/css/Selector.ts index e4bf8ea64005..eecb0cd97594 100644 --- a/src/compiler/compile/css/Selector.ts +++ b/src/compiler/compile/css/Selector.ts @@ -63,30 +63,26 @@ export default class Selector { }); } - transform(code: MagicString, attr: string) { - const should_double_up_attr = this.blocks.filter(block => block.should_encapsulate).length === 1; + transform(code: MagicString, attr: string, max_amount_class_specificity_increased: number) { + const amount_class_specificity_to_increase = max_amount_class_specificity_increased - this.blocks.filter(block => block.should_encapsulate).length; + attr = attr.repeat(amount_class_specificity_to_increase + 1); function encapsulate_block(block: Block) { let i = block.selectors.length; - let encapsulationAttr = attr; - - if (should_double_up_attr) { - encapsulationAttr = attr + attr; - } while (i--) { const selector = block.selectors[i]; if (selector.type === 'PseudoElementSelector' || selector.type === 'PseudoClassSelector') { if (selector.name !== 'root') { - if (i === 0) code.prependRight(selector.start, encapsulationAttr); + if (i === 0) code.prependRight(selector.start, attr); } continue; } if (selector.type === 'TypeSelector' && selector.name === '*') { - code.overwrite(selector.start, selector.end, encapsulationAttr); + code.overwrite(selector.start, selector.end, attr); } else { - code.appendLeft(selector.end, encapsulationAttr); + code.appendLeft(selector.end, attr); } break; @@ -139,6 +135,16 @@ export default class Selector { } } } + + get_amount_class_specificity_increased() { + let count = 0; + for (const block of this.blocks) { + if (block.should_encapsulate) { + count ++; + } + } + return count; + } } function apply_selector(blocks: Block[], node: Element, stack: Element[], to_encapsulate: any[]): boolean { diff --git a/src/compiler/compile/css/Stylesheet.ts b/src/compiler/compile/css/Stylesheet.ts index 8342c3fa2150..998a8796876d 100644 --- a/src/compiler/compile/css/Stylesheet.ts +++ b/src/compiler/compile/css/Stylesheet.ts @@ -95,12 +95,12 @@ class Rule { code.remove(c, this.node.block.end - 1); } - transform(code: MagicString, id: string, keyframes: Map) { + transform(code: MagicString, id: string, keyframes: Map, max_amount_class_specificity_increased: number) { if (this.parent && this.parent.node.type === 'Atrule' && is_keyframes_node(this.parent.node)) return true; const attr = `.${id}`; - this.selectors.forEach(selector => selector.transform(code, attr)); + this.selectors.forEach(selector => selector.transform(code, attr, max_amount_class_specificity_increased)); this.declarations.forEach(declaration => declaration.transform(code, keyframes)); } @@ -115,6 +115,10 @@ class Rule { if (!selector.used) handler(selector); }); } + + get_max_amount_class_specificity_increased() { + return Math.max(...this.selectors.map(selector => selector.get_amount_class_specificity_increased())); + } } class Declaration { @@ -239,7 +243,7 @@ class Atrule { } } - transform(code: MagicString, id: string, keyframes: Map) { + transform(code: MagicString, id: string, keyframes: Map, max_amount_class_specificity_increased: number) { if (is_keyframes_node(this.node)) { this.node.expression.children.forEach(({ type, name, start, end }: CssNode) => { if (type === 'Identifier') { @@ -258,7 +262,7 @@ class Atrule { } this.children.forEach(child => { - child.transform(code, id, keyframes); + child.transform(code, id, keyframes, max_amount_class_specificity_increased); }); } @@ -275,6 +279,10 @@ class Atrule { child.warn_on_unused_selector(handler); }); } + + get_max_amount_class_specificity_increased() { + return Math.max(...this.children.map(rule => rule.get_max_amount_class_specificity_increased())); + } } export default class Stylesheet { @@ -397,8 +405,9 @@ export default class Stylesheet { }); if (should_transform_selectors) { + const max = Math.max(...this.children.map(rule => rule.get_max_amount_class_specificity_increased())); this.children.forEach((child: (Atrule|Rule)) => { - child.transform(code, this.id, this.keyframes); + child.transform(code, this.id, this.keyframes, max); }); } diff --git a/test/css/samples/preserve-specificity/expected.css b/test/css/samples/preserve-specificity/expected.css new file mode 100644 index 000000000000..1d4f54820fae --- /dev/null +++ b/test/css/samples/preserve-specificity/expected.css @@ -0,0 +1 @@ +a.svelte-xyz b c span.svelte-xyz{color:red;font-size:2em;font-family:'Comic Sans MS'}.foo.svelte-xyz.svelte-xyz{color:green} \ No newline at end of file diff --git a/test/css/samples/preserve-specificity/expected.html b/test/css/samples/preserve-specificity/expected.html new file mode 100644 index 000000000000..171d90d362ba --- /dev/null +++ b/test/css/samples/preserve-specificity/expected.html @@ -0,0 +1,12 @@ + + + + + Big red Comic Sans + + + Big red Comic Sans + + + + \ No newline at end of file diff --git a/test/css/samples/preserve-specificity/input.svelte b/test/css/samples/preserve-specificity/input.svelte new file mode 100644 index 000000000000..1c0a594145eb --- /dev/null +++ b/test/css/samples/preserve-specificity/input.svelte @@ -0,0 +1,24 @@ + + + + + + Big red Comic Sans + + + Big red Comic Sans + + + + + + \ No newline at end of file From ea0a87303e55beea858bef6671991fcf962e3699 Mon Sep 17 00:00:00 2001 From: Tan Li Hau Date: Mon, 23 Dec 2019 11:23:58 +0800 Subject: [PATCH 4/4] update test cases --- test/css/samples/attribute-selector-bind/expected.css | 2 +- test/css/samples/attribute-selector-only-name/expected.css | 2 +- test/css/samples/attribute-selector-unquoted/expected.css | 2 +- test/css/samples/basic/expected.css | 2 +- test/css/samples/css-vars/expected.css | 2 +- test/css/samples/directive-special-character/expected.css | 2 +- test/css/samples/empty-rule-dev/expected.css | 2 +- test/css/samples/global-keyframes/expected.css | 2 +- test/css/samples/keyframes-autoprefixed/expected.css | 2 +- test/css/samples/keyframes-from-to/expected.css | 2 +- test/css/samples/keyframes/expected.css | 2 +- test/css/samples/local-inside-global/expected.css | 2 +- test/css/samples/media-query-word/expected.css | 2 +- test/css/samples/media-query/expected.css | 2 +- test/css/samples/nested/expected.css | 2 +- test/css/samples/not-selector/expected.css | 2 +- .../expected.css | 2 +- .../expected.css | 2 +- .../expected.css | 2 +- .../expected.css | 2 +- .../expected.css | 2 +- .../expected.css | 2 +- .../expected.css | 2 +- .../expected.css | 2 +- .../omit-scoping-attribute-attribute-selector/expected.css | 2 +- .../samples/omit-scoping-attribute-class-dynamic/expected.css | 2 +- .../samples/omit-scoping-attribute-class-static/expected.css | 2 +- .../expected.css | 2 +- .../expected.css | 2 +- .../expected.css | 2 +- .../expected.css | 2 +- .../expected.css | 2 +- test/css/samples/omit-scoping-attribute-id/expected.css | 2 +- test/css/samples/omit-scoping-attribute/expected.css | 2 +- test/css/samples/pseudo-element/expected.css | 2 +- test/css/samples/spread/expected.css | 2 +- test/css/samples/supports-query/expected.css | 2 +- test/css/samples/universal-selector/expected.css | 2 +- .../samples/unknown-at-rule-with-following-rules/expected.css | 2 +- test/css/samples/unknown-at-rule/expected.css | 2 +- test/css/samples/unused-selector-leading/expected.css | 2 +- test/css/samples/unused-selector-ternary/expected.css | 2 +- test/css/samples/unused-selector/expected.css | 2 +- test/css/samples/weird-selectors/expected.css | 2 +- test/js/samples/collapses-text-around-comments/expected.js | 2 +- test/js/samples/css-media-query/expected.js | 2 +- .../server-side-rendering/samples/styles-nested/_expected.css | 4 ++-- test/server-side-rendering/samples/styles/_expected.css | 2 +- 48 files changed, 49 insertions(+), 49 deletions(-) diff --git a/test/css/samples/attribute-selector-bind/expected.css b/test/css/samples/attribute-selector-bind/expected.css index 9dc2fcc42f6e..20543c5c8e07 100644 --- a/test/css/samples/attribute-selector-bind/expected.css +++ b/test/css/samples/attribute-selector-bind/expected.css @@ -1 +1 @@ -details[open].svelte-xyz.svelte-xyz{color:red} \ No newline at end of file +details[open].svelte-xyz{color:red} \ No newline at end of file diff --git a/test/css/samples/attribute-selector-only-name/expected.css b/test/css/samples/attribute-selector-only-name/expected.css index 3ff721d49122..e2bbf5b48c59 100644 --- a/test/css/samples/attribute-selector-only-name/expected.css +++ b/test/css/samples/attribute-selector-only-name/expected.css @@ -1 +1 @@ -[foo].svelte-xyz.svelte-xyz{color:red}[baz].svelte-xyz.svelte-xyz{color:blue} \ No newline at end of file +[foo].svelte-xyz{color:red}[baz].svelte-xyz{color:blue} \ No newline at end of file diff --git a/test/css/samples/attribute-selector-unquoted/expected.css b/test/css/samples/attribute-selector-unquoted/expected.css index 7199e49c003f..9f8f88a352eb 100644 --- a/test/css/samples/attribute-selector-unquoted/expected.css +++ b/test/css/samples/attribute-selector-unquoted/expected.css @@ -1 +1 @@ -[foo=bar].svelte-xyz.svelte-xyz{color:red} \ No newline at end of file +[foo=bar].svelte-xyz{color:red} \ No newline at end of file diff --git a/test/css/samples/basic/expected.css b/test/css/samples/basic/expected.css index 1a8bdff7c6de..d466e8df9658 100644 --- a/test/css/samples/basic/expected.css +++ b/test/css/samples/basic/expected.css @@ -1 +1 @@ -div.svelte-xyz.svelte-xyz{color:red} \ No newline at end of file +div.svelte-xyz{color:red} \ No newline at end of file diff --git a/test/css/samples/css-vars/expected.css b/test/css/samples/css-vars/expected.css index 2c3986541bcc..c2bd56375b1f 100644 --- a/test/css/samples/css-vars/expected.css +++ b/test/css/samples/css-vars/expected.css @@ -1 +1 @@ -:root{--root-test:20}div.svelte-xyz.svelte-xyz{--test:10} \ No newline at end of file +:root{--root-test:20}div.svelte-xyz{--test:10} \ No newline at end of file diff --git a/test/css/samples/directive-special-character/expected.css b/test/css/samples/directive-special-character/expected.css index 730df36d9194..8b25d59d2e0b 100644 --- a/test/css/samples/directive-special-character/expected.css +++ b/test/css/samples/directive-special-character/expected.css @@ -1 +1 @@ -.foo\:bar.svelte-xyz.svelte-xyz{color:red} \ No newline at end of file +.foo\:bar.svelte-xyz{color:red} \ No newline at end of file diff --git a/test/css/samples/empty-rule-dev/expected.css b/test/css/samples/empty-rule-dev/expected.css index cb3cea0c0dbe..4013e47e5d3a 100644 --- a/test/css/samples/empty-rule-dev/expected.css +++ b/test/css/samples/empty-rule-dev/expected.css @@ -1 +1 @@ -.foo.svelte-xyz.svelte-xyz{} \ No newline at end of file +.foo.svelte-xyz{} \ No newline at end of file diff --git a/test/css/samples/global-keyframes/expected.css b/test/css/samples/global-keyframes/expected.css index 3b70bae786fc..8e716d136df4 100644 --- a/test/css/samples/global-keyframes/expected.css +++ b/test/css/samples/global-keyframes/expected.css @@ -1 +1 @@ -@keyframes why{0%{color:red}100%{color:blue}}.animated.svelte-xyz.svelte-xyz{animation:why 2s}.also-animated.svelte-xyz.svelte-xyz{animation:not-defined-here 2s} \ No newline at end of file +@keyframes why{0%{color:red}100%{color:blue}}.animated.svelte-xyz{animation:why 2s}.also-animated.svelte-xyz{animation:not-defined-here 2s} \ No newline at end of file diff --git a/test/css/samples/keyframes-autoprefixed/expected.css b/test/css/samples/keyframes-autoprefixed/expected.css index b1273fead8e1..d9866778a917 100644 --- a/test/css/samples/keyframes-autoprefixed/expected.css +++ b/test/css/samples/keyframes-autoprefixed/expected.css @@ -1 +1 @@ -@keyframes svelte-xyz-why{0%{color:red}100%{color:blue}}@-webkit-keyframes svelte-xyz-why{0%{color:red}100%{color:blue}}@-moz-keyframes svelte-xyz-why{0%{color:red}100%{color:blue}}@-o-keyframes svelte-xyz-why{0%{color:red}100%{color:blue}}.animated.svelte-xyz.svelte-xyz{-webkit-animation:svelte-xyz-why 2s;animation:svelte-xyz-why 2s}.also-animated.svelte-xyz.svelte-xyz{-webkit-animation:not-defined-here 2s;animation:not-defined-here 2s} \ No newline at end of file +@keyframes svelte-xyz-why{0%{color:red}100%{color:blue}}@-webkit-keyframes svelte-xyz-why{0%{color:red}100%{color:blue}}@-moz-keyframes svelte-xyz-why{0%{color:red}100%{color:blue}}@-o-keyframes svelte-xyz-why{0%{color:red}100%{color:blue}}.animated.svelte-xyz{-webkit-animation:svelte-xyz-why 2s;animation:svelte-xyz-why 2s}.also-animated.svelte-xyz{-webkit-animation:not-defined-here 2s;animation:not-defined-here 2s} \ No newline at end of file diff --git a/test/css/samples/keyframes-from-to/expected.css b/test/css/samples/keyframes-from-to/expected.css index 76693ed358cf..c8ee60194c80 100644 --- a/test/css/samples/keyframes-from-to/expected.css +++ b/test/css/samples/keyframes-from-to/expected.css @@ -1 +1 @@ -@keyframes svelte-xyz-why{from{color:red}to{color:blue}}.animated.svelte-xyz.svelte-xyz{animation:svelte-xyz-why 2s} \ No newline at end of file +@keyframes svelte-xyz-why{from{color:red}to{color:blue}}.animated.svelte-xyz{animation:svelte-xyz-why 2s} \ No newline at end of file diff --git a/test/css/samples/keyframes/expected.css b/test/css/samples/keyframes/expected.css index 218aa2522352..a6a1176dae46 100644 --- a/test/css/samples/keyframes/expected.css +++ b/test/css/samples/keyframes/expected.css @@ -1 +1 @@ -@keyframes svelte-xyz-why{0%{color:red}100%{color:blue}}.animated.svelte-xyz.svelte-xyz{animation:svelte-xyz-why 2s}.also-animated.svelte-xyz.svelte-xyz{animation:not-defined-here 2s} \ No newline at end of file +@keyframes svelte-xyz-why{0%{color:red}100%{color:blue}}.animated.svelte-xyz{animation:svelte-xyz-why 2s}.also-animated.svelte-xyz{animation:not-defined-here 2s} \ No newline at end of file diff --git a/test/css/samples/local-inside-global/expected.css b/test/css/samples/local-inside-global/expected.css index f960d4c78276..40af67afbaf6 100644 --- a/test/css/samples/local-inside-global/expected.css +++ b/test/css/samples/local-inside-global/expected.css @@ -1 +1 @@ -div .foo.svelte-xyz.svelte-xyz{color:red}div>.foo.svelte-xyz.svelte-xyz{font-weight:bold} \ No newline at end of file +div .foo.svelte-xyz{color:red}div>.foo.svelte-xyz{font-weight:bold} \ No newline at end of file diff --git a/test/css/samples/media-query-word/expected.css b/test/css/samples/media-query-word/expected.css index e3ec204b8229..d2a288ed7278 100644 --- a/test/css/samples/media-query-word/expected.css +++ b/test/css/samples/media-query-word/expected.css @@ -1 +1 @@ -@media only screen and (min-width: 400px){div.svelte-xyz.svelte-xyz{color:red}} \ No newline at end of file +@media only screen and (min-width: 400px){div.svelte-xyz{color:red}} \ No newline at end of file diff --git a/test/css/samples/media-query/expected.css b/test/css/samples/media-query/expected.css index d08f53153d73..8ea74bf3b1a4 100644 --- a/test/css/samples/media-query/expected.css +++ b/test/css/samples/media-query/expected.css @@ -1 +1 @@ -@media(min-width: 400px){.large-screen.svelte-xyz.svelte-xyz{display:block}} \ No newline at end of file +@media(min-width: 400px){.large-screen.svelte-xyz{display:block}} \ No newline at end of file diff --git a/test/css/samples/nested/expected.css b/test/css/samples/nested/expected.css index afdb2c5c8fda..87ca7335f666 100644 --- a/test/css/samples/nested/expected.css +++ b/test/css/samples/nested/expected.css @@ -1 +1 @@ -.foo.svelte-xyz.svelte-xyz{color:red}.bar.svelte-xyz.svelte-xyz{font-style:italic} \ No newline at end of file +.foo.svelte-xyz{color:red}.bar.svelte-xyz{font-style:italic} \ No newline at end of file diff --git a/test/css/samples/not-selector/expected.css b/test/css/samples/not-selector/expected.css index dbc6edd5f68f..83a819a9e0c2 100644 --- a/test/css/samples/not-selector/expected.css +++ b/test/css/samples/not-selector/expected.css @@ -1 +1 @@ -.svelte-xyz.svelte-xyz:not(.foo){color:red} \ No newline at end of file +.svelte-xyz:not(.foo){color:red} \ No newline at end of file diff --git a/test/css/samples/omit-scoping-attribute-attribute-selector-contains/expected.css b/test/css/samples/omit-scoping-attribute-attribute-selector-contains/expected.css index 48488b229239..4d1d8d14ff7c 100644 --- a/test/css/samples/omit-scoping-attribute-attribute-selector-contains/expected.css +++ b/test/css/samples/omit-scoping-attribute-attribute-selector-contains/expected.css @@ -1 +1 @@ -[data-foo*='bar'].svelte-xyz.svelte-xyz{color:red} \ No newline at end of file +[data-foo*='bar'].svelte-xyz{color:red} \ No newline at end of file diff --git a/test/css/samples/omit-scoping-attribute-attribute-selector-equals-case-insensitive/expected.css b/test/css/samples/omit-scoping-attribute-attribute-selector-equals-case-insensitive/expected.css index 2c3699990149..80b6feebca1c 100644 --- a/test/css/samples/omit-scoping-attribute-attribute-selector-equals-case-insensitive/expected.css +++ b/test/css/samples/omit-scoping-attribute-attribute-selector-equals-case-insensitive/expected.css @@ -1 +1 @@ -[data-foo='bar' i].svelte-xyz.svelte-xyz{color:red} \ No newline at end of file +[data-foo='bar' i].svelte-xyz{color:red} \ No newline at end of file diff --git a/test/css/samples/omit-scoping-attribute-attribute-selector-equals-dynamic/expected.css b/test/css/samples/omit-scoping-attribute-attribute-selector-equals-dynamic/expected.css index cb0b85b62f60..fd8a9a15eeb6 100644 --- a/test/css/samples/omit-scoping-attribute-attribute-selector-equals-dynamic/expected.css +++ b/test/css/samples/omit-scoping-attribute-attribute-selector-equals-dynamic/expected.css @@ -1 +1 @@ -[data-foo='bar'].svelte-xyz.svelte-xyz{color:red} \ No newline at end of file +[data-foo='bar'].svelte-xyz{color:red} \ No newline at end of file diff --git a/test/css/samples/omit-scoping-attribute-attribute-selector-equals/expected.css b/test/css/samples/omit-scoping-attribute-attribute-selector-equals/expected.css index cb0b85b62f60..fd8a9a15eeb6 100644 --- a/test/css/samples/omit-scoping-attribute-attribute-selector-equals/expected.css +++ b/test/css/samples/omit-scoping-attribute-attribute-selector-equals/expected.css @@ -1 +1 @@ -[data-foo='bar'].svelte-xyz.svelte-xyz{color:red} \ No newline at end of file +[data-foo='bar'].svelte-xyz{color:red} \ No newline at end of file diff --git a/test/css/samples/omit-scoping-attribute-attribute-selector-pipe-equals/expected.css b/test/css/samples/omit-scoping-attribute-attribute-selector-pipe-equals/expected.css index 6c00808dfb0c..95f6faeb028e 100644 --- a/test/css/samples/omit-scoping-attribute-attribute-selector-pipe-equals/expected.css +++ b/test/css/samples/omit-scoping-attribute-attribute-selector-pipe-equals/expected.css @@ -1 +1 @@ -[data-foo|='bar'].svelte-xyz.svelte-xyz{color:red} \ No newline at end of file +[data-foo|='bar'].svelte-xyz{color:red} \ No newline at end of file diff --git a/test/css/samples/omit-scoping-attribute-attribute-selector-prefix/expected.css b/test/css/samples/omit-scoping-attribute-attribute-selector-prefix/expected.css index d2279d908dff..3a30f1f017e8 100644 --- a/test/css/samples/omit-scoping-attribute-attribute-selector-prefix/expected.css +++ b/test/css/samples/omit-scoping-attribute-attribute-selector-prefix/expected.css @@ -1 +1 @@ -[data-foo^='bar'].svelte-xyz.svelte-xyz{color:red} \ No newline at end of file +[data-foo^='bar'].svelte-xyz{color:red} \ No newline at end of file diff --git a/test/css/samples/omit-scoping-attribute-attribute-selector-suffix/expected.css b/test/css/samples/omit-scoping-attribute-attribute-selector-suffix/expected.css index aa540ce5db30..de8d18cc3b33 100644 --- a/test/css/samples/omit-scoping-attribute-attribute-selector-suffix/expected.css +++ b/test/css/samples/omit-scoping-attribute-attribute-selector-suffix/expected.css @@ -1 +1 @@ -[data-foo$='bar'].svelte-xyz.svelte-xyz{color:red} \ No newline at end of file +[data-foo$='bar'].svelte-xyz{color:red} \ No newline at end of file diff --git a/test/css/samples/omit-scoping-attribute-attribute-selector-word-equals/expected.css b/test/css/samples/omit-scoping-attribute-attribute-selector-word-equals/expected.css index 12bd34a49bce..fabcbade4df0 100644 --- a/test/css/samples/omit-scoping-attribute-attribute-selector-word-equals/expected.css +++ b/test/css/samples/omit-scoping-attribute-attribute-selector-word-equals/expected.css @@ -1 +1 @@ -[data-foo~='bar'].svelte-xyz.svelte-xyz{color:red} \ No newline at end of file +[data-foo~='bar'].svelte-xyz{color:red} \ No newline at end of file diff --git a/test/css/samples/omit-scoping-attribute-attribute-selector/expected.css b/test/css/samples/omit-scoping-attribute-attribute-selector/expected.css index be9e02b82c2f..ddb620207d2b 100644 --- a/test/css/samples/omit-scoping-attribute-attribute-selector/expected.css +++ b/test/css/samples/omit-scoping-attribute-attribute-selector/expected.css @@ -1 +1 @@ -[autoplay].svelte-xyz.svelte-xyz{color:red} \ No newline at end of file +[autoplay].svelte-xyz{color:red} \ No newline at end of file diff --git a/test/css/samples/omit-scoping-attribute-class-dynamic/expected.css b/test/css/samples/omit-scoping-attribute-class-dynamic/expected.css index 1235588b8880..431f7041061e 100644 --- a/test/css/samples/omit-scoping-attribute-class-dynamic/expected.css +++ b/test/css/samples/omit-scoping-attribute-class-dynamic/expected.css @@ -1 +1 @@ -.foo.svelte-xyz.svelte-xyz{color:red} \ No newline at end of file +.foo.svelte-xyz{color:red} \ No newline at end of file diff --git a/test/css/samples/omit-scoping-attribute-class-static/expected.css b/test/css/samples/omit-scoping-attribute-class-static/expected.css index 1235588b8880..431f7041061e 100644 --- a/test/css/samples/omit-scoping-attribute-class-static/expected.css +++ b/test/css/samples/omit-scoping-attribute-class-static/expected.css @@ -1 +1 @@ -.foo.svelte-xyz.svelte-xyz{color:red} \ No newline at end of file +.foo.svelte-xyz{color:red} \ No newline at end of file diff --git a/test/css/samples/omit-scoping-attribute-descendant-global-inner-class/expected.css b/test/css/samples/omit-scoping-attribute-descendant-global-inner-class/expected.css index 55857f37bd2c..f3653403a5b9 100644 --- a/test/css/samples/omit-scoping-attribute-descendant-global-inner-class/expected.css +++ b/test/css/samples/omit-scoping-attribute-descendant-global-inner-class/expected.css @@ -1 +1 @@ -.foo.svelte-xyz.svelte-xyz .bar{color:red} \ No newline at end of file +.foo.svelte-xyz .bar{color:red} \ No newline at end of file diff --git a/test/css/samples/omit-scoping-attribute-descendant-global-inner-multiple/expected.css b/test/css/samples/omit-scoping-attribute-descendant-global-inner-multiple/expected.css index 7a240f6b0e9b..74e641549f0e 100644 --- a/test/css/samples/omit-scoping-attribute-descendant-global-inner-multiple/expected.css +++ b/test/css/samples/omit-scoping-attribute-descendant-global-inner-multiple/expected.css @@ -1 +1 @@ -div.svelte-xyz.svelte-xyz>p>em{color:red} \ No newline at end of file +div.svelte-xyz>p>em{color:red} \ No newline at end of file diff --git a/test/css/samples/omit-scoping-attribute-descendant-global-inner/expected.css b/test/css/samples/omit-scoping-attribute-descendant-global-inner/expected.css index 8afb336fbd37..338c90ab19ca 100644 --- a/test/css/samples/omit-scoping-attribute-descendant-global-inner/expected.css +++ b/test/css/samples/omit-scoping-attribute-descendant-global-inner/expected.css @@ -1 +1 @@ -div.svelte-xyz.svelte-xyz>p{color:red} \ No newline at end of file +div.svelte-xyz>p{color:red} \ No newline at end of file diff --git a/test/css/samples/omit-scoping-attribute-descendant-global-outer-multiple/expected.css b/test/css/samples/omit-scoping-attribute-descendant-global-outer-multiple/expected.css index e9664c9840d3..5d1af4c251d3 100644 --- a/test/css/samples/omit-scoping-attribute-descendant-global-outer-multiple/expected.css +++ b/test/css/samples/omit-scoping-attribute-descendant-global-outer-multiple/expected.css @@ -1 +1 @@ -div>section>p.svelte-xyz.svelte-xyz{color:red} \ No newline at end of file +div>section>p.svelte-xyz{color:red} \ No newline at end of file diff --git a/test/css/samples/omit-scoping-attribute-descendant-global-outer/expected.css b/test/css/samples/omit-scoping-attribute-descendant-global-outer/expected.css index 43eeac51f355..3666ce8f7fb2 100644 --- a/test/css/samples/omit-scoping-attribute-descendant-global-outer/expected.css +++ b/test/css/samples/omit-scoping-attribute-descendant-global-outer/expected.css @@ -1 +1 @@ -div>p.svelte-xyz.svelte-xyz{color:red} \ No newline at end of file +div>p.svelte-xyz{color:red} \ No newline at end of file diff --git a/test/css/samples/omit-scoping-attribute-id/expected.css b/test/css/samples/omit-scoping-attribute-id/expected.css index 64760db71b53..0e9e9f8b2949 100644 --- a/test/css/samples/omit-scoping-attribute-id/expected.css +++ b/test/css/samples/omit-scoping-attribute-id/expected.css @@ -1 +1 @@ -#foo.svelte-xyz.svelte-xyz{color:red} \ No newline at end of file +#foo.svelte-xyz{color:red} \ No newline at end of file diff --git a/test/css/samples/omit-scoping-attribute/expected.css b/test/css/samples/omit-scoping-attribute/expected.css index 571e07eaf451..5d8d69ac33a7 100644 --- a/test/css/samples/omit-scoping-attribute/expected.css +++ b/test/css/samples/omit-scoping-attribute/expected.css @@ -1 +1 @@ -p.svelte-xyz.svelte-xyz{color:red} \ No newline at end of file +p.svelte-xyz{color:red} \ No newline at end of file diff --git a/test/css/samples/pseudo-element/expected.css b/test/css/samples/pseudo-element/expected.css index d48d1dcb2673..bb380d40417c 100644 --- a/test/css/samples/pseudo-element/expected.css +++ b/test/css/samples/pseudo-element/expected.css @@ -1 +1 @@ -span.svelte-xyz.svelte-xyz::after{content:'i am a pseudo-element'}span.svelte-xyz.svelte-xyz:first-child{color:red}span.svelte-xyz.svelte-xyz:last-child::after{color:blue} \ No newline at end of file +span.svelte-xyz::after{content:'i am a pseudo-element'}span.svelte-xyz:first-child{color:red}span.svelte-xyz:last-child::after{color:blue} \ No newline at end of file diff --git a/test/css/samples/spread/expected.css b/test/css/samples/spread/expected.css index 5a38e3716c74..dc433318e8bc 100644 --- a/test/css/samples/spread/expected.css +++ b/test/css/samples/spread/expected.css @@ -1 +1 @@ -.foo.svelte-xyz.svelte-xyz{color:red;font-size:2em;font-family:'Comic Sans MS'} \ No newline at end of file +.foo.svelte-xyz{color:red;font-size:2em;font-family:'Comic Sans MS'} \ No newline at end of file diff --git a/test/css/samples/supports-query/expected.css b/test/css/samples/supports-query/expected.css index c28067a7af82..3fdef34d6e31 100644 --- a/test/css/samples/supports-query/expected.css +++ b/test/css/samples/supports-query/expected.css @@ -1 +1 @@ -@supports (display: grid){.maybe-grid.svelte-xyz.svelte-xyz{display:grid}} \ No newline at end of file +@supports (display: grid){.maybe-grid.svelte-xyz{display:grid}} \ No newline at end of file diff --git a/test/css/samples/universal-selector/expected.css b/test/css/samples/universal-selector/expected.css index 76460629eb7d..3eda95e44618 100644 --- a/test/css/samples/universal-selector/expected.css +++ b/test/css/samples/universal-selector/expected.css @@ -1 +1 @@ -.svelte-xyz.svelte-xyz{color:red} \ No newline at end of file +.svelte-xyz{color:red} \ No newline at end of file diff --git a/test/css/samples/unknown-at-rule-with-following-rules/expected.css b/test/css/samples/unknown-at-rule-with-following-rules/expected.css index 025966cf9c91..31c3bf9c6f1d 100644 --- a/test/css/samples/unknown-at-rule-with-following-rules/expected.css +++ b/test/css/samples/unknown-at-rule-with-following-rules/expected.css @@ -1 +1 @@ -div.svelte-xyz.svelte-xyz{@apply --funky-div;} \ No newline at end of file +div.svelte-xyz{@apply --funky-div;} \ No newline at end of file diff --git a/test/css/samples/unknown-at-rule/expected.css b/test/css/samples/unknown-at-rule/expected.css index 025966cf9c91..31c3bf9c6f1d 100644 --- a/test/css/samples/unknown-at-rule/expected.css +++ b/test/css/samples/unknown-at-rule/expected.css @@ -1 +1 @@ -div.svelte-xyz.svelte-xyz{@apply --funky-div;} \ No newline at end of file +div.svelte-xyz{@apply --funky-div;} \ No newline at end of file diff --git a/test/css/samples/unused-selector-leading/expected.css b/test/css/samples/unused-selector-leading/expected.css index 02dfae359db7..ff57dc09b92f 100644 --- a/test/css/samples/unused-selector-leading/expected.css +++ b/test/css/samples/unused-selector-leading/expected.css @@ -1 +1 @@ -.bar.svelte-xyz.svelte-xyz{color:red} \ No newline at end of file +.bar.svelte-xyz{color:red} \ No newline at end of file diff --git a/test/css/samples/unused-selector-ternary/expected.css b/test/css/samples/unused-selector-ternary/expected.css index 6c46e9a3c386..16fbddce586c 100644 --- a/test/css/samples/unused-selector-ternary/expected.css +++ b/test/css/samples/unused-selector-ternary/expected.css @@ -1 +1 @@ -.active.svelte-xyz.svelte-xyz{color:red}.inactive.svelte-xyz.svelte-xyz{color:blue} \ No newline at end of file +.active.svelte-xyz{color:red}.inactive.svelte-xyz{color:blue} \ No newline at end of file diff --git a/test/css/samples/unused-selector/expected.css b/test/css/samples/unused-selector/expected.css index 1235588b8880..431f7041061e 100644 --- a/test/css/samples/unused-selector/expected.css +++ b/test/css/samples/unused-selector/expected.css @@ -1 +1 @@ -.foo.svelte-xyz.svelte-xyz{color:red} \ No newline at end of file +.foo.svelte-xyz{color:red} \ No newline at end of file diff --git a/test/css/samples/weird-selectors/expected.css b/test/css/samples/weird-selectors/expected.css index 03d2eb5731db..d4ead167515d 100644 --- a/test/css/samples/weird-selectors/expected.css +++ b/test/css/samples/weird-selectors/expected.css @@ -1 +1 @@ -.-foo.svelte-xyz.svelte-xyz{color:red}[title='['].svelte-xyz.svelte-xyz{color:blue} \ No newline at end of file +.-foo.svelte-xyz{color:red}[title='['].svelte-xyz{color:blue} \ No newline at end of file diff --git a/test/js/samples/collapses-text-around-comments/expected.js b/test/js/samples/collapses-text-around-comments/expected.js index da32e2da5e58..8c0e9d537360 100644 --- a/test/js/samples/collapses-text-around-comments/expected.js +++ b/test/js/samples/collapses-text-around-comments/expected.js @@ -16,7 +16,7 @@ import { function add_css() { var style = element("style"); style.id = "svelte-1a7i8ec-style"; - style.textContent = "p.svelte-1a7i8ec.svelte-1a7i8ec{color:red}"; + style.textContent = "p.svelte-1a7i8ec{color:red}"; append(document.head, style); } diff --git a/test/js/samples/css-media-query/expected.js b/test/js/samples/css-media-query/expected.js index fac7a97ee6b8..0566c22ddd73 100644 --- a/test/js/samples/css-media-query/expected.js +++ b/test/js/samples/css-media-query/expected.js @@ -14,7 +14,7 @@ import { function add_css() { var style = element("style"); style.id = "svelte-1slhpfn-style"; - style.textContent = "@media(min-width: 1px){div.svelte-1slhpfn.svelte-1slhpfn{color:red}}"; + style.textContent = "@media(min-width: 1px){div.svelte-1slhpfn{color:red}}"; append(document.head, style); } diff --git a/test/server-side-rendering/samples/styles-nested/_expected.css b/test/server-side-rendering/samples/styles-nested/_expected.css index 61ba741dbc75..775ae8a91cff 100644 --- a/test/server-side-rendering/samples/styles-nested/_expected.css +++ b/test/server-side-rendering/samples/styles-nested/_expected.css @@ -1,2 +1,2 @@ -div.svelte-bzh57p.svelte-bzh57p{color:red} -div.svelte-4yw8vx.svelte-4yw8vx{color:green} \ No newline at end of file +div.svelte-bzh57p{color:red} +div.svelte-4yw8vx{color:green} \ No newline at end of file diff --git a/test/server-side-rendering/samples/styles/_expected.css b/test/server-side-rendering/samples/styles/_expected.css index 15e5c35b8904..2025c64f841b 100644 --- a/test/server-side-rendering/samples/styles/_expected.css +++ b/test/server-side-rendering/samples/styles/_expected.css @@ -1 +1 @@ -div.svelte-bzh57p.svelte-bzh57p{color:red} \ No newline at end of file +div.svelte-bzh57p{color:red} \ No newline at end of file