feat: modernize fe tooling and drop weight

webpack.config.js

@@ -1,4 +1,5 @@
 const Encore = require('@symfony/webpack-encore');
+const path = require('path');
 
 if (!Encore.isRuntimeEnvironmentConfigured()) {
     Encore.configureRuntimeEnvironment(process.env.NODE_ENV || 'dev');
@@ -12,8 +13,18 @@ Encore
     .addStyleEntry('rte', './public/typo3conf/ext/ep_theme/Resources/Private/Assets/scss/rte.scss')
     .splitEntryChunks()
     .enableSingleRuntimeChunk()
-    .enableSassLoader()
-    .enableVueLoader(() => {}, { runtimeCompilerBuild: false })
+    .enableSassLoader(options => {
+        // Opt into the modern Sass JS API (sass-loader defaults to the legacy one,
+        // which Dart Sass 2.0 removes). Encore still passes `outputStyle`, which
+        // the modern API ignores in favour of `style`.
+        options.api = 'modern'
+        delete options.sassOptions.outputStyle
+        options.sassOptions.style = 'expanded'
+
+        // sass-loader's webpack importer declines `.css` requests, so plain CSS
+        // pulled in with meta.load-css() has to be resolvable by Dart Sass itself.
+        options.sassOptions.loadPaths = [path.join(__dirname, 'node_modules')]
+    })
     .enableVersioning(Encore.isProduction())
     .enableSourceMaps(!Encore.isProduction())
     .cleanupOutputBeforeBuild()
@@ -41,13 +52,8 @@ Encore
     .configureFontRule({
         filename: 'fonts/[name][ext]',
     })
-    .configureBabel(function (babelConfig) {
-        babelConfig.plugins = [ '@babel/plugin-proposal-object-rest-spread', '@babel/plugin-syntax-dynamic-import' ]
-    })
     .configureBabelPresetEnv((config) => {
         config.shippedProposals = true
-        config.useBuiltIns = 'usage'
-        config.corejs = 3
     });
 
 const EpThemeConfig = Encore.getWebpackConfig();
@@ -65,7 +71,18 @@ Encore
     .addStyleEntry('rte', './public/typo3conf/ext/ep_events/Resources/Private/Assets/scss/rte.scss')
     .enableSingleRuntimeChunk()
     .splitEntryChunks()
-    .enableSassLoader()
+    .enableSassLoader(options => {
+        // Opt into the modern Sass JS API (sass-loader defaults to the legacy one,
+        // which Dart Sass 2.0 removes). Encore still passes `outputStyle`, which
+        // the modern API ignores in favour of `style`.
+        options.api = 'modern'
+        delete options.sassOptions.outputStyle
+        options.sassOptions.style = 'expanded'
+
+        // sass-loader's webpack importer declines `.css` requests, so plain CSS
+        // pulled in with meta.load-css() has to be resolvable by Dart Sass itself.
+        options.sassOptions.loadPaths = [path.join(__dirname, 'node_modules')]
+    })
     .enableVueLoader()
     .autoProvidejQuery()
     .enableSourceMaps(!Encore.isProduction())
@@ -86,9 +103,6 @@ Encore
     })
     .configureFontRule({
         filename: 'fonts/[name][ext]',
-    })
-    .configureBabel(function (babelConfig) {
-        babelConfig.plugins = [ '@babel/plugin-proposal-object-rest-spread', '@babel/plugin-syntax-dynamic-import' ]
     });
 
 const EpEventsConfig = Encore.getWebpackConfig();