diff --git a/lib/index.js b/lib/index.js index b842d9e..d000c86 100644 --- a/lib/index.js +++ b/lib/index.js @@ -31,6 +31,7 @@ Pleeease.prototype.process = function (css) { filter = require('pleeease-filters'), rem = require('pixrem'), pseudoElements = require('../lib/processors/pseudoElements'), + opacity = require('../lib/processors/opacity'), mqpacker = require('css-mqpacker'), prefixer = require('autoprefixer-core'), minifier = require('csswring'); @@ -47,6 +48,7 @@ Pleeease.prototype.process = function (css) { (opts = this.opts.filters) ? filter(opts).postcss : false, (opts = this.opts.rem) ? rem(opts).postcss : false, (opts = this.opts.pseudoElements) ? pseudoElements.processor : false, + (opts = this.opts.opacity) ? opacity.processor : false, (opts = this.opts.mqpacker) ? mqpacker.processor : false, (opts = this.opts.autoprefixer) ? prefixer(opts).postcss : false, (opts = this.opts.minifier) ? minifier(opts).postcss : false diff --git a/lib/options.js b/lib/options.js index 833882f..bc55cec 100644 --- a/lib/options.js +++ b/lib/options.js @@ -25,6 +25,7 @@ function Options () { 'filters': true, 'rem': true, 'pseudoElements': true, + 'opacity': true, 'import': true, 'mqpacker': true, diff --git a/lib/processors/opacity.js b/lib/processors/opacity.js new file mode 100644 index 0000000..6207906 --- /dev/null +++ b/lib/processors/opacity.js @@ -0,0 +1,41 @@ +'use strict'; + +/** + * + * Fallback opacity property + * + */ +module.exports.processor = function (css) { + + var PROP = 'opacity'; + var PROP_REPLACE = 'filter'; + + // for each rules, each decl + css.eachRule(function (rule) { + rule.eachDecl(function (decl) { + + if (decl.prop !== PROP) { return; } + + // get amount and create value + var amount = Math.floor(decl.value * 100); + var VAL_REPLACE = 'alpha(opacity=' + amount + ')'; + + // find if a filter opacity is already present + var isFilterAlreadyPresent = false; + rule.eachDecl(function (d) { + if (d.prop === PROP_REPLACE && d.value === VAL_REPLACE) { + isFilterAlreadyPresent = true; + } + }); + + // adds new porperty only if it's not present yet + if (!isFilterAlreadyPresent) { + rule.insertAfter(decl, {prop: PROP_REPLACE, value: VAL_REPLACE}); + } + + }); + }); + + return css; + +}; \ No newline at end of file diff --git a/test/features.js b/test/features.js index 83ff249..e491c86 100644 --- a/test/features.js +++ b/test/features.js @@ -76,6 +76,17 @@ describe('Features', function () { }); + describe('Opacity', function () { + + it('should convert opacity into filter', function () { + + // options + test('opacity', opts); + + }); + + }); + describe('MQs', function () { it('should combine media-queries', function () { diff --git a/test/features/opacity.css b/test/features/opacity.css new file mode 100644 index 0000000..bfda4cb --- /dev/null +++ b/test/features/opacity.css @@ -0,0 +1,10 @@ +.opacity { + opacity: .5; +} +.opacity { + opacity: .216708; +} +.opacity { + opacity: .5; + filter: alpha(opacity=50); +} \ No newline at end of file diff --git a/test/features/opacity.out.css b/test/features/opacity.out.css new file mode 100644 index 0000000..894bb3f --- /dev/null +++ b/test/features/opacity.out.css @@ -0,0 +1,12 @@ +.opacity { + opacity: .5; + filter: alpha(opacity=50); +} +.opacity { + opacity: .216708; + filter: alpha(opacity=21); +} +.opacity { + opacity: .5; + filter: alpha(opacity=50); +} \ No newline at end of file