Skip to content

Commit

Permalink
See #290 - adds removing IE filters.
Browse files Browse the repository at this point in the history 
Why:

* Internet Explorer `filter` / `-ms-filter` are unsupported since
  IE 10, which is also clean-css new default compatibility;
* can be restored by using `ie7`, `ie8`, or `ie9` compatibility
  modes.
  • Loading branch information
@jakubpawlowicz
jakubpawlowicz committed Jan 19, 2017
1 parent 41a4fb4 commit 0464d91
Show file tree
Hide file tree
Showing 8 changed files with 103 additions and 51 deletions.
1 change: 1 addition & 0 deletions README.md
View file
Expand Up @@ -510,6 +510,7 @@ with the following options available:
* `'[+-]properties.backgroundSizeMerging'` - turn on / off background-size merging into shorthand
* `'[+-]properties.colors'` - turn on / off any color optimizations
* `'[+-]properties.ieBangHack'` - turn on / off IE bang hack removal
* `'[+-]properties.ieFilters'` - turn on / off IE `filter` / `-ms-filter` removal
* `'[+-]properties.iePrefixHack'` - turn on / off IE prefix hack removal
* `'[+-]properties.ieSuffixHack'` - turn on / off IE suffix hack removal
* `'[+-]properties.merging'` - turn on / off property merging based on understandability
Expand Down
20 changes: 19 additions & 1 deletion lib/optimizer/level-1/optimize.js
View file
Expand Up @@ -440,6 +440,10 @@ function optimizeBody(properties, context) {
property.unused = true;
}

if (!options.compatibility.properties.ieFilters && isLegacyFilter(property)) {
property.unused = true;
}

if (property.unused) {
continue;
}
Expand Down Expand Up @@ -511,7 +515,7 @@ function optimizeBody(properties, context) {
optimizeBackground(property);
} else if (name.indexOf('border') === 0 && name.indexOf('radius') > 0 && levelOptions.optimizeBorderRadius) {
optimizeBorderRadius(property);
} else if (name == 'filter'&& levelOptions.optimizeFilter) {
} else if (name == 'filter'&& levelOptions.optimizeFilter && options.compatibility.properties.ieFilters) {
optimizeFilter(property);
} else if (name == 'font' && levelOptions.optimizeFont) {
optimizeFont(property, options);
Expand Down Expand Up @@ -628,6 +632,20 @@ function isImport(token) {
return IMPORT_PREFIX_PATTERN.test(token[1]);
}

function isLegacyFilter(property) {
var value;

if (property.name == 'filter' || property.name == '-ms-filter') {
value = property.value[0][1];

return value.indexOf('progid') > -1 ||
value.indexOf('alpha') === 0 ||
value.indexOf('chroma') === 0;
} else {
return false;
}
}

function level1Optimize(tokens, context) {
var options = context.options;
var levelOptions = options.level[OptimizationLevel.One];
Expand Down
2 changes: 2 additions & 0 deletions lib/utils/compatibility.js
View file
Expand Up @@ -9,6 +9,7 @@ var DEFAULTS = {
backgroundSizeMerging: true, // background-size to shorthand
colors: true, // any kind of color transformations, like `#ff00ff` to `#f0f` or `#fff` into `red`
ieBangHack: false, // !ie suffix hacks on IE<8
ieFilters: false, // whether to preserve `filter` and `-ms-filter` properties
iePrefixHack: false, // underscore / asterisk prefix hacks on IE
ieSuffixHack: false, // \9 suffix hacks on IE6-9
merging: true, // merging properties into one
Expand Down Expand Up @@ -78,6 +79,7 @@ DEFAULTS.ie10 = DEFAULTS['*'];

DEFAULTS.ie9 = merge(DEFAULTS['*'], {
properties: {
ieFilters: true,
ieSuffixHack: true
}
});
Expand Down
39 changes: 19 additions & 20 deletions test/fixtures/big-min.css
View file

Large diffs are not rendered by default.

22 changes: 11 additions & 11 deletions test/fixtures/bootstrap-min.css
View file
Expand Up @@ -768,7 +768,7 @@ select[multiple].form-group-lg .form-control,textarea.form-group-lg .form-contro
.btn.active.focus,.btn.active:focus,.btn.focus,.btn:active.focus,.btn:active:focus,.btn:focus{outline:dotted thin;outline:-webkit-focus-ring-color auto 5px;outline-offset:-2px}
.btn.focus,.btn:focus,.btn:hover{color:#333;text-decoration:none}
.btn.active,.btn:active{outline:0;-webkit-box-shadow:inset 0 3px 5px rgba(0,0,0,.125);box-shadow:inset 0 3px 5px rgba(0,0,0,.125)}
.btn.disabled,.btn[disabled],fieldset[disabled] .btn{pointer-events:none;cursor:not-allowed;filter:alpha(opacity=65);-webkit-box-shadow:none;box-shadow:none;opacity:.65}
.btn.disabled,.btn[disabled],fieldset[disabled] .btn{pointer-events:none;cursor:not-allowed;-webkit-box-shadow:none;box-shadow:none;opacity:.65}
.btn-default{color:#333;border-color:#ccc}
.btn-default.active,.btn-default.focus,.btn-default:active,.btn-default:focus,.btn-default:hover,.open>.dropdown-toggle.btn-default{color:#333;background-color:#e6e6e6;border-color:#adadad}
.btn-default.disabled,.btn-default.disabled.active,.btn-default.disabled.focus,.btn-default.disabled:active,.btn-default.disabled:focus,.btn-default.disabled:hover,.btn-default[disabled],.btn-default[disabled].active,.btn-default[disabled].focus,.btn-default[disabled]:active,.btn-default[disabled]:focus,.btn-default[disabled]:hover,fieldset[disabled] .btn-default,fieldset[disabled] .btn-default.active,fieldset[disabled] .btn-default.focus,fieldset[disabled] .btn-default:active,fieldset[disabled] .btn-default:focus,fieldset[disabled] .btn-default:hover{background-color:#fff;border-color:#ccc}
Expand Down Expand Up @@ -822,7 +822,7 @@ tbody.collapse.in{display:table-row-group}
.dropdown-menu>li>a:focus,.dropdown-menu>li>a:hover{color:#262626;text-decoration:none;background-color:#f5f5f5}
.dropdown-menu>.active>a,.dropdown-menu>.active>a:focus,.dropdown-menu>.active>a:hover{color:#fff;text-decoration:none;background-color:#337ab7;outline:0}
.dropdown-header,.dropdown-menu>.disabled>a,.dropdown-menu>.disabled>a:focus,.dropdown-menu>.disabled>a:hover,.nav>li.disabled>a{color:#777}
.dropdown-menu>.disabled>a:focus,.dropdown-menu>.disabled>a:hover{text-decoration:none;cursor:not-allowed;background-color:transparent;filter:progid:DXImageTransform.Microsoft.gradient(enabled=false)}
.dropdown-menu>.disabled>a:focus,.dropdown-menu>.disabled>a:hover{text-decoration:none;cursor:not-allowed;background-color:transparent}
.open>.dropdown-menu{display:block}
.open>a{outline:0}
.dropdown-menu-right{right:0;left:auto}
Expand Down Expand Up @@ -1271,11 +1271,11 @@ a.list-group-item-danger.active,a.list-group-item-danger.active:focus,a.list-gro
.well blockquote{border-color:rgba(0,0,0,.15)}
.well-lg{padding:24px;border-radius:6px}
.well-sm{padding:9px;border-radius:3px}
.close{float:right;font-size:21px;font-weight:700;color:#000;text-shadow:0 1px 0 #fff;filter:alpha(opacity=20);opacity:.2}
.close{float:right;font-size:21px;font-weight:700;color:#000;text-shadow:0 1px 0 #fff;opacity:.2}
.popover,.tooltip{font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-weight:400}
.carousel-caption,.carousel-control{text-shadow:0 1px 2px rgba(0,0,0,.6)}
.close:focus,.close:hover{color:#000;text-decoration:none;cursor:pointer;filter:alpha(opacity=50);opacity:.5}
.modal-backdrop.fade,.tooltip{filter:alpha(opacity=0);opacity:0}
.close:focus,.close:hover{color:#000;text-decoration:none;cursor:pointer;opacity:.5}
.modal-backdrop.fade,.tooltip{opacity:0}
button.close{-webkit-appearance:none;padding:0;cursor:pointer;background:0 0;border:0}
.modal{position:fixed;top:0;right:0;bottom:0;left:0;z-index:1040;display:none;-webkit-overflow-scrolling:touch;outline:0}
.modal.fade .modal-dialog{-webkit-transition:-webkit-transform .3s ease-out;-o-transition:-o-transform .3s ease-out;transition:transform .3s ease-out;-webkit-transform:translate(0,-25%);-ms-transform:translate(0,-25%);-o-transform:translate(0,-25%);transform:translate(0,-25%)}
Expand All @@ -1284,7 +1284,7 @@ button.close{-webkit-appearance:none;padding:0;cursor:pointer;background:0 0;bor
.modal-dialog{position:relative;width:auto;margin:10px}
.modal-content{position:relative;background-color:#fff;background-clip:padding-box;border:1px solid rgba(0,0,0,.2);border-radius:6px;outline:0;-webkit-box-shadow:0 3px 9px rgba(0,0,0,.5);box-shadow:0 3px 9px rgba(0,0,0,.5)}
.modal-backdrop{position:absolute;top:0;right:0;left:0;background-color:#000}
.modal-backdrop.in{filter:alpha(opacity=50);opacity:.5}
.modal-backdrop.in{opacity:.5}
.modal-header{min-height:16.42857143px;padding:15px;border-bottom:1px solid #e5e5e5}
.modal-header .close{margin-top:-2px}
.modal-title{margin:0;line-height:1.42857143}
Expand All @@ -1303,7 +1303,7 @@ button.close{-webkit-appearance:none;padding:0;cursor:pointer;background:0 0;bor
.modal-lg{width:900px}
}
.tooltip{position:absolute;z-index:1070;display:block;font-size:12px;line-height:1.4;visibility:visible}
.tooltip.in{filter:alpha(opacity=90);opacity:.9}
.tooltip.in{opacity:.9}
.tooltip.top{padding:5px 0;margin-top:-3px}
.tooltip.right{padding:0 5px}
.tooltip.bottom{padding:5px 0;margin-top:3px}
Expand Down Expand Up @@ -1354,10 +1354,10 @@ button.close{-webkit-appearance:none;padding:0;cursor:pointer;background:0 0;bor
.carousel-inner>.prev{left:-100%}
.carousel-inner>.active.left{left:-100%}
.carousel-inner>.active.right{left:100%}
.carousel-control{position:absolute;top:0;bottom:0;left:0;width:15%;font-size:20px;color:#fff;text-align:center;filter:alpha(opacity=50);opacity:.5}
.carousel-control.left{background-image:-webkit-linear-gradient(left,rgba(0,0,0,.5) 0,rgba(0,0,0,.0001) 100%);background-image:-o-linear-gradient(left,rgba(0,0,0,.5) 0,rgba(0,0,0,.0001) 100%);background-image:-webkit-gradient(linear,left top,right top,from(rgba(0,0,0,.5)),to(rgba(0,0,0,.0001)));background-image:linear-gradient(to right,rgba(0,0,0,.5) 0,rgba(0,0,0,.0001) 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#80000000', endColorstr='#00000000', GradientType=1);background-repeat:repeat-x}
.carousel-control.right{right:0;left:auto;background-image:-webkit-linear-gradient(left,rgba(0,0,0,.0001) 0,rgba(0,0,0,.5) 100%);background-image:-o-linear-gradient(left,rgba(0,0,0,.0001) 0,rgba(0,0,0,.5) 100%);background-image:-webkit-gradient(linear,left top,right top,from(rgba(0,0,0,.0001)),to(rgba(0,0,0,.5)));background-image:linear-gradient(to right,rgba(0,0,0,.0001) 0,rgba(0,0,0,.5) 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#00000000', endColorstr='#80000000', GradientType=1);background-repeat:repeat-x}
.carousel-control:focus,.carousel-control:hover{color:#fff;text-decoration:none;filter:alpha(opacity=90);outline:0;opacity:.9}
.carousel-control{position:absolute;top:0;bottom:0;left:0;width:15%;font-size:20px;color:#fff;text-align:center;opacity:.5}
.carousel-control.left{background-image:-webkit-linear-gradient(left,rgba(0,0,0,.5) 0,rgba(0,0,0,.0001) 100%);background-image:-o-linear-gradient(left,rgba(0,0,0,.5) 0,rgba(0,0,0,.0001) 100%);background-image:-webkit-gradient(linear,left top,right top,from(rgba(0,0,0,.5)),to(rgba(0,0,0,.0001)));background-image:linear-gradient(to right,rgba(0,0,0,.5) 0,rgba(0,0,0,.0001) 100%);background-repeat:repeat-x}
.carousel-control.right{right:0;left:auto;background-image:-webkit-linear-gradient(left,rgba(0,0,0,.0001) 0,rgba(0,0,0,.5) 100%);background-image:-o-linear-gradient(left,rgba(0,0,0,.0001) 0,rgba(0,0,0,.5) 100%);background-image:-webkit-gradient(linear,left top,right top,from(rgba(0,0,0,.0001)),to(rgba(0,0,0,.5)));background-image:linear-gradient(to right,rgba(0,0,0,.0001) 0,rgba(0,0,0,.5) 100%);background-repeat:repeat-x}
.carousel-control:focus,.carousel-control:hover{color:#fff;text-decoration:none;outline:0;opacity:.9}
.carousel-control .glyphicon-chevron-left,.carousel-control .glyphicon-chevron-right,.carousel-control .icon-next,.carousel-control .icon-prev{position:absolute;top:50%;z-index:5;display:inline-block}
.carousel-control .glyphicon-chevron-left,.carousel-control .icon-prev{left:50%;margin-left:-10px}
.carousel-control .glyphicon-chevron-right,.carousel-control .icon-next{right:50%;margin-right:-10px}
Expand Down
34 changes: 17 additions & 17 deletions test/integration-test.js
View file
Expand Up @@ -942,10 +942,6 @@ vows.describe('integration tests')
'a{ background-color: #aa0000; color:rgb(0, 17, 255)}',
'a{background-color:#a00;color:#01f}'
],
'skip shortening IE filter colors': [
'a{ filter: chroma(color = "#ff0000")}',
'a{filter:chroma(color="#ff0000")}'
],
'color names to hex values': [
'a{color:white;border-color:black;background-color:fuchsia}p{background:yellow}',
'a{color:#fff;border-color:#000;background-color:#f0f}p{background:#ff0}'
Expand Down Expand Up @@ -1022,18 +1018,6 @@ vows.describe('integration tests')
'a{background-image:-webkit-gradient(linear,0 0,0 100%,from(#fff),to(#e6e6e6))}',
'a{background-image:-webkit-gradient(linear,0 0,0 100%,from(#fff),to(#e6e6e6))}'
],
'colors in ie filters': [
'a{filter:chroma(color=#ffffff)}',
'a{filter:chroma(color=#ffffff)}'
],
'colors in ie filters 2': [
'a{filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=\'#cccccc\', endColorstr=\'#000000\')}',
'a{filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=\'#cccccc\', endColorstr=\'#000000\')}'
],
'colors in ie filters 3': [
'a{filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=\'#DDDDDD\', endColorstr=\'#333333\')}',
'a{filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=\'#DDDDDD\', endColorstr=\'#333333\')}'
],
'rgb percents': [
'a{color:rgb(100%,0%,0%)}',
'a{color:rgb(100%,0%,0%)}'
Expand Down Expand Up @@ -1760,8 +1744,24 @@ vows.describe('integration tests')
'AlphaImageLoader': [
'div{filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=images/skyline.jpg)}',
'div{filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=images/skyline.jpg)}'
],
'colors #1': [
'a{filter:chroma(color=#ffffff)}',
'a{filter:chroma(color=#ffffff)}'
],
'colors #2': [
'a{filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=\'#cccccc\', endColorstr=\'#000000\')}',
'a{filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=\'#cccccc\', endColorstr=\'#000000\')}'
],
'colors #3': [
'a{filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=\'#DDDDDD\', endColorstr=\'#333333\')}',
'a{filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=\'#DDDDDD\', endColorstr=\'#333333\')}'
],
'whitespace': [
'a{ filter: chroma(color = "#ff0000")}',
'a{filter:chroma(color="#ff0000")}'
]
})
}, { compatibility: 'ie9' })
)
.addBatch(
optimizerContext('charsets', {
Expand Down
28 changes: 26 additions & 2 deletions test/optimizer/level-1/optimize-test.js
View file
Expand Up @@ -365,6 +365,30 @@ vows.describe('level 1 optimizations')
)
.addBatch(
optimizerContext('filter', {
'legacy standard': [
'a{filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=\'#cccccc\',endColorstr=\'#000000\', enabled=true)}',
''
],
'legacy alpha shorthand': [
'a{filter:alpha(Opacity=80)}',
''
],
'legacy chroma shorthand': [
'a{filter:chroma(color=#919191)}',
''
],
'legacy -ms-filter': [
'a{-ms-filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=\'#cccccc\',endColorstr=\'#000000\', enabled=true);-ms-filter:chroma(color=#000000)}',
''
],
'new filters': [
'.block{filter:sepia(60%)}',
'.block{filter:sepia(60%)}'
]
}, { level: 1 })
)
.addBatch(
optimizerContext('filter when preserved', {
'spaces after comma': [
'a{filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=\'#cccccc\',endColorstr=\'#000000\', enabled=true)}',
'a{filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=\'#cccccc\', endColorstr=\'#000000\', enabled=true)}'
Expand All @@ -381,7 +405,7 @@ vows.describe('level 1 optimizations')
'a{filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=80) progid:DXImageTransform.Microsoft.Chroma(color=#919191)}',
'a{filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=80) progid:DXImageTransform.Microsoft.Chroma(color=#919191)}'
]
}, { level: 1 })
}, { compatibility: 'ie9', level: 1 })
)
.addBatch(
optimizerContext('font', {
Expand Down Expand Up @@ -1089,7 +1113,7 @@ vows.describe('level 1 optimizations')
'.block{filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=80)}',
'.block{filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=80)}'
]
}, { level: { 1: { optimizeFilter: false } } })
}, { compatibility: 'ie9', level: { 1: { optimizeFilter: false } } })
)
.addBatch(
optimizerContext('font optimizations off', {
Expand Down
8 changes: 8 additions & 0 deletions test/utils/compatibility-test.js
View file
Expand Up @@ -15,6 +15,7 @@ vows.describe(compatibility)
assert.isTrue(compat.properties.backgroundOriginMerging);
assert.isTrue(compat.properties.backgroundSizeMerging);
assert.isFalse(compat.properties.ieBangHack);
assert.isFalse(compat.properties.ieFilters);
assert.isFalse(compat.properties.iePrefixHack);
assert.isFalse(compat.properties.ieSuffixHack);
assert.isTrue(compat.properties.merging);
Expand Down Expand Up @@ -55,6 +56,7 @@ vows.describe(compatibility)
assert.isTrue(compat.properties.backgroundSizeMerging);
assert.isTrue(compat.properties.colors);
assert.isFalse(compat.properties.ieBangHack);
assert.isFalse(compat.properties.ieFilters);
assert.isFalse(compat.properties.iePrefixHack);
assert.isFalse(compat.properties.ieSuffixHack);
assert.isTrue(compat.properties.merging);
Expand Down Expand Up @@ -88,6 +90,7 @@ vows.describe(compatibility)
assert.isTrue(compat.properties.backgroundSizeMerging);
assert.isTrue(compat.properties.colors);
assert.isFalse(compat.properties.ieBangHack);
assert.isTrue(compat.properties.ieFilters);
assert.isFalse(compat.properties.iePrefixHack);
assert.isTrue(compat.properties.ieSuffixHack);
assert.isTrue(compat.properties.merging);
Expand Down Expand Up @@ -120,6 +123,7 @@ vows.describe(compatibility)
assert.isFalse(compat.properties.backgroundSizeMerging);
assert.isTrue(compat.properties.colors);
assert.isFalse(compat.properties.ieBangHack);
assert.isTrue(compat.properties.ieFilters);
assert.isTrue(compat.properties.iePrefixHack);
assert.isTrue(compat.properties.ieSuffixHack);
assert.isFalse(compat.properties.merging);
Expand Down Expand Up @@ -152,6 +156,7 @@ vows.describe(compatibility)
assert.isFalse(compat.properties.backgroundSizeMerging);
assert.isTrue(compat.properties.colors);
assert.isTrue(compat.properties.ieBangHack);
assert.isTrue(compat.properties.ieFilters);
assert.isTrue(compat.properties.iePrefixHack);
assert.isTrue(compat.properties.ieSuffixHack);
assert.isFalse(compat.properties.merging);
Expand Down Expand Up @@ -194,6 +199,7 @@ vows.describe(compatibility)
assert.isFalse(compat.properties.backgroundSizeMerging);
assert.isTrue(compat.properties.colors);
assert.isFalse(compat.properties.ieBangHack);
assert.isTrue(compat.properties.ieFilters);
assert.isFalse(compat.properties.iePrefixHack);
assert.isTrue(compat.properties.ieSuffixHack);
assert.isFalse(compat.properties.merging);
Expand Down Expand Up @@ -226,6 +232,7 @@ vows.describe(compatibility)
assert.isTrue(compat.properties.backgroundOriginMerging);
assert.isTrue(compat.properties.backgroundSizeMerging);
assert.isFalse(compat.properties.ieBangHack);
assert.isFalse(compat.properties.ieFilters);
assert.isTrue(compat.properties.iePrefixHack);
assert.isFalse(compat.properties.ieSuffixHack);
assert.isTrue(compat.properties.merging);
Expand Down Expand Up @@ -258,6 +265,7 @@ vows.describe(compatibility)
assert.isTrue(compat.properties.backgroundOriginMerging);
assert.isTrue(compat.properties.backgroundSizeMerging);
assert.isFalse(compat.properties.ieBangHack);
assert.isFalse(compat.properties.ieFilters);
assert.isTrue(compat.properties.iePrefixHack);
assert.isFalse(compat.properties.ieSuffixHack);
assert.isTrue(compat.properties.merging);
Expand Down

0 comments on commit 0464d91

Please sign in to comment.