From 7b1299904be5d5e8de5023bcc659e02258811947 Mon Sep 17 00:00:00 2001 From: Rich Harris Date: Sat, 29 Jul 2017 15:51:15 -0400 Subject: [PATCH] minify css and remove unused styles (#697) --- src/css/Selector.ts | 63 ++++--- src/css/Stylesheet.ts | 166 +++++++++++++++--- test/css/index.js | 2 +- test/css/samples/basic/expected.css | 5 +- .../expected.css | 14 +- .../samples/cascade-false-global/expected.css | 13 +- .../cascade-false-keyframes/expected.css | 14 +- .../cascade-false-pseudo-element/expected.css | 13 +- .../expected.css | 5 +- test/css/samples/cascade-false/expected.css | 13 +- test/css/samples/keyframes/expected.css | 10 +- test/css/samples/media-query/expected.css | 7 +- .../expected.css | 5 +- .../expected.css | 5 +- .../expected.css | 5 +- .../expected.css | 5 +- .../expected.css | 5 +- .../expected.css | 5 +- .../expected.css | 5 +- .../expected.css | 5 +- .../expected.css | 5 +- .../expected.css | 5 +- .../expected.css | 5 +- .../expected.css | 5 +- .../expected.css | 5 +- .../expected.css | 5 +- .../expected.css | 5 +- .../expected.css | 5 +- .../expected.css | 4 - .../expected.css | 5 +- .../omit-scoping-attribute-id/expected.css | 5 +- .../expected.css | 5 +- .../expected.css | 5 +- .../omit-scoping-attribute/expected.css | 5 +- .../samples/universal-selector/expected.css | 5 +- test/css/samples/unused-selector/expected.css | 9 +- .../expected-bundle.js | 2 +- .../expected.js | 2 +- .../css-media-query/expected-bundle.js | 2 +- test/js/samples/css-media-query/expected.js | 2 +- .../samples/styles-nested/_actual.css | 17 +- .../samples/styles-nested/_expected.css | 17 +- .../samples/styles/_actual.css | 5 +- .../samples/styles/_expected.css | 5 +- .../samples/css-cascade-false/output.css | 6 +- .../samples/css-cascade-false/output.css.map | 2 +- test/sourcemaps/samples/css/output.css | 6 +- test/sourcemaps/samples/css/output.css.map | 2 +- 48 files changed, 236 insertions(+), 280 deletions(-) diff --git a/src/css/Selector.ts b/src/css/Selector.ts index 0ae69d6c1c..a505f15a10 100644 --- a/src/css/Selector.ts +++ b/src/css/Selector.ts @@ -2,12 +2,6 @@ import MagicString from 'magic-string'; import { Validator } from '../validate/index'; import { Node } from '../interfaces'; -interface Block { - global: boolean; - combinator: Node; - selectors: Node[] -} - export default class Selector { node: Node; blocks: Block[]; @@ -43,6 +37,19 @@ export default class Selector { } } + minify(code: MagicString) { + let c: number = null; + this.blocks.forEach((block, i) => { + if (i > 0) { + if (block.start - c > 1) { + code.overwrite(c, block.start, block.combinator.name || ' '); + } + } + + c = block.end; + }); + } + transform(code: MagicString, attr: string) { function encapsulateBlock(block: Block) { let i = block.selectors.length; @@ -203,28 +210,44 @@ function unquote(str: string) { } } +class Block { + global: boolean; + combinator: Node; + selectors: Node[] + start: number; + end: number; + + constructor(combinator: Node) { + this.combinator = combinator; + this.global = false; + this.selectors = []; + + this.start = null; + this.end = null; + } + + add(selector: Node) { + if (this.selectors.length === 0) { + this.start = selector.start; + this.global = selector.type === 'PseudoClassSelector' && selector.name === 'global'; + } + + this.selectors.push(selector); + this.end = selector.end; + } +} + function groupSelectors(selector: Node) { - let block: Block = { - global: selector.children[0].type === 'PseudoClassSelector' && selector.children[0].name === 'global', - selectors: [], - combinator: null - }; + let block: Block = new Block(null); const blocks = [block]; selector.children.forEach((child: Node, i: number) => { if (child.type === 'WhiteSpace' || child.type === 'Combinator') { - const next = selector.children[i + 1]; - - block = { - global: next.type === 'PseudoClassSelector' && next.name === 'global', - selectors: [], - combinator: child - }; - + block = new Block(child); blocks.push(block); } else { - block.selectors.push(child); + block.add(child); } }); diff --git a/src/css/Stylesheet.ts b/src/css/Stylesheet.ts index 4e61d7cd0e..d0fcd10b70 100644 --- a/src/css/Stylesheet.ts +++ b/src/css/Stylesheet.ts @@ -8,18 +8,62 @@ import { Node, Parsed, Warning } from '../interfaces'; class Rule { selectors: Selector[]; - declarations: Node[]; + declarations: Declaration[]; + node: Node; + parent: Atrule; - constructor(node: Node) { + constructor(node: Node, parent: Atrule) { + this.node = node; + this.parent = parent; this.selectors = node.selector.children.map((node: Node) => new Selector(node)); - this.declarations = node.block.children; + this.declarations = node.block.children.map((node: Node) => new Declaration(node)); + + if (parent) parent.rules.push(this); } apply(node: Node, stack: Node[]) { this.selectors.forEach(selector => selector.apply(node, stack)); // TODO move the logic in here? } + isUsed() { + if (this.parent && this.parent.node.type === 'Atrule' && this.parent.node.name === 'keyframes') return true; + return this.selectors.some(s => s.used); + } + + minify(code: MagicString, cascade: boolean) { + let c = this.node.start; + this.selectors.forEach((selector, i) => { + if (cascade || selector.used) { + const separator = i > 0 ? ',' : ''; + if ((selector.node.start - c) > separator.length) { + code.overwrite(c, selector.node.start, separator); + } + + selector.minify(code); + c = selector.node.end; + } + }); + + code.remove(c, this.node.block.start); + + c = this.node.block.start + 1; + this.declarations.forEach((declaration, i) => { + const separator = i > 0 ? ';' : ''; + if ((declaration.node.start - c) > separator.length) { + code.overwrite(c, declaration.node.start, separator); + } + + declaration.minify(code); + + c = declaration.node.end; + }); + + code.remove(c, this.node.block.end - 1); + } + transform(code: MagicString, id: string, keyframes: Map, cascade: boolean) { + if (this.parent && this.parent.node.type === 'Atrule' && this.parent.node.name === 'keyframes') return true; + const attr = `[${id}]`; if (cascade) { @@ -39,9 +83,9 @@ class Rule { const head = firstToken.name === '*' ? '' : css.slice(start, insert); const tail = css.slice(insert, end); - transformed = `${head}${attr}${tail}, ${attr} ${selectorString}`; + transformed = `${head}${attr}${tail},${attr} ${selectorString}`; } else { - transformed = `${attr}${selectorString}, ${attr} ${selectorString}`; + transformed = `${attr}${selectorString},${attr} ${selectorString}`; } code.overwrite(start, end, transformed); @@ -50,27 +94,87 @@ class Rule { this.selectors.forEach(selector => selector.transform(code, attr)); } - this.declarations.forEach((declaration: Node) => { - const property = declaration.property.toLowerCase(); - if (property === 'animation' || property === 'animation-name') { - declaration.value.children.forEach((block: Node) => { - if (block.type === 'Identifier') { - const name = block.name; - if (keyframes.has(name)) { - code.overwrite(block.start, block.end, keyframes.get(name)); - } + this.declarations.forEach(declaration => declaration.transform(code, keyframes)); + } +} + +class Declaration { + node: Node; + + constructor(node: Node) { + this.node = node; + } + + transform(code: MagicString, keyframes: Map) { + const property = this.node.property.toLowerCase(); + if (property === 'animation' || property === 'animation-name') { + this.node.value.children.forEach((block: Node) => { + if (block.type === 'Identifier') { + const name = block.name; + if (keyframes.has(name)) { + code.overwrite(block.start, block.end, keyframes.get(name)); } - }); - } - }); + } + }); + } + } + + minify(code: MagicString) { + const c = this.node.start + this.node.property.length; + const first = this.node.value.children[0]; + + if (first.start - c > 1) { + code.overwrite(c, first.start, ':'); + } } } class Atrule { node: Node; + rules: Rule[]; constructor(node: Node) { this.node = node; + this.rules = []; + } + + isUsed() { + return true; // TODO + } + + minify(code: MagicString, cascade: boolean) { + if (this.node.name === 'media') { + let c = this.node.start + 6; + if (this.node.expression.start > c) code.remove(c, this.node.expression.start); + + this.node.expression.children.forEach((query: Node) => { + // TODO minify queries + c = query.end; + }); + + code.remove(c, this.node.block.start); + } else if (this.node.name === 'keyframes') { + let c = this.node.start + 10; + if (this.node.expression.start - c > 1) code.overwrite(c, this.node.expression.start, ' '); + c = this.node.expression.end; + if (this.node.block.start - c > 0) code.remove(c, this.node.block.start); + } + + // TODO other atrules + + if (this.node.block) { + let c = this.node.block.start + 1; + + this.rules.forEach(rule => { + if (cascade || rule.isUsed()) { + code.remove(c, rule.node.start); + rule.minify(code, cascade); + c = rule.node.end; + } + }); + + code.remove(c, this.node.block.end - 1); + } } transform(code: MagicString, id: string, keyframes: Map) { @@ -133,10 +237,17 @@ export default class Stylesheet { this.atrules.push(atrule); } - if (node.type === 'Rule' && (!currentAtrule || /(media|supports|document)/.test(currentAtrule.node.name))) { - const rule = new Rule(node); - this.nodes.push(rule); + if (node.type === 'Rule') { + // TODO this is a bit confusing. Don't have a separate + // array of rules, just transform top-level nodes and + // let them worry about their children + const rule = new Rule(node, currentAtrule); + this.rules.push(rule); + + if (!currentAtrule) { + this.nodes.push(rule); + } } }, @@ -172,8 +283,6 @@ export default class Stylesheet { } const code = new MagicString(this.source); - code.remove(0, this.parsed.css.start + 7); - code.remove(this.parsed.css.end - 8, this.source.length); walk(this.parsed.css, { enter: (node: Node) => { @@ -182,6 +291,8 @@ export default class Stylesheet { } }); + // TODO all transform/minify in single pass. The mutation of + // `keyframes` here is confusing const keyframes = new Map(); this.atrules.forEach((atrule: Atrule) => { atrule.transform(code, this.id, keyframes); @@ -191,6 +302,17 @@ export default class Stylesheet { rule.transform(code, this.id, keyframes, this.cascade); }); + let c = 0; + this.nodes.forEach(node => { + if (this.cascade || node.isUsed()) { + code.remove(c, node.node.start); + node.minify(code, this.cascade); + c = node.node.end; + } + }); + + code.remove(c, this.source.length); + return { css: code.toString(), cssMap: code.generateMap({ diff --git a/test/css/index.js b/test/css/index.js index 93f7c218ea..8b4d60c2ce 100644 --- a/test/css/index.js +++ b/test/css/index.js @@ -69,7 +69,7 @@ describe("css", () => { css: read(`test/css/samples/${dir}/expected.css`) }; - assert.equal(dom.css.replace(/svelte-\d+/g, 'svelte-xyz').trim(), expected.css.trim()); + assert.equal(dom.css.replace(/svelte-\d+/g, 'svelte-xyz'), expected.css); // verify that the right elements have scoping selectors if (expected.html !== null) { diff --git a/test/css/samples/basic/expected.css b/test/css/samples/basic/expected.css index 1ece91b2e6..290ea521e4 100644 --- a/test/css/samples/basic/expected.css +++ b/test/css/samples/basic/expected.css @@ -1,4 +1 @@ - - div[svelte-xyz], [svelte-xyz] div { - color: red; - } +div[svelte-xyz],[svelte-xyz] div{color:red} \ No newline at end of file diff --git a/test/css/samples/cascade-false-global-keyframes/expected.css b/test/css/samples/cascade-false-global-keyframes/expected.css index a0741615b0..111e94b0cc 100644 --- a/test/css/samples/cascade-false-global-keyframes/expected.css +++ b/test/css/samples/cascade-false-global-keyframes/expected.css @@ -1,13 +1 @@ - - @keyframes why { - 0% { color: red; } - 100% { color: blue; } - } - - .animated[svelte-xyz] { - animation: why 2s; - } - - .also-animated[svelte-xyz] { - animation: not-defined-here 2s; - } +@keyframes why{0%{color:red}100%{color:blue}}.animated[svelte-xyz]{animation:why 2s}.also-animated[svelte-xyz]{animation:not-defined-here 2s} \ No newline at end of file diff --git a/test/css/samples/cascade-false-global/expected.css b/test/css/samples/cascade-false-global/expected.css index 96071a3d6f..698a44038b 100644 --- a/test/css/samples/cascade-false-global/expected.css +++ b/test/css/samples/cascade-false-global/expected.css @@ -1,12 +1 @@ - - div { - color: red; - } - - div.foo { - color: blue; - } - - .foo { - font-weight: bold; - } +div{color:red}div.foo{color:blue}.foo{font-weight:bold} \ No newline at end of file diff --git a/test/css/samples/cascade-false-keyframes/expected.css b/test/css/samples/cascade-false-keyframes/expected.css index 583014ae41..64fa0390eb 100644 --- a/test/css/samples/cascade-false-keyframes/expected.css +++ b/test/css/samples/cascade-false-keyframes/expected.css @@ -1,13 +1 @@ - - @keyframes svelte-xyz-why { - 0% { color: red; } - 100% { color: blue; } - } - - .animated[svelte-xyz] { - animation: svelte-xyz-why 2s; - } - - .also-animated[svelte-xyz] { - animation: not-defined-here 2s; - } +@keyframes svelte-xyz-why{0%{color:red}100%{color:blue}}.animated[svelte-xyz]{animation:svelte-xyz-why 2s}.also-animated[svelte-xyz]{animation:not-defined-here 2s} \ No newline at end of file diff --git a/test/css/samples/cascade-false-pseudo-element/expected.css b/test/css/samples/cascade-false-pseudo-element/expected.css index 5ee54847cb..edafcf9bcd 100644 --- a/test/css/samples/cascade-false-pseudo-element/expected.css +++ b/test/css/samples/cascade-false-pseudo-element/expected.css @@ -1,12 +1 @@ - - span[svelte-xyz]::after { - content: 'i am a pseudo-element'; - } - - span[svelte-xyz]:first-child { - color: red; - } - - span[svelte-xyz]:last-child::after { - color: blue; - } +span[svelte-xyz]::after{content:'i am a pseudo-element'}span[svelte-xyz]:first-child{color:red}span[svelte-xyz]:last-child::after{color:blue} \ No newline at end of file diff --git a/test/css/samples/cascade-false-universal-selector/expected.css b/test/css/samples/cascade-false-universal-selector/expected.css index ca0a6de742..b203392075 100644 --- a/test/css/samples/cascade-false-universal-selector/expected.css +++ b/test/css/samples/cascade-false-universal-selector/expected.css @@ -1,4 +1 @@ - - [svelte-xyz] { - color: red; - } +[svelte-xyz]{color:red} \ No newline at end of file diff --git a/test/css/samples/cascade-false/expected.css b/test/css/samples/cascade-false/expected.css index 39677a203a..c10ef8b18b 100644 --- a/test/css/samples/cascade-false/expected.css +++ b/test/css/samples/cascade-false/expected.css @@ -1,12 +1 @@ - - div[svelte-xyz] { - color: red; - } - - div.foo[svelte-xyz] { - color: blue; - } - - .foo[svelte-xyz] { - font-weight: bold; - } +div[svelte-xyz]{color:red}div.foo[svelte-xyz]{color:blue}.foo[svelte-xyz]{font-weight:bold} \ No newline at end of file diff --git a/test/css/samples/keyframes/expected.css b/test/css/samples/keyframes/expected.css index 53d24fc691..93b5ba3232 100644 --- a/test/css/samples/keyframes/expected.css +++ b/test/css/samples/keyframes/expected.css @@ -1,9 +1 @@ - - @keyframes svelte-xyz-why { - 0% { color: red; } - 100% { color: blue; } - } - - [svelte-xyz].animated, [svelte-xyz] .animated { - animation: svelte-xyz-why 2s; - } +@keyframes svelte-xyz-why{0%{color:red}100%{color:blue}}[svelte-xyz].animated,[svelte-xyz] .animated{animation:svelte-xyz-why 2s} \ No newline at end of file diff --git a/test/css/samples/media-query/expected.css b/test/css/samples/media-query/expected.css index 5ea1a96059..ea8cce5c00 100644 --- a/test/css/samples/media-query/expected.css +++ b/test/css/samples/media-query/expected.css @@ -1,6 +1 @@ - - @media (min-width: 400px) { - [svelte-xyz].large-screen, [svelte-xyz] .large-screen { - display: block; - } - } +@media(min-width: 400px){[svelte-xyz].large-screen,[svelte-xyz] .large-screen{display:block}} \ No newline at end of file diff --git a/test/css/samples/omit-scoping-attribute-attribute-selector-contains/expected.css b/test/css/samples/omit-scoping-attribute-attribute-selector-contains/expected.css index 957354dc6a..113585c7c5 100644 --- a/test/css/samples/omit-scoping-attribute-attribute-selector-contains/expected.css +++ b/test/css/samples/omit-scoping-attribute-attribute-selector-contains/expected.css @@ -1,4 +1 @@ - - [data-foo*='bar'][svelte-xyz] { - color: red; - } +[data-foo*='bar'][svelte-xyz]{color:red} \ No newline at end of file diff --git a/test/css/samples/omit-scoping-attribute-attribute-selector-equals-case-insensitive/expected.css b/test/css/samples/omit-scoping-attribute-attribute-selector-equals-case-insensitive/expected.css index 218ef835be..fb8bf750c4 100644 --- a/test/css/samples/omit-scoping-attribute-attribute-selector-equals-case-insensitive/expected.css +++ b/test/css/samples/omit-scoping-attribute-attribute-selector-equals-case-insensitive/expected.css @@ -1,4 +1 @@ - - [data-foo='bar' i][svelte-xyz] { - color: red; - } +[data-foo='bar' i][svelte-xyz]{color:red} \ No newline at end of file diff --git a/test/css/samples/omit-scoping-attribute-attribute-selector-equals-dynamic/expected.css b/test/css/samples/omit-scoping-attribute-attribute-selector-equals-dynamic/expected.css index 636d4206b9..95966c6258 100644 --- a/test/css/samples/omit-scoping-attribute-attribute-selector-equals-dynamic/expected.css +++ b/test/css/samples/omit-scoping-attribute-attribute-selector-equals-dynamic/expected.css @@ -1,4 +1 @@ - - [data-foo='bar'][svelte-xyz] { - color: red; - } +[data-foo='bar'][svelte-xyz]{color:red} \ No newline at end of file diff --git a/test/css/samples/omit-scoping-attribute-attribute-selector-equals/expected.css b/test/css/samples/omit-scoping-attribute-attribute-selector-equals/expected.css index 636d4206b9..95966c6258 100644 --- a/test/css/samples/omit-scoping-attribute-attribute-selector-equals/expected.css +++ b/test/css/samples/omit-scoping-attribute-attribute-selector-equals/expected.css @@ -1,4 +1 @@ - - [data-foo='bar'][svelte-xyz] { - color: red; - } +[data-foo='bar'][svelte-xyz]{color:red} \ No newline at end of file diff --git a/test/css/samples/omit-scoping-attribute-attribute-selector-pipe-equals/expected.css b/test/css/samples/omit-scoping-attribute-attribute-selector-pipe-equals/expected.css index 590f946bfb..2fa0e1f9ab 100644 --- a/test/css/samples/omit-scoping-attribute-attribute-selector-pipe-equals/expected.css +++ b/test/css/samples/omit-scoping-attribute-attribute-selector-pipe-equals/expected.css @@ -1,4 +1 @@ - - [data-foo|='bar'][svelte-xyz] { - color: red; - } +[data-foo|='bar'][svelte-xyz]{color:red} \ No newline at end of file diff --git a/test/css/samples/omit-scoping-attribute-attribute-selector-prefix/expected.css b/test/css/samples/omit-scoping-attribute-attribute-selector-prefix/expected.css index 8bcb510867..59f4342d98 100644 --- a/test/css/samples/omit-scoping-attribute-attribute-selector-prefix/expected.css +++ b/test/css/samples/omit-scoping-attribute-attribute-selector-prefix/expected.css @@ -1,4 +1 @@ - - [data-foo^='bar'][svelte-xyz] { - color: red; - } +[data-foo^='bar'][svelte-xyz]{color:red} \ No newline at end of file diff --git a/test/css/samples/omit-scoping-attribute-attribute-selector-suffix/expected.css b/test/css/samples/omit-scoping-attribute-attribute-selector-suffix/expected.css index 2d209085d0..1b47ff560d 100644 --- a/test/css/samples/omit-scoping-attribute-attribute-selector-suffix/expected.css +++ b/test/css/samples/omit-scoping-attribute-attribute-selector-suffix/expected.css @@ -1,4 +1 @@ - - [data-foo$='bar'][svelte-xyz] { - color: red; - } +[data-foo$='bar'][svelte-xyz]{color:red} \ No newline at end of file diff --git a/test/css/samples/omit-scoping-attribute-attribute-selector-word-equals/expected.css b/test/css/samples/omit-scoping-attribute-attribute-selector-word-equals/expected.css index fcacb8704f..1241c31e7f 100644 --- a/test/css/samples/omit-scoping-attribute-attribute-selector-word-equals/expected.css +++ b/test/css/samples/omit-scoping-attribute-attribute-selector-word-equals/expected.css @@ -1,4 +1 @@ - - [data-foo~='bar'][svelte-xyz] { - color: red; - } +[data-foo~='bar'][svelte-xyz]{color:red} \ No newline at end of file diff --git a/test/css/samples/omit-scoping-attribute-attribute-selector/expected.css b/test/css/samples/omit-scoping-attribute-attribute-selector/expected.css index 283a92edca..bd48ef22c5 100644 --- a/test/css/samples/omit-scoping-attribute-attribute-selector/expected.css +++ b/test/css/samples/omit-scoping-attribute-attribute-selector/expected.css @@ -1,4 +1 @@ - - [autoplay][svelte-xyz] { - color: red; - } +[autoplay][svelte-xyz]{color:red} \ No newline at end of file diff --git a/test/css/samples/omit-scoping-attribute-class-dynamic/expected.css b/test/css/samples/omit-scoping-attribute-class-dynamic/expected.css index ee6e96c597..6c4e704d2c 100644 --- a/test/css/samples/omit-scoping-attribute-class-dynamic/expected.css +++ b/test/css/samples/omit-scoping-attribute-class-dynamic/expected.css @@ -1,4 +1 @@ - - .foo[svelte-xyz] { - color: red; - } +.foo[svelte-xyz]{color:red} \ No newline at end of file diff --git a/test/css/samples/omit-scoping-attribute-class-static/expected.css b/test/css/samples/omit-scoping-attribute-class-static/expected.css index ee6e96c597..6c4e704d2c 100644 --- a/test/css/samples/omit-scoping-attribute-class-static/expected.css +++ b/test/css/samples/omit-scoping-attribute-class-static/expected.css @@ -1,4 +1 @@ - - .foo[svelte-xyz] { - color: red; - } +.foo[svelte-xyz]{color:red} \ No newline at end of file diff --git a/test/css/samples/omit-scoping-attribute-descendant-global-inner-class/expected.css b/test/css/samples/omit-scoping-attribute-descendant-global-inner-class/expected.css index e8a40fc908..fb5bc89f3e 100644 --- a/test/css/samples/omit-scoping-attribute-descendant-global-inner-class/expected.css +++ b/test/css/samples/omit-scoping-attribute-descendant-global-inner-class/expected.css @@ -1,4 +1 @@ - - .foo[svelte-xyz] .bar { - color: red; - } +.foo[svelte-xyz] .bar{color:red} \ No newline at end of file diff --git a/test/css/samples/omit-scoping-attribute-descendant-global-inner-multiple/expected.css b/test/css/samples/omit-scoping-attribute-descendant-global-inner-multiple/expected.css index 93ab1b04e5..b7415ff930 100644 --- a/test/css/samples/omit-scoping-attribute-descendant-global-inner-multiple/expected.css +++ b/test/css/samples/omit-scoping-attribute-descendant-global-inner-multiple/expected.css @@ -1,4 +1 @@ - - div[svelte-xyz] > p > em { - color: red; - } +div[svelte-xyz]>p>em{color:red} \ No newline at end of file diff --git a/test/css/samples/omit-scoping-attribute-descendant-global-inner/expected.css b/test/css/samples/omit-scoping-attribute-descendant-global-inner/expected.css index 92d8f497d7..79ef8d29dd 100644 --- a/test/css/samples/omit-scoping-attribute-descendant-global-inner/expected.css +++ b/test/css/samples/omit-scoping-attribute-descendant-global-inner/expected.css @@ -1,4 +1 @@ - - div[svelte-xyz] > p { - color: red; - } +div[svelte-xyz]>p{color:red} \ No newline at end of file diff --git a/test/css/samples/omit-scoping-attribute-descendant-global-outer-multiple/expected.css b/test/css/samples/omit-scoping-attribute-descendant-global-outer-multiple/expected.css index fa651566fb..417e702d4b 100644 --- a/test/css/samples/omit-scoping-attribute-descendant-global-outer-multiple/expected.css +++ b/test/css/samples/omit-scoping-attribute-descendant-global-outer-multiple/expected.css @@ -1,4 +1 @@ - - div > section > p[svelte-xyz] { - color: red; - } +div>section>p[svelte-xyz]{color:red} \ No newline at end of file diff --git a/test/css/samples/omit-scoping-attribute-descendant-global-outer/expected.css b/test/css/samples/omit-scoping-attribute-descendant-global-outer/expected.css index f62e230520..e0bbc1d6a1 100644 --- a/test/css/samples/omit-scoping-attribute-descendant-global-outer/expected.css +++ b/test/css/samples/omit-scoping-attribute-descendant-global-outer/expected.css @@ -1,4 +1 @@ - - div > p[svelte-xyz] { - color: red; - } +div>p[svelte-xyz]{color:red} \ No newline at end of file diff --git a/test/css/samples/omit-scoping-attribute-descendant/expected.css b/test/css/samples/omit-scoping-attribute-descendant/expected.css index 12d8add930..e69de29bb2 100644 --- a/test/css/samples/omit-scoping-attribute-descendant/expected.css +++ b/test/css/samples/omit-scoping-attribute-descendant/expected.css @@ -1,4 +0,0 @@ - - div[svelte-xyz] > p[svelte-xyz] { - color: red; - } diff --git a/test/css/samples/omit-scoping-attribute-global/expected.css b/test/css/samples/omit-scoping-attribute-global/expected.css index be34059793..6a9013fccd 100644 --- a/test/css/samples/omit-scoping-attribute-global/expected.css +++ b/test/css/samples/omit-scoping-attribute-global/expected.css @@ -1,4 +1 @@ - - div { - color: red; - } +div{color:red} \ No newline at end of file diff --git a/test/css/samples/omit-scoping-attribute-id/expected.css b/test/css/samples/omit-scoping-attribute-id/expected.css index 09133ba7ff..278f8614ab 100644 --- a/test/css/samples/omit-scoping-attribute-id/expected.css +++ b/test/css/samples/omit-scoping-attribute-id/expected.css @@ -1,4 +1 @@ - - #foo[svelte-xyz] { - color: red; - } +#foo[svelte-xyz]{color:red} \ No newline at end of file diff --git a/test/css/samples/omit-scoping-attribute-whitespace-multiple/expected.css b/test/css/samples/omit-scoping-attribute-whitespace-multiple/expected.css index b9da332c6f..f5f64cee75 100644 --- a/test/css/samples/omit-scoping-attribute-whitespace-multiple/expected.css +++ b/test/css/samples/omit-scoping-attribute-whitespace-multiple/expected.css @@ -1,4 +1 @@ - - div[svelte-xyz] section p[svelte-xyz] { - color: red; - } +div[svelte-xyz] section p[svelte-xyz]{color:red} \ No newline at end of file diff --git a/test/css/samples/omit-scoping-attribute-whitespace/expected.css b/test/css/samples/omit-scoping-attribute-whitespace/expected.css index cf24b2c3cc..8bbb1ab661 100644 --- a/test/css/samples/omit-scoping-attribute-whitespace/expected.css +++ b/test/css/samples/omit-scoping-attribute-whitespace/expected.css @@ -1,4 +1 @@ - - div[svelte-xyz] p[svelte-xyz] { - color: red; - } +div[svelte-xyz] p[svelte-xyz]{color:red} \ No newline at end of file diff --git a/test/css/samples/omit-scoping-attribute/expected.css b/test/css/samples/omit-scoping-attribute/expected.css index 4bd7298c3d..ea93f8a99a 100644 --- a/test/css/samples/omit-scoping-attribute/expected.css +++ b/test/css/samples/omit-scoping-attribute/expected.css @@ -1,4 +1 @@ - - p[svelte-xyz] { - color: red; - } +p[svelte-xyz]{color:red} \ No newline at end of file diff --git a/test/css/samples/universal-selector/expected.css b/test/css/samples/universal-selector/expected.css index ad9785f264..ef584e723a 100644 --- a/test/css/samples/universal-selector/expected.css +++ b/test/css/samples/universal-selector/expected.css @@ -1,4 +1 @@ - - [svelte-xyz], [svelte-xyz] * { - color: red; - } +[svelte-xyz],[svelte-xyz] *{color:red} \ No newline at end of file diff --git a/test/css/samples/unused-selector/expected.css b/test/css/samples/unused-selector/expected.css index c9e2ae86c0..6c4e704d2c 100644 --- a/test/css/samples/unused-selector/expected.css +++ b/test/css/samples/unused-selector/expected.css @@ -1,8 +1 @@ - - .foo[svelte-xyz] { - color: red; - } - - .bar[svelte-xyz] { - color: blue; - } +.foo[svelte-xyz]{color:red} \ No newline at end of file diff --git a/test/js/samples/collapses-text-around-comments/expected-bundle.js b/test/js/samples/collapses-text-around-comments/expected-bundle.js index 535273b636..8944797441 100644 --- a/test/js/samples/collapses-text-around-comments/expected-bundle.js +++ b/test/js/samples/collapses-text-around-comments/expected-bundle.js @@ -146,7 +146,7 @@ var template = (function () { function add_css () { var style = createElement( 'style' ); style.id = 'svelte-3590263702-style'; - style.textContent = "\n\tp[svelte-3590263702], [svelte-3590263702] p {\n\t\tcolor: red;\n\t}\n"; + style.textContent = "p[svelte-3590263702],[svelte-3590263702] p{color:red}"; appendNode( style, document.head ); } diff --git a/test/js/samples/collapses-text-around-comments/expected.js b/test/js/samples/collapses-text-around-comments/expected.js index 33931b121c..0a11f74477 100644 --- a/test/js/samples/collapses-text-around-comments/expected.js +++ b/test/js/samples/collapses-text-around-comments/expected.js @@ -11,7 +11,7 @@ var template = (function () { function add_css () { var style = createElement( 'style' ); style.id = 'svelte-3590263702-style'; - style.textContent = "\n\tp[svelte-3590263702], [svelte-3590263702] p {\n\t\tcolor: red;\n\t}\n"; + style.textContent = "p[svelte-3590263702],[svelte-3590263702] p{color:red}"; appendNode( style, document.head ); } diff --git a/test/js/samples/css-media-query/expected-bundle.js b/test/js/samples/css-media-query/expected-bundle.js index c0a8f05171..710bf0a46a 100644 --- a/test/js/samples/css-media-query/expected-bundle.js +++ b/test/js/samples/css-media-query/expected-bundle.js @@ -134,7 +134,7 @@ var proto = { function add_css () { var style = createElement( 'style' ); style.id = 'svelte-2363328337-style'; - style.textContent = "\n\t@media (min-width: 1px) {\n\t\tdiv[svelte-2363328337], [svelte-2363328337] div {\n\t\t\tcolor: red;\n\t\t}\n\t}\n"; + style.textContent = "@media(min-width: 1px){div[svelte-2363328337],[svelte-2363328337] div{color:red}}"; appendNode( style, document.head ); } diff --git a/test/js/samples/css-media-query/expected.js b/test/js/samples/css-media-query/expected.js index e1c020aa8d..3774e93e68 100644 --- a/test/js/samples/css-media-query/expected.js +++ b/test/js/samples/css-media-query/expected.js @@ -3,7 +3,7 @@ import { appendNode, assign, createElement, detachNode, dispatchObservers, inser function add_css () { var style = createElement( 'style' ); style.id = 'svelte-2363328337-style'; - style.textContent = "\n\t@media (min-width: 1px) {\n\t\tdiv[svelte-2363328337], [svelte-2363328337] div {\n\t\t\tcolor: red;\n\t\t}\n\t}\n"; + style.textContent = "@media(min-width: 1px){div[svelte-2363328337],[svelte-2363328337] div{color:red}}"; appendNode( style, document.head ); } diff --git a/test/server-side-rendering/samples/styles-nested/_actual.css b/test/server-side-rendering/samples/styles-nested/_actual.css index 37d529499e..eda4b3b286 100644 --- a/test/server-side-rendering/samples/styles-nested/_actual.css +++ b/test/server-side-rendering/samples/styles-nested/_actual.css @@ -1,14 +1,3 @@ - - div[svelte-1408461649], [svelte-1408461649] div { - color: red; - } - - - div[svelte-54999591], [svelte-54999591] div { - color: green; - } - - - div[svelte-2385185803], [svelte-2385185803] div { - color: blue; - } +div[svelte-1408461649],[svelte-1408461649] div{color:red} +div[svelte-54999591],[svelte-54999591] div{color:green} +div[svelte-2385185803],[svelte-2385185803] div{color:blue} \ No newline at end of file diff --git a/test/server-side-rendering/samples/styles-nested/_expected.css b/test/server-side-rendering/samples/styles-nested/_expected.css index 37d529499e..eda4b3b286 100644 --- a/test/server-side-rendering/samples/styles-nested/_expected.css +++ b/test/server-side-rendering/samples/styles-nested/_expected.css @@ -1,14 +1,3 @@ - - div[svelte-1408461649], [svelte-1408461649] div { - color: red; - } - - - div[svelte-54999591], [svelte-54999591] div { - color: green; - } - - - div[svelte-2385185803], [svelte-2385185803] div { - color: blue; - } +div[svelte-1408461649],[svelte-1408461649] div{color:red} +div[svelte-54999591],[svelte-54999591] div{color:green} +div[svelte-2385185803],[svelte-2385185803] div{color:blue} \ No newline at end of file diff --git a/test/server-side-rendering/samples/styles/_actual.css b/test/server-side-rendering/samples/styles/_actual.css index 0d52d6d95f..50a7e3a77c 100644 --- a/test/server-side-rendering/samples/styles/_actual.css +++ b/test/server-side-rendering/samples/styles/_actual.css @@ -1,4 +1 @@ - - div[svelte-2278551596], [svelte-2278551596] div { - color: red; - } +div[svelte-2278551596],[svelte-2278551596] div{color:red} \ No newline at end of file diff --git a/test/server-side-rendering/samples/styles/_expected.css b/test/server-side-rendering/samples/styles/_expected.css index 0d52d6d95f..50a7e3a77c 100644 --- a/test/server-side-rendering/samples/styles/_expected.css +++ b/test/server-side-rendering/samples/styles/_expected.css @@ -1,4 +1 @@ - - div[svelte-2278551596], [svelte-2278551596] div { - color: red; - } +div[svelte-2278551596],[svelte-2278551596] div{color:red} \ No newline at end of file diff --git a/test/sourcemaps/samples/css-cascade-false/output.css b/test/sourcemaps/samples/css-cascade-false/output.css index 8a653ef98d..a153ecb86c 100644 --- a/test/sourcemaps/samples/css-cascade-false/output.css +++ b/test/sourcemaps/samples/css-cascade-false/output.css @@ -1,6 +1,2 @@ - - .foo[svelte-2772200924] { - color: red; - } - +.foo[svelte-2772200924]{color:red} /*# sourceMappingURL=output.css.map */ \ No newline at end of file diff --git a/test/sourcemaps/samples/css-cascade-false/output.css.map b/test/sourcemaps/samples/css-cascade-false/output.css.map index 9a2034e0d5..a39731fef4 100644 --- a/test/sourcemaps/samples/css-cascade-false/output.css.map +++ b/test/sourcemaps/samples/css-cascade-false/output.css.map @@ -8,5 +8,5 @@ "

red

\n\n" ], "names": [], - "mappings": "AAEO;CACN,uBAAI,CAAC;EACJ,MAAM,CAAC,GAAG;EACV;AACF" + "mappings": "AAGC,IAAI,mBAAC,CAAC,AACL,KAAK,CAAE,GAAG,AACX,CAAC" } \ No newline at end of file diff --git a/test/sourcemaps/samples/css/output.css b/test/sourcemaps/samples/css/output.css index 9f3e676b54..b49fddc28d 100644 --- a/test/sourcemaps/samples/css/output.css +++ b/test/sourcemaps/samples/css/output.css @@ -1,6 +1,2 @@ - - [svelte-2772200924].foo, [svelte-2772200924] .foo { - color: red; - } - +[svelte-2772200924].foo,[svelte-2772200924] .foo{color:red} /*# sourceMappingURL=output.css.map */ \ No newline at end of file diff --git a/test/sourcemaps/samples/css/output.css.map b/test/sourcemaps/samples/css/output.css.map index 995db5b4a2..35bbb2299a 100644 --- a/test/sourcemaps/samples/css/output.css.map +++ b/test/sourcemaps/samples/css/output.css.map @@ -8,5 +8,5 @@ "

red

\n\n" ], "names": [], - "mappings": "AAEO;CACN,iDAAI,CAAC;EACJ,MAAM,CAAC,GAAG;EACV;AACF" + "mappings": "AAGC,gDAAK,CAAC,AACL,KAAK,CAAE,GAAG,AACX,CAAC" } \ No newline at end of file