HTML parser lowercases tag names that collide with native HTML elements (affects Svelte/Vue)

Offen
  • Stimmt etwas nicht?
#382 1 Kommentar 2 Reaktionen 0 zugewiesene Personen Auf GitHub ansehen

Dieses Issue hat noch niemand übernommen.

Bewertung

Schwierigkeit
2/5
Geschätzter Aufwand
1-3 Stunden
Anfängerfreundlichkeit
58/100
Issue-Typ
Bug
Klarheit
Größtenteils klar
Aktivitätsstatus
Ruhig
Tech-Stack
html, typescript
Bereich
frontend, web-dev

Rechercherichtung

Start by locating the @figma/code-connect/html tagged-template parser and trace where it lowercases native element names. Compare handling of Select and Textarea with TextField using the issue’s examples. Done means component names that collide with native HTML elements retain PascalCase in the generated output while native lowercase tags remain unchanged.

Vom Indexierungsmodell aus dem Issue-Text verfasst.

Beschreibung

feature request

Feature Request

The html tagged template from @figma/code-connect/html lowercases tag names that match native HTML elements (e.g., <Select>, <Textarea>), while custom element names like <TextField> preserve their PascalCase.

For frameworks like Svelte and Vue, <Select> and <select> are semantically different — the former is a component, the latter is a native element.

Current output: <select bind:value />
Desired output: <Select bind:value />

Note: Non-native tag names like <TextField> correctly preserve PascalCase.

Use Case

We use Code Connect with parser: "html" and label: "Svelte" for our Svelte 5 design system. Components named Select and Textarea display as native HTML elements in the Dev Mode code panel, which is confusing for developers.

Environment

  • @figma/code-connect v1.4.2
  • figma.config.json: { "parser": "html", "label": "Svelte" }
Vorherrschende Sprache
TypeScript
Sterne
1.6k
Forks
126
Keine gemergten PRs in 30 T.

Entwicklungsumgebung

Dieses Projekt bietet weder Dev-Container noch Dockerfile noch Beitragsleitfaden – die Einrichtung liegt bei Ihnen. Beginnen Sie mit der README; die allgemeinen Schritte stehen in unserem Leitfaden für den ersten Beitrag.

Erste Schritte

  1. Lesen Sie das ganze Issue und danach den Beitragsleitfaden des Projekts.
  2. Schreiben Sie ins Issue, dass Sie es übernehmen — das erspart doppelte Arbeit.
  3. Forken Sie das Repository und arbeiten Sie in einem Branch.
  4. Öffnen Sie einen Pull Request, der die Issue-Nummer nennt.

Mehr aus figma/code-connect

Alle Issues in figma/code-connect

Ähnliche Issues

Weitere Issues zu TypeScript

Neue Issues direkt in Ihr Postfach

Eine kurze Übersicht über anfängerfreundliche GitHub-Issues.