Skip to content

📝 CSS comment gets reformated without proper indentation #11228

Description

@adrian-javid

Environment information

There are some values in a variable that have some comments in between them.

:root {
	--main-font-stack:
		/* Why does this comment get placed without indentation? */
		system-ui,
		/* Comment 1 */
		-apple-system,
		BlinkMacSystemFont,
		/* Comment 2 */
		"Segoe UI",
		Roboto, Ubuntu,
		/* Comment 3 */
		sans-serif;
}

After running biome check --fix on that file, it makes the indentation of the first comment inconsistent with the other values and comments.

:root {
	--main-font-stack:
/* Why does this comment get placed without indentation? */
		system-ui,
		/* Comment 1 */
		-apple-system,
		BlinkMacSystemFont,
		/* Comment 2 */
		"Segoe UI",
		Roboto, Ubuntu,
		/* Comment 3 */
		sans-serif;
}
Details
CLI:
  Version:                      2.5.5
  Color support:                true

Platform:
  CPU Architecture:             x86_64
  OS:                           windows

Environment:
  BIOME_DISTRIBUTION:                npm
  BIOME_LOG_PATH:                    unset
  BIOME_LOG_PREFIX_NAME:             unset
  BIOME_LOG_LEVEL:                   unset
  BIOME_LOG_KIND:                    unset
  BIOME_CONFIG_PATH:                 unset
  BIOME_THREADS:                     unset
  BIOME_WATCHER_KIND:                unset
  BIOME_WATCHER_POLLING_INTERVAL:    unset
  NO_COLOR:                     unset
  TERM:                         unset
  JS_RUNTIME_VERSION:           v22.16.0
  JS_RUNTIME_NAME:              node
  NODE_PACKAGE_MANAGER:         npm/11.18.0

Biome Configuration:
  Status:                       Loaded successfully.
  Path:                         biome.jsonc
  Formatter enabled:            true
  Linter enabled:               true
  Assist enabled:               true
  VCS enabled:                  false
  HTML full support enabled:    unset

Formatter:
  Format with errors:           unset
  Indent style:                 unset
  Indent width:                 unset
  Line ending:                  unset
  Line width:                   unset
  Attribute position:           unset
  Bracket spacing:              unset
  Includes:                     unset

JavaScript Formatter:
  Enabled:                      unset
  JSX quote style:              unset
  Quote properties:             unset
  Trailing commas:              unset
  Semicolons:                   Always
  Arrow parentheses:            unset
  Bracket spacing:              unset
  Bracket same line:            unset
  Quote style:                  unset
  Indent style:                 unset
  Indent width:                 unset
  Line ending:                  unset
  Line width:                   unset
  Attribute position:           unset

JSON Formatter:
  Enabled:                      unset
  Indent style:                 unset
  Indent width:                 unset
  Line ending:                  unset
  Line width:                   unset
  Trailing Commas:              unset
  Expand lists:                 unset

CSS Formatter:
  Enabled:                      unset
  Indent style:                 unset
  Indent width:                 unset
  Line ending:                  unset
  Line width:                   unset
  Quote style:                  unset

GraphQL Formatter:
  Enabled:                      unset
  Indent style:                 unset
  Indent width:                 unset
  Line ending:                  unset
  Line width:                   unset
  Bracket spacing:              unset
  Quote style:                  unset

Workspace:
  Open Documents:               0

Configuration

{
	"$schema": "https://biomejs.dev/schemas/2.5.5/schema.json",
	"javascript": {
		"formatter": {
			"semicolons": "always",
		},
	},
	"formatter": { "enabled": true },
	"linter": { "enabled": true, "rules": {} },
	"overrides": [
		{
			"includes": ["**/*.{js,mjs,cjs}"],
			"linter": {
				"rules": {
					"complexity": {
						"noAdjacentSpacesInRegex": "error",
						"noExtraBooleanCast": "error",
						"noUselessCatch": "error",
						"noUselessEscapeInRegex": "error"
					},
					"correctness": {
						"noConstAssign": "error",
						"noConstantCondition": "error",
						"noEmptyCharacterClassInRegex": "error",
						"noEmptyPattern": "error",
						"noGlobalObjectCalls": "error",
						"noInvalidBuiltinInstantiation": "error",
						"noInvalidConstructorSuper": "error",
						"noNonoctalDecimalEscape": "error",
						"noPrecisionLoss": "error",
						"noSelfAssign": "error",
						"noSetterReturn": "error",
						"noSwitchDeclarations": "error",
						"noUndeclaredVariables": "error",
						"noUnreachable": "error",
						"noUnreachableSuper": "error",
						"noUnsafeFinally": "error",
						"noUnsafeOptionalChaining": "error",
						"noUnusedLabels": "error",
						"noUnusedPrivateClassMembers": "error",
						"noUnusedVariables": "error",
						"useIsNan": "error",
						"useValidForDirection": "error",
						"useValidTypeof": "error",
						"useYield": "error"
					},
					"suspicious": {
						"noAsyncPromiseExecutor": "error",
						"noCatchAssign": "error",
						"noClassAssign": "error",
						"noCompareNegZero": "error",
						"noConstantBinaryExpressions": "error",
						"noControlCharactersInRegex": "error",
						"noDebugger": "error",
						"noDuplicateCase": "error",
						"noDuplicateClassMembers": "error",
						"noDuplicateElseIf": "error",
						"noDuplicateObjectKeys": "error",
						"noDuplicateParameters": "error",
						"noEmptyBlockStatements": "error",
						"noFallthroughSwitchClause": "error",
						"noFunctionAssign": "error",
						"noGlobalAssign": "error",
						"noImportAssign": "error",
						"noIrregularWhitespace": "error",
						"noMisleadingCharacterClass": "error",
						"noPrototypeBuiltins": "error",
						"noRedeclare": "error",
						"noShadowRestrictedNames": "error",
						"noSparseArray": "error",
						"noUnsafeNegation": "error",
						"noUselessRegexBackrefs": "error",
						"noWith": "error",
						"useGetterReturn": "error"
					}
				}
			}
		},
		{
			"includes": ["**/*.{js,mjs,cjs}"],
			"javascript": {
				"globals": [
					"onanimationend",
					"onstorage",
					"ondragend",
					"onloadeddata",
					"onanimationiteration",
					"onlostpointercapture",
					"onfocus",
					"onkeyup",
					"onmousedown",
					"onoffline",
					"onplay",
					"onafterprint",
					"onanimationstart",
					"onprogress",
					"onpause",
					"onended",
					"onclick",
					"onpointerover",
					"onmouseout",
					"onloadstart",
					"oncanplay",
					"ondblclick",
					"onappinstalled",
					"onpointermove",
					"ontoggle",
					"ondrag",
					"onchange",
					"oncontextmenu",
					"onmessage",
					"onblur",
					"onabort",
					"onpointerdown",
					"onbeforeinstallprompt",
					"oncancel",
					"onbeforeprint",
					"onpointerout",
					"oncuechange",
					"ongotpointercapture",
					"onsearch",
					"onsubmit",
					"onloadedmetadata",
					"onpointerup",
					"onstalled",
					"onlanguagechange",
					"onreset",
					"onsuspend",
					"onerror",
					"onmouseenter",
					"onscroll",
					"onload",
					"onresize",
					"onmouseover",
					"ondragover",
					"ondragstart",
					"oninput",
					"onpagehide",
					"oncanplaythrough",
					"onmousemove",
					"oninvalid",
					"ontimeupdate",
					"onratechange",
					"ondurationchange",
					"onmouseup",
					"onmessageerror",
					"ondevicemotion",
					"onkeypress",
					"onwheel",
					"onpointerleave",
					"location",
					"onauxclick",
					"ononline",
					"onselect",
					"ondrop",
					"onkeydown",
					"onclose",
					"ondeviceorientationabsolute",
					"ontransitionend",
					"onpageshow",
					"ondeviceorientation",
					"onseeking",
					"OffscreenCanvas",
					"onpointercancel",
					"onunload",
					"onmouseleave",
					"onrejectionhandled",
					"ondragleave",
					"onseeked",
					"onhashchange",
					"onwaiting",
					"onpointerenter",
					"onunhandledrejection",
					"ondragenter",
					"onpopstate",
					"onmousewheel",
					"onemptied",
					"onbeforeunload",
					"onplaying",
					"onvolumechange"
				]
			},
			"linter": {
				"rules": {
					"correctness": { "noUnusedVariables": "warn" },
					"style": {
						"noParameterAssign": "off",
						"useBlockStatements": "off",
						"useConst": "error"
					},
					"suspicious": {
						"noConsole": "off",
						"noDoubleEquals": "error",
						"noVar": "error"
					}
				}
			}
		}
	],
	"assist": { "enabled": true },
}

Playground link

https://biomejs.dev/playground/?tab=formatter&pane=Diagnostics&code=OgByAG8AbwB0ACAAewAKAAkALQAtAG0AYQBpAG4ALQBmAG8AbgB0AC0AcwB0AGEAYwBrADoACgAJAAkALwAqACAAVwBoAHkAIABkAG8AZQBzACAAdABoAGkAcwAgAGMAbwBtAG0AZQBuAHQAIABnAGUAdAAgAHAAbABhAGMAZQBkACAAdwBpAHQAaABvAHUAdAAgAGkAbgBkAGUAbgB0AGEAdABpAG8AbgA%2FACAAKgAvAAoACQAJAHMAeQBzAHQAZQBtAC0AdQBpACwACgAJAAkALwAqACAAQwBvAG0AbQBlAG4AdAAgADEAIAAqAC8ACgAJAAkALQBhAHAAcABsAGUALQBzAHkAcwB0AGUAbQAsAAoACQAJAEIAbABpAG4AawBNAGEAYwBTAHkAcwB0AGUAbQBGAG8AbgB0ACwACgAJAAkALwAqACAAQwBvAG0AbQBlAG4AdAAgADIAIAAqAC8ACgAJAAkAIgBTAGUAZwBvAGUAIABVAEkAIgAsAAoACQAJAFIAbwBiAG8AdABvACwAIABVAGIAdQBuAHQAdQAsAAoACQAJAC8AKgAgAEMAbwBtAG0AZQBuAHQAIAAzACAAKgAvAAoACQAJAHMAYQBuAHMALQBzAGUAcgBpAGYAOwAKAH0ACgA%3D&language=css

Code of Conduct

  • I agree to follow Biome's Code of Conduct

Activity

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    A-FormatterArea: formatterL-CSSLanguage: CSS and super languagesS-Bug-confirmedStatus: report has been confirmed as a valid bug

    Type

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions