From 1fc4b878368d78ecda9bb21763c5d84ac6f4c3e7 Mon Sep 17 00:00:00 2001 From: raivaibhav Date: Sat, 9 Oct 2021 15:42:37 +0530 Subject: [PATCH] Fix: linting and update current tests --- src/compiler/compile/css/Selector.ts | 16 ++++- src/compiler/compile/css/Stylesheet.ts | 58 +++++++++++-------- .../css/samples/media-query-word/expected.css | 2 +- test/css/samples/media-query/expected.css | 2 +- test/js/samples/css-media-query/expected.js | 2 +- 5 files changed, 51 insertions(+), 29 deletions(-) diff --git a/src/compiler/compile/css/Selector.ts b/src/compiler/compile/css/Selector.ts index a09f77c37a..671c88a758 100644 --- a/src/compiler/compile/css/Selector.ts +++ b/src/compiler/compile/css/Selector.ts @@ -97,12 +97,24 @@ export default class Selector { const { name } = indentifier; const value_start = node.value && node.value.start; const content = `${char_at_start}${name}${format && value_start ? ' ' : ''}${matcher}${!value_start ? `${flags}${char_at_end}` : ''}`; - code.overwrite(node.start, value_start || node.end , content); + code.overwrite(node.start, value_start || node.end , content, { contentOnly: true }); if (value_start) { - code.overwrite(value_start, node.end, `${node.value.value || ''}${flags}${char_at_end}`); + let value = ''; + switch (node.value.type) { + case 'String': + value = node.value.value; + break; + case 'Identifier': + value = node.value.name; + break; + default: + value = ''; + } + code.overwrite(value_start, node.end, `${value}${flags}${char_at_end}`, { contentOnly: true}); } } } + } }); } diff --git a/src/compiler/compile/css/Stylesheet.ts b/src/compiler/compile/css/Stylesheet.ts index d7fccc5442..fcc0e6481d 100644 --- a/src/compiler/compile/css/Stylesheet.ts +++ b/src/compiler/compile/css/Stylesheet.ts @@ -45,7 +45,7 @@ function minify_declarations( declarations.forEach((declaration, i) => { const default_separator = i > 0 ? ';' : ''; - // it will add \n and prepend string before every declaration + // Adds \n and the prepend format before every declaration const separator = format ? `${default_separator}\n${prepend_format}` : default_separator; if (format) { overwrite(code, c, declaration.node.start, separator); @@ -69,10 +69,7 @@ class Rule { this.node = node; this.parent = parent; this.selectors = node.prelude.children.map((node: CssNode) => new Selector(node, stylesheet)); - this.declarations = node.block.children - .filter(node => node.type === 'Declaration') - .map((node: CssNode) => new Declaration(node)); - this.childrens = []; + this.declarations = node.block.children.map((node: CssNode) => new Declaration(node)); } apply(node: Element) { @@ -88,13 +85,12 @@ class Rule { minify(code: MagicString, _dev: boolean, format: boolean = false, prepend_format: string = '') { let c = this.node.start; let started = false; - // if (prepend_format && format) { - // code.appendLeft(c, prepend_format); - // } + this.selectors.forEach((selector) => { if (selector.used) { const intial_separator = started ? ',' : ''; - //this will add \n after every selector in same rule + + //Adds \n after every selector in same rule const separator = intial_separator && format ? `${intial_separator}\n` : intial_separator; if ((selector.node.start - c) > intial_separator.length) { overwrite(code, c, selector.node.start, separator); @@ -107,15 +103,16 @@ class Rule { }); if (format) { - // this is to add a space before the rule start or say before { + // Adds a space before the rule start or say before { overwrite(code, c, this.node.block.start, ' '); } else { code.remove(c, this.node.block.start); } c = this.node.block.start + 1; c = minify_declarations(code, c, this.declarations, format, prepend_format); + if (format) { - //add the next line just before rule end or say before } + // Adds the next line just before rule end or say before } overwrite(code, c, this.node.block.end - 1, `\n${prepend_format.replace('\t\t', '')}`); } else { code.remove(c, this.node.block.end - 1); @@ -182,7 +179,7 @@ class Declaration { while (/\s/.test(code.original[start])) start += 1; if (format) { - // this will add the space before the decalaration value; + // Adds the space before the decalaration value; overwrite(code, c, start, ': '); } else if (start - c > 1) { code.overwrite(c, start, ':'); @@ -224,13 +221,21 @@ class Atrule { const expression_char = code.original[this.node.prelude.start]; let c = this.node.start + (expression_char === '(' ? 6 : 7); - code.overwrite(this.node.start, this.node.prelude.start, '@media '); + // code.overwrite(this.node.start, this.node.prelude.start, '@media '); + if (format) { + // Add space before the prelude + overwrite(code, c, this.node.prelude.start, ' '); + } else if (this.node.prelude.start > c) { + code.remove(c, this.node.prelude.start); + } + this.node.prelude.children.forEach((query: CssNode) => { // TODO minify queries c = query.end; }); if (format) { + // Adds space before the prelude overwrite(code, c, this.node.block.start, ' '); } else { code.remove(c, this.node.block.start); @@ -239,6 +244,7 @@ class Atrule { } else if (this.node.name === 'supports') { let c = this.node.start + 9; if (format) { + // Add space before the prelude overwrite(code, c, this.node.prelude.start, ' '); } else if (this.node.prelude.start - c > 1) { code.overwrite(c, this.node.prelude.start, ' '); @@ -249,6 +255,7 @@ class Atrule { }); if (format) { + // Add space before the prelude overwrite(code, c, this.node.block.start, ' '); } else { code.remove(c, this.node.block.start); @@ -257,6 +264,7 @@ class Atrule { let c = this.node.start + this.node.name.length + 1; if (this.node.prelude) { if (format) { + // Add space before the prelude overwrite(code, c, this.node.prelude.start, ' '); } else if (this.node.prelude.start - c > 1) { code.overwrite(c, this.node.prelude.start, ' '); @@ -265,6 +273,7 @@ class Atrule { } if (this.node.block) { if (format) { + // Add space before the block overwrite(code, c, this.node.block.start, ' '); } else if (this.node.block.start - c > 0) { code.remove(c, this.node.block.start); @@ -284,12 +293,11 @@ class Atrule { this.children.forEach(child => { if (child.is_used(dev)) { - if (format && prepend_format) { - - // this will add \n opening of atrule ie.e, after { + if (format) { + // Add \n at the opening of atrule ie.e, after { overwrite(code, c, child.node.start, '\n'); - // this will add the necessary prepend space for case of nested child + // Add the necessary prepend space for case of nested child code.appendLeft(child.node.start, prepend_format); } else { code.remove(c, child.node.start); @@ -298,14 +306,17 @@ class Atrule { c = child.node.end; } }); - if (format && prepend_format) { + if (format) { // add \n and prepend string before the closing of the atrule or say before the } - // replace is a shortcut to ignore the first iteration + // and replace is a shortcut to ignore the first iteration overwrite(code, c, this.node.block.end - 1, `\n${prepend_format.replace('\t\t', '')}`); } else { code.remove(c, this.node.block.end - 1); } } + + // for cssFormat, it add space before the media feature name + // and the node value, it will also minify the MediaFeature node if (this.node.prelude) { walk(this.node.prelude.children as any, { enter: (node: any, parent: any) => { @@ -313,7 +324,7 @@ class Atrule { const char_at_start = code.original[parent.start]; const char_at_end = code.original[parent.end - 1]; if (node) { - code.overwrite(parent.start, node.start , `${char_at_start}${parent.name}:${format ? ' ' : ''}`); + code.overwrite(parent.start, node.start , `${char_at_start}${parent.name}:${format ? ' ' : ''}`, { contentOnly: true}); let value = ''; switch (node.type) { case 'Number' : @@ -331,9 +342,9 @@ class Atrule { default: value = ''; } - code.overwrite(node.start, parent.end, `${value}${char_at_end}`); + code.overwrite(node.start, parent.end, `${value}${char_at_end}`, { contentOnly: true }); } else { - code.overwrite(parent.start, parent.end , `${char_at_start}${parent.name}${char_at_end}`); + code.overwrite(parent.start, parent.end , `${char_at_start}${parent.name}${char_at_end}`, { contentOnly: true }); } } } @@ -358,7 +369,6 @@ class Atrule { } }); } - this.children.forEach(child => { child.transform(code, id, keyframes, max_amount_class_specificity_increased); }); @@ -440,7 +450,7 @@ export default class Stylesheet { let current_atrule: Atrule = null; walk(ast.css as any, { - enter: (node: any, parent: any) => { + enter: (node: any) => { if (node.type === 'Atrule') { const atrule = new Atrule(node); stack.push(atrule); diff --git a/test/css/samples/media-query-word/expected.css b/test/css/samples/media-query-word/expected.css index d2a288ed72..4d43db5b8d 100644 --- a/test/css/samples/media-query-word/expected.css +++ b/test/css/samples/media-query-word/expected.css @@ -1 +1 @@ -@media only screen and (min-width: 400px){div.svelte-xyz{color:red}} \ No newline at end of file +@media only screen and (min-width:400px){div.svelte-xyz{color:red}} \ 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 8ea74bf3b1..ea131072f9 100644 --- a/test/css/samples/media-query/expected.css +++ b/test/css/samples/media-query/expected.css @@ -1 +1 @@ -@media(min-width: 400px){.large-screen.svelte-xyz{display:block}} \ No newline at end of file +@media(min-width:400px){.large-screen.svelte-xyz{display:block}} \ No newline at end of file diff --git a/test/js/samples/css-media-query/expected.js b/test/js/samples/css-media-query/expected.js index d743432206..8f68cbc894 100644 --- a/test/js/samples/css-media-query/expected.js +++ b/test/js/samples/css-media-query/expected.js @@ -12,7 +12,7 @@ import { } from "svelte/internal"; function add_css(target) { - append_styles(target, "svelte-1slhpfn", "@media(min-width: 1px){div.svelte-1slhpfn{color:red}}"); + append_styles(target, "svelte-1slhpfn", "@media(min-width:1px){div.svelte-1slhpfn{color:red}}"); } function create_fragment(ctx) {