maxpoletaev / node-beml

HTML preprocessor for BEM
64 stars 4 forks source link

Maybe postHTML? #8

Closed awinogradov closed 9 years ago

awinogradov commented 9 years ago

I think it would be possible to make a good plugin for posthtml ;)

voischev commented 9 years ago

:+1:

maxpoletaev commented 9 years ago

Maybe. What are the benefits? Current implementation works without problems.

awinogradov commented 9 years ago

This is true. But users will can chain beml with other plugins like plugins in postcss, man! It's pretty cool!)

maxpoletaev commented 9 years ago

It's cool. But chain of beml and postcss can be used in grunt/gulp. Rewrite for rewriting is not my way. Thanks and sorry! :)

awinogradov commented 9 years ago

posthtml is not builder like a gulp or grunt. It's processor. You can chain plugins for work on html tree in json. This is absolutely another paradigm and instrument. You don't need rewrite all of your code. You can base plugin for posthtml on your library and create new repository. You really don't want do this?

maxpoletaev commented 9 years ago

@awinogradov sorry for long answer. BEML and PostHTML use different HTML parsers (bemjson and cheerio). This is not a problem? I don't need to rewrite code to another parser?

awinogradov commented 9 years ago

/сс @voischev

voischev commented 9 years ago

@zenwalker look at JSON tree after HTML input HTML

<a block="b-animals" href="#">
    <span elem="cat" mod="size:big, color:red">Content</span>
</a>

PostHTML tree

{
    tag: 'a',
    attrs: {
        block: 'b-animals',
        href: '#'
    },
    content: {
        tag: 'span',
        attrs: {
            elem: 'cat',
            mod: 'size:big, color:red'
        },
        content: 'Content'
    }
}

in plugin have to work only with this json tree. no parsers

You need convert tree in posthtml-beml plugin in this

{
    tag: 'a',
    attrs: {
        class: 'b-animals',
        href: '#'
    },
    content: {
        tag: 'span',
        attrs: {
            class: 'b-animals__cat b-animals__cat_size_big b-animals_color_red'
        },
        content: 'Content'
    }
}

to get a result HTML

<a class="b-animals" href="#">
    <span class="b-animals__cat b-animals__cat_size_big b-animals_color_red">Content</span>
</a>