Only apply "sideEffects: false" to babel-loader; (#1671)

* Only apply "sideEffects: false" to `babel-loader`;

Applying it as default breaks SASS imports because webpack thinks it can be tree-shaked

* Import "stop" from old-browsers-message to avoid cleaning it up by tree-shaking

* Add CHANGELOG entry for "sideEffect" story

CHANGELOG.md

@@ -1,3 +1,9 @@
+## [2.1.20]
+
+The JS part of Ring UI package is now marked as "sideEffect free". This means that webpack will [tree-shake](https://webpack.js.org/guides/tree-shaking/) unused imports of Ring UI files.
+Theoretically this may be breaking change, but we don't know any real case yet. We consider advantages of this change are more important 
+than potential disadvantages.
+
 ## [2.0.2] 
 
 - Due to deprecation, `postcss-cssnext` has been replaced with `postcss-preset-env`.

components/old-browsers-message/old-browsers-message.examples.js

@@ -1,5 +1,5 @@
 import './old-browsers-message.css';
-import './old-browsers-message';
+import {stop} from './old-browsers-message';
 
 export default {
   title: 'Style-only/Old Browsers Message',
@@ -17,6 +17,7 @@ Once loaded, it attaches a global error handler. When your app finishes loading
 export const basic = () => {
   function triggerGlobalError() {
     Object.unknownMethodToTriggerOldBrowsersMessage();
+    setTimeout(stop);
   }
 
   setTimeout(triggerGlobalError);

webpack.config.js

@@ -82,6 +82,7 @@ const externalCssLoader = {
 
 const babelLoader = {
   test: /\.js$/,
+  sideEffects: false,
   include: componentsPath,
   loader: require.resolve('babel-loader'),
   options: {