Only apply svelte-123xyz attributes where necessary

src/generators/Generator.ts

@@ -13,6 +13,7 @@ import annotateWithScopes from '../utils/annotateWithScopes';
 import clone from '../utils/clone';
 import DomBlock from './dom/Block';
 import SsrBlock from './server-side-rendering/Block';
+import extractSelectors from './extractSelectors';
 import { Node, Parsed, CompileOptions } from '../interfaces';
 
 const test = typeof global !== 'undefined' && global.__svelte_test;
@@ -40,6 +41,8 @@ export default class Generator {
 	cssId: string;
 	usesRefs: boolean;
 
+	selectors: any[]; // TODO how to indicate it takes `(Node[]) => boolean` functions?
+
 	importedNames: Set<string>;
 	aliases: Map<string, string>;
 	usedNames: Set<string>;
@@ -76,6 +79,8 @@ export default class Generator {
 		this.cssId = parsed.css ? `svelte-${parsed.hash}` : '';
 		this.usesRefs = false;
 
+		this.selectors = extractSelectors(parsed.css);
+
 		// allow compiler to deconflict user's `import { get } from 'whatever'` and
 		// Svelte's builtin `import { get, ... } from 'svelte/shared.ts'`;
 		this.importedNames = new Set();
@@ -211,6 +216,20 @@ export default class Generator {
 		};
 	}
 
+	applyCss(node: Node, stack: Node[]) {
+		if (!this.cssId) return;
+
+		if (this.cascade) {
+			if (stack.length === 0) node._needsCssAttribute = true;
+			return;
+		}
+
+		for (let i = 0; i < this.selectors.length; i += 1) {
+			const selector = this.selectors[i];
+			selector.apply(node, stack);
+		}
+	}
+
 	findDependencies(
 		contextDependencies: Map<string, string[]>,
 		indexes: Map<string, string>,

src/generators/dom/index.ts

@@ -62,7 +62,7 @@ export default function dom(
 	const { block, state } = preprocess(generator, namespace, parsed.html);
 
 	parsed.html.children.forEach((node: Node) => {
-		visit(generator, block, state, node);
+		visit(generator, block, state, node, []);
 	});
 
 	const builder = new CodeBuilder();

src/generators/dom/preprocess.ts

@@ -40,6 +40,7 @@ const preprocessors = {
 		block: Block,
 		state: State,
 		node: Node,
+		elementStack: Node[],
 		stripWhitespace: boolean
 	) => {
 		const dependencies = block.findDependencies(node.expression);
@@ -55,6 +56,7 @@ const preprocessors = {
 		block: Block,
 		state: State,
 		node: Node,
+		elementStack: Node[],
 		stripWhitespace: boolean
 	) => {
 		const dependencies = block.findDependencies(node.expression);
@@ -66,7 +68,14 @@ const preprocessors = {
 		node._state = getChildState(state, { basename, name });
 	},
 
-	Text: (generator: DomGenerator, block: Block, state: State, node: Node, stripWhitespace: boolean) => {
+	Text: (
+		generator: DomGenerator,
+		block: Block,
+		state: State,
+		node: Node,
+		elementStack: Node[],
+		stripWhitespace: boolean
+	) => {
 		node._state = getChildState(state);
 
 		if (!/\S/.test(node.data)) {
@@ -83,6 +92,7 @@ const preprocessors = {
 		block: Block,
 		state: State,
 		node: Node,
+		elementStack: Node[],
 		stripWhitespace: boolean,
 		nextSibling: Node
 	) => {
@@ -102,7 +112,7 @@ const preprocessors = {
 			node._state = getChildState(state);
 
 			blocks.push(node._block);
-			preprocessChildren(generator, node._block, node._state, node, stripWhitespace, node);
+			preprocessChildren(generator, node._block, node._state, node, elementStack, stripWhitespace, nextSibling);
 
 			if (node._block.dependencies.size > 0) {
 				dynamic = true;
@@ -127,6 +137,7 @@ const preprocessors = {
 					node.else._block,
 					node.else._state,
 					node.else,
+					elementStack,
 					stripWhitespace,
 					nextSibling
 				);
@@ -154,6 +165,7 @@ const preprocessors = {
 		block: Block,
 		state: State,
 		node: Node,
+		elementStack: Node[],
 		stripWhitespace: boolean,
 		nextSibling: Node
 	) => {
@@ -202,7 +214,7 @@ const preprocessors = {
 		});
 
 		generator.blocks.push(node._block);
-		preprocessChildren(generator, node._block, node._state, node, stripWhitespace, nextSibling);
+		preprocessChildren(generator, node._block, node._state, node, elementStack, stripWhitespace, nextSibling);
 		block.addDependencies(node._block.dependencies);
 		node._block.hasUpdateMethod = node._block.dependencies.size > 0;
 
@@ -219,6 +231,7 @@ const preprocessors = {
 				node.else._block,
 				node.else._state,
 				node.else,
+				elementStack,
 				stripWhitespace,
 				nextSibling
 			);
@@ -231,6 +244,7 @@ const preprocessors = {
 		block: Block,
 		state: State,
 		node: Node,
+		elementStack: Node[],
 		stripWhitespace: boolean,
 		nextSibling: Node
 	) => {
@@ -315,6 +329,8 @@ const preprocessors = {
 					: state.namespace,
 				allUsedContexts: [],
 			});
+
+			generator.applyCss(node, elementStack);
 		}
 
 		if (node.children.length) {
@@ -328,12 +344,12 @@ const preprocessors = {
 				});
 
 				generator.blocks.push(node._block);
-				preprocessChildren(generator, node._block, node._state, node, stripWhitespace, nextSibling);
+				preprocessChildren(generator, node._block, node._state, node, elementStack, stripWhitespace, nextSibling);
 				block.addDependencies(node._block.dependencies);
 				node._block.hasUpdateMethod = node._block.dependencies.size > 0;
 			} else {
 				if (node.name === 'pre' || node.name === 'textarea') stripWhitespace = false;
-				preprocessChildren(generator, block, node._state, node, stripWhitespace, nextSibling);
+				preprocessChildren(generator, block, node._state, node, elementStack.concat(node), stripWhitespace, nextSibling);
 			}
 		}
 	},
@@ -344,6 +360,7 @@ function preprocessChildren(
 	block: Block,
 	state: State,
 	node: Node,
+	elementStack: Node[],
 	stripWhitespace: boolean,
 	nextSibling: Node
 ) {
@@ -373,7 +390,7 @@ function preprocessChildren(
 
 	cleaned.forEach((child: Node, i: number) => {
 		const preprocessor = preprocessors[child.type];
-		if (preprocessor) preprocessor(generator, block, state, child, stripWhitespace, cleaned[i + 1] || nextSibling);
+		if (preprocessor) preprocessor(generator, block, state, child, elementStack, stripWhitespace, cleaned[i + 1] || nextSibling);
 
 		if (lastChild) {
 			lastChild.next = child;
@@ -432,7 +449,7 @@ export default function preprocess(
 	};
 
 	generator.blocks.push(block);
-	preprocessChildren(generator, block, state, node, true, null);
+	preprocessChildren(generator, block, state, node, [], true, null);
 	block.hasUpdateMethod = block.dependencies.size > 0;
 
 	return { block, state };

src/generators/dom/visit.ts

@@ -2,13 +2,15 @@ import visitors from './visitors/index';
 import { DomGenerator } from './index';
 import Block from './Block';
 import { Node } from '../../interfaces';
+import { State } from './interfaces';
 
 export default function visit(
 	generator: DomGenerator,
 	block: Block,
-	state,
-	node: Node
+	state: State,
+	node: Node,
+	elementStack: Node[]
 ) {
 	const visitor = visitors[node.type];
-	visitor(generator, block, state, node);
+	visitor(generator, block, state, node, elementStack);
 }

src/generators/dom/visitors/Component/Component.ts

@@ -40,7 +40,8 @@ export default function visitComponent(
 	generator: DomGenerator,
 	block: Block,
 	state: State,
-	node: Node
+	node: Node,
+	elementStack: Node[]
 ) {
 	const hasChildren = node.children.length > 0;
 	const name = block.getUniqueName(
@@ -121,7 +122,7 @@ export default function visitComponent(
 		const childBlock = node._block;
 
 		node.children.forEach((child: Node) => {
-			visit(generator, childBlock, childState, child);
+			visit(generator, childBlock, childState, child, elementStack);
 		});
 
 		const yieldFragment = block.getUniqueName(`${name}_yield_fragment`);

src/generators/dom/visitors/EachBlock.ts

@@ -9,7 +9,8 @@ export default function visitEachBlock(
 	generator: DomGenerator,
 	block: Block,
 	state: State,
-	node: Node
+	node: Node,
+	elementStack: Node[]
 ) {
 	const each_block = generator.getUniqueName(`each_block`);
 	const create_each_block = node._block.name;
@@ -117,12 +118,12 @@ export default function visitEachBlock(
 	}
 
 	node.children.forEach((child: Node) => {
-		visit(generator, node._block, node._state, child);
+		visit(generator, node._block, node._state, child, elementStack);
 	});
 
 	if (node.else) {
 		node.else.children.forEach((child: Node) => {
-			visit(generator, node.else._block, node.else._state, child);
+			visit(generator, node.else._block, node.else._state, child, elementStack);
 		});
 	}
 }

src/generators/dom/visitors/Element/Element.ts

@@ -35,14 +35,15 @@ export default function visitElement(
 	generator: DomGenerator,
 	block: Block,
 	state: State,
-	node: Node
+	node: Node,
+	elementStack: Node[]
 ) {
 	if (node.name in meta) {
 		return meta[node.name](generator, block, node);
 	}
 
 	if (generator.components.has(node.name) || node.name === ':Self') {
-		return visitComponent(generator, block, state, node);
+		return visitComponent(generator, block, state, node, elementStack);
 	}
 
 	const childState = node._state;
@@ -80,7 +81,8 @@ export default function visitElement(
 	}
 
 	// add CSS encapsulation attribute
-	if (generator.cssId && (!generator.cascade || state.isTopLevel)) {
+	// TODO add a helper for this, rather than repeating it
+	if (node._needsCssAttribute) {
 		block.builders.hydrate.addLine(
 			`@setAttribute( ${name}, '${generator.cssId}', '' );`
 		);
@@ -181,7 +183,7 @@ export default function visitElement(
 	}
 
 	node.children.forEach((child: Node) => {
-		visit(generator, block, childState, child);
+		visit(generator, block, childState, child, elementStack.concat(node));
 	});
 
 	if (node.lateUpdate) {

src/generators/dom/visitors/IfBlock.ts

@@ -19,7 +19,8 @@ function getBranches(
 	generator: DomGenerator,
 	block: Block,
 	state: State,
-	node: Node
+	node: Node,
+	elementStack: Node[]
 ) {
 	const branches = [
 		{
@@ -31,11 +32,11 @@ function getBranches(
 		},
 	];
 
-	visitChildren(generator, block, state, node);
+	visitChildren(generator, block, state, node, elementStack);
 
 	if (isElseIf(node.else)) {
 		branches.push(
-			...getBranches(generator, block, state, node.else.children[0])
+			...getBranches(generator, block, state, node.else.children[0], elementStack)
 		);
 	} else {
 		branches.push({
@@ -47,7 +48,7 @@ function getBranches(
 		});
 
 		if (node.else) {
-			visitChildren(generator, block, state, node.else);
+			visitChildren(generator, block, state, node.else, elementStack);
 		}
 	}
 
@@ -58,26 +59,28 @@ function visitChildren(
 	generator: DomGenerator,
 	block: Block,
 	state: State,
-	node: Node
+	node: Node,
+	elementStack: Node[]
 ) {
 	node.children.forEach((child: Node) => {
-		visit(generator, node._block, node._state, child);
+		visit(generator, node._block, node._state, child, elementStack);
 	});
 }
 
 export default function visitIfBlock(
 	generator: DomGenerator,
 	block: Block,
 	state: State,
-	node: Node
+	node: Node,
+	elementStack: Node[]
 ) {
 	const name = generator.getUniqueName(`if_block`);
 	const anchor = node.needsAnchor
 		? block.getUniqueName(`${name}_anchor`)
 		: (node.next && node.next._state.name) || 'null';
 	const params = block.params.join(', ');
 
-	const branches = getBranches(generator, block, state, node);
+	const branches = getBranches(generator, block, state, node, elementStack);
 
 	const hasElse = isElseBranch(branches[branches.length - 1]);
 	const if_name = hasElse ? '' : `if ( ${name} ) `;