diff --git a/src/compiler/compile/css/Stylesheet.ts b/src/compiler/compile/css/Stylesheet.ts index 3b1dedc467..7ff8abc4ff 100644 --- a/src/compiler/compile/css/Stylesheet.ts +++ b/src/compiler/compile/css/Stylesheet.ts @@ -10,6 +10,23 @@ function remove_css_prefix(name: string): string { } const is_keyframes_node = (node: Node) => remove_css_prefix(node.name) === 'keyframes'; +const at_rule_has_declaration = ({ block }: Node) => + block && block.children && block.children.find((node: Node) => node.type === 'Declaration'); + +function minify_declarations(code: MagicString, start: number, declarations: Declaration[]) { + let c = start + + 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; + }); + + return c +} // https://github.com/darkskyapp/string-hash/blob/master/index.js function hash(str: string): string { @@ -64,16 +81,7 @@ class Rule { 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; - }); + c = minify_declarations(code, c, this.declarations) code.remove(c, this.node.block.end - 1); } @@ -141,10 +149,12 @@ class Declaration { class Atrule { node: Node; children: (Atrule|Rule)[]; + declarations: Declaration[]; constructor(node: Node) { this.node = node; this.children = []; + this.declarations = []; } apply(node: Element, stack: Element[]) { @@ -179,11 +189,6 @@ class Atrule { }); code.remove(c, this.node.block.start); - } else if (is_keyframes_node(this.node)) { - let c = this.node.start + this.node.name.length + 1; - 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); } else if (this.node.name === 'supports') { let c = this.node.start + 9; if (this.node.expression.start - c > 1) code.overwrite(c, this.node.expression.start, ' '); @@ -192,12 +197,26 @@ class Atrule { c = query.end; }); code.remove(c, this.node.block.start); + } else { + let c = this.node.start + this.node.name.length + 1; + if(this.node.expression) { + if (this.node.expression.start - c > 1) code.overwrite(c, this.node.expression.start, ' '); + c = this.node.expression.end; + } + if (this.node.block && 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; + if (this.declarations.length) { + c = minify_declarations(code, c, this.declarations); + // if the atrule has children, leave the last declaration semicolon alone + if (this.children.length) c++; + } this.children.forEach(child => { if (child.is_used(dev)) { @@ -296,6 +315,11 @@ export default class Stylesheet { this.keyframes.set(expression.name, `${this.id}-${expression.name}`); } }); + } else if (at_rule_has_declaration(node)) { + const at_rule_declarations = node.block.children + .filter(node => node.type === 'Declaration') + .map(node => new Declaration(node)); + atrule.declarations.push(...at_rule_declarations); } current_atrule = atrule; diff --git a/test/css/samples/supports-page/input.svelte b/test/css/samples/supports-page/input.svelte index e360b23e77..70c089c356 100644 --- a/test/css/samples/supports-page/input.svelte +++ b/test/css/samples/supports-page/input.svelte @@ -2,6 +2,6 @@ @page{ margin: 1cm; size: A4; - bleed: 7pt; + bleed: 7pt; }