A required whitespace is removed in class template string with useSortedClasses

[MananTank]

Environment information

CLI:
  Version:                      1.9.1
  Color support:                true

Platform:
  CPU Architecture:             aarch64
  OS:                           macos

Environment:
  BIOME_LOG_PATH:               unset
  BIOME_LOG_PREFIX_NAME:        unset
  BIOME_CONFIG_PATH:            unset
  NO_COLOR:                     unset
  TERM:                         "xterm-256color"
  JS_RUNTIME_VERSION:           "v21.1.0"
  JS_RUNTIME_NAME:              "node"
  NODE_PACKAGE_MANAGER:         "pnpm/9.4.0"

Biome Configuration:
  Status:                       Loaded successfully
  Formatter disabled:           false
  Linter disabled:              false
  Organize imports disabled:    false
  VCS disabled:                 true

Formatter:
  Format with errors:           false
  Indent style:                 Space
  Indent width:                 2
  Line ending:                  Lf
  Line width:                   80
  Attribute position:           Auto
  Bracket spacing:              BracketSpacing(true)
  Ignore:                       []
  Include:                      []

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

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

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

GraphQL Formatter:
  Enabled:                      false
  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/1.9.1/schema.json",
  "organizeImports": {
    "enabled": true
  },
  "linter": {
    "enabled": true,
    "rules": {
      "recommended": true,
      "a11y": {
        "useSemanticElements": "off"
      },
      "nursery": {
        "useSortedClasses": {
          "level": "warn",
          "fix": "safe",
          "options": {
            "attributes": ["className"],
            "functions": ["clsx", "cva", "cn"]
          }
        }
      }
    }
  },
  "formatter": {
    "enabled": true,
    "indentStyle": "space"
  }
}

Playground link

https://biomejs.dev/playground/?lintRules=all&enabledLinting=false&importSortingEnabled=false&code=ZQB4AHAAbwByAHQAIABmAHUAbgBjAHQAaQBvAG4AIABUAGUAcwB0ACgAKQAgAHsACgAgACAAYwBvAG4AcwB0ACAAZgBvAG8AIAA9ACAAJwBmAG8AbwAnADsACgAgACAAYwBvAG4AcwB0ACAAYgBhAHIAIAA9ACAAJwBiAGEAcgAnADsACgAgACAALwAvACAAdABoAGUAIABzAHAAYQBjAGUAIABiAGUAdAB3AGUAZQBuACAAIgBmAG8AbwAiACAAYQBuAGQAIAAiAGIAYQByACIAIABpAHMAIAByAGUAbQBvAHYAZQBkACAAYgB5ACAAZgBvAHIAbQBhAHQAdABlAHIACgAgACAAcgBlAHQAdQByAG4AIAA8AGQAaQB2ACAAYwBsAGEAcwBzAE4AYQBtAGUAPQB7AGAAJAB7AGYAbwBvAH0AIAAkAHsAYgBhAHIAfQBgAH0AIAAvAD4ACgB9AA%3D%3D

Code of Conduct

• I agree to follow Biome's Code of Conduct

[MananTank]

More info on the issue:

Lint Error

Formatted

Expectation

Expectation is that whitespace should not be removed to prevent accidentally concatenating two different classes to a single one

[dyc3]

As a workaround, you should be able to place your classes into another variable.

let myClasses = `${foo} ${bar}`;
<div className={myClasses} />

[ematipico]

@hangaoke1 would you like to fix the issue?

[hangaoke1]

@hangaoke1 would you like to fix the issue?

I am very sorry that I did not pay attention to this issue due to too many emails 😂