PostCSS plugin to split only duplicated prefixed property declarations into multiple rules.

Some of the TV manufacturers use custom webkit distributions as the engine in their applications.

Especially the WebOS TVs. The webpack distribution they use has a bug that invalidates the overwriting declarations in a same CSS definition.

So, as you can see in the example below, the property display: flex invalidates the previous one (display: -webkit-flex) which is accepted by this distribution.

This is an example of the splitting this plugin is intended to do:

Before:

.foo {
    display: -webkit-flex;
    display: flex;
    color: red;
    height: 50px;
    height: 100px;
}

After:

.foo {
    display: -webkit-flex;
}

.foo {
    display: flex;
    color: red;
    height: 50px;
    height: 100px;
}

postcss([ require('autoprefixer-tv') ])

You can use this plugin separately, but it is well integrated with Autoprefixer plugin. You just need to require it after the autoprefixer postcss plugin.

postcss([ require('autoprefixer'), require('autoprefixer-tv') ])