@shopgate/webpack 7.31.0-alpha.2 → 7.31.0-alpha.3

package/local-packages/tss-react/esm/tools/assert.js

@@ -0,0 +1,12 @@
+/**
+ * Asserts that a condition is truthy.
+ *
+ * @param {unknown} condition Condition to assert.
+ * @param {string} [msg] Optional error message.
+ * @returns {void}
+ */
+export function assert(condition, msg) {
+  if (!condition) {
+    throw new Error(msg);
+  }
+}

package/local-packages/tss-react/esm/tools/classnames.js

@@ -0,0 +1,72 @@
+import { assert } from "./assert";
+import { typeGuard } from "./typeGuard";
+
+/**
+ * Checks whether an argument exposes a non-native custom toString implementation.
+ *
+ * @param {any} arg Potential value passed to classnames.
+ * @returns {boolean} True when a custom toString can be used to derive a class name.
+ */
+function hasCustomToString(arg) {
+  return (
+    typeof arg.toString === 'function' &&
+    arg.toString !== Object.prototype.toString &&
+    !String(arg.toString).includes('[native code]')
+  );
+}
+
+/** Copy pasted from
+ * https://github.com/emotion-js/emotion/blob/23f43ab9f24d44219b0b007a00f4ac681fe8712e/packages/react/src/class-names.js#L17-L63
+ **/
+export const classnames = (args) => {
+    const len = args.length;
+    let i = 0;
+    let cls = "";
+    for (; i < len; i++) {
+        const arg = args[i];
+        if (arg == null)
+            continue;
+        let toAdd;
+        switch (typeof arg) {
+            case "boolean":
+                break;
+            case "object": {
+                if (Array.isArray(arg)) {
+                    toAdd = classnames(arg);
+                }
+                else {
+                    assert(!typeGuard(arg, false));
+
+                    // Handle glamor style objects passed to cx() without explicit toString invocation.
+                    if (hasCustomToString(arg)) {
+                      toAdd = arg.toString();
+                      break;
+                    }
+
+                    if (process.env.NODE_ENV !== "production" &&
+                        arg.styles !== undefined &&
+                        arg.name !== undefined) {
+                        console.error("You have passed styles created with `css` from `@emotion/react` package to the `cx`.\n" +
+                            "`cx` is meant to compose class names (strings) so you should convert those styles to a class name by passing them to the `css` received from <ClassNames/> component.");
+                    }
+                    toAdd = "";
+                    for (const k in arg) {
+                        if (arg[k] && k) {
+                            toAdd && (toAdd += " ");
+                            toAdd += k;
+                        }
+                    }
+                }
+                break;
+            }
+            default: {
+                toAdd = arg;
+            }
+        }
+        if (toAdd) {
+            cls && (cls += " ");
+            cls += toAdd;
+        }
+    }
+    return cls;
+};

package/local-packages/tss-react/esm/tools/typeGuard.js

@@ -0,0 +1,10 @@
+/**
+ * Tiny type-guard helper compatible with tss-react internals.
+ *
+ * @param {unknown} _value Input value.
+ * @param {boolean} isMatched Match result.
+ * @returns {boolean}
+ */
+export function typeGuard(_value, isMatched) {
+  return isMatched;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@shopgate/webpack",
-  "version": "7.31.0-alpha.2",
+  "version": "7.31.0-alpha.3",
   "description": "The webpack configuration for Shopgate's Engage.",
   "main": "webpack.config.js",
   "license": "Apache-2.0",

package/webpack.config.js

@@ -113,6 +113,10 @@ const config = {
       '@shopgate-ps/pwa-extension-kit/': path.resolve(__dirname, 'local-packages/pwa-extension-kit/src/'),
       '@shopgate/pwa-extension-kit': path.resolve(__dirname, 'local-packages/pwa-extension-kit/src'),
       '@shopgate/pwa-extension-kit/': path.resolve(__dirname, 'local-packages/pwa-extension-kit/src/'),
+
+      // Replace tss-react classnames helper with a local patched version
+      'tss-react/esm/tools/classnames.js$': path.resolve(__dirname, 'local-packages/tss-react/esm/tools/classnames.js'),
+      'tss-react/esm/tools/classnames$': path.resolve(__dirname, 'local-packages/tss-react/esm/tools/classnames.js'),
     },
     modules: [
       'node_modules',
@@ -130,6 +134,15 @@ const config = {
     // provided by extensions via extension-config.json
     new ShopgateIndexerPlugin(),
 
+    // Ensure internal relative imports inside tss-react resolve
+    // to our patched classnames file.
+    new webpack.NormalModuleReplacementPlugin(/^\.\/tools\/classnames(\.js)?$/, (resource) => {
+      if (resource.context.includes(`${path.sep}tss-react${path.sep}esm`)) {
+        // eslint-disable-next-line no-param-reassign
+        resource.request = path.resolve(__dirname, 'local-packages/tss-react/esm/tools/classnames.js');
+      }
+    }),
+
     // Inject environment variables so that they are available within the bundled code
     new webpack.DefinePlugin({
       'process.env': {