Major version dependency upgrades, pt. II (#4022)

* build tooling updates

* dtsgenerator

* more webpack

* browserslistrc comments

* CL

.babelrc.js

@@ -6,14 +6,7 @@ module.exports = {
 
   "presets": [
     ["@babel/env", {
-      "targets": {
-        "browsers": [
-          "last 2 versions",
-          "not dead",
-          "not IE 11",
-          "Safari 7" // for PhantomJS support
-        ]
-      },
+      // `targets` property set via `.browserslistrc`
       "useBuiltIns": process.env.NO_COREJS_POLYFILL ? false : "usage",
       "corejs": "2",
       "modules": process.env.BABEL_MODULES ? process.env.BABEL_MODULES === 'false' ? false : process.env.BABEL_MODULES : "commonjs" // babel's default is commonjs

.browserslistrc

@@ -0,0 +1,6 @@
+last 2 versions
+not dead
+not IE 11
+Safari 7
+
+# Safari 7 for PhantomJS support

CHANGELOG.md

@@ -1,5 +1,7 @@
 ## [`master`](https://github.com/elastic/eui/tree/master)
 
+- Added `.browserslistrc` for global browser support reference ([#4022](https://github.com/elastic/eui/pull/4022))
+
 **Bug fixes**
 
 - Fixed ref not being handled properly in `EuiValidatableControl` when used with [react-hook-form](https://react-hook-form.com/) ([#4001](https://github.com/elastic/eui/pull/4001))

package.json

@@ -114,7 +114,7 @@
     "@typescript-eslint/eslint-plugin": "^3.10.1",
     "@typescript-eslint/parser": "^3.10.1",
     "argparse": "^2.0.1",
-    "autoprefixer": "^7.1.5",
+    "autoprefixer": "^9.8.6",
     "axe-core": "^4.0.1",
     "axe-puppeteer": "^1.1.0",
     "babel-core": "7.0.0-bridge.0",
@@ -126,7 +126,7 @@
     "babel-plugin-inline-react-svg": "^1.1.1",
     "babel-plugin-pegjs-inline-precompile": "^0.1.1",
     "babel-template": "^6.26.0",
-    "cache-loader": "^2.0.1",
+    "cache-loader": "^4.1.0",
     "chai": "^4.2.0",
     "chai-webdriverio": "^0.4.3",
     "chalk": "^4.1.0",
@@ -136,11 +136,11 @@
     "codesandbox": "^2.1.16",
     "core-js": "^2.5.1",
     "cross-env": "^7.0.2",
-    "css-loader": "^0.28.7",
+    "css-loader": "^4.2.2",
     "cssnano": "^4.1.10",
     "deasync": "^0.1.20",
     "dedent": "^0.7.0",
-    "dts-generator": "^2.1.0",
+    "dts-generator": "^3.0.0",
     "enzyme": "^3.11.0",
     "enzyme-adapter-react-16": "^1.15.3",
     "enzyme-to-json": "^3.5.0",
@@ -158,15 +158,15 @@
     "eslint-plugin-react": "^7.20.6",
     "eslint-plugin-react-hooks": "^3.0.0",
     "faker": "^4.1.0",
-    "file-loader": "^1.1.11",
+    "file-loader": "^6.1.0",
     "findup": "^0.1.5",
-    "fork-ts-checker-webpack-plugin": "^0.4.4",
+    "fork-ts-checker-webpack-plugin": "^5.1.0",
     "geckodriver": "^1.20.0",
     "get-port": "^5.1.1",
     "glob": "^7.1.6",
     "html": "^1.0.0",
     "html-format": "^1.0.1",
-    "html-webpack-plugin": "^3.2.0",
+    "html-webpack-plugin": "^4.4.1",
     "jest": "^24.1.0",
     "jest-cli": "^24.1.0",
     "mocha": "^5.0.4",
@@ -175,16 +175,16 @@
     "node-sass": "^4.14.1",
     "nodegit": "^0.27.0",
     "pegjs": "^0.10.0",
-    "postcss-cli": "^4.1.1",
-    "postcss-inline-svg": "^3.0.0",
-    "postcss-loader": "^2.0.8",
+    "postcss-cli": "^7.1.2",
+    "postcss-inline-svg": "^4.1.0",
+    "postcss-loader": "^4.0.1",
     "pre-commit": "^1.2.2",
     "prettier": "^1.19.1",
     "prettier-stylelint": "^0.4.2",
     "prompt": "^1.0.0",
     "prop-types": "^15.6.0",
     "puppeteer": "^2.0.0",
-    "raw-loader": "^0.5.1",
+    "raw-loader": "^4.0.1",
     "react": "^16.12.0",
     "react-docgen-typescript": "^1.20.3",
     "react-dom": "^16.12.0",
@@ -201,15 +201,15 @@
     "sass-extract": "^2.1.0",
     "sass-lint": "^1.13.1",
     "sass-lint-auto-fix": "^0.21.2",
-    "sass-loader": "^6.0.6",
+    "sass-loader": "^10.0.1",
     "sass-vars-to-js-loader": "^2.1.1",
     "shelljs": "^0.8.4",
     "start-server-and-test": "^1.11.3",
-    "style-loader": "^0.19.0",
-    "terser-webpack-plugin": "^2.3.5",
+    "style-loader": "^1.2.1",
+    "terser-webpack-plugin": "^4.1.0",
     "typescript": "3.7.2",
     "uglifyjs-webpack-plugin": "^2.2.0",
-    "url-loader": "^1.0.1",
+    "url-loader": "^4.1.0",
     "wdio-chromedriver-service": "^0.1.2",
     "wdio-mocha-framework": "^0.5.13",
     "wdio-sauce-service": "^0.4.8",

postcss.config.js

@@ -1,6 +1,6 @@
 module.exports = {
   plugins: [
-    require('autoprefixer')({ browsers: ['last 2 versions'] }),
+    require('autoprefixer')(), // `browsers` property set via `.browserslistrc`
     require('postcss-inline-svg')({ relative: true, path: __dirname }),
   ],
 };

scripts/compile-eui.js

@@ -126,22 +126,34 @@ function compileBundle() {
 
   console.log('Building test utils .d.ts files...');
   dtsGenerator({
-    name: '@elastic/eui/lib/test',
+    prefix: '',
     out: 'lib/test/index.d.ts',
     baseDir: path.resolve(__dirname, '..', 'src/test/'),
     files: ['index.ts'],
     resolveModuleId({ currentModuleId }) {
       return `@elastic/eui/lib/test${currentModuleId !== 'index' ? `/${currentModuleId}` : ''}`;
     },
+    resolveModuleImport({ currentModuleId, importedModuleId }) {
+   		if (currentModuleId === 'index') {
+  			return `@elastic/eui/lib/test/${importedModuleId.replace('./', '')}`;
+  		}
+			return null;
+	  }
   });
   dtsGenerator({
-    name: '@elastic/eui/es/test',
+    prefix: '',
     out: 'es/test/index.d.ts',
     baseDir: path.resolve(__dirname, '..', 'src/test/'),
     files: ['index.ts'],
     resolveModuleId({ currentModuleId }) {
       return `@elastic/eui/es/test${currentModuleId !== 'index' ? `/${currentModuleId}` : ''}`;
     },
+    resolveModuleImport({ currentModuleId, importedModuleId }) {
+   		if (currentModuleId === 'index') {
+          return `@elastic/eui/es/test/${importedModuleId.replace('./', '')}`;
+  		}
+			return null;
+	  }
   });
   console.log(chalk.green('✔ Finished test utils files'));
 
@@ -153,7 +165,7 @@ function compileBundle() {
     }
   );
   dtsGenerator({
-    name: '@elastic/eui/dist/eui_charts_theme',
+    prefix: '',
     out: 'dist/eui_charts_theme.d.ts',
     baseDir: path.resolve(__dirname, '..', 'src/themes/charts/'),
     files: ['themes.ts'],

scripts/dtsgenerator.js

@@ -25,7 +25,7 @@ function hasParentIndex(pathToFile) {
 }
 
 const generator = dtsGenerator({
-  name: '@elastic/eui',
+  prefix: '@elastic/eui',
   project: baseDir,
   out: 'eui.d.ts',
   exclude: [

src-docs/src/components/guide_components.scss

@@ -1,4 +1,4 @@
-@import '../../src/global_styling/mixins/helpers';
+@import '../../../src/global_styling/mixins/helpers';
 
 $guideSideNavWidth: 240px;
 $guideZLevelHighest: $euiZLevel9 + 1000;

src-docs/webpack.config.js

@@ -65,7 +65,10 @@ const webpackConfig = {
       {
         test: /\.scss$/,
         loaders: employCache([
-          'style-loader/useable',
+          {
+            loader: 'style-loader',
+            options: { injectType: 'lazySingletonStyleTag' },
+          },
           'css-loader',
           'postcss-loader',
           'sass-loader',
@@ -74,7 +77,7 @@ const webpackConfig = {
       },
       {
         test: /\.css$/,
-        loaders: employCache(['style-loader/useable', 'css-loader']),
+        loaders: employCache(['style-loader', 'css-loader']),
         exclude: /node_modules/,
       },
       {
@@ -108,7 +111,7 @@ const webpackConfig = {
 
     // run TypeScript during webpack build
     // new ForkTsCheckerWebpackPlugin({
-    //   tsconfig: path.resolve(__dirname, '..', 'tsconfig.json'),
+    //   typescript: { configFile: path.resolve(__dirname, '..', 'tsconfig.json') },
     //   async: false, // makes errors more visible, but potentially less performant
     // }),
   ],

src/webpack.config.js

@@ -35,7 +35,7 @@ const plugins = [
   }),
   // run TypeScript during webpack build
   new ForkTsCheckerWebpackPlugin({
-    tsconfig: path.resolve(__dirname, '..', 'tsconfig.json'),
+    typescript: { configFile: path.resolve(__dirname, '..', 'tsconfig.json') },
     async: false, // makes errors more visible, but potentially less performant
   }),