0
0
mirror of https://github.com/sveltejs/svelte.git synced 2024-12-01 17:30:59 +01:00

more :global(...) handling

This commit is contained in:
Rich Harris 2017-07-01 00:49:18 -04:00
parent f97ac27e2a
commit d9aa3ec5ae
5 changed files with 44 additions and 5 deletions

View File

@ -25,10 +25,25 @@ export default function extractSelectors(css: Node) :Node[] {
} }
function processSelector(selector: Node) { function processSelector(selector: Node) {
// take trailing :global(...) selectors out of consideration
let i = selector.children.length;
while (i > 2) {
const last = selector.children[i-1];
const penultimate = selector.children[i-2];
if (last.type === 'PseudoClassSelector' && last.name === 'global') {
i -= 2;
} else {
break;
}
}
const parts = selector.children.slice(0, i);
selectors.push({ selectors.push({
used: false, // TODO use this! warn on unused selectors used: false, // TODO use this! warn on unused selectors
apply: (node: Node, stack: Node[]) => { apply: (node: Node, stack: Node[]) => {
const applies = selectorAppliesTo(selector.children, node, stack.slice()); const applies = selectorAppliesTo(parts, node, stack.slice());
if (applies) { if (applies) {
node._needsCssAttribute = true; node._needsCssAttribute = true;
@ -52,15 +67,20 @@ function selectorAppliesTo(parts: Node[], node: Node, stack: Node[]) {
let j = stack.length; let j = stack.length;
while (i--) { while (i--) {
if (!node) {
return parts.every((part: Node) => {
return part.type === 'Combinator' || (part.type === 'PseudoClassSelector' && part.name === 'global');
});
}
const part = parts[i]; const part = parts[i];
if (part.type === 'PseudoClassSelector' && part.name === 'global') { if (part.type === 'PseudoClassSelector' && part.name === 'global') {
// bail // TODO shouldn't see this here... maybe we should enforce that :global(...)
return true; // cannot be sandwiched between non-global selectors?
return false;
} }
if (!node) return false;
if (part.type === 'PseudoClassSelector' || part.type === 'PseudoElementSelector') { if (part.type === 'PseudoClassSelector' || part.type === 'PseudoElementSelector') {
continue; continue;
} }

View File

@ -0,0 +1,7 @@
export default {
cascade: false,
data: {
raw: '<p>raw</p>'
}
};

View File

@ -0,0 +1,4 @@
div {
color: red;
}

View File

@ -0,0 +1 @@
<div></div>

View File

@ -0,0 +1,7 @@
<div></div>
<style>
:global(div) {
color: red;
}
</style>