feat: add IE filter support (`AlphaImageLoader`) #638

SmileSmith · 2017-12-03T08:08:11Z

What kind of change does this PR introduce?
support ie filter.

since IE not supprt background-size. we usually use filter to polyfill background image;
background: url('../images/home@1x.png') no-repeat center; background-size: 100% 100%; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../images/home@1x.png', sizingMethod='scale');

If relevant, did you update the README?

Summary
for css-loader to support ie filter

Does this PR introduce a breaking change?
No

Other information

jsf-clabot · 2017-12-03T08:08:12Z

All committers have signed the CLA.

codecov · 2017-12-03T08:21:51Z

Codecov Report

Merging #638 into master will decrease coverage by 2.33%.
The diff coverage is 10%.

@@            Coverage Diff             @@
##           master     #638      +/-   ##
==========================================
- Coverage   98.92%   96.58%   -2.34%     
==========================================
  Files          10       10              
  Lines         371      381      +10     
  Branches       87       90       +3     
==========================================
+ Hits          367      368       +1     
- Misses          4       13       +9

Impacted Files	Coverage Δ
lib/processCss.js	`93.16% <10%> (-5.51%)`	⬇️

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update 05c36db...9478f5e. Read the comment docs.

codecov · 2017-12-03T08:21:51Z

Codecov Report

Merging #638 into master will decrease coverage by 0.49%.
The diff coverage is 80%.

@@            Coverage Diff            @@
##           master     #638     +/-   ##
=========================================
- Coverage   98.92%   98.42%   -0.5%     
=========================================
  Files          10       10             
  Lines         371      381     +10     
  Branches       87       90      +3     
=========================================
+ Hits          367      375      +8     
- Misses          4        6      +2

Impacted Files	Coverage Δ
lib/processCss.js	`97.51% <80%> (-1.16%)`	⬇️

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update 05c36db...8644dc2. Read the comment docs.

alexander-akait

Looks good! Thank you!

alexander-akait · 2017-12-06T13:25:55Z

@michael-ciniawsky friendly ping

michael-ciniawsky

I have mixed feelings about adding this tbh

@SmileSmith Which version of IE do you need to support atm (is this needed for) ?

michael-ciniawsky · 2017-12-08T08:14:10Z

lib/processCss.js

@@ -97,6 +97,20 @@ var parserPlugin = postcss.plugin("css-loader-parser", function(options) {
 					item.nodes.forEach(processNode);
 					break;
 				case "item":
+					if (item.name.indexOf('progid:DXImageTransform.Microsoft.AlphaImageLoader') >= 0){
+						delete item.innerSpacingBefore;
+						delete item.innerSpacingAfter;


michael-ciniawsky · 2017-12-08T08:14:38Z

lib/processCss.js

+					if (item.name.indexOf('progid:DXImageTransform.Microsoft.AlphaImageLoader') >= 0){
+						delete item.innerSpacingBefore;
+						delete item.innerSpacingAfter;
+						var matchSrc = item.name.match(/src=['"]([^'"]+)['"]/);


matchSrc => match && \n

michael-ciniawsky · 2017-12-08T08:15:07Z

lib/processCss.js

+						delete item.innerSpacingBefore;
+						delete item.innerSpacingAfter;
+						var matchSrc = item.name.match(/src=['"]([^'"]+)['"]/);
+						if (!matchSrc) break;


michael-ciniawsky · 2017-12-08T08:15:30Z

lib/processCss.js

+						delete item.innerSpacingAfter;
+						var matchSrc = item.name.match(/src=['"]([^'"]+)['"]/);
+						if (!matchSrc) break;
+						var srcUrl = matchSrc[1];


srcUrl => url && \n

michael-ciniawsky · 2017-12-08T08:16:35Z

lib/processCss.js

+						var srcUrl = matchSrc[1];
+						if (options.url && !/^#/.test(srcUrl) && (isAlias(srcUrl) || loaderUtils.isUrlRequest(srcUrl, options.root))) {
+							item.name = item.name.replace(srcUrl, "___CSS_LOADER_URL___" + urlItems.length + "___");
+							urlItems.push({


urlItems.push({ url: url })

michael-ciniawsky · 2017-12-08T08:16:50Z

lib/processCss.js

+							urlItems.push({
+								url: srcUrl
+							});
+						}


michael-ciniawsky · 2017-12-08T08:18:22Z

lib/processCss.js

@@ -97,6 +97,20 @@ var parserPlugin = postcss.plugin("css-loader-parser", function(options) {
 					item.nodes.forEach(processNode);
 					break;
 				case "item":
+					if (item.name.indexOf('progid:DXImageTransform.Microsoft.AlphaImageLoader') >= 0){


Please add a comment (in brief) here, describing what the following code/case is doing

SmileSmith · 2017-12-08T16:34:25Z

@michael-ciniawsky thanks,

AlphaImageLoader support Sizing background in IE-8 and below
https://msdn.microsoft.com/en-us/library/ms532920(v=vs.85).aspx
https://caniuse.com/#search=background-size

and these code will process it's 'src:...' like bacdground: url(...)

in IE9 and above, we can use background: url();backgroud-size: .. ; to achieve

michael-ciniawsky · 2018-01-04T19:21:26Z

Sry but I have to declined this since css-loader v1.0.0 will be a complete overhaul of the loader starting with a minimal design

support ie filter of AlphaImageLoader

93a4a80

no necessary \ character

9478f5e

SmileSmith force-pushed the master branch 3 times, most recently from 44d2b63 to 11d81df Compare December 3, 2017 08:59

add unit test

8644dc2

SmileSmith force-pushed the master branch from 11d81df to 8644dc2 Compare December 3, 2017 09:00

alexander-akait requested review from alexander-akait, michael-ciniawsky and joshwiens December 4, 2017 09:20

alexander-akait added priority: 5 (nice to have) semver: Patch severity: 3 (broken) type: Bug labels Dec 4, 2017

alexander-akait approved these changes Dec 4, 2017

View reviewed changes

michael-ciniawsky added semver: Minor type: Feature and removed semver: Patch type: Bug severity: 3 (broken) labels Dec 8, 2017

michael-ciniawsky added this to the 0.29.0 milestone Dec 8, 2017

michael-ciniawsky requested changes Dec 8, 2017

View reviewed changes

michael-ciniawsky added flag: Needs Tests and removed flag: Needs Tests labels Dec 8, 2017

michael-ciniawsky changed the title ~~support ie filter of AlphaImageLoader~~ feat: add IE filter support (AlphaImageLoader) Jan 4, 2018

michael-ciniawsky added status: Declined and removed priority: 5 (nice to have) labels Jan 4, 2018

michael-ciniawsky closed this Jan 4, 2018

michael-ciniawsky removed this from the 0.29.0 milestone Jan 4, 2018

Uh oh!

feat: add IE filter support (AlphaImageLoader) #638

feat: add IE filter support (AlphaImageLoader) #638

Uh oh!

Conversation

SmileSmith commented Dec 3, 2017

Uh oh!

jsf-clabot commented Dec 3, 2017 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

codecov bot commented Dec 3, 2017

Codecov Report

Uh oh!

codecov bot commented Dec 3, 2017 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Codecov Report

Uh oh!

alexander-akait left a comment

Choose a reason for hiding this comment

Uh oh!

alexander-akait commented Dec 6, 2017

Uh oh!

michael-ciniawsky left a comment • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

michael-ciniawsky Dec 8, 2017

Choose a reason for hiding this comment

Uh oh!

michael-ciniawsky Dec 8, 2017

Choose a reason for hiding this comment

Uh oh!

michael-ciniawsky Dec 8, 2017

Choose a reason for hiding this comment

Uh oh!

michael-ciniawsky Dec 8, 2017

Choose a reason for hiding this comment

Uh oh!

michael-ciniawsky Dec 8, 2017

Choose a reason for hiding this comment

Uh oh!

michael-ciniawsky Dec 8, 2017

Choose a reason for hiding this comment

Uh oh!

michael-ciniawsky Dec 8, 2017

Choose a reason for hiding this comment

Uh oh!

SmileSmith commented Dec 8, 2017

Uh oh!

michael-ciniawsky commented Jan 4, 2018

Uh oh!

Uh oh!

feat: add IE filter support (`AlphaImageLoader`) #638

feat: add IE filter support (`AlphaImageLoader`) #638

jsf-clabot commented Dec 3, 2017 •

edited

Loading

codecov bot commented Dec 3, 2017 •

edited

Loading

michael-ciniawsky left a comment •

edited

Loading