{"record":{"id":"0d623c53d0780ccc","repo":"quasarframework/quasar","slug":"expected-a-string-as-value","errorCode":null,"errorMessage":"Expected a string as value","messagePattern":"Expected a string as value","errorType":"exception","errorClass":"TypeError","httpStatus":null,"severity":"error","filePath":"ui/src/utils/css-var/set-css-var.js","lineNumber":6,"sourceCode":"export default function setCssVar(propName, value, element = document.body) {\n  if (typeof propName !== 'string') {\n    throw new TypeError('Expected a string as propName')\n  }\n  if (typeof value !== 'string') {\n    throw new TypeError('Expected a string as value')\n  }\n  if (!(element instanceof Element)) {\n    throw new TypeError('Expected a DOM element')\n  }\n\n  element.style.setProperty(`--q-${propName}`, value)\n}\n","sourceCodeStart":1,"sourceCodeEnd":14,"githubUrl":"https://github.com/quasarframework/quasar/blob/4841521b5f635a971eb9e2710e5542efd194691b/ui/src/utils/css-var/set-css-var.js#L1-L14","documentation":"setCssVar(propName, value, element) requires value to be a string because it is passed directly to element.style.setProperty(). It throws this TypeError when value is a number, object, null, or undefined — even if it looks like a color.","triggerScenarios":"setCssVar('primary', 0xff0000); setCssVar('primary', { r: 243, g: 123, b: 38 }); setCssVar('primary') with no value; passing a colors.textToRgb() object instead of a string.","commonSituations":"Reading colors from JSON/config as numbers or RGB objects; forgetting to serialize a computed color with rgbToHex(); passing undefined because an upstream variable was never assigned.","solutions":["Pass a CSS value string: setCssVar('primary', '#f37b26').","Convert RGB objects with colors.rgbToHex(rgb) before setting.","Coerce numbers: setCssVar(name, String(value)).","Validate/normalize the theme config so values are always strings."],"exampleFix":"// before\nsetCssVar('primary', colors.textToRgb('#f00')) // object, throws\n// after\nsetCssVar('primary', colors.rgbToHex(colors.textToRgb('#f00')))","handlingStrategy":"validation","validationCode":"if (typeof value !== 'string') throw new Error('setCssVar requires a string value')","typeGuard":"const isCssValue = (v) => typeof v === 'string' && v.length > 0","tryCatchPattern":"try {\n  setCssVar('primary', value)\n} catch (err) {\n  if (err instanceof TypeError && /as value/.test(err.message)) {\n    setCssVar('primary', String(value))\n  } else throw err\n}","preventionTips":["Serialize colors with colors.rgbToHex() before assigning to CSS vars.","Keep theme config values as strings ('#f37b26'), never numbers or RGB objects.","Add a schema validation step (e.g. zod) on theme config loaded from JSON."],"tags":["typeerror","css-var","dom","argument-validation","quasar"],"backgroundTag":"invalid-css-variable-name","analyzedSha":"4841521b5f635a971eb9e2710e5542efd194691b","analyzedAt":"2026-08-30T01:13:14.944Z","schemaVersion":2},"datasetVersion":"2026-08-30T03:17:51.788Z"}