PostCSS Autoprefixer Tv
PostCSS plugin to split only duplicated prefixed property declarations into multiple rules.
Why should I use this plugin?
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;
}
Usage
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') ])