diff --git a/CHANGES.md b/CHANGES.md index 3df22277a..70ca6e42c 100644 --- a/CHANGES.md +++ b/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 diff --git a/frontend/src/app/main/ui/context.cljs b/frontend/src/app/main/ui/context.cljs index bfe0fa6ee..1aa4b532b 100644 --- a/frontend/src/app/main/ui/context.cljs +++ b/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)) diff --git a/frontend/src/app/main/ui/shapes/group.cljs b/frontend/src/app/main/ui/shapes/group.cljs index 8b3ad40ce..e2b3fdd35 100644 --- a/frontend/src/app/main/ui/shapes/group.cljs +++ b/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 - [:> wrapper mask-props - (when ^boolean masked-group? - [:& render-mask {:mask mask}]) + [:> svg-wrapper svg-wrapper-props + [:> wrapper clip-props + [:> wrapper mask-props + (when ^boolean masked-group? + [:& render-mask {:mask mask}]) - (for [item childs] - [:& shape-wrapper - {:shape item - :key (dm/str (dm/get-prop item :id))}])]])))) + (for [item childs] + [:& shape-wrapper + {:shape item + :key (dm/str (dm/get-prop item :id))}])]]])))) diff --git a/frontend/src/app/main/ui/shapes/svg_raw.cljs b/frontend/src/app/main/ui/shapes/svg_raw.cljs index 49578d08d..2c8b57bce 100644 --- a/frontend/src/app/main/ui/shapes/svg_raw.cljs +++ b/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]