jsx conditions formatted strange with tabWidth > 2

With printWidth=2 everything works great, but we use tabWidth=4 and some jsx looks very weird.

Input:

function test() {
  return <div>{ a ? <a with-long-attributes="long-value-to-break" and-one-more="test"/> : null }</div>;
}

Output:

function test() {
    return (
        <div>
            {a
                ? <a
                        with-long-attributes="long-value-to-break"
                        and-one-more="test"
                    />
                : null}
        </div>
    );
}

Expected:

function test() {
    return (
        <div>
            {a
                ? <a
                      with-long-attributes="long-value-to-break"
                      and-one-more="test"
                  />
                : null}
        </div>
    );
}

https://jlongster.github.io/prettier/#{"content"%3A"function test() {\n return <div>{ a %3F <a with-long-attributes%3D\"long-value-to-break\" and-one-more%3D\"test\"%2F> %3A null }<%2Fdiv>%3B\n}"%2C"options"%3A{"printWidth"%3A60%2C"tabWidth"%3A4%2C"singleQuote"%3Afalse%2C"trailingComma"%3Afalse%2C"bracketSpacing"%3Atrue%2C"doc"%3Afalse}}

[smacker]

Tried master branch on my project. JSX now looks awesome! Thanks guys!

[rhengles]

So I guess this is what @jlongster meant when he said “tabs make this whole project pretty hard” 😃

Well, I had to add a new primitive “align-spaces” for this purpose, and when using tabs I will use always one tab (as was done before).