chore: removed lodash dep's, and included a fix for #10

iamvdo · Jun 24, 2016 · 0b182e7 · 0b182e7
1 parent 9e477fb
commit 0b182e7
Show file tree

Hide file tree

Showing 10 changed files with 81 additions and 45 deletions.
diff --git a/README.md b/README.md
@@ -1,8 +1,13 @@
 # PostCSS Opacity [![Build Status](https://travis-ci.org/iamvdo/postcss-opacity.svg)](https://travis-ci.org/iamvdo/postcss-opacity)
 
-[PostCSS] plugin to add opacity filter for IE8.
+[PostCSS](https://github.com/postcss/postcss) plugin that adds support for legacy browser opacity alternatives.
 
-[PostCSS]: https://github.com/postcss/postcss
+## Example
+```js
+postcss([
+	require('postcss-opacity')
+])
+```
 
 ```css
 /* Input example */
@@ -14,15 +19,46 @@
 ```css
 /* Output example */
 .foo {
-  opacity: .5;
   -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
+  opacity: .5;
 }
 ```
 
-## Usage
+## Legacy
+Support for IE 5-7, Safari 1.X, Netscape
 
 ```js
-postcss([ require('postcss-opacity') ])
+postcss([
+	require('postcss-opacity')({
+		legacy: true	
+	})
+])
+```
+
+```css
+/* Input example */
+.foo {
+  opacity: .5;
+}
 ```
 
+```css
+/* Output example */
+.foo {
+  /* IE 8 */
+  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
+
+  /* IE 5-7 */
+  filter: alpha(opacity=50);
+
+  /* Netscape */
+  -moz-opacity: .5;
+
+  /* Safari 1.x */
+  -khtml-opacity: .5;
+
+  /* Modern browsers */
+  opacity: .5;
+}
+
 See [PostCSS] docs for examples for your environment.
diff --git a/index.js b/index.js
@@ -1,28 +1,26 @@
-var postcss = require('postcss'),
-  concat = require('lodash.concat'),
-  each = require('lodash.foreach');
+var postcss = require('postcss');
 
-module.exports = postcss.plugin('postcss-opacity', function (opts) {
+module.exports = postcss.plugin('postcss-opacity', function(opts) {
   opts = opts || {};
   opts.legacy = opts.legacy || false;
 
   var PROP = 'opacity';
 
-  return function (css) {
+  return function(css) {
 
-    css.walkRules(function (rule) {
+    css.walkRules(function(rule) {
       // Search through props, ignore current and insert whats missing
 
-      var propsToTestInsert = (function (def) {
-        return concat(def, (opts.legacy) ? ['filter', '-moz-opacity', '-khtml-opacity'] : []);
-      })(['opacity', '-ms-filter']);
+      var propsToTestInsert = (function(def) {
+        return def.concat((opts.legacy) ? [{ prop: 'filter', order: 1 }, { prop: '-moz-opacity', order: 2 }, { prop: '-khtml-opacity', order: 3 }] : []);
+      })([{ prop: 'opacity', order: 4 }, { prop: '-ms-filter', order: 0 }]);
 
       var propsToInsert = [];
 
-      each(propsToTestInsert, function (v) {
+      propsToTestInsert.forEach(function(v) {
         // find if prop based on legacy is found
         var isPropAlreadyPresent = false;
-        rule.walkDecls(v, function () {
+        rule.walkDecls(v, function() {
           isPropAlreadyPresent = true;
         });
 
@@ -31,8 +29,8 @@ module.exports = postcss.plugin('postcss-opacity', function (opts) {
         }
       });
 
-      each(propsToInsert, function (addProp) {
-        rule.walkDecls(PROP, function (decl) {
+      propsToInsert.forEach(function(addProp) {
+        rule.walkDecls(PROP, function(decl) {
           var value = void 0,
             subOne = decl.value,
             subHundred = Math.floor(subOne * 100);
@@ -53,7 +51,7 @@ module.exports = postcss.plugin('postcss-opacity', function (opts) {
 
           if (value) {
             // adds new property only if it's not present yet and we actually found a prop
-            rule.insertAfter(decl, { prop: addProp, value: value });
+            rule.insertBefore(decl, { prop: addProp, value: value });
           }
         });
       });

diff --git a/package.json b/package.json
@@ -15,8 +15,6 @@
     "url": "https://github.com/iamvdo/postcss-opacity.git"
   },
   "dependencies": {
-    "lodash.concat": "^4.3.1",
-    "lodash.foreach": "^4.3.0",
     "postcss": "^5.0.4"
   },
   "devDependencies": {

diff --git a/test/fixtures/duplicate.css b/test/fixtures/duplicate.css
@@ -1,4 +1,4 @@
 .opacity {
+  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";	
   opacity: .5;
-  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
 }
diff --git a/test/fixtures/duplicate.out.css b/test/fixtures/duplicate.out.css
@@ -1,4 +1,4 @@
 .opacity {
-  opacity: .5;
   -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
+  opacity: .5;
 }
diff --git a/test/fixtures/legacy.css b/test/fixtures/legacy.css
@@ -1,6 +1,7 @@
 .opacity {
   opacity: .5;
 }
+
 .opacity {
   opacity: .216708;
 }
diff --git a/test/fixtures/legacy.out.css b/test/fixtures/legacy.out.css
@@ -1,14 +1,15 @@
 .opacity {
-  opacity: .5;
-  -khtml-opacity: .5;
-  -moz-opacity: .5;
-  filter: alpha(opacity=50);
   -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
+  filter: alpha(opacity=50);
+  -moz-opacity: .5;
+  -khtml-opacity: .5;
+  opacity: .5;
 }
+
 .opacity {
-  opacity: .216708;
-  -khtml-opacity: .216708;
-  -moz-opacity: .216708;
-  filter: alpha(opacity=21);
   -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=21)";
+  filter: alpha(opacity=21);
+  -moz-opacity: .216708;
+  -khtml-opacity: .216708;
+  opacity: .216708;
 }
diff --git a/test/fixtures/simple.css b/test/fixtures/simple.css
@@ -1,6 +1,7 @@
 .opacity {
   opacity: .5;
 }
+
 .opacity {
   opacity: .216708;
 }
diff --git a/test/fixtures/simple.out.css b/test/fixtures/simple.out.css
@@ -1,8 +1,9 @@
 .opacity {
+  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";	
   opacity: .5;
-  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
 }
+
 .opacity {
-  opacity: .216708;
   -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=21)";
+  opacity: .216708;
 }
diff --git a/test/test.js b/test/test.js
@@ -1,35 +1,35 @@
-var fs      = require('fs');
+var fs = require('fs');
 var postcss = require('postcss');
-var expect  = require('chai').expect;
+var expect = require('chai').expect;
 
 var plugin = require('../');
 
-var test = function (name, opts) {
-  var input  = read('test/fixtures/' + name + '.css');
+var test = function(name, opts) {
+  var input = read('test/fixtures/' + name + '.css');
   var output = read('test/fixtures/' + name + '.out.css');
   expect(postcss(plugin(opts)).process(input).css).to.eql(output);
 };
-var testString = function (input, output, opts) {
+var testString = function(input, output, opts) {
   expect(postcss(plugin(opts)).process(input).css).to.eql(output);
 };
-var read = function (path) {
+var read = function(path) {
   return fs.readFileSync(path, 'utf-8');
 };
 
-describe('postcss-opacity', function () {
+describe('postcss-opacity', function() {
 
-  describe('adds fallback filter', function () {
+  describe('adds fallback filter', function() {
 
-    it('simple', function () {
+    it('simple', function() {
       test('simple');
     });
 
-    it('doesn\'t add fallback if already present', function () {
+    it('doesn\'t add fallback if already present', function() {
       test('duplicate');
     });
 
-     it('does legacy', function () {
-      test('legacy', {legacy: true});
+    it('does legacy', function() {
+      test('legacy', { legacy: true });
     });
 
   });