Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

A required whitespace is removed in class template string with useSortedClasses #4041

Open
1 task done
MananTank opened this issue Sep 22, 2024 · 2 comments
Open
1 task done
Labels
A-Linter Area: linter L-JavaScript Language: JavaScript and super languages S-Bug-confirmed Status: report has been confirmed as a valid bug workaround

Comments

@MananTank
Copy link

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
Copy link
Author

More info on the issue:

Lint Error

image

Formatted

image

Expectation

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

@dyc3 dyc3 added A-Linter Area: linter L-JavaScript Language: JavaScript and super languages S-Bug-confirmed Status: report has been confirmed as a valid bug workaround labels Sep 22, 2024
@dyc3
Copy link
Contributor

dyc3 commented Sep 22, 2024

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

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
A-Linter Area: linter L-JavaScript Language: JavaScript and super languages S-Bug-confirmed Status: report has been confirmed as a valid bug workaround
Projects
None yet
Development

No branches or pull requests

2 participants