@team-monolith/cds 1.78.1 → 1.78.2

package/dist/icons/custom/svgrColoredTemplate.js

@@ -9,22 +9,25 @@ const URL_PATTERN = /(url\(#\w+)(\))/;
 function modifySVGElementsRecursive(element) {
     let useUniqueId = false;
     const elementAttributes = element.openingElement.attributes;
-    // uniqueId 적용
+    // svg 컴포넌트가 여러 번 렌더링되는 경우 같은 id로 인식되어 style 공유를 막기 위한 uniqueId 적용
     elementAttributes.forEach(attr => {
         if (attr.value.value) {
             // id attribute에 uniqueId 적용
+            // id="paint0_linear_4029_17033" -> id="paint0_linear_4029_17033_${uniqueId}"
             if (attr.name.name === 'id') {
                 attr.value.value = `${attr.value.value}_\${uniqueId}`;
                 useUniqueId = true;
             }
             // url 패턴에 매칭되는 attribute에 uniqueId 적용
+            // fill="url(#paint0_linear_4029_17033)" => fill="url(#paint0_linear_4029_17033_${uniqueId})"
             if (attr.value.value.match(URL_PATTERN)) {
                 attr.value.value = attr.value.value.replace(URL_PATTERN, "$1_${uniqueId}$2");
                 useUniqueId = true;
             }
         }
     });
-    // 중복 스타일 제거
+    // 중복 스타일 제거 (객체 리터럴의 중복 속성 타입 오류 방지)
+    // style="fill:#363636;fill:color(display-p3 0.2118 0.2118 0.2118);" => style="fill:color(display-p3 0.2118 0.2118 0.2118);"
     const styleAttribute = elementAttributes.find(attr => attr.name.name === 'style');
     if (styleAttribute) {
         const styleMap = new Map();
@@ -41,11 +44,9 @@ function modifySVGElementsRecursive(element) {
         });
         styleAttribute.value.expression.properties = Array.from(styleMap.values());
     }
-    if (element.children.length > 0) {
-        element.children.forEach(child => {
-            useUniqueId = modifySVGElementsRecursive(child) || useUniqueId;
-        });
-    }
+    element.children.forEach(child => {
+        useUniqueId = modifySVGElementsRecursive(child) || useUniqueId;
+    });
     return useUniqueId;
 }
 const template = (variables, { tpl }) => {

package/dist/icons/custom/svgrDefaultTemplate.js

@@ -7,37 +7,38 @@ const URL_PATTERN = /(url\(#\w+)(\))/;
  * svg의 하위 엘리먼트에 대한 재귀 호출
  * @returns {boolean} useUniqueId
  */
-function modifySVGElementsRecursive(element, uniqueIdSet) {
+function modifySVGElementsRecursive(element) {
     let useUniqueId = false;
     const elementAttributes = element.openingElement.attributes;
-    // uniqueId 적용
+    // svg 컴포넌트가 여러 번 렌더링되는 경우 같은 id로 인식되어 style 공유를 막기 위한 uniqueId 적용
     elementAttributes.forEach(attr => {
         if (attr.value.value) {
             // id attribute에 uniqueId 적용
+            // id="paint0_linear_4029_17033" -> id="paint0_linear_4029_17033_${uniqueId}"
             if (attr.name.name === 'id') {
                 attr.value.value = `${attr.value.value}_\${uniqueId}`;
                 useUniqueId = true;
             }
             // url 패턴에 매칭되는 attribute에 uniqueId 적용
+            // fill="url(#paint0_linear_4029_17033)" => fill="url(#paint0_linear_4029_17033_${uniqueId})"
             if (attr.value.value.match(URL_PATTERN)) {
                 attr.value.value = attr.value.value.replace(URL_PATTERN, "$1_${uniqueId}$2");
                 useUniqueId = true;
             }
         }
     });
-    // currentColor 변환
-    // 단색 아이콘의 경우 #363636 컬러값 고정 (remixicon 컬러값 반영), 배경색의 경우 white 또는 foreground에서 수동 적용
+    // 단색 컬러 #363636(remixicon 컬러값)에 대해서 color prop을 적용하기 위한 currentColor로 변환
+    // fill="#363636" => fill="currentColor"
+    // 배경색인 white 또는 foreground값은 유지
     const fillAttribute = elementAttributes.find(attr => attr.name.name === 'fill');
     if (fillAttribute && fillAttribute.value.value === BASE_COLOR) {
         fillAttribute.value.value = 'currentColor';
     }
     // color prop이 있는 단색 svg의 경우 스타일 속성 제거
     element.openingElement.attributes = elementAttributes.filter(attr => attr.name.name !== 'style');
-    if (element.children.length > 0) {
-        element.children.forEach(child => {
-            useUniqueId = modifySVGElementsRecursive(child) || useUniqueId;
-        });
-    }
+    element.children.forEach(child => {
+        useUniqueId = modifySVGElementsRecursive(child) || useUniqueId;
+    });
     return useUniqueId;
 }
 const template = (variables, { tpl }) => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@team-monolith/cds",
-  "version": "1.78.1",
+  "version": "1.78.2",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "sideEffects": false,