🐛 Fix style scoping problem with imported SVG

CHANGES.md

@@ -10,6 +10,7 @@
 ### :bug: Bugs fixed
 
 - Fix color palette sorting [Taiga Issue #7458](https://tree.taiga.io/project/penpot/issue/7458)
+- Fix style scoping problem with imported SVG [Taiga #7671](https://tree.taiga.io/project/penpot/issue/7671)
 
 ## 2.0.1
 

frontend/src/app/main/ui/context.cljs

@@ -17,6 +17,7 @@
 (def current-page-id      (mf/create-context nil))
 (def current-file-id      (mf/create-context nil))
 (def current-vbox         (mf/create-context nil))
+(def current-svg-root-id  (mf/create-context nil))
 
 (def active-frames        (mf/create-context nil))
 (def render-thumbnails    (mf/create-context nil))

frontend/src/app/main/ui/shapes/group.cljs

@@ -17,6 +17,7 @@
     (mf/fnc group-shape
       {::mf/wrap-props false}
       [props]
+
       (let [shape         (unchecked-get props "shape")
             childs        (unchecked-get props "childs")
             render-id     (mf/use-ctx muc/render-id)
@@ -36,21 +37,31 @@
 
             mask-props    (if ^boolean masked-group?
                             #js {:mask (mask-url render-id mask)}
-                            #js {})]
+                            #js {})
+
+            current-svg-root-id (mf/use-ctx muc/current-svg-root-id)
+
+            ;; We need to create a "scope" for svg classes. The root of the imported SVG (first group) will
+            ;; be stored in the context. When rendering the styles we add its id as prefix.
+            [svg-wrapper svg-wrapper-props]
+            (if (and (contains? shape :svg-attrs) (not  current-svg-root-id))
+              [(mf/provider muc/current-svg-root-id) #js {:value (:id shape)}]
+              [mf/Fragment #js {}])]
 
         ;; We need to separate mask and clip into two because a bug in
         ;; Firefox breaks when the group has clip+mask+foreignObject
         ;; Clip and mask separated will work in every platform Firefox
         ;; bug: https://bugzilla.mozilla.org/show_bug.cgi?id=1734805
-        [:> wrapper clip-props
+        [:> svg-wrapper svg-wrapper-props
-         [:> wrapper mask-props
+         [:> wrapper clip-props
-          (when ^boolean masked-group?
+          [:> wrapper mask-props
-            [:& render-mask {:mask mask}])
+           (when ^boolean masked-group?
+             [:& render-mask {:mask mask}])
 
-          (for [item childs]
+           (for [item childs]
-            [:& shape-wrapper
+             [:& shape-wrapper
-             {:shape item
+              {:shape item
-              :key (dm/str (dm/get-prop item :id))}])]]))))
+               :key (dm/str (dm/get-prop item :id))}])]]]))))
 
 
 

frontend/src/app/main/ui/shapes/svg_raw.cljs

@@ -104,9 +104,20 @@
           svg-root?  (and (map? content) (= tag :svg))
           svg-tag?   (map? content)
           svg-leaf?  (string? content)
-          valid-tag? (contains? csvg/svg-tags tag)]
+          valid-tag? (contains? csvg/svg-tags tag)
+
+          current-svg-root-id (mf/use-ctx muc/current-svg-root-id)
+
+          ;; We need to create a "scope" for svg classes. The root of the imported SVG (first group) will
+          ;; be stored in the context and with this we scoped the styles:
+          style-content
+          (when (= tag :style)
+            (dm/str "#shape-" current-svg-root-id "{ " (->> shape :content :content (str/join "\n")) " }"))]
 
       (cond
+        (= tag :style)
+        [:style style-content]
+
         ^boolean svg-root?
         [:& svg-root {:shape shape}
          (for [item childs]