@gem-sdk/core 1.45.0-dev.104 → 1.45.0-dev.105

package/dist/cjs/components/Render.liquid.js

@@ -20,6 +20,7 @@ require('dayjs');
 var composeAdvanceStyle = require('../helpers/compose-advance-style.js');
 var convert = require('../helpers/convert.js');
 var render = require('../helpers/render.js');
+var cssjson = require('cssjson');
 
 const componentsRenderWithParentId = [
     'CarouselItem'
@@ -192,19 +193,28 @@ const Render = ({ uid, builder, components, parentId, extraFiles = {}, pageConte
         };
     }
 };
+const isEmptyCSS = (cssString)=>{
+    if (!cssString) return true;
+    const cssJSON = cssjson.toJSON(cssString);
+    const isObjectEmpty = (obj)=>{
+        if (typeof obj !== 'object' || obj === null) return true;
+        return !Object.keys(obj).some((key)=>{
+            return key === 'attributes' && Object.keys(obj[key]).length > 0 || typeof obj[key] === 'object' && !isObjectEmpty(obj[key]);
+        });
+    };
+    return isObjectEmpty(cssJSON.children);
+};
 const RenderCustomCode = (item)=>{
     const { css, javascript, rootClassName } = item.advanced?.editorData || {};
     const replacedCSS = css?.replaceAll(rootClassName, item.uid);
     const replacedJS = javascript?.replaceAll(rootClassName, item.uid);
-    const cssCode = render.RenderIf(!!css, render.template`
-      <style
-        id="${`custom-css-${item?.uid}`}"
-      >${replacedCSS}</style>
+    const cssCode = render.RenderIf(!!css && !isEmptyCSS(replacedCSS), render.template`
+      <style id="${`custom-css-${item?.uid}`}">
+        ${replacedCSS}
+      </style>
     `);
     const jsCode = render.RenderIf(!!javascript, render.template`
-      <script
-        id="${`custom-js-${item?.uid}`}"
-      >
+      <script id="${`custom-js-${item?.uid}`}">
         try {
           ${replacedJS}
         } catch(err){}

package/dist/esm/components/Render.liquid.js

@@ -16,6 +16,7 @@ import 'dayjs';
 import { composeAdvanceStyle } from '../helpers/compose-advance-style.js';
 import { baseAssetURL, isLocalEnv } from '../helpers/convert.js';
 import { RenderIf, template } from '../helpers/render.js';
+import { toJSON } from 'cssjson';
 
 const componentsRenderWithParentId = [
     'CarouselItem'
@@ -188,19 +189,28 @@ const Render = ({ uid, builder, components, parentId, extraFiles = {}, pageConte
         };
     }
 };
+const isEmptyCSS = (cssString)=>{
+    if (!cssString) return true;
+    const cssJSON = toJSON(cssString);
+    const isObjectEmpty = (obj)=>{
+        if (typeof obj !== 'object' || obj === null) return true;
+        return !Object.keys(obj).some((key)=>{
+            return key === 'attributes' && Object.keys(obj[key]).length > 0 || typeof obj[key] === 'object' && !isObjectEmpty(obj[key]);
+        });
+    };
+    return isObjectEmpty(cssJSON.children);
+};
 const RenderCustomCode = (item)=>{
     const { css, javascript, rootClassName } = item.advanced?.editorData || {};
     const replacedCSS = css?.replaceAll(rootClassName, item.uid);
     const replacedJS = javascript?.replaceAll(rootClassName, item.uid);
-    const cssCode = RenderIf(!!css, template`
-      <style
-        id="${`custom-css-${item?.uid}`}"
-      >${replacedCSS}</style>
+    const cssCode = RenderIf(!!css && !isEmptyCSS(replacedCSS), template`
+      <style id="${`custom-css-${item?.uid}`}">
+        ${replacedCSS}
+      </style>
     `);
     const jsCode = RenderIf(!!javascript, template`
-      <script
-        id="${`custom-js-${item?.uid}`}"
-      >
+      <script id="${`custom-js-${item?.uid}`}">
         try {
           ${replacedJS}
         } catch(err){}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gem-sdk/core",
-  "version": "1.45.0-dev.104",
+  "version": "1.45.0-dev.105",
   "license": "MIT",
   "sideEffects": false,
   "main": "dist/cjs/index.js",
@@ -33,6 +33,7 @@
   },
   "dependencies": {
     "classnames": "^2.5.1",
+    "cssjson": "2.1.3",
     "dayjs": "^1.11.11",
     "react-error-boundary": "4.0.10",
     "swr": "2.1.2",