Hi there, just checked out this packge after the DjangoCon recommendation. It looks very nice but I guess I found an issue.

The djcss is removing any indention of my SCSS files which makes it more or less unreadable.

Any ideas how I can fix this? Is there a setting to adjust the indention?

Thx!

Hi,

Thanks for creating this tool. I wanted to update all the templates of my project like this:

find . -name "*.html" -type f -exec djhtml -i -t2 {} +, But it gives me this error:

But I get this error:

usage: djhtml [-h] [-i] [-q] [-t N] [-o filename] [filenames ...]
djhtml: error: argument filenames: can't open './demo_cms/template/content_news.html': [Errno 24] Too many open files: './demo_cms/template/content_news.html'

Please let me know if I am doing something wrong. I don't want to edit each file by hand.

Hello. Firstly thanks for the library, we're trying it out on our projects and really like it so far.

We have one small problem though. We use a markdown block filter, where the content of the block is parsed as markdown. This means initial space (as djhtml adds) is parsed as a blockquote.

I know we can use the fmt control comments, but ideally we'd be able to automatically ignore anything inside {% filter markdown %}.

I was going to raise a PR for this, but I realise that this is a very specific case. Rather than adding exemptions ad-hoc, it might be better to allow configuring blocks to be excluded by the user / project.

Alternatively, it might be a good idea to slip formatting inside filter blocks altogether - but I don't know enough about how they're used in other projects to know if this would be a good idea.

I'd be interested to hear your thoughts on this, and would be happy to submit a PR once we've worked out a good solution.

Thanks for building this, its been on my wish list for a while.

I think it wouldn't be too hard to support Jinja2 templates as well (I think the syntax is very similar), would this be something you are willing to do?

When running pre-commit run --all-files it's still pretty verbose:

djhtml...................................................................Failed
- hook id: djhtml
- files were modified by this hook

All done! \o/
16 templates left unchanged.
All done! \o/
16 templates left unchanged.
All done! \o/
16 templates left unchanged.
All done! \o/
16 templates left unchanged.
All done! \o/
16 templates left unchanged.
All done! \o/
16 templates left unchanged.
reindented babeldat/core/templates/partials/_menu.html
All done! \o/
1 template reindented, 15 templates left unchanged.
All done! \o/
11 templates left unchanged.

FYI: I had 16 files staged, only 4 of them were templates

Really impressed with this package!

I noticed that in some of my longer templates in which I have sloppily at times had variations on <div><div> or </div><div> or </div></div> in the same line, things can get a bit weird. It's still valid html, but it's not pretty, and seems to trip djhtml up just a bit.

For instance, this minimal example:

{% block css %}
{% endblock css %}{% block content %}
<div class="row">
<div class="input-group date" data-provide="datepicker" data-date-format="yyyy/mm/dd">
<div class="btn">
</div></div>
</div><div>
<div class="custom-control custom-switch">
<input type="checkbox" name="filter-changes" id="filter-changes" class="custom-control-input fs-nano" value="0" {% if request.session.manage_filter_changes %}{% if request.session.manage_filter_changes == True %}checked{% endif %}{% endif %}>
</div>
<form class="form-inline">
<div class="custom-control custom-switch">
<input type="checkbox" name="filter-status-new" id="filter-status-new" class="custom-control-input fs-nano" value="0" {% if request.session.manage_filter_status_new %}{% if request.session.manage_filter_status_new == True %}checked{% endif %}{% endif %}>
</div>
</form>
</div>
{% endblock content %}

I would expect something like this where the final div and {% endblock %} are fully left-justified:

{% block css %}
{% endblock css %}{% block content %}
<div class="row">
    <div class="input-group date" data-provide="datepicker" data-date-format="yyyy/mm/dd">
        <div class="btn">
    </div></div>
</div><div>
    <div class="custom-control custom-switch">
        <input type="checkbox" name="filter-changes" id="filter-changes" class="custom-control-input fs-nano" value="0" {% if request.session.manage_filter_changes %}{% if request.session.manage_filter_changes == True %}checked{% endif %}{% endif %}>
    </div>
    <form class="form-inline">
        <div class="custom-control custom-switch">
            <input type="checkbox" name="filter-status-new" id="filter-status-new" class="custom-control-input fs-nano" value="0" {% if request.session.manage_filter_status_new %}{% if request.session.manage_filter_status_new == True %}checked{% endif %}{% endif %}>
        </div>
    </form>
</div>
{% endblock content %}

Or maybe this in a perfect world (though I suspect this would take a LOT more work to achieve via djhtml)

{% block css %}
{% endblock css %}
{% block content %}
<div class="row">
    <div class="input-group date" data-provide="datepicker" data-date-format="yyyy/mm/dd">
        <div class="btn">
        </div>
    </div>
</div>
<div>
    <div class="custom-control custom-switch">
        <input type="checkbox" name="filter-changes" id="filter-changes" class="custom-control-input fs-nano" value="0" {% if request.session.manage_filter_changes %}{% if request.session.manage_filter_changes == True %}checked{% endif %}{% endif %}>
    </div>
    <form class="form-inline">
        <div class="custom-control custom-switch">
            <input type="checkbox" name="filter-status-new" id="filter-status-new" class="custom-control-input fs-nano" value="0" {% if request.session.manage_filter_status_new %}{% if request.session.manage_filter_status_new == True %}checked{% endif %}{% endif %}>
        </div>
    </form>
</div>
{% endblock content %}

But the actual output is this:

{% block css %}
{% endblock css %}{% block content %}
<div class="row">
    <div class="input-group date" data-provide="datepicker" data-date-format="yyyy/mm/dd">
        <div class="btn">
    </div></div>
</div><div>
    <div class="custom-control custom-switch">
        <input type="checkbox" name="filter-changes" id="filter-changes" class="custom-control-input fs-nano" value="0" {% if request.session.manage_filter_changes %}{% if request.session.manage_filter_changes == True %}checked{% endif %}{% endif %}>
        </div>
        <form class="form-inline">
            <div class="custom-control custom-switch">
                <input type="checkbox" name="filter-status-new" id="filter-status-new" class="custom-control-input fs-nano" value="0" {% if request.session.manage_filter_status_new %}{% if request.session.manage_filter_status_new == True %}checked{% endif %}{% endif %}>
                </div>
            </form>
        </div>
    {% endblock content %}

I wish I were good enough with parsing/formatting to submit a PR, but hopefully this is at least helpful input.

If we have a simple test.html file

<div>
  <div data-action="click->modal#closeBackground">
  </div>
</div>

If I run djhtml -i test.html

I got

<div>
    <div data-action="click->modal#closeBackground">
    </div>
    </div>

As you can see, the last </div> indention is not correct.

The click->modal#closeBackground caused this problem.

I’ve been trying out djhtml on a project and our visual regression testing showed there were differences before-after the reformatting. Upon further inspection this seems to be due to djhtml inserting final newlines in some occurences.

Looking at the code, this seems to be done on purpose, but there are two issues:

• Whitespace is often sensitive in HTML – so inserting whitespace where there wasn’t any will change how the page renders.
• The "insertion of final newline" logic isn’t consistent – djhtml will only add the newline when it made other changes to the template. It won’t add the newline if the template’s formatting is already good.

Here is a practical example where this happens. With an icon.html template:

<svg>
<use href="#my-icon"></use>
</svg>

And a button.html:

<button>{% include "icon.html" }My button</button>

Without a final newline in icon.html, this renders as:

<button<svg>
<use href="#my-icon"></use>
</svg>My button</button>

With a final newline (which djhtml inserts) in icon.html, this becomes:

<button<svg>
    <use href="#my-icon"></use>
</svg>
My button</button>

This will cause additional space between the icon and the text. I’ve made a small demo to help illustrate.

As a resolution to this, my preference would be for djhtml to completely stop inserting final newlines. There are a lot of tools that do this already for people who want to, and it’s not something that can be applied to existing HTML templates with full certainty as the behavior depends on how the partials are used.

Jinja allows one to control whitespace generated by tags. For instance:

<div>
    {% for item in sequence %}
        {{ item }}
    {%- endfor %}
</div>

but DjHTML then misses the endfor.

This makes it easier to run djhtml over a bunch of files in a directory or directories.

The default suffixes are used as a filter with no configuration allowed (as black seems to work).

I'm aware of #13 recommending using find ... | xargs or the usage of pre-commit. However, I would like a single command that works on Linux, MacOS, and crucially Windows systems (find and xargs don't work). This would allow me to recommend to users how to use djhtml without having to add lots of additional text explaining how to do it on different systems i.e. djhtml src/templates is all that is needed.

The following HTML:

<div>
<!--[if lt IE 9]>
    <p>Not supported</p>
<![endif]-->
</div>

gets indented as:

<div>
    <!--[if lt IE 9]>
    <p>Not supported</p>
<![endif]-->
</div>

I would have expected djhtml to apply the same amount of indentation to every line within the div. I imagine it’s IE conditional comments that are causing this – if so they probably don’t warrant any kind of support as they’re well past their expiration date. But I thought I’d report it anyway just in case.

The following JS within HTML:

<script>
window.fetch('/test.html')
    .then((html) => {
        document.body.innerHTML = html;
    });
</script>

gets indented as:

<script>
    window.fetch('/test.html')
        .then((html) => {
        document.body.innerHTML = html;
    });
</script>

I would have expected everything within the script tag to get one extra level of indentation. I’m not sure what is causing this, but I at least tried with both a function and the arrow function as above, so I suspect it’s the method chaining that might be the problem.

I had some multi-line tags like:

<img src="/some/long/path"
     alt="Some text">

DjHTML indented them like so:

<img src="/some/long/path"
  alt="Some text">

I think it would be more nautral to retain the “attribute alignment”, and keep alt at the same column as src.

Do you think this would be possible?

Otherwise, the attribue-aligned style I found that works with DjHTML is:

<img
  src="/some/long/path"
  alt="Some text">