fix(cms-base-layer): render CMS button links with correct styling (#2210)

* fix(cms-base-layer): render CMS button links with correct styling

* fix(templates): add missing surface-surface-primary for vue-demo-store

Author: mkucmus

.changeset/dirty-hats-cry.md

@@ -0,0 +1,7 @@
+---
+"@shopware/cms-base-layer": patch
+---
+
+Anchor tags with "btn btn-primary" classes from the API were not being
+transformed to Tailwind utility classes due to condition matching issues
+in the html-to-vue renderer.

packages/cms-base-layer/app/components/public/cms/element/CmsElementText.vue

@@ -37,7 +37,7 @@ const CmsTextRender = defineComponent({
             return (
               node.type === "tag" &&
               node.name === "a" &&
-              !node.attrs?.class?.match(/btn\s?/)
+              !node.attrs?.class?.includes("btn")
             );
           },
           renderer(
@@ -61,7 +61,7 @@ const CmsTextRender = defineComponent({
             return (
               node.type === "tag" &&
               node.name === "a" &&
-              node.attrs?.class?.match(/btn\s?/)
+              !!node.attrs?.class?.includes("btn")
             );
           },
           renderer(
@@ -75,14 +75,16 @@ const CmsTextRender = defineComponent({
                 "rounded-md inline-block my-2 py-2 px-4 border border-transparent text-sm font-medium focus:outline-none disabled:opacity-75";
 
               _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();
             }
 
             return createElement(

packages/cms-base-layer/app/helpers/html-to-vue/renderer.ts

@@ -39,7 +39,7 @@ export function renderer(ast, config, createElement, context, resolveUrl) {
         if (typeof config.extraComponentsMap[node.name] !== "undefined") {
           return config.extraComponentsMap[node.name].renderer.call(
             this,
-            transformedNode,
+            node,
             children,
             h,
             context,

templates/vue-demo-store/uno.config.ts

@@ -98,6 +98,7 @@ const templateConfig: ConfigBase = {
       "warning-900": "#713f12",
       // Surface Colors (example for the transformer)
       "surface-surface": "#ffffff",
+      "surface-surface-primary": "#f0f8ff",
       "surface-surface-variant": "#f5f5f5",
       "surface-container": "#f0f0f0",
       "surface-container-high": "#e8e8e8",