Migrate tooling to ES modules

Author: thibaudcolas

.babelrc.js

@@ -1,4 +1,4 @@
-module.exports = {
+export default {
     presets: [
         [
             '@babel/preset-env',

pattern_library/static/pattern_library/src/js/app.js

@@ -1,11 +1,11 @@
 import '../scss/main.scss';
-import persistMenu from './components/persist-menu';
-import patternSearch from './components/pattern-search';
-import tabbedContent from './components/tabbed-content';
-import syntaxHighlighting from './components/syntax-highlighting';
-import hideMenuMobile from './components/hide-menu-mobile';
-import { setIframeSize, resizeIframe } from './components/iframe';
-import { toggleNav, toggleNavItems } from './components/navigation';
+import persistMenu from './components/persist-menu.js';
+import patternSearch from './components/pattern-search.js';
+import tabbedContent from './components/tabbed-content.js';
+import syntaxHighlighting from './components/syntax-highlighting.js';
+import hideMenuMobile from './components/hide-menu-mobile.js';
+import { setIframeSize, resizeIframe } from './components/iframe.js';
+import { toggleNav, toggleNavItems } from './components/navigation.js';
 
 document.addEventListener('DOMContentLoaded', () => {
     syntaxHighlighting();

pattern_library/static/pattern_library/src/scss/components/_md.scss

@@ -1,3 +1,5 @@
+@use '../config' as *;
+
 .md {
     padding: 20px;
     background-color: $off-white;

webpack.config.js

@@ -1,13 +1,8 @@
-const path = require('path');
+import path from 'path';
 
-const staticDir = path.resolve(
-    __dirname,
-    'pattern_library',
-    'static',
-    'pattern_library',
-);
+const staticDir = path.resolve('pattern_library', 'static', 'pattern_library');
 
-module.exports = {
+export default {
     entry: path.join(staticDir, 'src', 'js', 'app.js'),
     output: {
         path: path.join(staticDir, 'dist'),