@gem-sdk/core 2.2.0-staging.27 → 2.2.0-staging.30

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 customCdoe = require('../helpers/custom-cdoe.js');
 
 const componentsRenderWithParentId = [
     'CarouselItem'
@@ -206,7 +207,7 @@ 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`
+    const cssCode = render.RenderIf(!!css && customCdoe.hasNonEmptyCSSRules(replacedCSS), render.template`
       <style id="${`custom-css-${item?.uid}`}">
         ${replacedCSS}
       </style>
@@ -296,8 +297,7 @@ const WrapRenderChildren = ({ uid, customProps }, codes)=>{
     if (codes?.length) {
         let tempLiquid = '';
         let fileIndex = 0;
-        for(let i = 0; i < codes.length; i++){
-            const code = codes[i];
+        for (const code of codes){
             if (code) {
                 const textEncoder = new TextEncoder();
                 const newTempLiquid = tempLiquid + code;

package/dist/cjs/components/RenderCustomCode.js

@@ -19,6 +19,7 @@ require('@gem-sdk/adapter-shopify');
 require('swr/mutation');
 require('vanilla-lazyload');
 require('../hooks/useCartUI.js');
+var customCdoe = require('../helpers/custom-cdoe.js');
 
 const RenderCustomCode = ({ uid, advanced })=>{
     const mode = shop.useEditorMode();
@@ -41,7 +42,7 @@ const RenderCustomCode = ({ uid, advanced })=>{
     return /*#__PURE__*/ jsxRuntime.jsxs(jsxRuntime.Fragment, {
         children: [
             /*#__PURE__*/ jsxRuntime.jsx(Head, {
-                children: !!css && /*#__PURE__*/ jsxRuntime.jsx("style", {
+                children: !!css && customCdoe.hasNonEmptyCSSRules(replacedCSS) && /*#__PURE__*/ jsxRuntime.jsx("style", {
                     id: mapId['css'],
                     dangerouslySetInnerHTML: {
                         __html: replacedCSS

package/dist/cjs/helpers/custom-cdoe.js

@@ -0,0 +1,8 @@
+'use strict';
+
+const hasNonEmptyCSSRules = (css)=>{
+    const regex = /[^{]+\{\s*\}/g;
+    return !regex.test(css);
+};
+
+exports.hasNonEmptyCSSRules = hasNonEmptyCSSRules;

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 { hasNonEmptyCSSRules } from '../helpers/custom-cdoe.js';
 
 const componentsRenderWithParentId = [
     'CarouselItem'
@@ -202,7 +203,7 @@ 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`
+    const cssCode = RenderIf(!!css && hasNonEmptyCSSRules(replacedCSS), template`
       <style id="${`custom-css-${item?.uid}`}">
         ${replacedCSS}
       </style>
@@ -292,8 +293,7 @@ const WrapRenderChildren = ({ uid, customProps }, codes)=>{
     if (codes?.length) {
         let tempLiquid = '';
         let fileIndex = 0;
-        for(let i = 0; i < codes.length; i++){
-            const code = codes[i];
+        for (const code of codes){
             if (code) {
                 const textEncoder = new TextEncoder();
                 const newTempLiquid = tempLiquid + code;

package/dist/esm/components/RenderCustomCode.js

@@ -15,6 +15,7 @@ import '@gem-sdk/adapter-shopify';
 import 'swr/mutation';
 import 'vanilla-lazyload';
 import '../hooks/useCartUI.js';
+import { hasNonEmptyCSSRules } from '../helpers/custom-cdoe.js';
 
 const RenderCustomCode = ({ uid, advanced })=>{
     const mode = useEditorMode();
@@ -37,7 +38,7 @@ const RenderCustomCode = ({ uid, advanced })=>{
     return /*#__PURE__*/ jsxs(Fragment, {
         children: [
             /*#__PURE__*/ jsx(Head, {
-                children: !!css && /*#__PURE__*/ jsx("style", {
+                children: !!css && hasNonEmptyCSSRules(replacedCSS) && /*#__PURE__*/ jsx("style", {
                     id: mapId['css'],
                     dangerouslySetInnerHTML: {
                         __html: replacedCSS

package/dist/esm/helpers/custom-cdoe.js

@@ -0,0 +1,6 @@
+const hasNonEmptyCSSRules = (css)=>{
+    const regex = /[^{]+\{\s*\}/g;
+    return !regex.test(css);
+};
+
+export { hasNonEmptyCSSRules };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gem-sdk/core",
-  "version": "2.2.0-staging.27",
+  "version": "2.2.0-staging.30",
   "license": "MIT",
   "sideEffects": false,
   "main": "dist/cjs/index.js",