Add missing unsafeCSS check for badge.css import

[paodb]

Close #31

Summary by CodeRabbit

• Refactor
  • Updated the badge component styling mechanism to use improved CSS processing for better runtime performance and style resolution.

_{✏️ Tip: You can customize this high-level summary in your review settings.}

[coderabbitai]

Walkthrough

Wraps badgeStylesContent with unsafeCSS utility from lit in the badge list component. This changes how badge CSS is processed at runtime by switching from direct CSS import usage to an unsafeCSS-wrapped import, addressing CSSStyleSheet conversion errors.

Changes

Cohort / File(s)	Summary
Badge List CSS Processing src/main/resources/META-INF/resources/frontend/src/fc-badge-list.ts	Wraps badgeStylesContent with unsafeCSS utility from lit within the static styles array to resolve CSSStyleSheet conversion errors

Estimated code review effort

🎯 1 (Trivial) | ⏱️ ~3 minutes

Possibly related PRs

• PR #30: Also modifies fc-badge-list.ts badge CSS handling; replaced original styleSheet import with inlined badge.css content, providing context for CSS handling evolution in this component.

Suggested reviewers

• mlopezFC
• javier-godoy

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The PR title accurately describes the main change: adding unsafeCSS wrapping to the badge.css import to fix the CSSStyleSheet conversion error.
Linked Issues check	✅ Passed	The code change directly addresses issue #31 by wrapping badgeStylesContent in unsafeCSS, which resolves the CSSStyleSheet conversion error reported in the linked issue.
Out of Scope Changes check	✅ Passed	All changes are directly scoped to fixing the reported issue; only the badge.css import handling was modified with the unsafeCSS wrapper.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing touches

• 📝 Generate docstrings

---

🧹 Recent nitpick comments

src/main/resources/META-INF/resources/frontend/src/fc-badge-list.ts (1)

25-25: Remove redundant unsafeCSS() wrapper around badgeStylesContent.

When using Vaadin's ?inline CSS imports, the value is already a Lit-compatible CSSResult and should be used directly in static styles without wrapping in unsafeCSS(). This follows Vaadin's official pattern for Vite-based projects.

♻️ Suggested simplification

 static styles = [
-  unsafeCSS(badgeStylesContent),
+  badgeStylesContent,
   css`

Also applies to: Lines 23, 25

---

📜 Recent review details

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 22ec8e4 and d192442.

📒 Files selected for processing (1)

• src/main/resources/META-INF/resources/frontend/src/fc-badge-list.ts

🧰 Additional context used

🧠 Learnings (2)

📓 Common learnings

Learnt from: paodb
Repo: FlowingCode/BadgeList PR: 30
File: src/main/resources/META-INF/resources/frontend/src/fc-badge-list.ts:23-23
Timestamp: 2026-01-15T16:53:31.254Z
Learning: In Vaadin projects with Vite, when importing CSS files with the `?inline` suffix (e.g., `import styles from './styles.css?inline'`), the imported value can be used directly in a LitElement's `static styles` array without wrapping it in `unsafeCSS()`. Vaadin's build pipeline automatically transforms these imports into a Lit-compatible format. This is the official pattern shown in Vaadin's documentation for Lit components.

📚 Learning: 2026-01-15T16:53:31.254Z

Learnt from: paodb
Repo: FlowingCode/BadgeList PR: 30
File: src/main/resources/META-INF/resources/frontend/src/fc-badge-list.ts:23-23
Timestamp: 2026-01-15T16:53:31.254Z
Learning: In TypeScript files for Vaadin Lit components, when importing CSS with the ?inline suffix (e.g., import styles from './styles.css?inline'), you can use the imported value directly in a LitElement static styles array without wrapping in unsafeCSS(). This works because Vaadin's Vite-based build pipeline transforms such imports into Lit-compatible styles. Apply this pattern to TS files that import CSS with ?inline in Vaadin Lit projects, per Vaadin documentation.

Applied to files:

• src/main/resources/META-INF/resources/frontend/src/fc-badge-list.ts

_{✏️ Tip: You can disable this entire section by setting review_details to false in your review settings.}

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[sonarqubecloud]

Quality Gate passed

Issues
0 New issues
0 Accepted issues

Measures
0 Security Hotspots
0.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarQube Cloud