feat(code-formatter): Implement new code formatter (#2268)

- new formatter activated with `experimental` flag in CLI and language service
- support for the previous `tabSize`, `endWithNewLine`, and `wrapLineLength` options + new `wrapLineLength` option
- no support for other options

Co-authored-by: Ido Rosenthal <[email protected]>

Author: barak igal

package-lock.json

@@ -303,6 +303,12 @@ After installing `@stylable/cli`, the `stc-format` command will be available, ru
 | `--help`                      | `h`   | Show help                                                     | `boolean`     |                               |
 | `--version`                   | `v`   | Show version number                                           | `boolean`     |                               |
 
+### Experimental formatter
+
+A new experimental formatter is available using the `--experimental` argument.
+
+Currently not all configuration is accepted by the new formatter, the supported formatting options arguments are `--endWithNewline`, `--indentSize`, and a new `--wrapLineLength`.
+
 ### Formatting the source directory
 
 ```sh

packages/cli/README.md

@@ -1,14 +1,19 @@
 #!/usr/bin/env node
 import yargs from 'yargs';
 import { nodeFs } from '@file-services/node';
-import { getDocumentFormatting } from '@stylable/code-formatter';
+import { getDocumentFormatting, formatCSS } from '@stylable/code-formatter';
 import { createLogger } from './logger';
 import { writeFileSync } from 'fs';
 
 const { join } = nodeFs;
 
 const argv = yargs
     .usage('$0 [options]')
+    .option('experimental', {
+        type: 'boolean',
+        description: 'use experimental code formatter',
+        default: false,
+    })
     .option('target', {
         type: 'string',
         description: 'file or directory to format',
@@ -83,6 +88,12 @@ const argv = yargs
         alias: 'r',
         default: [] as string[],
     })
+    .option('wrapLineLength', {
+        type: 'number',
+        description: 'Length of line to be considered when wrapping',
+        alias: 'W',
+        default: 80,
+    })
 
     .alias('h', 'help')
     .alias('v', 'version')
@@ -104,6 +115,8 @@ const {
     selectorSeparatorNewline,
     target,
     silent,
+    experimental,
+    wrapLineLength,
 } = argv;
 
 const log = createLogger(
@@ -120,18 +133,16 @@ for (const request of requires) {
     require(request);
 }
 
-function readDirectoryDeep(dirPath: string, fileSuffixFilter = '.st.css') {
-    const files = nodeFs.readdirSync(dirPath, 'utf-8');
-    let res: string[] = [];
+function readDirectoryDeep(dirPath: string, fileSuffixFilter = '.st.css', res = new Set<string>()) {
+    const items = nodeFs.readdirSync(dirPath, { withFileTypes: true });
 
-    for (const item of files) {
-        const currentlFilePath = join(dirPath, item);
-        const itemStat = nodeFs.statSync(join(currentlFilePath));
+    for (const item of items) {
+        const path = join(dirPath, item.name);
 
-        if (itemStat.isFile() && item.endsWith(fileSuffixFilter)) {
-            res.push(currentlFilePath);
-        } else if (itemStat.isDirectory()) {
-            res = res.concat(readDirectoryDeep(currentlFilePath));
+        if (item.isFile() && path.endsWith(fileSuffixFilter)) {
+            res.add(path);
+        } else if (item.isDirectory()) {
+            readDirectoryDeep(path, fileSuffixFilter, res);
         }
     }
 
@@ -141,20 +152,26 @@ function readDirectoryDeep(dirPath: string, fileSuffixFilter = '.st.css') {
 function formatStylesheet(filePath: string) {
     const fileContent = nodeFs.readFileSync(filePath, 'utf-8');
 
-    const newText = getDocumentFormatting(
-        fileContent,
-        { start: 0, end: fileContent.length },
-        {
-            end_with_newline: endWithNewline,
-            indent_empty_lines: indentEmptyLines,
-            indent_size: indentSize,
-            indent_with_tabs: indentWithTabs,
-            max_preserve_newlines: maxPerserveNewlines,
-            newline_between_rules: newlineBetweenRules,
-            preserve_newlines: perserveNewlines,
-            selector_separator_newline: selectorSeparatorNewline,
-        }
-    );
+    const newText = experimental
+        ? formatCSS(fileContent, {
+              indent: ' '.repeat(indentSize),
+              endWithNewline,
+              wrapLineLength,
+          })
+        : getDocumentFormatting(
+              fileContent,
+              { start: 0, end: fileContent.length },
+              {
+                  end_with_newline: endWithNewline,
+                  indent_empty_lines: indentEmptyLines,
+                  indent_size: indentSize,
+                  indent_with_tabs: indentWithTabs,
+                  max_preserve_newlines: maxPerserveNewlines,
+                  newline_between_rules: newlineBetweenRules,
+                  preserve_newlines: perserveNewlines,
+                  selector_separator_newline: selectorSeparatorNewline,
+              }
+          );
 
     if (newText.length) {
         writeFileSync(filePath, newText);
@@ -182,7 +199,7 @@ if (formatPathStats.isFile()) {
 } else if (formatPathStats.isDirectory()) {
     const stylesheets = readDirectoryDeep(target);
 
-    if (stylesheets.length) {
+    if (stylesheets.size) {
         for (const stylesheet of stylesheets) {
             formatStylesheet(stylesheet);
         }

packages/cli/src/code-format.ts

@@ -7,6 +7,7 @@ import {
     createTempDirectory,
     ITempDirectory,
 } from '@stylable/e2e-test-kit';
+import { deindent } from '@stylable/core-test-kit';
 
 describe('Stylable Code Format Cli', function () {
     let tempDir: ITempDirectory;
@@ -135,6 +136,62 @@ describe('Stylable Code Format Cli', function () {
         });
     });
 
+    describe('experimental formatter', () => {
+        it('should format a directory with a single stylesheet (check indent diff)', () => {
+            const stylesheetPath = 'style.st.css';
+
+            populateDirectorySync(tempDir.path, {
+                [stylesheetPath]: `.a{prop:\ngreen,\nblue}`,
+            });
+
+            runFormatCliSync(['--target', tempDir.path, '--experimental']);
+
+            const dirContent = loadDirSync(tempDir.path);
+            expect(dirContent[stylesheetPath]).to.equal(
+                deindent(`
+                    .a {
+                        prop:
+                            green,
+                            blue;
+                    }
+                `)
+            );
+        });
+        it('should accept configuration', () => {
+            const stylesheetPath = 'style.st.css';
+
+            populateDirectorySync(tempDir.path, {
+                [stylesheetPath]: `.a{prop:\ngreen,\nblue;prop2:123456789 123456789}`,
+            });
+
+            runFormatCliSync([
+                '--target',
+                tempDir.path,
+                '--experimental',
+                '--indentSize',
+                '2',
+                '--endWithNewline',
+                'true',
+                '--wrapLineLength',
+                '25',
+            ]);
+
+            const dirContent = loadDirSync(tempDir.path);
+            expect(dirContent[stylesheetPath]).to.equal(
+                deindent(`
+                    .a {
+                      prop:
+                        green,
+                        blue;
+                      prop2: 123456789
+                             123456789;
+                    }
+                `) + '\n'
+            );
+            //
+        });
+    });
+
     describe('exceptions', () => {
         it('should throw an exception when no stylable stylesheets are found to format', () => {
             const filePath = 'file.txt';

packages/cli/test/code-format-cli.spec.ts

@@ -8,7 +8,9 @@
   },
   "dependencies": {
     "@stylable/core": "^5.6.1",
-    "js-beautify": "^1.14.7"
+    "@tokey/css-value-parser": "^0.1.2",
+    "js-beautify": "^1.14.7",
+    "postcss": "^8.4.18"
   },
   "files": [
     "dist",