Apply CSS format settings to style tags in HTML files#305031
Apply CSS format settings to style tags in HTML files#305031Sathvik-Chowdary-Veerapaneni wants to merge 1 commit intomicrosoft:mainfrom
Conversation
The CSS mode in the HTML language server was missing a format method, so CSS formatting settings (like newlineBetweenSelectors, braceStyle, etc.) were not applied when formatting CSS within HTML <style> tags. This adds a format method to the CSS mode that delegates to the CSS language service with the user's css.format.* settings merged in. Fixes microsoft#283316
|
The JSBeautify formatter for HTML already formats CSS embedded in HTML. That's how the formatting of embedded CSS currently works. The suggested fix of this PR is also possible, but likely will cause regressions on formatting around the boundaries between CSS and HTML: Dealing with indentation and spaces before and after <style> and style="xx" |
aeschli
left a comment
aeschli
left a comment
There was a problem hiding this comment.
See my comment.
Preferably fixed by better configuring JSBeautity also for the embedded CSS, or, if not possible, many more tests that make sure there are no regression with formatting/indentation around <style> and styles="..."
|
@microsoft-github-policy-service agree |
2 participants
Summary
Fixes #283316
CSS formatting settings (
css.format.newlineBetweenSelectors,css.format.braceStyle,css.format.spaceAroundSelectorSeparator, etc.) were not being applied when formatting CSS within HTML<style>tags. The CSS mode in the HTML language server was missing aformatmethod, so the CSS language service formatter was never invoked for embedded CSS regions.Changes
formatmethod to the CSS mode inextensions/html-language-features/server/src/modes/cssMode.tsthat:css.format.*settings with the base formatting optionscssLanguageService.format()with the merged settingscss.format.newlineBetweenSelectors: falseis respected when formatting CSS inside HTML style tagsRoot Cause
The
formatting.tsorchestrator iterates through all embedded language mode ranges and callsmode.format()if it exists (line 73). However, the CSS mode returned bygetCSSMode()never defined aformatmethod, so it was silently skipped. The HTML formatter would handle the CSS content with only its own settings, ignoring CSS-specific format configuration.Test Plan
cssMode.ts)HTML & Styles with CSS format settingsvalidatesnewlineBetweenSelectors: falseis appliedHTML & Stylesstill passes (default formatting behavior unchanged)