-
-
Notifications
You must be signed in to change notification settings - Fork 4.1k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Browse files
Browse the repository at this point in the history
Only apply svelte-123xyz attributes where necessary
- Loading branch information
Showing
130 changed files
with
1,179 additions
and
133 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,180 @@ | ||
| import MagicString from 'magic-string'; | ||
| import { groupSelectors, isGlobalSelector, walkRules } from '../utils/css'; | ||
| import { Node } from '../interfaces'; | ||
|
|
||
| export default class Selector { | ||
| node: Node; | ||
| blocks: any; // TODO | ||
| parts: Node[]; | ||
| used: boolean; | ||
|
|
||
| constructor(node: Node) { | ||
| this.node = node; | ||
|
|
||
| this.blocks = groupSelectors(this.node); | ||
|
|
||
| // take trailing :global(...) selectors out of consideration | ||
| let i = node.children.length; | ||
| while (i > 2) { | ||
| const last = node.children[i-1]; | ||
| const penultimate = node.children[i-2]; | ||
|
|
||
| if (last.type === 'PseudoClassSelector' && last.name === 'global') { | ||
| i -= 2; | ||
| } else { | ||
| break; | ||
| } | ||
| } | ||
|
|
||
| this.parts = node.children.slice(0, i); | ||
|
|
||
| this.used = this.blocks[0].global; | ||
| } | ||
|
|
||
| apply(node: Node, stack: Node[]) { | ||
| const applies = selectorAppliesTo(this.parts, node, stack.slice()); | ||
|
|
||
| if (applies) { | ||
| this.used = true; | ||
|
|
||
| // add svelte-123xyz attribute to outermost and innermost | ||
| // elements — no need to add it to intermediate elements | ||
| node._needsCssAttribute = true; | ||
| if (stack[0] && this.node.children.find(isDescendantSelector)) stack[0]._needsCssAttribute = true; | ||
| } | ||
| } | ||
|
|
||
| transform(code: MagicString, attr: string) { | ||
| function encapsulateBlock(block) { | ||
| let i = block.selectors.length; | ||
| while (i--) { | ||
| const selector = block.selectors[i]; | ||
| if (selector.type === 'PseudoElementSelector' || selector.type === 'PseudoClassSelector') continue; | ||
|
|
||
| if (selector.type === 'TypeSelector' && selector.name === '*') { | ||
| code.overwrite(selector.start, selector.end, attr); | ||
| } else { | ||
| code.appendLeft(selector.end, attr); | ||
| } | ||
|
|
||
| return; | ||
| } | ||
| } | ||
|
|
||
| this.blocks.forEach((block, i) => { | ||
| if (block.global) { | ||
| const selector = block.selectors[0]; | ||
| const first = selector.children[0]; | ||
| const last = selector.children[selector.children.length - 1]; | ||
| code.remove(selector.start, first.start).remove(last.end, selector.end); | ||
| } else if (i === 0 || i === this.blocks.length - 1) { | ||
| encapsulateBlock(block); | ||
| } | ||
| }); | ||
| } | ||
| } | ||
|
|
||
| function isDescendantSelector(selector: Node) { | ||
| return selector.type === 'WhiteSpace' || selector.type === 'Combinator'; | ||
| } | ||
|
|
||
| function selectorAppliesTo(parts: Node[], node: Node, stack: Node[]): boolean { | ||
| let i = parts.length; | ||
| let j = stack.length; | ||
|
|
||
| while (i--) { | ||
| if (!node) { | ||
| return parts.every((part: Node) => { | ||
| return part.type === 'Combinator' || (part.type === 'PseudoClassSelector' && part.name === 'global'); | ||
| }); | ||
| } | ||
|
|
||
| const part = parts[i]; | ||
|
|
||
| if (part.type === 'PseudoClassSelector' && part.name === 'global') { | ||
| // TODO shouldn't see this here... maybe we should enforce that :global(...) | ||
| // cannot be sandwiched between non-global selectors? | ||
| return false; | ||
| } | ||
|
|
||
| if (part.type === 'PseudoClassSelector' || part.type === 'PseudoElementSelector') { | ||
| continue; | ||
| } | ||
|
|
||
| if (part.type === 'ClassSelector') { | ||
| if (!attributeMatches(node, 'class', part.name, '~=', false)) return false; | ||
| } | ||
|
|
||
| else if (part.type === 'IdSelector') { | ||
| if (!attributeMatches(node, 'id', part.name, '=', false)) return false; | ||
| } | ||
|
|
||
| else if (part.type === 'AttributeSelector') { | ||
| if (!attributeMatches(node, part.name.name, part.value && unquote(part.value.value), part.operator, part.flags)) return false; | ||
| } | ||
|
|
||
| else if (part.type === 'TypeSelector') { | ||
| if (part.name === '*') return true; | ||
| if (node.name !== part.name) return false; | ||
| } | ||
|
|
||
| else if (part.type === 'WhiteSpace') { | ||
| parts = parts.slice(0, i); | ||
|
|
||
| while (stack.length) { | ||
| if (selectorAppliesTo(parts, stack.pop(), stack)) { | ||
| return true; | ||
| } | ||
| } | ||
|
|
||
| return false; | ||
| } | ||
|
|
||
| else if (part.type === 'Combinator') { | ||
| if (part.name === '>') { | ||
| return selectorAppliesTo(parts.slice(0, i), stack.pop(), stack); | ||
| } | ||
|
|
||
| // TODO other combinators | ||
| return true; | ||
| } | ||
|
|
||
| else { | ||
| // bail. TODO figure out what these could be | ||
| return true; | ||
| } | ||
| } | ||
|
|
||
| return true; | ||
| } | ||
|
|
||
| const operators = { | ||
| '=' : (value: string, flags: string) => new RegExp(`^${value}$`, flags), | ||
| '~=': (value: string, flags: string) => new RegExp(`\\b${value}\\b`, flags), | ||
| '|=': (value: string, flags: string) => new RegExp(`^${value}(-.+)?$`, flags), | ||
| '^=': (value: string, flags: string) => new RegExp(`^${value}`, flags), | ||
| '$=': (value: string, flags: string) => new RegExp(`${value}$`, flags), | ||
| '*=': (value: string, flags: string) => new RegExp(value, flags) | ||
| }; | ||
|
|
||
| function attributeMatches(node: Node, name: string, expectedValue: string, operator: string, caseInsensitive: boolean) { | ||
| const attr = node.attributes.find((attr: Node) => attr.name === name); | ||
| if (!attr) return false; | ||
| if (attr.value === true) return operator === null; | ||
| if (isDynamic(attr.value)) return true; | ||
|
|
||
| const actualValue = attr.value[0].data; | ||
|
|
||
| const pattern = operators[operator](expectedValue, caseInsensitive ? 'i' : ''); | ||
| return pattern.test(actualValue); | ||
| } | ||
|
|
||
| function isDynamic(value: Node) { | ||
| return value.length > 1 || value[0].type !== 'Text'; | ||
| } | ||
|
|
||
| function unquote(str: string) { | ||
| if (str[0] === str[str.length - 1] && str[0] === "'" || str[0] === '"') { | ||
| return str.slice(1, str.length - 1); | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.