add formatting option to place open brace on new line. For microsoft/…

…vscode#146398

CHANGELOG.md

@@ -1,4 +1,9 @@
 
+5.4.0 / 2022-04-01
+==================
+  * new formatter settings: `braceStyle`, `preserveNewLines`, `maxPreserveNewLines`, `wrapLineLength`, `indentEmptyLines`
+
+
 5.3.0 / 2022-03-23
 ==================
   * renamed `CSSFormatConfiguration.selectorSeparatorNewline` to `CSSFormatConfiguration.newlineBetweenSelectors`

src/beautify/beautify-css.d.ts

@@ -10,6 +10,12 @@ export interface IBeautifyCSSOptions {
     end_with_newline?: boolean; // (false) - end with a newline
     newline_between_rules?: boolean; // (true) - add a new line after every css rule
     space_around_selector_separator?: boolean // (false) - ensure space around selector separators:  '>', '+', '~' (e.g. "a>b" -> "a > b")
+    brace_style?: 'collapse' | 'expand'; // (collapse) - place braces on the same line (collapse) or on a new line (expand)
+    preserve_newlines?: boolean; // (true) - whether existing line breaks before elements should be preserved
+    max_preserve_newlines?: number; // (32786) - maximum number of line breaks to be preserved in one chunk
+    wrap_line_length?: number; // (undefined) - warp lines after a line offset
+    indent_empty_lines?: number; // (false) - indent empty lines
+
 }
 
 export interface IBeautifyCSS {

src/cssLanguageTypes.ts

@@ -294,6 +294,18 @@ export interface CSSFormatConfiguration {
 	newlineBetweenRules?: boolean;
 	/** ensure space around selector separators:  '>', '+', '~' (e.g. "a>b" -> "a > b"): Default: false */
 	spaceAroundSelectorSeparator?: boolean;
+	/** put braces on the same line as rules (`collapse`), or put braces on own line, Allman / ANSI style (`expand`). Default `collapse` */
+	braceStyle?: 'collapse' | 'expand';
+	/** whether existing line breaks before elements should be preserved. Default: true */
+	preserveNewLines?: boolean;
+	/** maximum number of line breaks to be preserved in one chunk. Default: unlimited */
+	maxPreserveNewLines?: number;
+    /** maximum amount of characters per line (0/undefined = disabled). Default: disabled. */
+	wrapLineLength?: number;
+	/** add indenting whitespace to empty lines. Default: false */
+	indentEmptyLines?: boolean;
+
 	/** @deprecated Use newlineBetweenSelectors instead*/
 	selectorSeparatorNewline?: boolean;
+
 }

src/services/cssFormatter.ts

@@ -68,7 +68,12 @@ export function format(document: TextDocument, range: Range | undefined, options
 		end_with_newline: includesEnd && getFormatOption(options, 'insertFinalNewline', false),
 		selector_separator_newline: getFormatOption(options, 'newlineBetweenSelectors', true),
 		newline_between_rules: getFormatOption(options, 'newlineBetweenRules', true),
-		space_around_selector_separator: getFormatOption(options, 'spaceAroundSelectorSeparator', false)
+		space_around_selector_separator: getFormatOption(options, 'spaceAroundSelectorSeparator', false),
+		brace_style: getFormatOption(options, 'braceStyle', 'collapse'),
+		indent_empty_lines: getFormatOption(options, 'indentEmptyLines', false),
+		max_preserve_newlines: getFormatOption(options, 'maxPreserveNewLines', undefined),
+		preserve_newlines: getFormatOption(options, 'preserveNewLines', true),
+		wrap_line_length: getFormatOption(options, 'wrapLineLength', undefined),
 	};
 
 	let result = css_beautify(trimLeft(value), cssOptions);

src/test/css/formatter.test.ts

@@ -16,13 +16,13 @@ export function assertFormat(unformatted: string, expected: string, options: CSS
 	if (rangeStart !== -1 && rangeEnd !== -1) {
 		// remove '|'
 		unformatted = unformatted.substring(0, rangeStart) + unformatted.substring(rangeStart + 1, rangeEnd) + unformatted.substring(rangeEnd + 1);
-		var unformattedDoc = TextDocument.create(uri, 'html', 0, unformatted);
+		const unformattedDoc = TextDocument.create(uri, 'html', 0, unformatted);
 		const startPos = unformattedDoc.positionAt(rangeStart);
 		const endPos = unformattedDoc.positionAt(rangeEnd - 1);
 		range = Range.create(startPos, endPos);
 	}
 
-	var document = TextDocument.create(uri, 'html', 0, unformatted);
+	const document = TextDocument.create(uri, 'html', 0, unformatted);
 	const edits = ls.format(document, range, options);
 	const formatted = TextDocument.applyEdits(document, edits);
 	assert.strictEqual(formatted, expected);
@@ -31,12 +31,12 @@ export function assertFormat(unformatted: string, expected: string, options: CSS
 suite('CSS - Formatter', () => {
 
 	test('full document', () => {
-		var content = [
+		const content = [
 			'@font-face { src: url(http://test) }',
 			'.monaco  .list { background: "#FFF"  ; }',
 		].join('\n');
 
-		var expected = [
+		const expected = [
 			'@font-face {',
 			'  src: url(http://test)',
 			'}',
@@ -50,12 +50,12 @@ suite('CSS - Formatter', () => {
 	});
 
 	test('range', () => {
-		var content = [
+		const content = [
 			'@font-face { src: url(http://test) }',
 			'|.monaco  .list { background: "#FFF"  ; }|',
 		].join('\n');
 
-		var expected = [
+		const expected = [
 			'@font-face { src: url(http://test) }',
 			'.monaco .list {',
 			'  background: "#FFF";',
@@ -66,11 +66,11 @@ suite('CSS - Formatter', () => {
 	});
 
 	test('@media', () => {
-		var content = [
+		const content = [
 			'@media print { @page { margin: 10% } blockquote, pre { page-break-inside: avoid } }'
 		].join('\n');
 
-		var expected = [
+		const expected = [
 			'@media print {',
 			'  @page {',
 			'    margin: 10%',
@@ -87,41 +87,41 @@ suite('CSS - Formatter', () => {
 	});
 
 	test('selectors and functions', () => {
-		var content = [
-			'.foo,.bar,li:first-of-type + li{--widthB:  calc(  var(--widthA)   / 2);}'
+		const content = [
+			'.foo,.bar,li:first-of-type + li{--widthB:  calc(  const(--widthA)   / 2);}'
 		].join('\n');
 
-		var expected = [
+		const expected = [
 			'.foo,',
 			'.bar,',
 			'li:first-of-type+li {',
-			'  --widthB: calc(var(--widthA) / 2);',
+			'  --widthB: calc(const(--widthA) / 2);',
 			'}'
 		].join('\n');
 
 		assertFormat(content, expected);
 	});
 
 	test('selectors and functions, options', () => {
-		var content = [
-			'.foo,.bar,li:first-of-type + li{--widthB:  calc(  var(--widthA)   / 2);}'
+		const content = [
+			'.foo,.bar,li:first-of-type + li{--widthB:  calc(  const(--widthA)   / 2);}'
 		].join('\n');
 
-		var expected = [
+		const expected = [
 			'.foo, .bar, li:first-of-type + li {',
-			'  --widthB: calc(var(--widthA) / 2);',
+			'  --widthB: calc(const(--widthA) / 2);',
 			'}'
 		].join('\n');
 
 		assertFormat(content, expected, { newlineBetweenSelectors: false, insertSpaces: true, tabSize: 2, spaceAroundSelectorSeparator: true });
 	});
 
 	test('insertFinalNewline', () => {
-		var content = [
+		const content = [
 			'.emptyMarkdownCell::before { outline:  1px  solid -webkit-focus-ring-color;  }'
 		].join('\n');
 
-		var expected = [
+		const expected = [
 			'.emptyMarkdownCell::before {',
 			'  outline: 1px solid -webkit-focus-ring-color;',
 			'}',
@@ -132,6 +132,58 @@ suite('CSS - Formatter', () => {
 
 	});
 
+	test('braceStyle', () => {
+		const content = [
+			'.foo { display:  node;  }'
+		].join('\n');
+
+		const expected = [
+			'.foo',
+			'{',
+			'  display: node;',
+			'}',
+		].join('\n');
+
+		assertFormat(content, expected, { insertSpaces: true, tabSize: 2, braceStyle: 'expand' });
+
+		const expected2 = [
+			'.foo {',
+			'  display: node;',
+			'}',
+		].join('\n');
+
+		assertFormat(content, expected2, { insertSpaces: true, tabSize: 2, braceStyle: 'collapse' });
+
+	});
+
+	test('preserveNewLines', () => {
+		const content = [
+			'.foo { display: node;',
+			'',
+			'',
+			'',
+			'}'
+		].join('\n');
+
+		const expected = [
+			'.foo {',
+			'  display: node;',
+			'',
+			'',
+			'}'
+		].join('\n');
+
+		assertFormat(content, expected, { insertSpaces: true, tabSize: 2, preserveNewLines: true, maxPreserveNewLines: 3 });
+
+		const expected2 = [
+			'.foo {',
+			'  display: node;',
+			'}'
+		].join('\n');
+
+		assertFormat(content, expected2, { insertSpaces: true, tabSize: 2, preserveNewLines: false });
+
+	});
 
 
 });