diff --git a/src/css/Selector.ts b/src/css/Selector.ts index aea2abbe07..658f6dc52d 100644 --- a/src/css/Selector.ts +++ b/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; }); diff --git a/src/css/Stylesheet.ts b/src/css/Stylesheet.ts index cf0b8d523f..d277905c28 100644 --- a/src/css/Stylesheet.ts +++ b/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; + nodesWithCssClass: Set; + 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); }); } -} \ No newline at end of file +} diff --git a/src/generators/Generator.ts b/src/generators/Generator.ts index 294c7fd8fa..d78bf7bbbb 100644 --- a/src/generators/Generator.ts +++ b/src/generators/Generator.ts @@ -179,6 +179,7 @@ export default class Generator { } this.walkTemplate(); + this.stylesheet.reify(); } addSourcemapLocations(node: Node) {