fix: check if 'btoa' exists for old IE versions

[okchangwon]

This PR contains a:

• bugfix
• new feature
• code refactor
• test update
• typo fix
• metadata update

Motivation / Use-Case

If the btoa function does not exist, an error will occur as follows.

btoa is not defined

Breaking Changes

Additional Info

[codecov]

Codecov Report

Merging #479 into master will not change coverage.
The diff coverage is 100.00%.

@@           Coverage Diff           @@
##           master     #479   +/-   ##
=======================================
  Coverage   98.68%   98.68%           
=======================================
  Files           5        5           
  Lines         228      228           
  Branches       96       96           
=======================================
  Hits          225      225           
  Misses          3        3           

Impacted Files	Coverage Δ
src/runtime/injectStylesIntoStyleTag.js	100.00% <100.00%> (ø)

---

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 c623f27...4dd10b8. Read the comment docs.

[alexander-akait]

btoa should be undefined for old IE, can you provide screenshot?

[okchangwon]

[okchangwon]

typeof should be used to check if global variables exist.

[alexander-akait]

What is IE version? It is weird, because btoa should be false here

[okchangwon]

In IE9, btoa is undefined.
Or the following code is also good.

if (sourceMap && window.btoa) {

[alexander-akait]

I am fine with typeof, weird, I can't reproduce

[okchangwon]

I have created an example of a problematic code to reproduce the phenomenon.

<script>
if (btoa) {
  console.log("it's exist");
} else {
  console.log("it's not exist");
}
</script>

This code causes an error in IE9.

Please check the console window on this page.
http://okchangwon.xyz/naver/ie9-btoa

[alexander-akait]

error from ie9-btoa package, not from style-loader

[okchangwon]

Let me summarize it overall.

In the style loader's applyToTag method
If obj.sourceMap option and btoa are present
SourceMappingURL is being added to CSS.

The reason for checking the existence of btoa is
This is because there is no btoa function globally in Old IE(9).

Very good so far.

But the problem is,
The way to check for the existence of btoa is wrong.

It is currently as follows.

 if (sourceMap && btoa)

If you access a nonexistent global variable (or function) like this
An error occurs regardless of browser type and version.

• IE11

When accessing a variable that does not exist

• chrome

When accessing a variable that does not exist

Because there is no btoa in 'IE9', an error occurs.
Even if 'btoa' exists in a specific version of'IE9',
It's a good idea to check it the right way in case it doesn't exist.

So I recommend the following method.

 if (sourceMap && window.btoa)
// or
 if (sourceMap && typeof btoa !=='undefined')

Please let me know if I'm misunderstanding the situation.
Thank you.

[alexander-akait]

Let's merge