Major version dependency upgrades, pt. II

.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

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
  }),