Invalid property "${property}". Property name cannot be empt

Error message

Invalid property "${property}". Property name cannot be empty or contain only dashes.

What it means

A custom property name of just '--' (or a bare '-') is meaningless: after the required '--' prefix there is no name. validateRootContent explicitly rejects these degenerate names early with a dedicated message so users get a clearer hint than a generic character error.

Source

Thrown at packages/desktop-client/src/style/customThemes.ts:384

    }

    const property = decl.substring(0, colonIndex).trim();

    // Property must start with --
    if (!property.startsWith('--')) {
      throw new Error(
        `Invalid property "${property}". Only CSS custom properties (starting with --) are allowed.`,
      );
    }

    // Validate property name format
    // CSS custom property names must:
    // - Start with --
    // - Not be empty (not just --)
    // - Not end with a dash
    // - Contain only valid characters (letters, digits, underscore, dash, but not at start/end positions)
    if (property === '--' || property === '-') {
      throw new Error(
        `Invalid property "${property}". Property name cannot be empty or contain only dashes.`,
      );
    }

    // Check for invalid characters in property name (no brackets, spaces, special chars except dash/underscore)
    // Property name after -- should only contain: letters, digits, underscore, and dashes (not consecutive dashes at start/end)
    const propertyNameAfterDashes = property.substring(2);
    if (propertyNameAfterDashes.length === 0) {
      throw new Error(
        `Invalid property "${property}". Property name cannot be empty after "--".`,
      );
    }

    // Check for invalid characters (no brackets, no special characters except underscore and dash)
    if (!/^[a-zA-Z0-9_-]+$/.test(propertyNameAfterDashes)) {
      throw new Error(
        `Invalid property "${property}". Property name contains invalid characters. Only letters, digits, underscores, and dashes are allowed.`,
      );

View on GitHub (pinned to d4334cb6e6)

Solutions

Give the property a real name after the '--' prefix, e.g. '--: red;' -> '--color-accent: red;'
Check any code that builds the CSS string and ensure the interpolated variable name is defined and non-empty
Remove the empty declaration entirely if it is not needed
Guard template output: skip declarations whose generated name is empty

Example fix

// before
:root {
  --: red;
}
// after
:root {
  --color-accent: red;
}

Defensive patterns

Strategy: validation

Validate before calling

function namesAreNonEmpty(css: string): boolean {
  const root = css.match(/:root\s*\{([\s\S]*?)\}/);
  if (!root) return false;
  return root[1]
    .split(';')
    .map((d) => d.trim())
    .filter(Boolean)
    .every((d) => {
      const name = d.split(':')[0].trim();
      return name.length > 2;
    });
}

Type guard

const hasRealName = (prop: string): boolean => prop.length > 2;

Try / catch

try {
  const validated = validateThemeCss(generatedCss);
} catch (e) {
  if (e instanceof Error && e.message.includes('only dashes')) {
    showError('A variable name is empty — check the code generating CSS variable names.');
  }
}

Prevention

Validate interpolated variable names before inserting into template strings
Never emit declarations whose generated name is empty
Sanitize names to /^[a-zA-Z0-9_-]+$/ before building CSS
Skip empty fragments when joining declarations

When it happens

Trigger: Calling validateThemeCss with ':root { --: red; }' or ':root { -- ; }' — typically from a broken template ('--${name}') where the variable name evaluated to an empty string, or from an accidental delete of the name.

Common situations: String interpolation building CSS at runtime with an undefined variable name, a search-and-replace that wiped names, or manual typo while editing theme CSS.

Related errors

AI-assisted analysis of actualbudget/actual@d4334cb6e6 (2026-08-29). Data as JSON: /api/errors/8d4388502d0dcc88. Report an issue: GitHub.