search

ssbc / visual-docs

Diagrams and animations documenting Secure Scuttlebutt (scuttlebutt.nz) and Āhau (ahau.io)
https://scuttlebutt.nz
Other
16 stars 1 forks source link

convert (only some) camelCase properties to kebab-case #6

Closed cameralibre closed 3 years ago

cameralibre commented 4 years ago

Currently I'm matching any camelCase words in the animDetails string and converting them to kebab-case: https://github.com/ssbc/visual-docs/blob/3e42f0216f621e5da85eb7e98439991192148d05/js/convert-anime-to-css.js#L154 This does the right thing for strokeDashoffset and transformOrigin, which should be converted to stroke-dashoffset and transform-origin in CSS.

However, I don't want to be converting camelCase for the following transform properties: translateX, translateY, translateZ, skewX, skewY, scaleX, scaleY, scaleZ, rotateX, rotateY, rotateZ.

I thought that I could adjust the expression to exclude X, Y & Z, i.e.

animDetails = animDetails.replace(/([a-z])([A-W])/g, '$1-$2').toLowerCase()

But that only does half the job. The hyphens are correctly applied:

strokeDashoffset → stroke-Dashoffset translateX → translateX

but then .toLowerCase() is of course applied to all of animDetails rather than just the match, so I end up with:

stroke-Dashoffset → stroke-dashoffset translateX → translatex

According to some references I should be able to convert to lowercase within Regex using \L which I tried to add into my .replace() argument:

animDetails = animDetails.replace(/([a-z])([A-W])/g, '$1-\L$2')

But I don't think that means Regex in JS in the browser - it just ended up adding an 'L' character :(

strokeDashoffset → stroke-LDashoffset

cameralibre commented 3 years ago

fixed by f09312f