CSS Format support

[angelozerr]

CSS Language Server is consumed inside Eclipse with https://github.com/mickaelistria/eclipse-bluesky It works well but CSS format is not available.

VSCode provides an extension at https://github.com/aeschli/vscode-css-formatter which uses jsbeautify. I understand that you don't want have dependencies to jsbeautify, but it should be fanatstic if you could provide a settings to choose the CSS formatter.

You could provide a CSS formatter interface that a project could implement with jsbeautify, and the CSS client will have the capability to register the CSS formatter to use. In this case any Editor, IDE which supports language server could benefit with CSS format.

Thanks!

[aeschli]

For us, adding a css formatter to the css-language-server is not really attractive. We rather have some other VSCode extension or language server provide and maintain such a formatter.

What if you invoke jsbeautify out your Eclipse bundle? You must have already have the node runtime.

[angelozerr]

For us, adding a css formatter to the css-language-server is not really attractive.

I don't say to provide a formatter but provide a kind of extension point to choose an existing formatter.

We rather have some other VSCode extension or language server provide and maintain such a formatter.

In other words, I would like to configure CSS Language Server to use an implemention of CSS formatter. So any language client (VSCode, Eclipse, Sublime, Vim, etc) could benefit with CSS format without developping extra code. Language Server provides an API to consume 'format' like JSON language server, so why CSS Language Server could not provide this feature?

What if you invoke jsbeautify out your Eclipse bundle? You must have already have the node runtime.

It's means that I will have 2 nodes process (one for CSS Language Server and one for CSS formatter) and I must develop extra code client which communicates with CSS format.

[aeschli]

provide a kind of extension point to choose an existing formatter.

Do you have any suggestions how this would look like?

[angelozerr]

Do you any suggestions how this would look like?

Here my idea:

LanguageService API will add format method:

export interface LanguageService {
	configure(raw: LanguageSettings): void;
        ...
	format(document: TextDocument, range: Range, options: FormattingOptions): TextEdit[];
}

And LanguageSettings will add cssFormatter settings which is a path (or name) of the CSS formatter contribution:

export interface LanguageSettings {
	validate?: boolean;
	lint?: any;
        cssFormatter?: string
}

A CSS Formatter should implement a given interface that CSS Language Service should provide:

export interface CSSFormatter {
  format(document: TextDocument, range: Range, options: FormattingOptions): TextEdit[];
}

When CSS language service is called by CSS Language Server with this settings:

{
   cssFormatter: "jsbeautifyFormatter"
}

It will search with node.require the jsbeautifyFormatter node module:

let cssFormatter:= require('jsbeautifyFormatter')

The jsbeautifyFormatter is a node module which exports and implements CSSFormatter

jsbeautifyFormatter.ts will looks like this (as your code https://github.com/aeschli/vscode-css-formatter/blob/master/src/extension.ts):

export function format(document: TextDocument, range: Range, options: FormattingOptions): TextEdit[] {
 import jsbeautify = require('js-beautify');

export function format(document: vscode.TextDocument, range: vscode.Range, options:vscode.FormattingOptions) {
	
	if (range === null) {
		var start = new vscode.Position(0, 0);
		var end = new vscode.Position(document.lineCount - 1, document.lineAt(document.lineCount - 1).text.length);
		range = new vscode.Range(start, end);
	}

	var result: vscode.TextEdit[] = [];
	
	var content = document.getText(range);
	
	if (!options) {
		options = { insertSpaces: true, tabSize: 4 };
	}
	
	var beutifyOptions : jsbeautify.IBeautifyCSSOptions = {
		indent_char: options.insertSpaces ? ' ' : '\t',
		indent_size: options.insertSpaces ? options.tabSize : 1,
		selector_separator_newline: false
	}
	
	var formatted = jsbeautify.css_beautify(content, beutifyOptions);
	if (formatted) {
		result.push(new vscode.TextEdit(range, formatted));
	}
	
	return result;
};
}

If you wish consume other CSS formatter library, you must just implement a new CSSFormatter and any language server client could benefit with this feature.

[aeschli]

The idea of vscode-css-languageservice is to be a library that is used by both the css language server and the Monaco editor (in a browser environment). Dynamic loading doesn't fit there.

Maybe you should look into having your own css language server implementation. Like the one we have in the VSCode base, it mostly forwards requests to vscode-css-languageservice library. But it adds the formatting

[angelozerr]

The idea of vscode-css-languageservice is to be a library that is used by both the css language server and the Monaco editor (in a browser environment). Dynamic loading doesn't fit there.

We could consider that cssFormatter works only in node context. All language client editor uses node.js. I think it's really shame not to provide this feature just because you wish to support browser/node context both.

Maybe you should look into having your own css language server implementation.

Like the one we have in the VSCode base, it mostly forwards requests to vscode-css-languageservice library. But it adds the formatting

I think you mean https://github.com/aeschli/vscode-css-formatter which is not language server.

I would like to really avoid having my language server. In one hour, I have implemented my idea by using your code https://github.com/aeschli/vscode-css-formatter and by updating quicly your language server and it works well.

I'm sorry to insist, but it should really great to provide this CSS formatter contribution settings in order to any client of language server could benefit with CSS formatter. More with VSCode you could choose your CSS formatter just with settings and by doing just an npm install .

You could have a project which contains the one-css-formatter in your node_modules and another project which contains the second-css-formatter. You could switch to CSS formatter just by doing an npm install. It follows the same idea than TypeScript Plugins for tsserver.

If you wish I could try to create a PR, but if you are not interested, I will stop to insist, but as I said you I have tested quicly my idea and it works great.

[aeschli]

IMO adding the extension mechanism to the service library is not the right approach. I'd rather look into a way of extending the server. It's something we could use with other servers as well, and also for other language server features. There it would be fitting to use node modules as containers for extensions.

I don't have any solution ready, but maybe we can iterate on that, and a PR in that area would be very welcome.

We wouldn't use a user setting to add an extension, but rather an entry in the LS initialization options. Could be a list of node modules, as you suggested.

The extension should be initialized with the IConnection as well as the TextDocuments and Stylesheets managers.
That way the extension can hook/refine any kind of request and also use the language ASTs.

[angelozerr]

I'd rather look into a way of extending the server.

Sure! It's an another solution that I love it too:)

We wouldn't use a user setting to add an extension, but rather an entry in the LS initialization options. Could be a list of node modules, as you suggested.

Many thanks to take care of this feature!

I don't have any solution ready, but maybe we can iterate on that, and a PR in that area would be very welcome.

If I find time, I will try it. Anyway thanks again not to ignore this CSS formatter feature that Eclipse needs really. Thanks!

[octref]

@angelozerr You can just use prettier which now uses stylefmt and works pretty well with css/scss/less. I've already ported it over to Vetur as the embedded formatter for css/scss/less.

[angelozerr]

@octref your suggestion is about using prettier instead of using jsbeautify ? if it that thanks for the hint, but I'm waiting for that LS CSS server provides the capability to provide the CSS formatter customization.

[octref]

One reason is integrating prettier or stylefmt is pretty straightforward, so you don't have to wait for this feature to land. Another reason is I've bundled js-beautify in Vetur before and it has caused many issues, and upstream bugs are never addressed, so I'm deprecating it with the combo of reshape/stylefmt/prettier.

[angelozerr]

@octref in my case I'm in Java word with Eclipse, I would liek to avoid developping some extra nodejs process and just use LSP format which is implemented with lsp4e (LSP for Eclipse).