Setup initial project

.editorconfig

@@ -0,0 +1,12 @@
+root = true
+
+[*]
+indent_style = space
+indent_size = 4
+end_of_line = lf
+charset = utf-8
+trim_trailing_whitespace = true
+insert_final_newline = true
+
+[*.{json,yml}]
+indent_size = 2

.gitignore

@@ -0,0 +1,3 @@
+node_modules/
+npm-debug.log
+yarn-error.log

.npmignore

@@ -0,0 +1,10 @@
+.npmignore
+.gitignore
+.editorconfig
+
+node_modules/
+npm-debug.log
+yarn.lock
+
+*.test.js
+.travis.yml

.travis.yml

@@ -0,0 +1,6 @@
+language: node_js
+cache: yarn
+node_js:
+  - stable
+  - "6"
+  - "4"

CHANGELOG.md

@@ -0,0 +1,2 @@
+# Change Log
+This project adheres to [Semantic Versioning](http://semver.org/).

LICENSE

@@ -0,0 +1,20 @@
+The MIT License (MIT)
+
+Copyright 2018 Célio Latorraca <celio.latorraca@corp.globo.com>
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of
+this software and associated documentation files (the "Software"), to deal in
+the Software without restriction, including without limitation the rights to
+use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
+the Software, and to permit persons to whom the Software is furnished to do so,
+subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
+FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
+COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
+IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
+CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

README.md

@@ -0,0 +1,57 @@
+# PostCSS Autoprefixer Tv [![Build Status][ci-img]][ci]
+
+[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:
+```css
+.foo {
+    display: -webkit-flex;
+    display: flex;
+    color: red;
+    height: 50px;
+    height: 100px;
+}
+```
+
+After:
+```css
+.foo {
+    display: -webkit-flex;
+}
+
+.foo {
+    display: flex;
+    color: red;
+    height: 50px;
+    height: 100px;
+}
+```
+
+## Usage
+
+```js
+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.
+
+```js
+postcss([ require('autoprefixer'), require('autoprefixer-tv') ])
+```
+
+[PostCSS]: https://github.com/postcss/postcss
+[Autoprefixer]: https://github.com/postcss/autoprefixer
+[ci-img]:  https://travis-ci.org/celiolatorraca/postcss-autoprefixer-tv.svg
+[ci]:      https://travis-ci.org/celiolatorraca/postcss-autoprefixer-tv

index.js

@@ -0,0 +1,52 @@
+const postcss = require('postcss');
+
+const filterOnlyPrefixedProps = (rule, props) =>
+    props.filter((prop) =>
+        prop.filter((propPosition) =>
+            /^-\D/.test(rule.nodes[propPosition].value)
+        ).length > 0
+    );
+
+const extractDuplicatedProps = (rule) => {
+    const props = {};
+    rule.nodes.forEach((node, index) => {
+        if (!props[node.prop]) props[node.prop] = [];
+        props[node.prop].push(index);
+    });
+
+    const duplicatedProps = [];
+    for (let key in props) {
+        if (!props.hasOwnProperty(key)) continue;
+
+        const propPositions = props[key];
+        if (propPositions.length > 1) {
+            duplicatedProps.push(propPositions);
+        }
+    }
+
+    return duplicatedProps;
+};
+
+module.exports = postcss.plugin('autoprefixer-tv', () =>
+    (css) => {
+        css.walkRules((rule) => {
+            let duplicatedProps = extractDuplicatedProps(rule);
+            duplicatedProps = filterOnlyPrefixedProps(rule, duplicatedProps);
+
+            duplicatedProps.forEach((duplicatedProp) => {
+                for (let i = 0; i < duplicatedProp.length - 1; i++) {
+                    const newRule = postcss.rule({ selector: rule.selector });
+
+                    const position = duplicatedProp[i];
+                    const decl = rule.nodes[position];
+                    newRule.append(
+                        postcss.decl({ prop: decl.prop, value: decl.value })
+                    );
+
+                    rule.removeChild(decl);
+                    rule.parent.insertBefore(rule, newRule);
+                }
+            });
+        });
+    }
+);

package.json

@@ -0,0 +1,38 @@
+{
+  "name": "autoprefixer-tv",
+  "version": "0.0.1",
+  "description": "PostCSS plugin PostCSS plugin to split prefixed properties values into multiple rules.",
+  "keywords": [
+    "postcss",
+    "css",
+    "postcss-plugin",
+    "autoprefixer",
+    "webos",
+    "tv"
+  ],
+  "author": "Célio Latorraca <celio.latorraca@corp.globo.com>",
+  "license": "MIT",
+  "repository": "celiolatorraca/postcss-autoprefixer-tv",
+  "bugs": {
+    "url": "https://github.com/celiolatorraca/postcss-autoprefixer-tv/issues"
+  },
+  "homepage": "https://github.com/celiolatorraca/postcss-autoprefixer-tv",
+  "dependencies": {
+    "postcss": "^6.0.1"
+  },
+  "devDependencies": {
+    "eslint": "^3.19.0",
+    "eslint-config-postcss": "^2.0.2",
+    "jest": "^20.0.0"
+  },
+  "scripts": {
+    "test": "jest && yarn lint",
+    "lint": "eslint *.js"
+  },
+  "eslintConfig": {
+    "extends": "eslint-config-postcss/es5",
+    "env": {
+      "jest": true
+    }
+  }
+}

tests/expects/prefixed-only.css

@@ -0,0 +1,6 @@
+.foo {
+    display: -webkit-flex;
+}
+.foo {
+    display: flex;
+}

tests/expects/prefixed-with-other-decl.css

@@ -0,0 +1,7 @@
+.foo {
+    display: -webkit-flex;
+}
+.foo {
+    display: flex;
+    height: 100px;
+}

tests/expects/unprefixed-only.css

@@ -0,0 +1,4 @@
+.foo {
+    height: 50px;
+    height: 100px;
+}

tests/fixtures/prefixed-only.css

@@ -0,0 +1,4 @@
+.foo {
+    display: -webkit-flex;
+    display: flex;
+}

tests/fixtures/prefixed-with-other-decl.css

@@ -0,0 +1,5 @@
+.foo {
+    display: -webkit-flex;
+    display: flex;
+    height: 100px;
+}

tests/fixtures/unprefixed-only.css

@@ -0,0 +1,4 @@
+.foo {
+    height: 50px;
+    height: 100px;
+}

tests/index.test.js

@@ -0,0 +1,35 @@
+const fs = require('fs');
+const postcss = require('postcss');
+
+const autoprefixerTV = require('../');
+
+const readFile = (path) => fs.readFileSync(path, 'utf-8');
+const run = (input, output) =>
+    postcss([ autoprefixerTV() ]).process(input, { from: undefined })
+    .then((result) => {
+        expect(result.css).toEqual(output);
+        expect(result.warnings().length).toBe(0);
+    });
+
+describe('autoprefixer-tv', () => {
+    it('splits duplicated prefixed property declarations', () => {
+        const input = readFile('./tests/fixtures/prefixed-only.css');
+        const output = readFile('./tests/expects/prefixed-only.css');
+
+        return run(input, output);
+    });
+
+    it('keeps duplicated unprefixed property declarations untouched', () => {
+        const input = readFile('./tests/fixtures/unprefixed-only.css');
+        const output = readFile('./tests/expects/unprefixed-only.css');
+
+        return run(input, output);
+    });
+
+    it('keeps other property declarations on the last rule', () => {
+        const input = readFile('./tests/fixtures/prefixed-with-other-decl.css');
+        const output = readFile('./tests/expects/prefixed-with-other-decl.css');
+
+        return run(input, output);
+    });
+});