( block: BuilderElement, options: BuilderToMitosisOptions, )
| 110 | }; |
| 111 | |
| 112 | export const getStyleStringFromBlock = ( |
| 113 | block: BuilderElement, |
| 114 | options: BuilderToMitosisOptions, |
| 115 | ) => { |
| 116 | const styleBindings: any = {}; |
| 117 | const responsiveStyles: Record<string, Record<string, string>> = {}; |
| 118 | let styleString = ''; |
| 119 | |
| 120 | if (block.bindings) { |
| 121 | for (const key in block.bindings) { |
| 122 | if (!key.includes('.')) { |
| 123 | continue; |
| 124 | } |
| 125 | |
| 126 | let code = block.code?.bindings?.[key] || block.bindings[key]; |
| 127 | |
| 128 | const verifyCode = verifyIsValid(code); |
| 129 | if (verifyCode.valid) { |
| 130 | code = processBoundLogic(code); |
| 131 | } else { |
| 132 | if (options.escapeInvalidCode) { |
| 133 | code = '`' + code + ' [INVALID CODE]`'; |
| 134 | } else { |
| 135 | console.warn(`Dropping binding "${key}" due to invalid code: ${code}`); |
| 136 | continue; |
| 137 | } |
| 138 | } |
| 139 | |
| 140 | if (key.includes('style')) { |
| 141 | const styleProperty = key.split('.')[1]; |
| 142 | styleBindings[styleProperty] = convertExportDefaultToReturn(code); |
| 143 | /** |
| 144 | * responsiveStyles that are bound need to be merged into media queries. |
| 145 | * Example: |
| 146 | * responsiveStyles.large.color: "state.color" |
| 147 | * responsiveStyles.large.background: "state.background" |
| 148 | * Should get mapped to: |
| 149 | * @media (max-width: 1200px): { |
| 150 | * color: state.color, |
| 151 | * background: state.background |
| 152 | * } |
| 153 | */ |
| 154 | } else if (key.includes('responsiveStyles')) { |
| 155 | const parts = key.split('.'); |
| 156 | const size = parts[parts.length - 2]; |
| 157 | const prop = parts[parts.length - 1]; |
| 158 | |
| 159 | const mediaKey = `@media (max-width: ${sizes[size as Size].max}px)`; |
| 160 | |
| 161 | /** |
| 162 | * The media query key has spaces/special characters so we need to ensure |
| 163 | * that the key is always a string otherwise there will be runtime errors. |
| 164 | */ |
| 165 | const objKey = `"${mediaKey}"`; |
| 166 | responsiveStyles[objKey] = { |
| 167 | ...responsiveStyles[objKey], |
| 168 | [prop]: code, |
| 169 | }; |
no test coverage detected