docs: css metadata

[MGREMY]

Summary by CodeRabbit

• New Features
  • Added component CSS metadata browsing, including grouped styles and selectable variants.
  • Documentation metadata now displays associated CSS classes and custom class names.
• Documentation
  • Added metadata sections across component documentation pages.
  • Removed duplicated CSS mapping tables from documentation pages where metadata now provides the information.
  • Updated component styling references for improved consistency and discoverability.
• Bug Fixes
  • Improved documentation accuracy by ensuring component metadata and styling information remain synchronized.

[dokploy-2026-04-14-519ku5]

Dokploy Preview Deployment

Name	Status	Preview	Updated (UTC)
root	✅ Done	Preview URL	2026-07-23T08:53:51.908Z

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro Plus

Run ID: bb378fbd-b896-4d7a-9942-f60515587944

📥 Commits

Reviewing files that changed from the base of the PR and between 0c1e614 and 6825f59.

📒 Files selected for processing (24)

• apps/documentation/project.json
• apps/documentation/src/app/components/app-css-content.ts
• apps/documentation/src/app/components/app-metadata.ts
• apps/documentation/src/content/documentation/ng-primitives/accordion.md
• apps/documentation/src/content/documentation/ng-primitives/breadcrumb.md
• apps/documentation/src/content/documentation/ng-primitives/button.md
• apps/documentation/src/content/documentation/ng-primitives/checkbox.md
• apps/documentation/src/content/documentation/ng-primitives/combobox.md
• apps/documentation/src/content/documentation/ng-primitives/dialog.md
• apps/documentation/src/content/documentation/ng-primitives/extended/loader.md
• apps/documentation/src/content/documentation/ng-primitives/extended/navbar.md
• apps/documentation/src/content/documentation/ng-primitives/extended/table.md
• apps/documentation/src/content/documentation/ng-primitives/form-field.md
• apps/documentation/src/content/documentation/ng-primitives/input.md
• apps/documentation/src/content/documentation/ng-primitives/menu.md
• apps/documentation/src/content/documentation/ng-primitives/pagination.md
• apps/documentation/src/content/documentation/ng-primitives/switch.md
• apps/documentation/src/content/documentation/ng-primitives/toast.md
• apps/documentation/src/content/documentation/ng-primitives/tooltip.md
• tools/nx-source-plugin/generators.json
• tools/nx-source-plugin/src/generators/component-css-generator/component-css-generator.ts
• tools/nx-source-plugin/src/generators/component-css-generator/schema.d.ts
• tools/nx-source-plugin/src/generators/component-css-generator/schema.json
• tools/nx-source-plugin/src/generators/component-metadata-generator/component-metadata-generator.ts

💤 Files with no reviewable changes (16)

• apps/documentation/src/content/documentation/ng-primitives/input.md
• apps/documentation/src/content/documentation/ng-primitives/extended/loader.md
• apps/documentation/src/content/documentation/ng-primitives/checkbox.md
• apps/documentation/src/content/documentation/ng-primitives/tooltip.md
• apps/documentation/src/content/documentation/ng-primitives/dialog.md
• apps/documentation/src/content/documentation/ng-primitives/button.md
• apps/documentation/src/content/documentation/ng-primitives/extended/table.md
• apps/documentation/src/content/documentation/ng-primitives/extended/navbar.md
• apps/documentation/src/content/documentation/ng-primitives/breadcrumb.md
• apps/documentation/src/content/documentation/ng-primitives/accordion.md
• apps/documentation/src/content/documentation/ng-primitives/toast.md
• apps/documentation/src/content/documentation/ng-primitives/combobox.md
• apps/documentation/src/content/documentation/ng-primitives/pagination.md
• apps/documentation/src/content/documentation/ng-primitives/menu.md
• apps/documentation/src/content/documentation/ng-primitives/form-field.md
• apps/documentation/src/content/documentation/ng-primitives/switch.md

---

Walkthrough

The documentation build now runs a CSS metadata generator. Component host metadata and grouped CSS are emitted as JSON, loaded by documentation components, and rendered through generated metadata and CSS sections across primitive pages.

Changes

Component CSS metadata flow

Layer / File(s)	Summary
Generator pipeline tools/nx-source-plugin/generators.json, tools/nx-source-plugin/src/generators/component-css-generator/*, tools/nx-source-plugin/src/generators/component-metadata-generator/component-metadata-generator.ts, apps/documentation/project.json	Registers the CSS sync generator, writes grouped component CSS JSON artifacts, and includes parsed host mappings in component metadata.
Documentation rendering apps/documentation/src/app/components/app-css-content.ts, apps/documentation/src/app/components/app-metadata.ts	Loads grouped CSS metadata, selects component styles, generates highlighted HTML, and renders CSS class tables from host mappings.
Documentation page migration apps/documentation/src/content/documentation/ng-primitives/*.md, apps/documentation/src/content/documentation/ng-primitives/extended/*.md	Adds missing metadata components and removes manually maintained CSS mapping sections from primitive documentation pages.

Estimated code review effort: 4 (Complex) | ~45 minutes

Possibly related PRs

• MGREMY/nx_source#14: Adds directive host attributes consumed by the metadata pipeline.
• MGREMY/nx_source#20: Adds form-field host mappings used for generated CSS metadata.
• MGREMY/nx_source#37: Introduces the autogenerated metadata flow extended by these changes.

Poem

I’m a bunny with CSS in a row,
JSON carrots are ready to show.
Host classes hop into view,
Metadata blooms fresh and new.
Old tables fade—thump, thump, hooray!

🚥 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 title matches the main theme of the PR: adding CSS metadata support and updating documentation around it.
Docstring Coverage	✅ Passed	Docstring coverage is 80.00% which is sufficient. The required threshold is 80.00%.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

✨ Finishing Touches

📝 Generate docstrings

• Create stacked PR
• Commit on current branch

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch docs/css-metadata

Warning

There were issues while running some tools. Please review the errors and either fix the tool's configuration or disable the tool if it's a critical failure.

🔧 Checkov (3.3.8)

apps/documentation/project.json

Traceback (most recent call last):
File "/usr/local/bin/checkov", line 2, in
from checkov.main import Checkov
ModuleNotFoundError: No module named 'checkov'

tools/nx-source-plugin/generators.json

Traceback (most recent call last):
File "/usr/local/bin/checkov", line 2, in
from checkov.main import Checkov
ModuleNotFoundError: No module named 'checkov'

tools/nx-source-plugin/src/generators/component-css-generator/schema.json

Traceback (most recent call last):
File "/usr/local/bin/checkov", line 2, in
from checkov.main import Checkov
ModuleNotFoundError: No module named 'checkov'

---

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.}