WIP

build/config/sdk.config.js

@@ -1,36 +1,71 @@
 const webpack = require('webpack');
 const path = require('path');
 const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
+const dir = require('node-dir');
+const md5file = require('md5-file');
+const crypto = require('crypto');
 const TerserPlugin = require('terser-webpack-plugin');
-const MiniCssExtractPlugin = require('mini-css-extract-plugin');
-const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');
 
 const env = process.env.ENV || "production";
 const buildOrigin = process.env.BUILD_ORIGIN || "localhost";
-const apiEnv = process.env.API || "production";
-const apiOrigin = process.env.API_ORIGIN || "onesignal.com"
+const apiEnv = process.env.API;
+const apiOrigin = process.env.API_ORIGIN || "localhost";
 const isProdBuild = process.env.ENV === "production";
 const nodeEnv = isProdBuild ? "production" : "development";
 const isHttps = process.env.HTTPS;
 const noDevPort = process.env.NO_DEV_PORT;
 const tests = process.env.TESTS;
 const sdkVersion = process.env.npm_package_config_sdkVersion;
 
+async function getStylesheetsHash() {
+  const styleSheetsPath = "src/stylesheets";
+
+  return await new Promise((resolve, reject) => {
+    dir.files(styleSheetsPath, async (err, files) => {
+      if (err) throw err;
+      const filteredFiles = files.filter(filePath => {
+        console.log("CSS Stylesheet:", filePath);
+        const fileName = path.basename(filePath);
+        if (fileName.endsWith(".scss")) {
+          // Only hash SCSS source files
+          return true;
+        }
+      });
+      if (filteredFiles.length === 0) {
+        reject(
+          `No .scss files were found in ${styleSheetsPath}, but SCSS files were expected. SCSS stylesheets in this directory are MD5 hashed and added as a build-time variable so loading the stylesheet from the global CDN always loads the correct version.`
+        );
+      }
+      let hashes = [];
+      for (let styleSheetPath of filteredFiles) {
+        const hash = md5file.sync(styleSheetPath);
+        hashes.push(hash);
+      }
+      // Strangely enough, the order is inconsistent so we have to sort the hashes
+      hashes = hashes.sort();
+      const joinedHashesStr = hashes.join("-");
+      const combinedHash = crypto.createHash("md5").update(joinedHashesStr).digest("hex");
+      console.log(`MD5 hash of SCSS source files in ${styleSheetsPath} is ${combinedHash}.`);
+      resolve(combinedHash);
+    });
+  });
+}
+
 async function getWebpackPlugins() {
   const plugins = [
-    new MiniCssExtractPlugin({ filename: 'OneSignalSDKStyles.js' }),
-    new webpack.DefinePlugin({
-      __BUILD_TYPE__: JSON.stringify(env),
-      __BUILD_ORIGIN__: JSON.stringify(buildOrigin),
-      __API_TYPE__: JSON.stringify(apiEnv),
-      __API_ORIGIN__: JSON.stringify(apiOrigin),
-      __IS_HTTPS__: isHttps === "true",
-      __NO_DEV_PORT__: noDevPort === "true",
-      __TEST__: !!tests,
-      __VERSION__: sdkVersion,
-      __LOGGING__: env === "development",
-      "process.env.NODE_ENV": JSON.stringify(nodeEnv),
-    })
+      new webpack.DefinePlugin({
+        __BUILD_TYPE__: JSON.stringify(env),
+        __BUILD_ORIGIN__: JSON.stringify(buildOrigin),
+        __API_TYPE__: JSON.stringify(apiEnv),
+        __API_ORIGIN__: JSON.stringify(apiOrigin),
+        __IS_HTTPS__: isHttps === "true",
+        __NO_DEV_PORT__: noDevPort === "true",
+        __TEST__: !!tests,
+        __VERSION__: sdkVersion,
+        __LOGGING__: env === "development",
+        __SRC_STYLESHEETS_MD5_HASH__: JSON.stringify(await getStylesheetsHash()),
+        "process.env.NODE_ENV": JSON.stringify(nodeEnv),
+      })
   ];
   if (!!process.env.ANALYZE) {
     const sizeAnalysisReportPath = path.resolve(path.join('build', 'size-analysis.html'));
@@ -72,13 +107,12 @@ async function generateWebpackConfig() {
     target: 'web',
     entry: {
       'OneSignalSDK.js': path.resolve('build/ts-to-es6/src/entries/sdk.js'),
-      'OneSignalSDKStyles.js': path.resolve('src/entries/stylesheet.js')
     },
     output: {
       path: path.resolve('build/bundles'),
       filename: '[name]'
     },
-    mode: env === "production" ? "production" : "development",
+    mode: process.env.ENV === "production" ? "production" : "development",
     optimization: {
       minimizer: [
         new TerserPlugin({
@@ -99,15 +133,14 @@ async function generateWebpackConfig() {
                 'PushNotSupportedError',
                 'PushPermissionNotGrantedError',
                 'SdkInitError',
-                'TimeoutError',
-              ],
+                'TimeoutError'
+              ]
             } : false,
             output: {
-              comments: false,
-            },
-          },
-        }),
-        ...(env === 'production' ? [new CssMinimizerPlugin()] : []),
+              comments: false
+            }
+          }
+        })
       ]
     },
     module: {
@@ -124,29 +157,6 @@ async function generateWebpackConfig() {
             },
           ]
         },
-        {
-          test: /\.scss$/,
-          use: [
-            MiniCssExtractPlugin.loader,
-            {
-              loader: 'css-loader',
-              options: {
-                sourceMap: true,
-              },
-            },
-            {
-              loader: 'postcss-loader',
-              options: {
-                postcssOptions: {
-                  plugins: [
-                    require('autoprefixer'),
-                  ],
-                },
-              },
-            },
-            'sass-loader',
-          ],
-        }
       ]
     },
     resolve: {