celiolatorraca/autoprefixer-tv

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

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') ])

PostCSS - Autoprefixer

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') ])

autoprefixer-tv's Issues

Plugins fails for multiple prefixed rules

cc @andrejr

While trying to use this plugin with multiple prefix rules, it fails for some scenarios with multiple -PREFIX-property rules. As details below.

Two prefixed styles

input.css

.example{
    font-size:-webkit-calc((10vw + 10px));
    font-size:calc((10vw + 10px));
    line-height:-webkit-calc(20vw + 20px);
    line-height:calc(20vw + 20px);
}

Expected

.example{
    font-size:-webkit-calc((10vw + 10px));
}
.example{
    line-height:-webkit-calc(20vw + 20px);
}
.example{
    font-size:calc((10vw + 10px));
    line-height:calc(20vw + 20px);
}

Current output

Note the comments to see the difference

.example{
    font-size:-webkit-calc((10vw + 10px));
}
.example{
    line-height:calc(20vw + 20px); /* This should be prefixed */
}
.example{
    font-size:calc((10vw + 10px));
    line-height:-webkit-calc(20vw + 20px); /* This should not be prefixed */
}

Three prefixed styles

input.css

.example{
    font-size:-webkit-calc((10vw + 10px));
    font-size:calc((10vw + 10px));
    line-height:-webkit-calc(20vw + 20px);
    line-height:calc(20vw + 20px);
    max-height:-webkit-calc(30vw + 30px);
    max-height:calc(30vw + 30px);
}

Expected

.example{
    font-size:-webkit-calc((10vw + 10px));
}
.example{
    line-height:-webkit-calc(20vw + 20px);
}
.example{
    max-height:-webkit-calc(30vw + 30px);
}
.example{
    font-size:calc((10vw + 10px));
    line-height:calc(20vw + 20px);
    max-height:calc(30vw + 30px);
}

Current output

Fails with:

TypeError: Cannot read property 'prop' of undefined

Error details

TypeError: Cannot read property 'prop' of undefined

    at duplicatedProps.forEach.duplicatedProp (index.js:49:43)
        at Array.forEach (<anonymous>)
    at css.walkRules.rule (index.js:37:25)
    at node_modules/postcss/lib/container.js:237:28
    at node_modules/postcss/lib/container.js:144:26
    at Root.each (node_modules/postcss/lib/container.js:110:22)
    at Root.walk (node_modules/postcss/lib/container.js:143:21)
    at Root.walkRules (node_modules/postcss/lib/container.js:235:25)
    at css (index.js:32:9)
    at LazyResult.run (node_modules/postcss/lib/lazy-result.js:277:20)
    at LazyResult.asyncTick (node_modules/postcss/lib/lazy-result.js:192:32)
    at processing.Promise.then._this2.processed (node_modules/postcss/lib/lazy-result.js:231:20)
        at new Promise (<anonymous>)
    at LazyResult.async (node_modules/postcss/lib/lazy-result.js:228:27)
    at LazyResult.then (node_modules/postcss/lib/lazy-result.js:134:21)
    at run (tests/index.test.js:9:1)
    at Object.it.only (tests/index.test.js:44:16)
        at new Promise (<anonymous>)
    at Promise.resolve.then.el (node_modules/p-map/index.js:46:16)
        at <anonymous>
    at process._tickCallback (internal/process/next_tick.js:188:7)