Move mentions classname to scss module, rearrange classes

[lewisl9029]

Summary

This is part of a series of PRs being spun off from my WIP branch to get the Highlight web app ready for Reflame. Hopefully this makes things a bit easier to review, test, and merge. 🙂

We had both a CommentTextBody.module.css and a CommontTextBody.module.scss previously. The scss module seems to be for regular component styling, while the css module seemed to be mostly meant to contain classes for the @highlight-run/react-mentions classNames prop integration.

I ended up renaming CommentTextBody.module.css to mentions.module.scss to better reflect its purpose and distinguish it from the main styling module, and so there wouldn't be any name conflicts when generating corresponding .js modules for the Reflame integration. There also seemed to be 2 classes in the css module that didn't have anything to do with mentions, so I moved those out as well.

How did you test this change?

Tested this out in the Reflame preview:

Are there any deployment considerations?

We do probably want to verify in Render as well to make sure Vite has the same exports output for CSS and SCSS modules.

[Vadman97]

local dev looks good!

[Vadman97]

@lewisl9029 oh actually, local dev emits some typescript files that should be committed

index 4973cc9e4..471b360a1 100644
--- a/frontend/src/pages/Player/Toolbar/NewCommentForm/CommentTextBody/CommentTextBody.module.scss.d.ts
+++ b/frontend/src/pages/Player/Toolbar/NewCommentForm/CommentTextBody/CommentTextBody.module.scss.d.ts
@@ -1,7 +1,9 @@
 export const adminText: string
 export const avatarContainer: string
+export const commentText: string
 export const email: string
 export const longValue: string
+export const mentionedUser: string
 export const noResultsMessage: string
 export const slackLogo: string
 export const slackLogoContainer: string
diff --git a/frontend/src/pages/Player/Toolbar/NewCommentForm/CommentTextBody/mentions.module.scss.d.ts b/frontend/src/pages/Player/Toolbar/NewCommentForm/CommentTextBody/mentions.module.scss.d.ts
new file mode 100644
index 000000000..017a9172f
--- /dev/null
+++ b/frontend/src/pages/Player/Toolbar/NewCommentForm/CommentTextBody/mentions.module.scss.d.ts
@@ -0,0 +1,10 @@
+export const mentions: string
+export const mentionsControl: string
+export const mentionsHighlighter: string
+export const mentionsInput: string
+export const mentionsMention: string
+export const mentionsMultiLine: string
+export const mentionsSingleLine: string
+export const mentionsSuggestionsItem: string
+export const mentionsSuggestionsItemFocused: string
+export const mentionsSuggestionsList: string

mind adding them?

[lewisl9029]

Updated here: 10898b8

Btw, I could never figure out what was actually generating these. 🤯

Does Vite do this by default or is it some config/plugin?

[Vadman97]

@lewisl9029 hmm, think that is a vite plugin.

looks like the build is failing now though

@highlight-run/frontend:typegen: ERROR: command finished with error: command (/home/runner/work/highlight/highlight/frontend) yarn run typegen exited (1)
command (/home/runner/work/highlight/highlight/frontend) yarn run typegen exited (1)

[lewisl9029]

Ahh, seems like the generated .d.ts only includes the camelCase converted classnames, even though the actual generated module contains both that and the original __ version.

Moved it to use the camelCase name here since it doesn't really make a difference.

[Vadman97]

oh interesting, thanks @lewisl9029 !