fix(cms-base-layer): render CMS button links with correct styling #2210
Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
There was a problem hiding this comment.
Pull request overview
This PR fixes a bug where CMS button links with Bootstrap-style classes (e.g., "btn btn-primary", "btn btn-secondary") from the API were not being properly transformed to Tailwind utility classes. The root cause was that the custom renderer was receiving a pre-transformed node instead of the original node, and the class matching logic had issues with the regex pattern.
Key changes:
- Fixed the renderer to pass the original node to custom component renderers instead of the transformed node
- Changed class matching from regex patterns to simpler
.includes()checks for better reliability - Added explicit removal of "btn" class and trimming to ensure clean class transformation
Reviewed changes
Copilot reviewed 4 out of 4 changed files in this pull request and generated 1 comment.
| File | Description |
|---|---|
| packages/cms-base-layer/app/helpers/html-to-vue/renderer.ts | Fixed to pass original node instead of transformedNode to custom renderers, preserving original class attributes |
| packages/cms-base-layer/app/components/public/cms/element/CmsElementText.vue | Updated button detection logic and class transformation to properly convert Bootstrap button classes to Tailwind classes |
| templates/vue-demo-store/uno.config.ts | Added custom surface-surface-primary color override for the demo store theme |
| .changeset/dirty-hats-cry.md | Added changeset documenting the button class transformation fix |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| _class = node.attrs.class | ||
| .replace(/\bbtn\s+/, "") | ||
| .replace( | ||
| "btn-secondary", | ||
| `${btnClass} bg-brand-secondary text-brand-on-secondary hover:bg-brand-secondary-hover`, | ||
| ) | ||
| .replace( | ||
| "btn-primary", | ||
| `${btnClass} bg-brand-primary text-brand-on-primary hover:bg-brand-primary-hover`, | ||
| ); | ||
| ) | ||
| .trim(); |
There was a problem hiding this comment.
The order of replacements can lead to incomplete transformation. If the class attribute contains "btn" without a trailing space (e.g., "btn-primary btn" or just "btn"), the first replacement won't match, leaving "btn" in the final output. Consider replacing specific variants (btn-primary, btn-secondary) first, then removing any remaining "btn" word with a global word-boundary regex like /\bbtn\b/g to handle all cases regardless of position.
Description
The btn class mapping fix affects CMS text elements like this API payload:
{ "value": "<a target=\"_self\" href=\"https://frontends.shopware.com\" class=\"btn btn-primary\">documentation</a>" }or with btn-secondary.
Before fix: Rendered as plain with no styling (classes not transformed)
After fix: Rendered as with Tailwind classes:
Type of change
ToDo's
Screenshots (if applicable)
Additional context