[plugin]: Add an option to limit line length in output

[devinus]

Safely limits line length in resulting output by adding linebreaks.

E.g.

<some super="long" ... thing>

Becomes

<some super="long" ...\n
thing>

[voischev]

👍 known problem of all parsers ;)

[voischev]

what options we would like to see?

[devinus]

We currently just use html-minifier's maxLineLength option. It could be more customizable to enable breaking at different places, but I think by default it just breaks on tags and between attributes but not within.

[voischev]

Maybe create posthtml plugin for this?

[devinus]

How could a plugin control rendering?

[voischev]

It is impossible to use the posthtml-render at full power. :(
Since posthtmltree is very simple tree, which does not have the saving character positions or line numbers.

htmlparser2 - also can not properly form the tree and take into account all of this. :(
For example: htmlparser2 miss inside \n in tags

<tag key="val1\n 
    val2"\n 
    key2="val"\n
    key3="val"\n
>\n
!!!\n
</tag>

htmlpaser2 skip all '\n' in tag. Most parsers too not able to this
result:

<tag key="val1\n 
 val2" key2="val" key3="val">\n
!!!\n
</tag>

and it is very important!

[voischev]

can you give an more examples of how you would like to work with line breaks?

[devinus]

It just breaks where it can break in HTML without introducing significant whitespace, e.g. not in pre and between attributes but not within attribute strings, etc.

[voischev]

in plugin, we can control the text nodes and attribute value.

tree
    .match({ attrs: true }, node => {
        node.attrs.style = node.attrs.style.replace(';', ';\n'); // for example
        return node;
    })
    .walk(node => {
        if (node.hasOwnProperty('tag')) return node;
        return node.replace(/(\w+)\s/g, '$1\n ');
    })

or vice versa
this is enough?

[devinus]

@voischev OK, this is walking string nodes? As long as we make sure it's not in <pre> tags we should be good.

[voischev]

@devinus safe \n in pre content expample:

var posthtml = require('posthtml');
var html = '<div style="sdf \n">sdf\n \n \nsdfg\n</div><pre style="ss\n"> pre1  \npre2 \n<b>pre3\n</b>    \n<i>pre4\n</i></pre><div> aaaa1\n</div>';


function plugin(tree) {
    var isPreContent;
    tree
        .match({ tag: true, content: true }, node => {

            if (node.tag === 'pre') {
                node.content = tree
                    .match
                    .bind(node.content)(
                        { tag: true },
                        node => {
                            node.isPreContent = true;
                            return node;
                        }
                    );
            }
            return node;
        })
        .match({ attrs: { style: true }, isPreContent: false }, node => {
            // TODO: parse all attrs
            node.attrs.style = node.attrs.style.replace(/\n/g, '');
            return node;
        })
        .walk(node => {
            if (node.hasOwnProperty('tag')) {
                isPreContent = node.isPreContent;
                // clear plugin meta
                delete node.isPreContent;
                return node;
            }
            return !isPreContent ? node.replace(/\n/g, '') : node;
        });
}
posthtml([plugin]).process(html).then(result => {
    console.log(JSON.stringify(result.tree));
});

🎉

[maltsev]

@Scrum why you transferred this issue to posthtml-plugins repository? The issue doesn't seem to be related to this project.

[Scrum]

@maltsev Hi, this is not a problem, but ideas that can be implemented into a plugin