msb-public
/
svelte
mirror of https://github.com/sveltejs/svelte
1
0
Code Issues Projects Releases Wiki Activity

Fixed css selectors specificity

Browse Source
pull/3475/head
Almaz 6 years ago
parent b9f14846b0
commit 7e26169d17
48 changed files with 61 additions and 53 deletions
Show Stats Download Patch File Download Diff File

14
src/compiler/compile/css/Selector.ts
Unescape View File

@ -57,21 +57,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;

2
test/css/samples/attribute-selector-bind/expected.css
Unescape View File

@ -1 +1 @@
details[open].svelte-xyz{color:red}
details[open].svelte-xyz.svelte-xyz{color:red}

2
test/css/samples/attribute-selector-only-name/expected.css
Unescape View File

@ -1 +1 @@
[foo].svelte-xyz{color:red}[baz].svelte-xyz{color:blue}
[foo].svelte-xyz.svelte-xyz{color:red}[baz].svelte-xyz.svelte-xyz{color:blue}

2
test/css/samples/attribute-selector-unquoted/expected.css
Unescape View File

@ -1 +1 @@
[foo=bar].svelte-xyz{color:red}
[foo=bar].svelte-xyz.svelte-xyz{color:red}

2
test/css/samples/basic/expected.css
Unescape View File

@ -1 +1 @@
div.svelte-xyz{color:red}
div.svelte-xyz.svelte-xyz{color:red}

2
test/css/samples/css-vars/expected.css
Unescape View File

@ -1 +1 @@
:root{--root-test:20}div.svelte-xyz{--test:10}
:root{--root-test:20}div.svelte-xyz.svelte-xyz{--test:10}

2
test/css/samples/directive-special-character/expected.css
Unescape View File

@ -1 +1 @@
.foo\:bar.svelte-xyz{color:red}
.foo\:bar.svelte-xyz.svelte-xyz{color:red}

2
test/css/samples/empty-rule-dev/expected.css
Unescape View File

@ -1 +1 @@
.foo.svelte-xyz{}
.foo.svelte-xyz.svelte-xyz{}

2
test/css/samples/global-keyframes/expected.css
Unescape View File

@ -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}
@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}

2
test/css/samples/keyframes-autoprefixed/expected.css
Unescape View File

@ -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}
@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}

2
test/css/samples/keyframes-from-to/expected.css
Unescape View File

@ -1 +1 @@
@keyframes svelte-xyz-why{from{color:red}to{color:blue}}.animated.svelte-xyz{animation:svelte-xyz-why 2s}
@keyframes svelte-xyz-why{from{color:red}to{color:blue}}.animated.svelte-xyz.svelte-xyz{animation:svelte-xyz-why 2s}

2
test/css/samples/keyframes/expected.css
Unescape View File

@ -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}
@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}

2
test/css/samples/local-inside-global/expected.css
Unescape View File

@ -1 +1 @@
div .foo.svelte-xyz{color:red}div>.foo.svelte-xyz{font-weight:bold}
div .foo.svelte-xyz.svelte-xyz{color:red}div>.foo.svelte-xyz.svelte-xyz{font-weight:bold}

2
test/css/samples/media-query-word/expected.css
Unescape View File

@ -1 +1 @@
@media only screen and (min-width: 400px){div.svelte-xyz{color:red}}
@media only screen and (min-width: 400px){div.svelte-xyz.svelte-xyz{color:red}}

2
test/css/samples/media-query/expected.css
Unescape View File

@ -1 +1 @@
@media(min-width: 400px){.large-screen.svelte-xyz{display:block}}
@media(min-width: 400px){.large-screen.svelte-xyz.svelte-xyz{display:block}}

2
test/css/samples/nested/expected.css
Unescape View File

@ -1 +1 @@
.foo.svelte-xyz{color:red}.bar.svelte-xyz{font-style:italic}
.foo.svelte-xyz.svelte-xyz{color:red}.bar.svelte-xyz.svelte-xyz{font-style:italic}

2
test/css/samples/not-selector/expected.css
Unescape View File

@ -1 +1 @@
.svelte-xyz:not(.foo){color:red}
.svelte-xyz.svelte-xyz:not(.foo){color:red}

2
test/css/samples/omit-scoping-attribute-attribute-selector-contains/expected.css
Unescape View File

@ -1 +1 @@
[data-foo*='bar'].svelte-xyz{color:red}
[data-foo*='bar'].svelte-xyz.svelte-xyz{color:red}

2
test/css/samples/omit-scoping-attribute-attribute-selector-equals-case-insensitive/expected.css
Unescape View File

@ -1 +1 @@
[data-foo='bar' i].svelte-xyz{color:red}
[data-foo='bar' i].svelte-xyz.svelte-xyz{color:red}

2
test/css/samples/omit-scoping-attribute-attribute-selector-equals-dynamic/expected.css
Unescape View File

@ -1 +1 @@
[data-foo='bar'].svelte-xyz{color:red}
[data-foo='bar'].svelte-xyz.svelte-xyz{color:red}

2
test/css/samples/omit-scoping-attribute-attribute-selector-equals/expected.css
Unescape View File

@ -1 +1 @@
[data-foo='bar'].svelte-xyz{color:red}
[data-foo='bar'].svelte-xyz.svelte-xyz{color:red}

2
test/css/samples/omit-scoping-attribute-attribute-selector-pipe-equals/expected.css
Unescape View File

@ -1 +1 @@
[data-foo|='bar'].svelte-xyz{color:red}
[data-foo|='bar'].svelte-xyz.svelte-xyz{color:red}

2
test/css/samples/omit-scoping-attribute-attribute-selector-prefix/expected.css
Unescape View File

@ -1 +1 @@
[data-foo^='bar'].svelte-xyz{color:red}
[data-foo^='bar'].svelte-xyz.svelte-xyz{color:red}

2
test/css/samples/omit-scoping-attribute-attribute-selector-suffix/expected.css
Unescape View File

@ -1 +1 @@
[data-foo$='bar'].svelte-xyz{color:red}
[data-foo$='bar'].svelte-xyz.svelte-xyz{color:red}

2
test/css/samples/omit-scoping-attribute-attribute-selector-word-equals/expected.css
Unescape View File

@ -1 +1 @@
[data-foo~='bar'].svelte-xyz{color:red}
[data-foo~='bar'].svelte-xyz.svelte-xyz{color:red}

2
test/css/samples/omit-scoping-attribute-attribute-selector/expected.css
Unescape View File

@ -1 +1 @@
[autoplay].svelte-xyz{color:red}
[autoplay].svelte-xyz.svelte-xyz{color:red}

2
test/css/samples/omit-scoping-attribute-class-dynamic/expected.css
Unescape View File

@ -1 +1 @@
.foo.svelte-xyz{color:red}
.foo.svelte-xyz.svelte-xyz{color:red}

2
test/css/samples/omit-scoping-attribute-class-static/expected.css
Unescape View File

@ -1 +1 @@
.foo.svelte-xyz{color:red}
.foo.svelte-xyz.svelte-xyz{color:red}

2
test/css/samples/omit-scoping-attribute-descendant-global-inner-class/expected.css
Unescape View File

@ -1 +1 @@
.foo.svelte-xyz .bar{color:red}
.foo.svelte-xyz.svelte-xyz .bar{color:red}

2
test/css/samples/omit-scoping-attribute-descendant-global-inner-multiple/expected.css
Unescape View File

@ -1 +1 @@
div.svelte-xyz>p>em{color:red}
div.svelte-xyz.svelte-xyz>p>em{color:red}

2
test/css/samples/omit-scoping-attribute-descendant-global-inner/expected.css
Unescape View File

@ -1 +1 @@
div.svelte-xyz>p{color:red}
div.svelte-xyz.svelte-xyz>p{color:red}

2
test/css/samples/omit-scoping-attribute-descendant-global-outer-multiple/expected.css
Unescape View File

@ -1 +1 @@
div>section>p.svelte-xyz{color:red}
div>section>p.svelte-xyz.svelte-xyz{color:red}

2
test/css/samples/omit-scoping-attribute-descendant-global-outer/expected.css
Unescape View File

@ -1 +1 @@
div>p.svelte-xyz{color:red}
div>p.svelte-xyz.svelte-xyz{color:red}

2
test/css/samples/omit-scoping-attribute-id/expected.css
Unescape View File

@ -1 +1 @@
#foo.svelte-xyz{color:red}
#foo.svelte-xyz.svelte-xyz{color:red}

2
test/css/samples/omit-scoping-attribute/expected.css
Unescape View File

@ -1 +1 @@
p.svelte-xyz{color:red}
p.svelte-xyz.svelte-xyz{color:red}

2
test/css/samples/pseudo-element/expected.css
Unescape View File

@ -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}
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}

2
test/css/samples/spread/expected.css
Unescape View File

@ -1 +1 @@
.foo.svelte-xyz{color:red;font-size:2em;font-family:'Comic Sans MS'}
.foo.svelte-xyz.svelte-xyz{color:red;font-size:2em;font-family:'Comic Sans MS'}

2
test/css/samples/supports-query/expected.css
Unescape View File

@ -1 +1 @@
@supports (display: grid){.maybe-grid.svelte-xyz{display:grid}}
@supports (display: grid){.maybe-grid.svelte-xyz.svelte-xyz{display:grid}}

2
test/css/samples/universal-selector/expected.css
Unescape View File

@ -1 +1 @@
.svelte-xyz{color:red}
.svelte-xyz.svelte-xyz{color:red}

2
test/css/samples/unknown-at-rule-with-following-rules/expected.css
Unescape View File

@ -1 +1 @@
div.svelte-xyz{@apply --funky-div;}
div.svelte-xyz.svelte-xyz{@apply --funky-div;}

2
test/css/samples/unknown-at-rule/expected.css
Unescape View File

@ -1 +1 @@
div.svelte-xyz{@apply --funky-div;}
div.svelte-xyz.svelte-xyz{@apply --funky-div;}

2
test/css/samples/unused-selector-leading/expected.css
Unescape View File

@ -1 +1 @@
.bar.svelte-xyz{color:red}
.bar.svelte-xyz.svelte-xyz{color:red}

2
test/css/samples/unused-selector-ternary/expected.css
Unescape View File

@ -1 +1 @@
.active.svelte-xyz{color:red}.inactive.svelte-xyz{color:blue}
.active.svelte-xyz.svelte-xyz{color:red}.inactive.svelte-xyz.svelte-xyz{color:blue}

2
test/css/samples/unused-selector/expected.css
Unescape View File

@ -1 +1 @@
.foo.svelte-xyz{color:red}
.foo.svelte-xyz.svelte-xyz{color:red}

2
test/js/samples/collapses-text-around-comments/expected.js
Unescape View File

@ -15,7 +15,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);
}

2
test/js/samples/css-media-query/expected.js
Unescape View File

@ -13,7 +13,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);
}

4
test/server-side-rendering/samples/styles-nested/_expected.css
Unescape View File

@ -1,2 +1,2 @@
div.svelte-bzh57p{color:red}
div.svelte-4yw8vx{color:green}
div.svelte-bzh57p.svelte-bzh57p{color:red}
div.svelte-4yw8vx.svelte-4yw8vx{color:green}

2
test/server-side-rendering/samples/styles/_expected.css
Unescape View File

@ -1 +1 @@
div.svelte-bzh57p{color:red}
div.svelte-bzh57p.svelte-bzh57p{color:red}
Write Preview
Loading…
Cancel
Save