Merge pull request #30 from Videodock/optimize

Optimize
jwplayer · Jun 7, 2021 · 0e4ef25 · 0e4ef25
2 parents 60a350a + 7dbebf2
commit 0e4ef25
Show file tree

Hide file tree

Showing 4 changed files with 502 additions and 87 deletions.
diff --git a/public/index.html b/public/index.html
@@ -30,7 +30,6 @@
 <body>
 <div id="root"></div>
 <noscript>You need to enable JavaScript to run this app.</noscript>
-<script type="module" src="/dist/index.js"></script>
 <script>
   var urlSearchParams = new URLSearchParams(window.location.search);
   var configId =
@@ -46,6 +45,7 @@
     window.configLocation = './config.json';
   }
 </script>
+<script type="module" src="/dist/index.js"></script>
 <!--
   This HTML file is a template.
   If you open it directly in the browser, you will see an empty page.

diff --git a/scripts/webpack/css-modules-fix.js b/scripts/webpack/css-modules-fix.js
@@ -0,0 +1,5 @@
+module.exports = function cssModulesFix(source) {
+  return source.replace(/_(\w+)_[\w\d]{5}_\d+/g, function(fullMatch, originalSelector) {
+    return originalSelector;
+  });
+};
diff --git a/snowpack.config.js b/snowpack.config.js
@@ -15,33 +15,36 @@ module.exports = {
     '@snowpack/plugin-react-refresh',
     '@snowpack/plugin-dotenv',
     '@snowpack/plugin-sass',
-    // ['@snowpack/plugin-webpack', {
-    //   extendConfig: (config) => {
-    //     // FIXES https://github.com/snowpackjs/snowpack/discussions/2810
-    //     config.module.rules.find(
-    //       (rule) =>
-    //         rule &&
-    //         rule.use &&
-    //         rule.use.find((use) => {
-    //           if (
-    //             !use ||
-    //             !use.loader ||
-    //             !use.loader.includes('babel-loader')
-    //           ) {
-    //             return null;
-    //           }
-    //
-    //           use.options.plugins = (use.options.plugins || []).concat([
-    //             '@babel/plugin-proposal-optional-chaining',
-    //             '@babel/plugin-proposal-nullish-coalescing-operator'
-    //           ]);
-    //
-    //           return use;
-    //         }),
-    //     );
-    //     return config;
-    //   },
-    // }],
+    ['@snowpack/plugin-webpack', {
+      extendConfig: (config) => {
+        // FIXES https://github.com/snowpackjs/snowpack/discussions/2810
+        const babelRule = config.module.rules.find((rule) =>
+          rule && rule.use && rule.use.find((use) => use && use.loader && use.loader.includes('babel-loader')));
+        const cssModulesRule = config.module.rules.find((rule) =>
+          rule && rule.use && rule.use.find((use) => use && use.loader && use.loader.includes('css-loader') && use.options && use.options.modules));
+
+        if (cssModulesRule) {
+          cssModulesRule.use.unshift({
+            loader:  require.resolve('./scripts/webpack/css-modules-fix.js'),
+          });
+        }
+
+        if (babelRule) {
+          babelRule.use = babelRule.use.filter(use => {
+            if (use.loader.includes('babel-loader')) {
+              use.options.plugins = (use.options.plugins || []).concat([
+                '@babel/plugin-proposal-optional-chaining',
+                '@babel/plugin-proposal-nullish-coalescing-operator'
+              ]);
+            }
+
+            return true;
+          });
+        }
+
+        return config;
+      },
+    }],
     [
       '@snowpack/plugin-typescript',
       {