`dasherize` mangles mid-name and trailing acronyms (`CopyURLElement` throws `SyntaxError`, `@attr URL` -> `data-ur-l`)
Nobody has claimed this yet.
Assessment
- Difficulty
- 2/5
- Estimated time
- 1-3 hours
- Newbie friendliness
- 78/100
- Issue type
- Bug
- Clarity
- Clearly specified
- Activity status
- Active
- Tech stack
- typescript, web-dev
- Domain
- frontend
Research direction
The bug is in src/dasherize.ts, where the regex .replace(/([A-Z]($|[a-z]))/g, '-$1') decides where dashes go. Start by reading that function and running the reproduction script from the issue against lib/dasherize.js to see the wrong outputs. Done means UserIDListElement, CopyURLElement, mySVGIcon, srcURL, data-URL and data-srcURL produce the expected dashed forms listed in the issue, with tests covering them.
Written by the indexing model from the issue text.
Description
dasherize only treats an acronym as a single word when it starts the identifier (URLBar -> url-bar, added in #44), mangling acronyms in the middle or at the end of controller class names and @attr property names.
npm install @github/[email protected]
node --input-type=module -e '
import { dasherize } from "@github/catalyst/lib/dasherize.js";
for (const s of ["UserIDListElement", "CopyURLElement", "mySVGIcon", "srcURL", "data-URL", "data-srcURL"]) {
console.log(s, "->", dasherize(s));
}
'
Actual:
UserIDListElement -> userid-list-element
CopyURLElement -> copyurl-element
mySVGIcon -> mysvg-icon
srcURL -> srcur-l
data-URL -> data-ur-l
data-srcURL -> data-srcur-l
Expected:
UserIDListElement -> user-id-list-element
CopyURLElement -> copy-url-element
mySVGIcon -> my-svg-icon
srcURL -> src-url
data-URL -> data-url
data-srcURL -> data-src-url
In a browser, @controller class UserIDListElement registers <userid-list>, @controller class CopyURLElement throws DOMException: Failed to execute 'define' on 'CustomElementRegistry': "copyurl" is not a valid custom element name once register() strips -element, and @attr URL / @attr srcURL map to data-ur-l / data-srcur-l instead of data-url (the example in https://github.github.io/catalyst/guide/attrs) and data-src-url.
In src/dasherize.ts, .replace(/([A-Z]($|[a-z]))/g, '-$1') only inserts a dash before a capital letter followed by a lowercase letter or end-of-string, so no boundary is inserted between a lowercase letter and a multi-letter acronym, and a trailing acronym is split before its final capital.
Versions: @github/[email protected] (npm latest) and main (f022227), Node.js v26.13.0 and Chromium.
Credit: https://ucsbplse.github.io/
- Dominant language
- TypeScript
- Stars
- 1.4k
- Forks
- 61
- Avg merge
- 1d 15h
- Merged PRs (30d)
- 8
Getting set up
Starts the project's dev container in your browser, under your own GitHub account.
- No Dockerfile or Docker Compose file
- No pull request template
- Read the contributing guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
More from github/catalyst
-
Difficulty 3/5 1-2 days Newbie friendliness 62/100
-
Difficulty 5/5 Over a week Newbie friendliness 20/100
-
Difficulty 5/5 Over a week Newbie friendliness 25/100
-
Difficulty 3/5 1-2 days Newbie friendliness 42/100
-
Difficulty 3/5 1-2 days Newbie friendliness 45/100
Similar issues
-
normalizePropName strips `#` characters from Figma property names instead of only the `#id` suffixOpen
Difficulty 2/5 1-3 hours Newbie friendliness 72/100
figma/code-connect#419 ·
-
bug
Difficulty 2/5 1-3 hours Newbie friendliness 70/100
jeanibarz/knowledge-base-mcp-server#1268 ·
Maintainers usually reply within 1 day
-
Difficulty 1/5 Under an hour Newbie friendliness 78/100
Koenkk/zigbee-herdsman-converters#13820 ·
Maintainers usually reply within 2 days
-
A live recovery copy treats a large whole number and text with the same digits as the same valueOpenbug sharing & sync
Difficulty 2/5 1-3 hours Newbie friendliness 64/100
Maintainers usually reply within 1 day
-
[prefer-expect-resolves] autofix leaves a stray ")" when the awaited expression is parenthesizedOpen
Difficulty 2/5 1-3 hours Newbie friendliness 78/100
jest-community/eslint-plugin-jest#2052 ·