关于Pug连字符错误及line-height处连字符(-)错误的技术咨询

Hey there, let’s dig into those hyphen-related bugs you’re facing in your Pug templates—especially the ones with the line-height property. I’ve stumbled through these exact issues before, so here’s a breakdown of what’s probably going on and how to fix it:

1. line-height Property Hyphens Causing Syntax Breakage #

Why it happens #

Pug lets you write CSS properties in two ways: native hyphenated syntax (line-height) or camelCase (lineHeight). The trouble usually pops up when you’re dynamically binding styles using JavaScript objects. In JS, object keys with hyphens need to be wrapped in quotes—if you skip them, Pug will interpret line-height as a math operation (line - height) instead of a property name.

Example of the mistake #

// Wrong: Unquoted hyphenated key in style object
div(style={ line-height: 1.5 })

This throws an error because Pug tries to find variables named line and height, then subtract them—definitely not what you want.

Fixes #

// Option 1: Wrap the hyphenated key in quotes
div(style={ 'line-height': 1.5 })

// Option 2: Use camelCase (Pug converts this to `line-height` in the compiled CSS)
div(style={ lineHeight: 1.5 })

2. Hyphens in Text Misinterpreted as Pug Syntax #

Why it happens #

In Pug, lines starting with - are reserved for running JavaScript code (like variable declarations or loops). If your text accidentally starts with a hyphen without proper formatting, Pug will try to execute it as code, leading to a syntax error.

Example of the mistake #

// Wrong: Text starting with hyphen gets treated as JS
p - This is a sentence starting with a hyphen

Fixes #

You have a few ways to tell Pug this is plain text:

// Option 1: Add a space before the hyphen
p  - This is a sentence starting with a hyphen

// Option 2: Use the pipe `|` to explicitly mark text content
p
  | - This is a sentence starting with a hyphen

// Option 3: Wrap the entire text in quotes
p="- This is a sentence starting with a hyphen"

3. Hyphenated HTML Attributes (Like data-*) Failing #

Why it happens #

Similar to the style object issue, if you’re binding multiple attributes using a JS object, hyphenated keys (like data-user-id) need quotes. If you skip them, Pug will parse the hyphens as subtraction operators.

Example of the mistake #

// Wrong: Unquoted hyphenated key in attributes object
div(attributes={ data-user-id: currentUserId })

Fixes #

// Option 1: Wrap the key in quotes
div(attributes={ 'data-user-id': currentUserId })

// Option 2: Write the attribute directly (no object needed) — this works fine!
div(data-user-id=currentUserId)

• Check the error line number: Pug’s error messages will point you right to the problematic line. Look for clues like "Unexpected token" or "Undefined variable" (if it’s treating a hyphenated part as a missing variable).
• Simplify your code: Comment out sections of your template until the error goes away—this helps you isolate exactly which line is causing the issue.
• Verify dynamic bindings: Any time you’re using JS objects for styles or attributes, double-check that hyphenated keys are wrapped in quotes.
• Test in isolation: Copy the problematic code into a minimal Pug file and compile it alone—this eliminates interference from other parts of your template.

内容的提问来源于stack exchange，提问作者do Hong