Bug at validateAttributeSeparator

[Ulrikop]

Hi, I found a bug at validateAttributeSeparator:

div(ng-if="!foo", translate, translate-values="{name: translate(name.foobarba)}")
  | {name}
div(ng-if="foo", translate, translate-values="{name: translate(name.foobarba)}")
  | {name}
.foo-bar-batz(ng-click="doIt()")

says:

Invalid attribute separator found (test.jade:1:6)
Invalid attribute separator found (test.jade:3:)
Invalid attribute separator found (test.jade:3:1)
Invalid attribute separator found (test.jade:3:6)
Invalid attribute separator found (test.jade:5:)
Invalid attribute separator found (test.jade:5:3)

When I change the length of some names, the position of the bug is changed at a very strange way:

div(ng-if="!foo", translate, translate-values="{name: translate(name)}")
  | {name}
div(ng-if="foo", translate, translate-values="{name: translate(name)}")
  | {name}
.foo(ng-click="doIt()")

Invalid attribute separator found (test.jade:1:5)
Invalid attribute separator found (test.jade:3:)
Invalid attribute separator found (test.jade:3:1)
Invalid attribute separator found (test.jade:3:5)
Invalid attribute separator found (test.jade:5:)
Invalid attribute separator found (test.jade:5:2)

I think, it have something to do with attributes which starts with the same chars, because the following jade code does not lead to errors:

div(ng-if="!foo", stranslate, translate-values="{name: translate(name)}")
  | {name}
div(ng-if="foo", stranslate, translate-values="{name: translate(name)}")
  | {name}
.foo(ng-click="doIt()")

PS: Thanks for fixing my last found bug :-) PPS: One question which have nothing to do with the bug: Can I add a custom rule, so that I can throw a error when 3 consecutive } are found. I need it for using angular translate at attributes:

aria-label="{{'Hello {name}' | translate:{name: translate(name)} }}"

[julienpa]

Similar issue for me, I have this rule: "validateAttributeSeparator": { "separator": ", ", "multiLineSeparator": ",\n " },

And each time an attribute has a dash - an error is reported, like:

src/app/user/user.list.jade:19:29

  > 19|     div(layout, layout-align="center start")
------------------------------^

Invalid attribute separator found

Is anything planned to fix this issue? Thanks for your great work!

[Ulrikop]

what is the status of that issue?

[oliversalzburg]

I'm also experiencing this.

$ cat .pug-lintrc.json test.pug
{
        "validateAttributeSeparator": {
                "separator": " ",
                "multiLineSeparator": "\n\t"
        }
}
div(
        uib-dropdown
        uib-dropdown-toggle
        dropdown-append-to-body="true"
        )

$ pug-lint -c .pug-lintrc.json test.pug
test.pug:4:1
    2|  uib-dropdown
    3|  uib-dropdown-toggle
  > 4|  dropdown-append-to-body="true"
-------^
    5|  )
    6|

Invalid attribute separator found

[oliversalzburg]

I think the culprit is getParsedSource. I did some quick console.log-based debugging and this came up:

[ 'uib\\-dropdown',
  'uib\\-dropdown\\-toggle',
  'dropdown\\-append\\-to\\-body\\s*\\!*=\\s*"true"' ]
############
        ############-toggle
        ##############################

So, certain patterns are replaced by #. But because there is a repeating pattern in the attribute names, the second pattern will match nothing after the first pattern was already replaced.

While I don't know how to properly fix this, it revealed a workaround: just sort attributes with repeating tokens from longest to shortest.

$ cat .pug-lintrc.json test.pug
{
        "validateAttributeSeparator": {
                "separator": " ",
                "multiLineSeparator": "\n\t"
        }
}
div(
        uib-dropdown-toggle
        uib-dropdown
        dropdown-append-to-body="true"
        )

$ pug-lint -c .pug-lintrc.json test.pug
<nothing>

[DzmVasileusky]

The same for me with camelcase attributes in Angular syntax: currency, currencySign="$", We have inner codestyle that force to use alphabetical order for attributes.