@teleporthq/teleport-uidl-resolver - npm Package Compare versions

Comparing version 0.27.5-alpha.0 to 0.27.5

__tests__/utils.ts

@@ -20,4 +20,12 @@ import {
   resolveElement,
+  parseStaticStyles,
+  prefixAssetURLs,
 } from '../src/utils'
-import { UIDLElement, UIDLNode, UIDLRepeatNode, Mapping } from '@teleporthq/teleport-types'
+import {
+  UIDLElement,
+  UIDLNode,
+  UIDLRepeatNode,
+  Mapping,
+  UIDLStyleDefinitions,
+} from '@teleporthq/teleport-types'
 import mapping from './mapping.json'
@@ -479,1 +487,40 @@
 })
+
+describe('parseBackgroundWithMultipleStyles', () => {
+  const styleToParse: UIDLStyleDefinitions = {
+    backgroundImage: {
+      type: 'static',
+      content:
+        'linear-gradient(90deg, rgb(189, 195, 199) 0.00%,rgba(44, 62, 80, 0.5) 100.00%),url("/kittens.png")',
+    },
+  }
+
+  const assets = {
+    prefix: 'public',
+    identifier: 'assets',
+    mappings: {
+      'kittens.png': 'sub1/sub2',
+      'dogs.png': 'dog/pictures',
+    },
+  }
+  it('correctly splits the style content into two separate styles', () => {
+    const parsedStyle = parseStaticStyles(styleToParse.backgroundImage.content as string)
+    expect(parsedStyle).toBeDefined()
+    expect(parsedStyle.length).toBe(2)
+    expect(parsedStyle[0]).toBe(
+      'linear-gradient(90deg, rgb(189, 195, 199) 0.00%,rgba(44, 62, 80, 0.5) 100.00%)'
+    )
+    expect(parsedStyle[1]).toBe('url("/kittens.png")')
+  })
+
+  it('correctly generates background image style with correct url', () => {
+    const parsedStyle = prefixAssetURLs(styleToParse, assets)
+    expect(parsedStyle.backgroundImage).toBeDefined()
+    expect(parsedStyle.backgroundImage.content).toBeDefined()
+    if (parsedStyle.backgroundImage.content) {
+      expect(parsedStyle.backgroundImage.content).toContain(
+        'linear-gradient(90deg, rgb(189, 195, 199) 0.00%,rgba(44, 62, 80, 0.5) 100.00%),url("public/assets/sub1/sub2/kittens.png")'
+      )
+    }
+  })
+})

dist/cjs/html-mapping.js

@@ -31,3 +31,3 @@ "use strict";
                 path: 'dangerous-html',
-                version: '0.1.12',
+                version: '0.1.13',
                 meta: {
@@ -34,0 +34,0 @@ importJustPath: true,

dist/cjs/resolvers/abilities/utils.js

@@ -86,8 +86,3 @@ "use strict";
 var getLinkElementType = function (link) {
-    // for now I'm making all dynamic links local.
-    // Maybe navlinks could have a dynamic reference,
-    // not just a staic on in the future, but for now
-    // (for the CMS demo) the navlink was too robust
-    // to change
-    return link.type === 'navlink' || link.type === 'dynamic' ? 'navlink' : 'link';
+    return link.type === 'navlink' ? 'navlink' : 'link';
 };
@@ -119,6 +114,2 @@ var createLinkAttributes = function (link, options) {
         }
-        case 'dynamic':
-            return {
-                transitionTo: link,
-            };
         case 'navlink': {
@@ -125,0 +116,0 @@ return {

dist/cjs/utils.d.ts

@@ -1,3 +0,3 @@
-import { UIDLElement, UIDLNode, Mapping, GeneratorOptions, ComponentUIDL, UIDLStyleSetTokenReference, UIDLStaticValue, UIDLDynamicReference, UIDLConditionalNode } from '@teleporthq/teleport-types';
-declare type ElementsLookup = Record<string, {
+import { UIDLElement, UIDLNode, Mapping, GeneratorOptions, ComponentUIDL, UIDLStyleSetTokenReference, UIDLStaticValue, UIDLDynamicReference } from '@teleporthq/teleport-types';
+type ElementsLookup = Record<string, {
     count: number;
@@ -10,3 +10,2 @@ nextKey: string;
 export declare const resolveNode: (uidlNode: UIDLNode, options: GeneratorOptions) => void;
-export declare const resolveConditional: (condNode: UIDLConditionalNode, options: GeneratorOptions) => void;
 export declare const resolveElement: (element: UIDLElement, options: GeneratorOptions) => void;
@@ -17,2 +16,3 @@ export declare const resolveChildren: (mappedChildren: UIDLNode[], originalChildren?: UIDLNode[]) => UIDLNode[];
 export declare const ensureDataSourceUniqueness: (node: UIDLNode) => void;
+export declare function parseStaticStyles(styles: string): string[];
 /**
@@ -19,0 +19,0 @@ * Prefixes all urls inside the style object with the assetsPrefix

dist/cjs/utils.js

@@ -26,3 +26,3 @@ "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.checkForDefaultStateValueContainingAssets = exports.checkForDefaultPropsContainingAssets = exports.checkForIllegalNames = exports.prefixAssetURLs = exports.ensureDataSourceUniqueness = exports.createNodesLookup = exports.generateUniqueKeys = exports.resolveChildren = exports.resolveElement = exports.resolveConditional = exports.resolveNode = exports.removeIgnoredNodes = exports.resolveMetaTags = exports.mergeMappings = void 0;
+exports.checkForDefaultStateValueContainingAssets = exports.checkForDefaultPropsContainingAssets = exports.checkForIllegalNames = exports.prefixAssetURLs = exports.parseStaticStyles = exports.ensureDataSourceUniqueness = exports.createNodesLookup = exports.generateUniqueKeys = exports.resolveChildren = exports.resolveElement = exports.resolveNode = exports.removeIgnoredNodes = exports.resolveMetaTags = exports.mergeMappings = void 0;
 var teleport_shared_1 = require("@teleporthq/teleport-shared");
@@ -77,18 +77,5 @@ var deepmerge_1 = __importDefault(require("deepmerge"));
         }
-        if (node.type === 'conditional') {
-            (0, exports.resolveConditional)(node, options);
-        }
     });
 };
 exports.resolveNode = resolveNode;
-var resolveConditional = function (condNode, options) {
-    var _a;
-    if ((_a = condNode.content) === null || _a === void 0 ? void 0 : _a.node) {
-        var _b = condNode.content.node, type = _b.type, content = _b.content;
-        if (type === 'element') {
-            (0, exports.resolveElement)(content, options);
-        }
-    }
-};
-exports.resolveConditional = resolveConditional;
 var resolveElement = function (element, options) {
@@ -287,6 +274,2 @@ var _a;
     teleport_shared_1.UIDLUtils.traverseRepeats(node, function (repeat) {
-        var _a;
-        if (!((_a = repeat.dataSource) === null || _a === void 0 ? void 0 : _a.type)) {
-            return;
-        }
         if (repeat.dataSource.type === 'static' && !customDataSourceIdentifierExists(repeat)) {
@@ -303,2 +286,55 @@ repeat.meta = repeat.meta || {};
 };
+function parseStaticStyles(styles) {
+    var stylesList = [];
+    var tokens = /[,\(\)]/;
+    var parens = 0;
+    var buffer = '';
+    if (styles == null) {
+        return stylesList;
+    }
+    while (styles.length) {
+        var match = tokens.exec(styles);
+        if (!match) {
+            break;
+        }
+        var char = match[0];
+        var ignoreChar = false;
+        var foundAssetId = false;
+        switch (char) {
+            case ',':
+                if (!parens) {
+                    if (buffer) {
+                        stylesList.push(buffer.trim());
+                        buffer = '';
+                    }
+                    else {
+                        foundAssetId = true;
+                    }
+                    ignoreChar = true;
+                }
+                break;
+            case '(':
+                parens++;
+                break;
+            case ')':
+                parens--;
+                break;
+            default:
+                break;
+        }
+        var index = match.index + 1;
+        buffer += styles.slice(0, ignoreChar ? index - 1 : index);
+        styles = styles.slice(index);
+        if (foundAssetId) {
+            stylesList.push(buffer.trim());
+            buffer = '';
+            ignoreChar = true;
+        }
+    }
+    if (buffer.length || styles.length) {
+        stylesList.push((buffer + styles).trim());
+    }
+    return stylesList;
+}
+exports.parseStaticStyles = parseStaticStyles;
 /**
@@ -318,25 +354,29 @@ * Prefixes all urls inside the style object with the assetsPrefix
             case 'static':
-                var staticContent = styleValue.content;
-                if (typeof staticContent === 'number') {
+                var staticContent_1 = styleValue.content;
+                if (typeof staticContent_1 === 'number') {
                     acc[styleKey] = styleValue;
                     return acc;
                 }
-                if (typeof staticContent === 'string' && STYLE_PROPERTIES_WITH_URL.includes(styleKey)) {
-                    var asset = staticContent.indexOf('url(') === -1
-                        ? staticContent
-                        : staticContent.match(/\((.*?)\)/)[1].replace(/('|")/g, '');
-                    /*
-                      background image such as gradient shouldn't be urls
-                      we prevent that by checking if the value is actually an asset or not (same check as in the prefixAssetsPath function
-                      but we don't compute and generate a url)
-                    */
-                    if (!asset.startsWith('/')) {
-                        acc[styleKey] = styleValue;
-                        return acc;
-                    }
-                    var url = teleport_shared_1.UIDLUtils.prefixAssetsPath(asset, assets);
-                    var newStyleValue = "url(\"".concat(url, "\")");
+                if (typeof staticContent_1 === 'string' && STYLE_PROPERTIES_WITH_URL.includes(styleKey)) {
+                    // need to split the styles in case of multiple background being added (eg: gradient + bgImage)
+                    var styleList = parseStaticStyles(staticContent_1);
+                    styleList = styleList.map(function (subStyle) {
+                        var asset = staticContent_1.indexOf('url(') === -1
+                            ? subStyle
+                            : subStyle.match(/\((.*?)\)/)[1].replace(/('|")/g, '');
+                        /*
+                          background image such as gradient shouldn't be urls
+                          we prevent that by checking if the value is actually an asset or not (same check as in the prefixAssetsPath function
+                          but we don't compute and generate a url)
+                        */
+                        if (!asset.startsWith('/')) {
+                            return subStyle;
+                        }
+                        var url = teleport_shared_1.UIDLUtils.prefixAssetsPath(asset, assets);
+                        var newStyleValue = "url(\"".concat(url, "\")");
+                        return newStyleValue;
+                    });
                     acc[styleKey] = {
                         type: 'static',
-                        content: newStyleValue,
+                        content: styleList.join(','),
                     };
@@ -422,12 +462,16 @@ }
     }
-    Object.keys(uidl.propDefinitions || {}).forEach(function (prop) {
-        if (illegalPropNames.includes(prop)) {
-            throw new Error("Illegal prop key '".concat(prop, "'"));
-        }
-    });
-    Object.keys(uidl.stateDefinitions || {}).forEach(function (state) {
-        if (illegalPropNames.includes(state)) {
-            throw new Error("Illegal state key '".concat(state, "'"));
-        }
-    });
+    if (uidl.propDefinitions) {
+        Object.keys(uidl.propDefinitions).forEach(function (prop) {
+            if (illegalPropNames.includes(prop)) {
+                throw new Error("Illegal prop key '".concat(prop, "'"));
+            }
+        });
+    }
+    if (uidl.stateDefinitions) {
+        Object.keys(uidl.stateDefinitions).forEach(function (state) {
+            if (illegalPropNames.includes(state)) {
+                throw new Error("Illegal state key '".concat(state, "'"));
+            }
+        });
+    }
 };
@@ -434,0 +478,0 @@ exports.checkForIllegalNames = checkForIllegalNames;

dist/esm/html-mapping.js

@@ -28,3 +28,3 @@ export var HTMLMapping = {
                 path: 'dangerous-html',
-                version: '0.1.12',
+                version: '0.1.13',
                 meta: {
@@ -31,0 +31,0 @@ importJustPath: true,

dist/esm/resolvers/abilities/utils.js

@@ -81,8 +81,3 @@ var __assign = (this && this.__assign) || function () {
 var getLinkElementType = function (link) {
-    // for now I'm making all dynamic links local.
-    // Maybe navlinks could have a dynamic reference,
-    // not just a staic on in the future, but for now
-    // (for the CMS demo) the navlink was too robust
-    // to change
-    return link.type === 'navlink' || link.type === 'dynamic' ? 'navlink' : 'link';
+    return link.type === 'navlink' ? 'navlink' : 'link';
 };
@@ -114,6 +109,2 @@ var createLinkAttributes = function (link, options) {
         }
-        case 'dynamic':
-            return {
-                transitionTo: link,
-            };
         case 'navlink': {
@@ -120,0 +111,0 @@ return {

dist/esm/utils.d.ts

@@ -1,3 +0,3 @@
-import { UIDLElement, UIDLNode, Mapping, GeneratorOptions, ComponentUIDL, UIDLStyleSetTokenReference, UIDLStaticValue, UIDLDynamicReference, UIDLConditionalNode } from '@teleporthq/teleport-types';
-declare type ElementsLookup = Record<string, {
+import { UIDLElement, UIDLNode, Mapping, GeneratorOptions, ComponentUIDL, UIDLStyleSetTokenReference, UIDLStaticValue, UIDLDynamicReference } from '@teleporthq/teleport-types';
+type ElementsLookup = Record<string, {
     count: number;
@@ -10,3 +10,2 @@ nextKey: string;
 export declare const resolveNode: (uidlNode: UIDLNode, options: GeneratorOptions) => void;
-export declare const resolveConditional: (condNode: UIDLConditionalNode, options: GeneratorOptions) => void;
 export declare const resolveElement: (element: UIDLElement, options: GeneratorOptions) => void;
@@ -17,2 +16,3 @@ export declare const resolveChildren: (mappedChildren: UIDLNode[], originalChildren?: UIDLNode[]) => UIDLNode[];
 export declare const ensureDataSourceUniqueness: (node: UIDLNode) => void;
+export declare function parseStaticStyles(styles: string): string[];
 /**
@@ -19,0 +19,0 @@ * Prefixes all urls inside the style object with the assetsPrefix

dist/esm/utils.js

@@ -67,16 +67,4 @@ var __assign = (this && this.__assign) || function () {
         }
-        if (node.type === 'conditional') {
-            resolveConditional(node, options);
-        }
     });
 };
-export var resolveConditional = function (condNode, options) {
-    var _a;
-    if ((_a = condNode.content) === null || _a === void 0 ? void 0 : _a.node) {
-        var _b = condNode.content.node, type = _b.type, content = _b.content;
-        if (type === 'element') {
-            resolveElement(content, options);
-        }
-    }
-};
 export var resolveElement = function (element, options) {
@@ -271,6 +259,2 @@ var _a;
     UIDLUtils.traverseRepeats(node, function (repeat) {
-        var _a;
-        if (!((_a = repeat.dataSource) === null || _a === void 0 ? void 0 : _a.type)) {
-            return;
-        }
         if (repeat.dataSource.type === 'static' && !customDataSourceIdentifierExists(repeat)) {
@@ -286,2 +270,54 @@ repeat.meta = repeat.meta || {};
 };
+export function parseStaticStyles(styles) {
+    var stylesList = [];
+    var tokens = /[,\(\)]/;
+    var parens = 0;
+    var buffer = '';
+    if (styles == null) {
+        return stylesList;
+    }
+    while (styles.length) {
+        var match = tokens.exec(styles);
+        if (!match) {
+            break;
+        }
+        var char = match[0];
+        var ignoreChar = false;
+        var foundAssetId = false;
+        switch (char) {
+            case ',':
+                if (!parens) {
+                    if (buffer) {
+                        stylesList.push(buffer.trim());
+                        buffer = '';
+                    }
+                    else {
+                        foundAssetId = true;
+                    }
+                    ignoreChar = true;
+                }
+                break;
+            case '(':
+                parens++;
+                break;
+            case ')':
+                parens--;
+                break;
+            default:
+                break;
+        }
+        var index = match.index + 1;
+        buffer += styles.slice(0, ignoreChar ? index - 1 : index);
+        styles = styles.slice(index);
+        if (foundAssetId) {
+            stylesList.push(buffer.trim());
+            buffer = '';
+            ignoreChar = true;
+        }
+    }
+    if (buffer.length || styles.length) {
+        stylesList.push((buffer + styles).trim());
+    }
+    return stylesList;
+}
 /**
@@ -301,25 +337,29 @@ * Prefixes all urls inside the style object with the assetsPrefix
             case 'static':
-                var staticContent = styleValue.content;
-                if (typeof staticContent === 'number') {
+                var staticContent_1 = styleValue.content;
+                if (typeof staticContent_1 === 'number') {
                     acc[styleKey] = styleValue;
                     return acc;
                 }
-                if (typeof staticContent === 'string' && STYLE_PROPERTIES_WITH_URL.includes(styleKey)) {
-                    var asset = staticContent.indexOf('url(') === -1
-                        ? staticContent
-                        : staticContent.match(/\((.*?)\)/)[1].replace(/('|")/g, '');
-                    /*
-                      background image such as gradient shouldn't be urls
-                      we prevent that by checking if the value is actually an asset or not (same check as in the prefixAssetsPath function
-                      but we don't compute and generate a url)
-                    */
-                    if (!asset.startsWith('/')) {
-                        acc[styleKey] = styleValue;
-                        return acc;
-                    }
-                    var url = UIDLUtils.prefixAssetsPath(asset, assets);
-                    var newStyleValue = "url(\"".concat(url, "\")");
+                if (typeof staticContent_1 === 'string' && STYLE_PROPERTIES_WITH_URL.includes(styleKey)) {
+                    // need to split the styles in case of multiple background being added (eg: gradient + bgImage)
+                    var styleList = parseStaticStyles(staticContent_1);
+                    styleList = styleList.map(function (subStyle) {
+                        var asset = staticContent_1.indexOf('url(') === -1
+                            ? subStyle
+                            : subStyle.match(/\((.*?)\)/)[1].replace(/('|")/g, '');
+                        /*
+                          background image such as gradient shouldn't be urls
+                          we prevent that by checking if the value is actually an asset or not (same check as in the prefixAssetsPath function
+                          but we don't compute and generate a url)
+                        */
+                        if (!asset.startsWith('/')) {
+                            return subStyle;
+                        }
+                        var url = UIDLUtils.prefixAssetsPath(asset, assets);
+                        var newStyleValue = "url(\"".concat(url, "\")");
+                        return newStyleValue;
+                    });
                     acc[styleKey] = {
                         type: 'static',
-                        content: newStyleValue,
+                        content: styleList.join(','),
                     };
@@ -404,12 +444,16 @@ }
     }
-    Object.keys(uidl.propDefinitions || {}).forEach(function (prop) {
-        if (illegalPropNames.includes(prop)) {
-            throw new Error("Illegal prop key '".concat(prop, "'"));
-        }
-    });
-    Object.keys(uidl.stateDefinitions || {}).forEach(function (state) {
-        if (illegalPropNames.includes(state)) {
-            throw new Error("Illegal state key '".concat(state, "'"));
-        }
-    });
+    if (uidl.propDefinitions) {
+        Object.keys(uidl.propDefinitions).forEach(function (prop) {
+            if (illegalPropNames.includes(prop)) {
+                throw new Error("Illegal prop key '".concat(prop, "'"));
+            }
+        });
+    }
+    if (uidl.stateDefinitions) {
+        Object.keys(uidl.stateDefinitions).forEach(function (state) {
+            if (illegalPropNames.includes(state)) {
+                throw new Error("Illegal state key '".concat(state, "'"));
+            }
+        });
+    }
 };
@@ -416,0 +460,0 @@ export var checkForDefaultPropsContainingAssets = function (uidl, assets) {

package.json

 {
   "name": "@teleporthq/teleport-uidl-resolver",
-  "version": "0.27.5-alpha.0",
+  "version": "0.27.5",
   "description": "A small package that handles the transition from UIDL to HTML elements and has support for custom mappings.",
@@ -27,8 +27,8 @@ "author": "teleportHQ",
   "dependencies": {
-    "@teleporthq/teleport-shared": "^0.27.5-alpha.0",
-    "@teleporthq/teleport-types": "^0.27.5-alpha.0",
-    "@teleporthq/teleport-uidl-builders": "^0.27.5-alpha.0",
+    "@teleporthq/teleport-shared": "^0.27.5",
+    "@teleporthq/teleport-types": "^0.27.5",
+    "@teleporthq/teleport-uidl-builders": "^0.27.5",
     "deepmerge": "^4.0.0"
   },
-  "gitHead": "46bbbd44f6b43dfdf9cfaf1c3428e9ee106eeecd"
+  "gitHead": "d8869ea13f974bb6c1613b494e8bcb2fbadc5eb7"
 }

src/html-mapping.ts

@@ -30,3 +30,3 @@ import { Mapping } from '@teleporthq/teleport-types'
         path: 'dangerous-html',
-        version: '0.1.12',
+        version: '0.1.13',
         meta: {
@@ -33,0 +33,0 @@ importJustPath: true,

src/resolvers/abilities/utils.ts

@@ -104,8 +104,3 @@ import { StringUtils } from '@teleporthq/teleport-shared'
 const getLinkElementType = (link: UIDLLinkNode): string => {
-  // for now I'm making all dynamic links local.
-  // Maybe navlinks could have a dynamic reference,
-  // not just a staic on in the future, but for now
-  // (for the CMS demo) the navlink was too robust
-  // to change
-  return link.type === 'navlink' || link.type === 'dynamic' ? 'navlink' : 'link'
+  return link.type === 'navlink' ? 'navlink' : 'link'
 }
@@ -145,7 +140,2 @@
 
-    case 'dynamic':
-      return {
-        transitionTo: link,
-      }
-
     case 'navlink': {
@@ -152,0 +142,0 @@ return {

src/utils.ts

@@ -16,3 +16,2 @@ import { UIDLUtils, StringUtils } from '@teleporthq/teleport-shared'
   UIDLDynamicReference,
-  UIDLConditionalNode,
 } from '@teleporthq/teleport-types'
@@ -60,3 +59,3 @@ import deepmerge from 'deepmerge'
     Object.keys(tag).forEach((key) => {
-      tag[key] = UIDLUtils.prefixAssetsPath(tag[key] as string, options.assets)
+      tag[key] = UIDLUtils.prefixAssetsPath(tag[key], options.assets)
     })
@@ -86,18 +85,5 @@ })
     }
-
-    if (node.type === 'conditional') {
-      resolveConditional(node, options)
-    }
   })
 }
 
-export const resolveConditional = (condNode: UIDLConditionalNode, options: GeneratorOptions) => {
-  if (condNode.content?.node) {
-    const { type, content } = condNode.content.node
-    if (type === 'element') {
-      resolveElement(content, options)
-    }
-  }
-}
-
 export const resolveElement = (element: UIDLElement, options: GeneratorOptions) => {
@@ -344,7 +330,3 @@ const { mapping, localDependenciesPrefix } = options
 
-  UIDLUtils.traverseRepeats(node, (repeat: UIDLRepeatContent) => {
-    if (!repeat.dataSource?.type) {
-      return
-    }
-
+  UIDLUtils.traverseRepeats(node, (repeat) => {
     if (repeat.dataSource.type === 'static' && !customDataSourceIdentifierExists(repeat)) {
@@ -362,2 +344,62 @@ repeat.meta = repeat.meta || {}
 
+export function parseStaticStyles(styles: string) {
+  const stylesList: string[] = []
+  const tokens = /[,\(\)]/
+  let parens = 0
+  let buffer = ''
+
+  if (styles == null) {
+    return stylesList
+  }
+
+  while (styles.length) {
+    const match = tokens.exec(styles)
+    if (!match) {
+      break
+    }
+    const char = match[0]
+    let ignoreChar = false
+    let foundAssetId = false
+
+    switch (char) {
+      case ',':
+        if (!parens) {
+          if (buffer) {
+            stylesList.push(buffer.trim())
+            buffer = ''
+          } else {
+            foundAssetId = true
+          }
+
+          ignoreChar = true
+        }
+        break
+      case '(':
+        parens++
+        break
+      case ')':
+        parens--
+        break
+      default:
+        break
+    }
+
+    const index = match.index + 1
+    buffer += styles.slice(0, ignoreChar ? index - 1 : index)
+    styles = styles.slice(index)
+
+    if (foundAssetId) {
+      stylesList.push(buffer.trim())
+      buffer = ''
+      ignoreChar = true
+    }
+  }
+
+  if (buffer.length || styles.length) {
+    stylesList.push((buffer + styles).trim())
+  }
+
+  return stylesList
+}
+
 /**
@@ -391,22 +433,27 @@ * Prefixes all urls inside the style object with the assetsPrefix
         if (typeof staticContent === 'string' && STYLE_PROPERTIES_WITH_URL.includes(styleKey)) {
-          const asset =
-            staticContent.indexOf('url(') === -1
-              ? staticContent
-              : staticContent.match(/\((.*?)\)/)[1].replace(/('|")/g, '')
+          // need to split the styles in case of multiple background being added (eg: gradient + bgImage)
+          let styleList = parseStaticStyles(staticContent)
+          styleList = styleList.map((subStyle) => {
+            const asset =
+              staticContent.indexOf('url(') === -1
+                ? subStyle
+                : subStyle.match(/\((.*?)\)/)[1].replace(/('|")/g, '')
 
-          /*
-            background image such as gradient shouldn't be urls
-            we prevent that by checking if the value is actually an asset or not (same check as in the prefixAssetsPath function
-            but we don't compute and generate a url)
-          */
-          if (!asset.startsWith('/')) {
-            acc[styleKey] = styleValue
-            return acc
-          }
+            /*
+              background image such as gradient shouldn't be urls
+              we prevent that by checking if the value is actually an asset or not (same check as in the prefixAssetsPath function 
+              but we don't compute and generate a url)
+            */
+            if (!asset.startsWith('/')) {
+              return subStyle
+            }
 
-          const url = UIDLUtils.prefixAssetsPath(asset, assets)
-          const newStyleValue = `url("${url}")`
+            const url = UIDLUtils.prefixAssetsPath(asset, assets)
+            const newStyleValue = `url("${url}")`
+            return newStyleValue
+          })
+
           acc[styleKey] = {
             type: 'static',
-            content: newStyleValue,
+            content: styleList.join(','),
           } as T
@@ -429,2 +476,3 @@ } else {
   const resolvedAttrs: Record<string, UIDLAttributeValue> = {}
+
   // This will gather all the attributes from the UIDL which are mapped using the elements-mapping
@@ -514,13 +562,17 @@ // These attributes will not be added on the tag as they are, but using the elements-mapping
 
-  Object.keys(uidl.propDefinitions || {}).forEach((prop) => {
-    if (illegalPropNames.includes(prop)) {
-      throw new Error(`Illegal prop key '${prop}'`)
-    }
-  })
+  if (uidl.propDefinitions) {
+    Object.keys(uidl.propDefinitions).forEach((prop) => {
+      if (illegalPropNames.includes(prop)) {
+        throw new Error(`Illegal prop key '${prop}'`)
+      }
+    })
+  }
 
-  Object.keys(uidl.stateDefinitions || {}).forEach((state) => {
-    if (illegalPropNames.includes(state)) {
-      throw new Error(`Illegal state key '${state}'`)
-    }
-  })
+  if (uidl.stateDefinitions) {
+    Object.keys(uidl.stateDefinitions).forEach((state) => {
+      if (illegalPropNames.includes(state)) {
+        throw new Error(`Illegal state key '${state}'`)
+      }
+    })
+  }
 }
@@ -527,0 +579,0 @@

No alert changes

Improved metrics

Total package byte prevSize

306643

3.15%

Lines of code

4523

3.41%

Dependency changes

• Updated

  @teleporthq/teleport-shared@^0.27.5

• Updated

  @teleporthq/teleport-types@^0.27.5

• Updated

  @teleporthq/teleport-uidl-builders@^0.27.5