fix(fuselage): IE11 compatibility #512

fix(fuselage): IE11 compatibility
RocketChat · Aug 9, 2021 · 2e9e497 · 2e9e497
2 parents afd88bf + bb25509
commit 2e9e497
Show file tree

Hide file tree

Showing 4 changed files with 386 additions and 17 deletions.
diff --git a/packages/fuselage/package.json b/packages/fuselage/package.json
@@ -29,8 +29,12 @@
     "storybook": "start-storybook -p 6006",
     "build": "run-s .:build:clean .:build:dev .:build:prod",
     ".:build:clean": "rimraf dist",
-    ".:build:prod": "webpack --mode production",
-    ".:build:dev": "webpack --mode development",
+    ".:build:prod": "run-s .:build:prod:bundle .:build:prod:check",
+    ".:build:dev": "run-s .:build:dev:bundle .:build:dev:check",
+    ".:build:prod:bundle": "webpack --mode production",
+    ".:build:prod:check": "es-check es5 dist/*.production.js",
+    ".:build:dev:bundle": "webpack --mode development",
+    ".:build:dev:check": "es-check es5 dist/*.development.js",
     "lint": "run-s .:lint:eslint .:lint:tsc .:lint:stylelint",
     ".:lint:eslint": "eslint src",
     ".:lint:tsc": "tsc --noEmit",
@@ -97,6 +101,7 @@
     "cross-env": "^7.0.3",
     "css-loader": "^5.2.6",
     "cssnano": "^5.0.6",
+    "es-check": "^6.0.0",
     "eslint": "^7.29.0",
     "eslint-plugin-mdx": "^1.13.0",
     "identity-obj-proxy": "^3.0.0",

diff --git a/packages/fuselage/src/components/Modal/Modal.styles.scss b/packages/fuselage/src/components/Modal/Modal.styles.scss
@@ -9,7 +9,7 @@
 
   width: 100%;
   max-height: 100%;
-  margin: auto;
+  margin: 0 auto;
 
   background: none;
 
@@ -18,6 +18,8 @@
     flex-direction: column;
     flex-grow: 1;
 
+    width: 100%;
+
     min-width: 0;
     padding: 0;
 
@@ -56,6 +58,9 @@
     z-index: 100;
     inset: 0;
 
+    display: flex;
+    flex-direction: column;
+
     background-color: colors.neutral(800, $alpha: 0.5);
   }
 

diff --git a/packages/fuselage/webpack.config.js b/packages/fuselage/webpack.config.js
@@ -46,6 +46,7 @@ module.exports = (env, { mode = 'production' }) => ({
       {
         test: /\.scss$/,
         use: [
+          'babel-loader',
           {
             loader: 'style-loader',
             options: {