Search code examples
pugcodekit

Jade mixin requires extra element

This compiles but if I remove the div at the very end there, it throws an error. I am using codekit for compilation. What am I not getting here? Why does that extra div matter? 

mixin ListItemDetail(labels,values)
    .listItemSection
        .listItemDetailWrap
            .listItemDetail #{labels[0]} :
            .listItemDetail  #{values[0]}
        .listItemDetailWrap
            .listItemDetail #{labels[1]} :
            .listItemDetail  #{values[1]}
        .listItemDetailWrap
            .listItemDetail #{labels[2]} :
            .listItemDetail  #{values[2]}

mixin ListItem()
    .listItem
        .listItemSection
            h2 48 barrels of Kansas Common by 00/00/0000
            small Ellsworth County, Kasas, 38.4500° N 96.5333° W

        mixin ListItemDetail(['Start Date', 'End Date', 'Pickup Deadline'], ['00/00/0000',  '00/00/0000',   '00/00/0000'])
        mixin ListItemDetail(["Bulletin",   "Grade",    "Join Deadline"],   ["Plains",      "Light Crude",  "00/00/0000"])
        mixin ListItemDetail(["API",        "BS&W",     "Sulfur"],          ["48°",     "4%",           "0.1%"])        

        div

this is the error that occurs in the codekit log if that final div is missing:

/Applications/CodeKit.app/Contents/Resources/engines/jade/lib/runtime.js:173
  throw err;
        ^
Error: /Users/isaac/Radiant/DemandPoint/dpe-grails/web-app/jade/Elements/ListItem.jade:23
    21|         mixin ListItemDetail(["API",        "BS&W",     "Sulfur"],          ["48°",     "4%",           "0.1%"])        
    22| 
  > 23|
Solution

  • Your code works fine for me. In your example code you are not utilizing the mixin ListItem, though. Maybe some indentation is wrong. You could even simplify your code and use iteration:

    mixin ListItemDetail(labels,values)
  each label,i in labels
    .listItemSection
      .listItemDetailWrap
        .listItemDetail #{label} :
        .listItemDetail  #{values[i]}

mixin ListItem
  .listItem
    .listItemSection
      h2 48 barrels of Kansas Common by 00/00/0000
      small Ellsworth County, Kasas, 38.4500° N 96.5333° W

    mixin ListItemDetail(['Start Date', 'End Date', 'Pickup Deadline'], ['00/00/0000',  '00/00/0000',   '00/00/0000'])
    mixin ListItemDetail(["Bulletin",   "Grade",    "Join Deadline"],   ["Plains",      "Light Crude",  "00/00/0000"])
    mixin ListItemDetail(["API",        "BS&W",     "Sulfur"],          ["48°",     "4%",           "0.1%"])

mixin ListItem // use your mixin here