useConsistentCurlyBraces suggests invalid JSX

[GeneZharov]

Environment information

CLI:
  Version:                      2.3.3
  Color support:                true

Platform:
  CPU Architecture:             aarch64
  OS:                           macos

Environment:
  BIOME_LOG_PATH:               unset
  BIOME_LOG_PREFIX_NAME:        unset
  BIOME_CONFIG_PATH:            unset
  BIOME_THREADS:                unset
  NO_COLOR:                     unset
  TERM:                         screen-256color
  JS_RUNTIME_VERSION:           v22.20.0
  JS_RUNTIME_NAME:              node
  NODE_PACKAGE_MANAGER:         unset

Biome Configuration:
  Status:                       Loaded successfully
  Path:                         biome.json
  Formatter enabled:            true
  Linter enabled:               true
  Assist enabled:               true
  VCS enabled:                  false

Linter:
  JavaScript enabled:           unset
  JSON enabled:                 unset
  CSS enabled:                  unset
  GraphQL enabled:              unset
  Recommended:                  false
  Enabled rules:
    style/useConsistentCurlyBraces

Workspace:
  Open Documents:               0

Rule name

lint/style/useConsistentCurlyBraces

Playground link

https://biomejs.dev/playground/?lintRules=useConsistentCurlyBraces&analyzerFixMode=safeAndUnsafeFixes&code=ZQB4AHAAbwByAHQAIABjAG8AbgBzAHQAIABDAG8AbQBwAG8AbgBlAG4AdAAgAD0AIAAoACkAIAA9AD4AIAAoAAoAIAAgADwAZABpAHYAPgAKACAAIAAgACAAewAiAHMAdABhAHIAdAAgAHsAewAiAH0ACgAgACAAIAAgADwAcwBwAGEAbgA%2BAFQARQBYAFQAPAAvAHMAcABhAG4APgAKACAAIAAgACAAewAiAH0AfQAgAGUAbgBkACIAfQAKACAAIAA8AC8AZABpAHYAPgAKACkAOwA%3D&ruleDomains.project=recommended

Expected result

As a result of biome lint --write --unsafe I get invalid JSX:

I understand that it was "unsafe" but I did not expect to get invalid JSX as a result.

I would expect Biome to keep characters that need escaping as JS expressions (in curly brackets):

export const Comp = () => (
  <div>
-    {"start {{"}
+    start {"{{"}
    <span>TEXT</span>
-    {"}} end"}
+    {"}}"} end
  </div>
);

Or do not highlight such strings as issues at all (to me it is still less destructive than the current behavior).

Code of Conduct

• I agree to follow Biome's Code of Conduct

[ematipico]

@GeneZharov

The "expected result" is meant to tell us how the output would be like if there wasn't a bug. No code fix? Different code fix? Etc.

Could you please update the description?

[GeneZharov]

@ematipico Updated the description as you asked

[fregante]

I would expect Biome to keep characters that need escaping as JS expressions

I'd say "no change" is better, this would match Prettier (which, from what I understand, is Biome's formatting strategy)

There's little advantage in reducing the amount of string inside curly braces since you're still going to use curly braces; it just makes editing the text more involved.

[dyc3]

I agree. Leaving it alone instead of minimizing it will just be easier to implement too.

[GeneZharov]

I'd say "no change" is better, this would match Prettier (which, from what I understand, is Biome's formatting strategy)

@fregante In case of spaces, Prettier escapes individual space characters instead of the entire string:

<div>
-  fooooooooooooooooooooooooooooooooooooooooooo <Icon name="external-link" />
+  fooooooooooooooooooooooooooooooooooooooooooo{" "}
+  <Icon name="external-link" />
</div>