separate AST modification into Stylesheet#reify

src/css/Selector.ts

@@ -1,16 +1,19 @@
 import MagicString from 'magic-string';
+import Stylesheet from './Stylesheet';
 import { gatherPossibleValues, UNKNOWN } from './gatherPossibleValues';
 import { Validator } from '../validate/index';
 import { Node } from '../interfaces';
 
 export default class Selector {
 	node: Node;
+	stylesheet: Stylesheet;
 	blocks: Block[];
 	localBlocks: Block[];
 	used: boolean;
 
-	constructor(node: Node) {
+	constructor(node: Node, stylesheet: Stylesheet) {
 		this.node = node;
+		this.stylesheet = stylesheet;
 
 		this.blocks = groupSelectors(node);
 
@@ -31,7 +34,7 @@ export default class Selector {
 
 		if (toEncapsulate.length > 0) {
 			toEncapsulate.filter((_, i) => i === 0 || i === toEncapsulate.length - 1).forEach(({ node, block }) => {
-				node.addCssClass();
+				this.stylesheet.nodesWithCssClass.add(node);
 				block.shouldEncapsulate = true;
 			});
 

src/css/Stylesheet.ts

@@ -14,10 +14,10 @@ class Rule {
 	node: Node;
 	parent: Atrule;
 
-	constructor(node: Node, parent?: Atrule) {
+	constructor(node: Node, stylesheet, parent?: Atrule) {
 		this.node = node;
 		this.parent = parent;
-		this.selectors = node.selector.children.map((node: Node) => new Selector(node));
+		this.selectors = node.selector.children.map((node: Node) => new Selector(node, stylesheet));
 		this.declarations = node.block.children.map((node: Node) => new Declaration(node));
 	}
 
@@ -274,6 +274,8 @@ export default class Stylesheet {
 	children: (Rule|Atrule)[];
 	keyframes: Map<string, string>;
 
+	nodesWithCssClass: Set<Node>;
+
 	constructor(source: string, parsed: Parsed, filename: string, cascade: boolean, dev: boolean) {
 		this.source = source;
 		this.parsed = parsed;
@@ -284,6 +286,8 @@ export default class Stylesheet {
 		this.children = [];
 		this.keyframes = new Map();
 
+		this.nodesWithCssClass = new Set();
+
 		if (parsed.css && parsed.css.children.length) {
 			this.id = `svelte-${hash(parsed.css.content.styles)}`;
 
@@ -322,7 +326,7 @@ export default class Stylesheet {
 					}
 
 					if (node.type === 'Rule') {
-						const rule = new Rule(node, currentAtrule);
+						const rule = new Rule(node, this, currentAtrule);
 						stack.push(rule);
 
 						if (currentAtrule) {
@@ -353,7 +357,7 @@ export default class Stylesheet {
 		}
 
 		if (this.cascade) {
-			if (stack.length === 0) node.addCssClass();
+			if (stack.length === 0) this.nodesWithCssClass.add(node);
 			return;
 		}
 
@@ -363,6 +367,12 @@ export default class Stylesheet {
 		}
 	}
 
+	reify() {
+		this.nodesWithCssClass.forEach((node: Node) => {
+			node.addCssClass();
+		});
+	}
+
 	render(cssOutputFilename: string, shouldTransformSelectors: boolean) {
 		if (!this.hasStyles) {
 			return { css: null, cssMap: null };
@@ -438,4 +448,4 @@ export default class Stylesheet {
 			child.warnOnUnusedSelector(handler);
 		});
 	}
-}
+}

src/generators/Generator.ts

@@ -179,6 +179,7 @@ export default class Generator {
 		}
 
 		this.walkTemplate();
+		this.stylesheet.reify();
 	}
 
 	addSourcemapLocations(node: Node) {