force uglification on a certain scope?

[fuddl]

is there a way to force a certain scope of elements to be uglified?

I need certain elements to be without spaces or breaks between them while I want to keep the rest of the document pretty. is this possible somehow?

.pretty
  h1 This one is pretty
  p please keep this place pretty

.ugly
  h1 This place is pretty ugly
  p 
    | please keep it ugly but 
    strong not
    | its children

should turn into:

<div class="pretty">
  <h1>This one is pretty.</h1>
  <p>please keep this place pretty</p>
</div>
<div class="ugly"><h1>This place is pretty ugly</h1><p>please keep it ugly but 
    <strong>not</strong>
    its children</p></div>

I need this to deal with inline-block whitespace

is there a solution for that?

[ForbesLindesay]

No, it is not currently possible to force only part of the document into pretty/normal mode. The general recommendation for this is to use the normal (non-pretty) mode which is the default for exactly this reason. You can explicitly add white space using = ' ' (on its own line) when actually needed for the formatting of the page. Most people I've spoken to use the element inspectors built into most developer tools in browsers in preference to using "View Source" on their web pages when debugging anyway, so this doesn't tend to cause any problems in terms of readability etc.

[fuddl]

I have problems with git. We keep both the source files and the the statically created html in one repo. The problem is, when using ugly mode, on each change of the jade files creates just one line in the html counterpart, for git the whole file has changed.

but maybe I can create a workaround… thank you anyway 😃

[TimothyGu]

@fuddl said:

The problem is, when using ugly mode, on each change of the jade files creates just one line in the html counterpart, for git the whole file has changed.

What's the problem with that?

[fuddl]

it results in unnecessary merge conflicts. The html file has one line and it has been changed by both sides. that wouldn't happen to pretty html…

[TimothyGu]

@fuddl said:

it results in unnecessary merge conflicts. The html file has one line and it has been changed by both sides. that wouldn't happen to pretty html…

I would use a hook or CI on your main repo to build the website whenever there is a push.

[ForbesLindesay]

Don't commit compiled/generated output. Just commit the source and add a bit ignore for the html.

[fuddl]

@TimothyGu @ForbesLindesay thanks, I managed to solve this problem using git settings…

never the less, the Twig Template Engine has a spaceless-keyword which is placed between tags to remove the whitespace there. that is precisely what I need

[ForbesLindesay]

Then use the Twig Template Engine. We're very much not in the business of checkbox comparisons against other templating engines. We're in the business of building the best JavaScript templating engine for producing HTML in dynamic websites. Experienced users almost always turn pretty mode off and don't commit the build output to their git repo.

[thirdender]

There are times and places where white space is important. Inline-block white space is the biggest use case. Take the following example:

<ul>
  <li><a href='category-0.html'>Category 0</a></li>
  <li><a href='category-1.html'>Category 1</a></li>
  <li><a href='category-2.html'>Category 2</a></li>
</ul>

If you want to center these links in the middle of the page without using display: flex;, the only option is text-align: center; on the UL and display: inline-block; on the LIs. This is the only option. When white space is between the LIs it is rendered in the document.

The reason this is important to me is because I do front-end slicing and pass HTML off to someone else. Previously I was using HAML to generate the HTML, and having prettified output is important because I pass the HTML to another programmer that turns that slice into a template. It'd be nice to have an option to eliminate white space between elements on a case-by-case basis so prettified output can be used, and I don't have to fall back to typing out the full HTML when I don't want the white space.