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:
parent
f97ac27e2a
commit
d9aa3ec5ae
@ -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;
|
||||||
}
|
}
|
||||||
|
@ -0,0 +1,7 @@
|
|||||||
|
export default {
|
||||||
|
cascade: false,
|
||||||
|
|
||||||
|
data: {
|
||||||
|
raw: '<p>raw</p>'
|
||||||
|
}
|
||||||
|
};
|
@ -0,0 +1,4 @@
|
|||||||
|
|
||||||
|
div {
|
||||||
|
color: red;
|
||||||
|
}
|
@ -0,0 +1 @@
|
|||||||
|
<div></div>
|
@ -0,0 +1,7 @@
|
|||||||
|
<div></div>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
:global(div) {
|
||||||
|
color: red;
|
||||||
|
}
|
||||||
|
</style>
|
Loading…
Reference in New Issue
Block a user