{"record":{"id":"0822bb475bcec244","repo":"mjmlio/mjml","slug":"mixed-variable-syntax-detected-use-either-css-pro","errorCode":null,"errorMessage":"Mixed variable syntax detected. Use either CSS property syntax (e.g., color: {{variable}}) OR block syntax (e.g., {{variable}}), not both in the same document.","messagePattern":"Mixed variable syntax detected\\. Use either CSS property syntax \\(e\\.g\\., color: (.+?)\\}\\) OR block syntax \\(e\\.g\\., (.+?)\\}\\), not both in the same document\\.","errorType":"exception","errorClass":"Error","httpStatus":null,"severity":"error","filePath":"packages/mjml-core/src/index.js","lineNumber":410,"sourceCode":"  }\n\n  const broken = detectBrokenTemplateDelimitersInCss(html, syntaxes)\n  if (broken.length) {\n    const details = broken\n      .map(\n        (b) => `${b.prefix}…${b.suffix} (${b.prefixCount} open, ${b.suffixCount} close)`,\n      )\n      .join(', ')\n    throw new Error(\n      `Unbalanced template delimiters found in CSS: ${details}. ${getTemplateDelimiterRecoveryMessage(contextName)}`,\n    )\n  }\n\n  const detected = detectVariableTypeInHtml(html, syntaxes)\n  result.isBlockVariable = detected.isBlockVariable\n\n  if (!allowMixedSyntax && result.isBlockVariable && (detected.isValueVariable || detected.isPropertyVariable)) {\n    throw new Error(\n      'Mixed variable syntax detected. Use either CSS property syntax (e.g., color: {{variable}}) OR block syntax (e.g., {{variable}}), not both in the same document.',\n    )\n  }\n\n  if (detected.isValueVariable) {\n    const sanitized = sanitizeCssValueVariablesHtml(html, syntaxes)\n    result.content = sanitized.result\n    result.variableMap = sanitized.variableMap\n    result.didSanitize = true\n  }\n\n  if (detected.isPropertyVariable) {\n    const sanitizedProp = sanitizeCssPropertyVariablesHtml(result.content, syntaxes)\n    result.content = sanitizedProp.result\n    result.propMap = sanitizedProp.propMap\n    result.didSanitize = true\n  }\n","sourceCodeStart":392,"sourceCodeEnd":428,"githubUrl":"https://github.com/mjmlio/mjml/blob/6c01d35af5da14108b86bbf052232e99de7ca755/packages/mjml-core/src/index.js#L392-L428","documentation":"sanitizeTemplateVariablesInHtml detects which template-variable style a document uses: CSS value/property syntax (color: {{var}}) or block syntax ({{var}} on its own). When both styles appear in the same document and allowMixedSyntax is not enabled, the library throws because the two styles require different sanitization passes that cannot be combined safely.","triggerScenarios":"Calling sanitizeTemplateVariablesInHtml (via sanitizationResult) on HTML where block-level '{{var}}' placeholders coexist with 'property: {{var}}' CSS usages while allowMixedSyntax is false/omitted.","commonSituations":"Merging email sections authored by different people or tools, one using block placeholders and the other inline CSS placeholders; copy-pasting snippets from two template styles into one MJML document.","solutions":["Rewrite the document to use a single variable style: convert inline 'color: {{var}}' usages to block syntax or vice versa.","Pass allowMixedSyntax: true if mixed styles are intentional and safe for your pipeline.","Split the document into separate MJML files, each using one style.","Search the HTML for '{{' occurrences and normalize all placeholders with a codemod/lint rule."],"exampleFix":"/* before: mixed */\n{{bgColor}}\npadding: {{padding}};\n/* after: one style (block) */\n{{bgColor}}\n{{padding}}\n/* or: pass { allowMixedSyntax: true } */","handlingStrategy":"validation","validationCode":"function detectMixedSyntax(html) {\n  const block = /(^|\\n)\\s*\\{\\{\\s*\\w+\\s*\\}\\}\\s*(\\n|$)/.test(html);\n  const value = /:\\s*[^;{]*\\{\\{\\s*\\w+\\s*\\}\\}/.test(html);\n  return block && value;\n}\nif (detectMixedSyntax(html)) throw new Error('Mixed template syntax in document');","typeGuard":null,"tryCatchPattern":"try {\n  return sanitizeTemplateVariablesInHtml(html, opts)\n} catch (e) {\n  if (e.message.startsWith('Mixed variable syntax')) {\n    console.error('Normalize placeholders to a single style:', e.message)\n  } else throw e\n}","preventionTips":["Adopt one placeholder style per project and document it.","Add a lint rule flagging inline 'property: {{var}}' when block style is standard.","Review merged templates from multiple authors for style consistency."],"tags":["css","template","syntax","configuration"],"backgroundTag":"mixed-template-syntax","analyzedSha":"6c01d35af5da14108b86bbf052232e99de7ca755","analyzedAt":"2026-09-02T21:31:03.649Z","contentChangedAt":null,"schemaVersion":2},"datasetVersion":"2026-09-10T02:17:09.455Z"}