📝 useSortedClasses removes spaces between computed variables

[theogravity]

Environment information

flex flex-shrink-0 flex-row items-center font-medium ${props.className} ${buttonColor} ${buttonSize}

becomes

flex flex-shrink-0 flex-row items-center font-medium ${props.className}${buttonColor}${buttonSize}

(there's no space between the computed items)

Note: I don't know how to enable useSortedClasses in the playground, so the playground link has the code, but the formatted ver is fine because it's not enabled.

Configuration

{
  "$schema": "https://biomejs.dev/schemas/1.8.3/schema.json",
  "organizeImports": {
    "enabled": true
  },
  "formatter": {
    "enabled": true,
    "indentStyle": "space",
    "lineWidth": 120,
    "ignore": [
      "node_modules/*",
      "*.config.*",
      "*.json",
      "tsconfig.json",
      ".turbo/*",
      ".next/*",
      "dist/*",
      ".pnpm-store/*"
    ]
  },
  "linter": {
    "enabled": true,
    "ignore": ["dist/*", ".pnpm-store/*", "packages/portal-client/*", ".next/*", ".turbo/*"],
    "rules": {
      "a11y": {
        "noSvgWithoutTitle": "off"
      },
      "performance": {
        "noDelete": "off"
      },
      "complexity": {
        "useLiteralKeys": "off",
        "noStaticOnlyClass": "off"
      },
      "correctness": {
        "noUnusedImports": "error",
        "useExhaustiveDependencies": "warn"
      },
      "suspicious": {
        "noImplicitAnyLet": "off",
        "noExplicitAny": "off",
        "noDebugger": {
          "level": "warn",
          "fix": "none"
        }
      },
      "nursery": {
        "useSortedClasses": "warn"
      },
      "recommended": true
    }
  }
}

Playground link

https://biomejs.dev/playground/?code=aQBtAHAAbwByAHQAIAB0AHkAcABlACAAUgBlAGEAYwB0ACAAZgByAG8AbQAgACIAcgBlAGEAYwB0ACIAOwAKAGkAbQBwAG8AcgB0ACAAewAgAHUAcwBlAE0AZQBtAG8AIAB9ACAAZgByAG8AbQAgACIAcgBlAGEAYwB0ACIAOwAKAGkAbQBwAG8AcgB0ACAAdAB5AHAAZQAgAHsAIABJAGMAbwBuAFQAeQBwAGUAIAB9ACAAZgByAG8AbQAgACIAcgBlAGEAYwB0AC0AaQBjAG8AbgBzACIAOwAKAAoAYwBvAG4AcwB0ACAAQgB1AHQAdABvAG4AIAA9ACAAKAB7AAoAIAAgAGMAbABhAHMAcwBOAGEAbQBlACwACgAgACAAYgB1AHQAdABvAG4AQwBvAGwAbwByACwACgAgACAAYgB1AHQAdABvAG4AUwBpAHoAZQAsAAoAfQApACAAPQA%2BACAAewAKACAAIAByAGUAdAB1AHIAbgAgACgACgAgACAAIAAgADwAYgB1AHQAdABvAG4ACgAgACAAIAAgACAAIAB0AHkAcABlAD0AIgBiAHUAdAB0AG8AbgAiAAoAIAAgACAAIAAgACAAewAuAC4ALgBwAHIAbwBwAHMAfQAKACAAIAAgACAAIAAgAGMAbABhAHMAcwBOAGEAbQBlAD0AewBgAGYAbABlAHgAIABmAGwAZQB4AC0AcwBoAHIAaQBuAGsALQAwACAAZgBsAGUAeAAtAHIAbwB3ACAAaQB0AGUAbQBzAC0AYwBlAG4AdABlAHIAIABmAG8AbgB0AC0AbQBlAGQAaQB1AG0AIAAkAHsAYwBsAGEAcwBzAE4AYQBtAGUAfQAgACQAewBiAHUAdAB0AG8AbgBDAG8AbABvAHIAfQAgACQAewBiAHUAdAB0AG8AbgBTAGkAegBlAH0AYAB9AAoAIAAgACAAIAA%2BAAoAIAAgACAAIAAgACAAewBMAGUAZgB0AEkAYwBvAG4AIAAmACYAIAA8AHMAcABhAG4AIABjAGwAYQBzAHMATgBhAG0AZQA9ACIAbQByAC0AMgAgAGYAbABlAHgAIABpAHQAZQBtAHMALQBjAGUAbgB0AGUAcgAiAD4AewBMAGUAZgB0AEkAYwBvAG4AfQA8AC8AcwBwAGEAbgA%2BAH0ACgAgACAAIAAgACAAIAA8AHMAcABhAG4AIABjAGwAYQBzAHMATgBhAG0AZQA9AHsAYAAkAHsAdABlAHgAdABTAGkAegBlAH0AIABmAGwAZQB4AC0AZwByAG8AdwAgAHQAZQB4AHQALQBjAGUAbgB0AGUAcgAgAGYAbwBuAHQALQBuAG8AcgBtAGEAbABgAH0APgB7AHQAZQB4AHQAfQA8AC8AcwBwAGEAbgA%2BAAoAIAAgACAAIAAgACAAewBSAGkAZwBoAHQASQBjAG8AbgAgACYAJgAgADwAcwBwAGEAbgAgAGMAbABhAHMAcwBOAGEAbQBlAD0AIgBtAGwALQAyACAAZgBsAGUAeAAgAGkAdABlAG0AcwAtAGMAZQBuAHQAZQByACIAPgB7AFIAaQBnAGgAdABJAGMAbwBuAH0APAAvAHMAcABhAG4APgB9AAoAIAAgACAAIAA8AC8AYgB1AHQAdABvAG4APgAKACAAIAApADsACgB9ADsACgAKAGUAeABwAG8AcgB0ACAAZABlAGYAYQB1AGwAdAAgAEIAdQB0AHQAbwBuADsACgA%3D

Code of Conduct

• [X] I agree to follow Biome's Code of Conduct

[ematipico]

@theogravity can you please update the playground link:

• enable all rules
• remove all the code that's not needed to identify the bug

[hangaoke1]

repeat https://github.com/biomejs/biome/issues/4041

[ematipico]

I am going to close the issue for now. It seems it was fixed