@openedx/frontend-base 1.0.0-alpha.2 → 1.0.0-alpha.21

package/package.json

@@ -1,32 +1,39 @@
 {
   "name": "@openedx/frontend-base",
-  "version": "1.0.0-alpha.2",
+  "version": "1.0.0-alpha.21",
   "description": "Build tools, setup and config for frontend apps",
   "publishConfig": {
     "access": "public"
   },
-  "main": "index.ts",
+  "exports": {
+    ".": "./dist/index.js",
+    "./tools": "./dist/tools/index.js",
+    "./tools/tsconfig.json": "./dist/tools/typescript/tsconfig.json",
+    "./shell/app.scss": "./dist/shell/app.scss",
+    "./shell/site": "./dist/shell/site.js"
+  },
   "files": [
-    "/config",
-    "/runtime",
-    "/tools/dist",
-    "/shell",
-    "/types.ts"
+    "/dist"
   ],
   "bin": {
-    "intl-imports.js": "tools/dist/cli/scripts/intl-imports.js",
-    "openedx": "tools/dist/cli/openedx.js",
-    "transifex-utils.js": "tools/dist/cli/scripts/transifex-utils.js"
+    "intl-imports.js": "./dist/tools/cli/intl-imports.js",
+    "openedx": "./dist/tools/cli/openedx.js",
+    "transifex-utils.js": "./dist/tools/cli/transifex-utils.js"
   },
   "scripts": {
     "build": "make build",
-    "clean": "rm -rf dist",
-    "dev": "npm run build && node ./tools/dist/cli/openedx.js dev:shell",
+    "clean": "make clean",
+    "dev": "npm run build && node ./dist/tools/cli/openedx.js dev:shell",
     "docs": "jsdoc -c jsdoc.json",
-    "docs:watch": "nodemon -w runtime -w docs/template -w README.md -e js,jsx,ts,tsx --exec npm run docs",
     "lint": "eslint .; npm run lint:tools; npm --prefix ./test-site run lint",
     "lint:tools": "cd ./tools && eslint . && cd ..",
-    "test": "jest"
+    "pack": "mkdir -p pack && npm pack --silent --pack-destination pack >/dev/null && mv \"$(ls -t pack/*.tgz | head -n 1)\" pack/openedx-frontend-base.tgz",
+    "prepack": "npm run build",
+    "test": "jest",
+    "watch:build": "nodemon --exec 'npm run build'",
+    "watch:docs": "nodemon --watch docs/template --watch README.md --exec npm run docs",
+    "watch:pack": "nodemon --exec 'npm run pack'",
+    "i18n_extract": "npm run build && node ./dist/tools/cli/openedx.js formatjs extract --include=shell"
   },
   "repository": {
     "type": "git",
@@ -57,6 +64,7 @@
     "@stylistic/eslint-plugin": "^2.9.0",
     "@types/eslint__js": "^8.42.3",
     "@types/gradient-string": "^1.1.6",
+    "@types/lodash.keyby": "^4.6.9",
     "autoprefixer": "^10.4.20",
     "axios": "^1.7.9",
     "axios-cache-interceptor": "^1.6.0",
@@ -86,10 +94,12 @@
     "image-minimizer-webpack-plugin": "3.8.3",
     "jest": "^29.7.0",
     "jest-environment-jsdom": "^29.7.0",
+    "jest-localstorage-mock": "^2.4.26",
     "jwt-decode": "^3.1.2",
     "localforage": "^1.10.0",
     "localforage-memoryStorageDriver": "^0.9.2",
     "lodash.camelcase": "^4.3.0",
+    "lodash.keyby": "^4.6.0",
     "lodash.memoize": "^4.1.2",
     "lodash.merge": "^4.6.2",
     "lodash.snakecase": "^4.1.1",
@@ -101,7 +111,7 @@
     "postcss-rtlcss": "^5.5.0",
     "prop-types": "^15.8.1",
     "react-dev-utils": "12.0.1",
-    "react-focus-on": "^3.9.4",
+    "react-focus-on": "^3.10.2",
     "react-intl": "^6.6.6",
     "react-refresh": "0.16.0",
     "react-refresh-typescript": "^2.0.9",
@@ -113,7 +123,8 @@
     "sharp": "^0.33.5",
     "source-map-loader": "4.0.2",
     "style-loader": "^4.0.0",
-    "ts-loader": "^9.5.1",
+    "ts-loader": "^9.5.7",
+    "tsconfig-paths-webpack-plugin": "^4.2.0",
     "typescript": "^5.6.3",
     "typescript-eslint": "^8.11.0",
     "universal-cookie": "^8.0.1",
@@ -146,7 +157,7 @@
     "nodemon": "^3.1.4"
   },
   "peerDependencies": {
-    "@openedx/paragon": "^22.20.2",
+    "@openedx/paragon": "^23.4.5",
     "@tanstack/react-query": "^5.81.2",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",

package/config/tsconfig.json

@@ -1,32 +0,0 @@
-{
-  "compilerOptions": {
-    "allowJs": true,
-    "allowSyntheticDefaultImports": true,
-    "declaration": true,
-    "esModuleInterop": true,
-    "forceConsistentCasingInFileNames": true,
-    "jsx": "react-jsx",
-    "lib": [
-      "DOM",
-      "DOM.Iterable",
-      "ESNext",
-      "esnext.intl",
-      "es2017.intl",
-      "es2018.intl"
-    ],
-    "isolatedModules": true,
-    "module": "ESNext",
-    "moduleResolution": "node",
-    "noEmit": true,
-    "noFallthroughCasesInSwitch": true,
-    "noImplicitAny": false,
-    "noImplicitThis": true,
-    "noUnusedParameters": true,
-    "resolveJsonModule": true,
-    "skipLibCheck": true,
-    "sourceMap": true,
-    "strict": true,
-    "strictFunctionTypes": false,
-    "target": "ES6"
-  }
-}

package/config/webpack/common-config/all/getIgnoreWarnings.js

@@ -1,14 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.default = getIgnoreWarnings;
-function getIgnoreWarnings() {
-    return [
-        // Ignore warnings raised by source-map-loader.
-        // some third party packages may ship miss-configured sourcemaps, that interrupts the build
-        // See: https://github.com/facebook/create-react-app/discussions/11278#discussioncomment-1780169
-        (warning) => !!(
-        // @ts-expect-error 'resource' is something TypeScript can't find for whatever reason.
-        warning.module?.resource.includes('node_modules')
-            && warning.details?.includes('source-map-loader')),
-    ];
-}

package/config/webpack/common-config/dev/getDevServer.js

@@ -1,38 +0,0 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.default = getDevServer;
-const path_1 = __importDefault(require("path"));
-const getPublicPath_1 = __importDefault(require("../../utils/getPublicPath"));
-function getDevServer() {
-    return {
-        allowedHosts: 'all',
-        headers: {
-            'Access-Control-Allow-Origin': '*',
-        },
-        // For obvious reasons, 'auto' won't work for publicPath here, so we
-        // force '/' unless PUBLIC_PATH is set.
-        historyApiFallback: {
-            index: path_1.default.join((0, getPublicPath_1.default)('/'), 'index.html'),
-            disableDotRule: true,
-        },
-        host: 'apps.local.openedx.io',
-        hot: true,
-        port: process.env.PORT ?? 8080,
-        proxy: [
-            {
-                context: ['/api/mfe_config/v1'],
-                target: 'http://local.openedx.io:8000',
-                changeOrigin: true,
-            }
-        ],
-        // Enable hot reloading server. It will provide WDS_SOCKET_PATH endpoint
-        // for the WebpackDevServer client so it can learn when the files were
-        // updated. The WebpackDevServer client is included as an entry point
-        // in the webpack development configuration. Note that only changes
-        // to CSS are currently hot reloaded. JS changes will refresh the browser.
-        webSocketServer: 'ws',
-    };
-}

package/config/webpack/plugins/paragon-webpack-plugin/ParagonWebpackPlugin.js

@@ -1,108 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-const webpack_1 = require("webpack");
-const paragonUtils_1 = require("../../utils/paragonUtils");
-const utils_1 = require("./utils");
-// Get Paragon and brand versions / CSS files from disk.
-const paragonVersion = (0, paragonUtils_1.getParagonVersion)(process.cwd());
-const paragonThemeCss = (0, paragonUtils_1.getParagonThemeCss)(process.cwd());
-const brandVersion = (0, paragonUtils_1.getParagonVersion)(process.cwd(), { isBrandOverride: true });
-const brandThemeCss = (0, paragonUtils_1.getParagonThemeCss)(process.cwd(), { isBrandOverride: true });
-/**
- * 1. Injects `PARAGON_THEME` global variable into the HTML document during the Webpack compilation process.
- * 2. Injects `<link rel="preload" as="style">` element(s) for the Paragon and brand CSS into the HTML document.
- */
-class ParagonWebpackPlugin {
-    pluginName;
-    paragonThemeUrlsConfig;
-    processAssetsHandlers;
-    paragonMetadata;
-    constructor({ processAssetsHandlers = [] } = {}) {
-        this.pluginName = 'ParagonWebpackPlugin';
-        this.paragonThemeUrlsConfig = {};
-        this.paragonMetadata = {};
-        // List of handlers to be executed after processing assets during the Webpack compilation.
-        this.processAssetsHandlers = [
-            this.resolveParagonThemeUrlsFromConfig,
-            this.injectParagonMetadataIntoDocument,
-            this.injectParagonStylesheetsIntoDocument,
-            ...processAssetsHandlers,
-        ].map(handler => handler.bind(this));
-    }
-    /**
-     * Resolves the MFE configuration from ``PARAGON_THEME_URLS`` in the environment variables. `
-     *
-     * @returns {Object} Metadata about the Paragon and brand theme URLs from configuration.
-     */
-    async resolveParagonThemeUrlsFromConfig() {
-        try {
-            this.paragonThemeUrlsConfig = JSON.parse(process.env.PARAGON_THEME_URLS ?? '{}');
-        }
-        catch (error) {
-            console.info('Paragon Plugin cannot load PARAGON_THEME_URLS env variable, skipping.');
-        }
-    }
-    /**
-     * Generates `PARAGON_THEME` global variable in HTML document.
-     * @param {Object} compilation Webpack compilation object.
-     */
-    injectParagonMetadataIntoDocument(compilation) {
-        const paragonMetadata = (0, utils_1.injectMetadataIntoDocument)(compilation, {
-            paragonThemeCss,
-            paragonVersion,
-            brandThemeCss,
-            brandVersion,
-        });
-        if (paragonMetadata) {
-            this.paragonMetadata = paragonMetadata;
-        }
-    }
-    injectParagonStylesheetsIntoDocument(compilation) {
-        const file = compilation.getAsset('index.html');
-        // If the `index.html` hasn't loaded yet, or there are no Paragon theme URLs, then there is nothing to do yet.
-        if (!file || Object.keys(this.paragonThemeUrlsConfig || {}).length === 0) {
-            return;
-        }
-        // Generates `<link rel="preload" as="style">` element(s) for the Paragon and brand CSS files.
-        const paragonStylesheetUrls = (0, utils_1.getParagonStylesheetUrls)({
-            paragonThemeUrls: this.paragonThemeUrlsConfig,
-            paragonVersion,
-            brandVersion,
-        });
-        const { core: paragonCoreCss, variants: paragonThemeVariantCss, } = paragonStylesheetUrls;
-        // We do not expect to have a Buffer here, ever.
-        const originalSource = file.source.source();
-        // Inject core CSS
-        let newSource = (0, utils_1.injectParagonCoreStylesheets)({
-            source: originalSource,
-            paragonCoreCss,
-            paragonThemeCss,
-            brandThemeCss,
-        });
-        // Inject theme variant CSS
-        newSource = (0, utils_1.injectParagonThemeVariantStylesheets)({
-            // @ts-expect-error newSource is possibly undefined here.
-            source: newSource.source(),
-            paragonThemeVariantCss,
-            paragonThemeCss,
-            brandThemeCss,
-        });
-        // @ts-expect-error newSource is possibly undefined here.
-        compilation.updateAsset('index.html', new webpack_1.sources.RawSource(newSource.source()));
-    }
-    apply(compiler) {
-        compiler.hooks.thisCompilation.tap(this.pluginName, (compilation) => {
-            compilation.hooks.processAssets.tap({
-                name: this.pluginName,
-                stage: webpack_1.Compilation.PROCESS_ASSETS_STAGE_ADDITIONS,
-                additionalAssets: true,
-            }, () => {
-                // Iterate through each configured handler, passing the compilation to each.
-                this.processAssetsHandlers.forEach(async (handler) => {
-                    await handler(compilation);
-                });
-            });
-        });
-    }
-}
-exports.default = ParagonWebpackPlugin;

package/config/webpack/plugins/paragon-webpack-plugin/index.js

@@ -1,7 +0,0 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-const ParagonWebpackPlugin_1 = __importDefault(require("./ParagonWebpackPlugin"));
-exports.default = ParagonWebpackPlugin_1.default;

package/config/webpack/plugins/paragon-webpack-plugin/utils/assetUtils.js

@@ -1,64 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.findCoreCssAsset = findCoreCssAsset;
-exports.findThemeVariantCssAssets = findThemeVariantCssAssets;
-exports.getCssAssetsFromCompilation = getCssAssetsFromCompilation;
-/**
- * Finds the core CSS asset from the given array of Paragon assets.
- *
- * @param {Array} paragonAssets - An array of Paragon assets.
- * @return {Object|undefined} The core CSS asset, or undefined if not found.
- */
-function findCoreCssAsset(paragonAssets) {
-    return paragonAssets?.find((asset) => asset.name.includes('core') && asset.name.endsWith('.css'));
-}
-/**
- * Finds the theme variant CSS assets from the given Paragon assets based on the provided options.
- *
- * @param {Array} paragonAssets - An array of Paragon assets.
- * @param {Object} options - The options for finding the theme variant CSS assets.
- * @param {boolean} [options.isBrandOverride=false] - Indicates if the theme variant is a brand override.
- * @param {Object} [options.brandThemeCss] - The brand theme CSS object.
- * @param {Object} [options.paragonThemeCss] - The Paragon theme CSS object.
- * @return {Object} - The theme variant CSS assets.
- */
-function findThemeVariantCssAssets(paragonAssets, { isBrandOverride = false, brandThemeCss, paragonThemeCss, }) {
-    const themeVariantsSource = isBrandOverride ? brandThemeCss?.variants : paragonThemeCss?.variants;
-    const themeVariantCssAssets = {};
-    Object.entries(themeVariantsSource || {}).forEach(([themeVariant, value]) => {
-        const foundThemeVariantAsset = paragonAssets.find((asset) => asset.name.includes(value.outputChunkName));
-        if (!foundThemeVariantAsset) {
-            return;
-        }
-        themeVariantCssAssets[themeVariant] = {
-            fileName: foundThemeVariantAsset.name,
-        };
-    });
-    return themeVariantCssAssets;
-}
-/**
- * Retrieves the CSS assets from the compilation based on the provided options.
- *
- * @param {Object} compilation - The compilation object.
- * @param {Object} options - The options for retrieving the CSS assets.
- * @param {boolean} [options.isBrandOverride=false] - Indicates if the assets are for a brand override.
- * @param {Object} [options.brandThemeCss] - The brand theme CSS object.
- * @param {Object} [options.paragonThemeCss] - The Paragon theme CSS object.
- * @return {Object} - The CSS assets, including the core CSS asset and theme variant CSS assets.
- */
-function getCssAssetsFromCompilation(compilation, { isBrandOverride = false, brandThemeCss, paragonThemeCss, }) {
-    const assetSubstring = isBrandOverride ? 'brand' : 'paragon';
-    const paragonAssets = compilation.getAssets().filter(asset => asset.name.includes(assetSubstring) && asset.name.endsWith('.css'));
-    const coreCssAsset = findCoreCssAsset(paragonAssets);
-    const themeVariantCssAssets = findThemeVariantCssAssets(paragonAssets, {
-        isBrandOverride,
-        paragonThemeCss,
-        brandThemeCss,
-    });
-    return {
-        coreCssAsset: {
-            fileName: coreCssAsset?.name,
-        },
-        themeVariantCssAssets,
-    };
-}

package/config/webpack/plugins/paragon-webpack-plugin/utils/htmlUtils.js

@@ -1,53 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.injectMetadataIntoDocument = injectMetadataIntoDocument;
-const webpack_1 = require("webpack");
-const assetUtils_1 = require("./assetUtils");
-const scriptUtils_1 = require("./scriptUtils");
-/**
- * Injects metadata into the HTML document by modifying the 'index.html' asset in the compilation.
- *
- * @param {Object} compilation - The Webpack compilation object.
- * @param {Object} options - The options object.
- * @param {Object} options.paragonThemeCss - The Paragon theme CSS object.
- * @param {string} options.paragonVersion - The version of the Paragon theme.
- * @param {Object} options.brandThemeCss - The brand theme CSS object.
- * @param {string} options.brandVersion - The version of the brand theme.
- * @return {Object|undefined} The script contents object if the 'index.html' asset exists, otherwise undefined.
- */
-function injectMetadataIntoDocument(compilation, { paragonThemeCss, paragonVersion, brandThemeCss, brandVersion, }) {
-    const file = compilation.getAsset('index.html');
-    if (!file) {
-        return undefined;
-    }
-    const { coreCssAsset: paragonCoreCssAsset, themeVariantCssAssets: paragonThemeVariantCssAssets, } = (0, assetUtils_1.getCssAssetsFromCompilation)(compilation, {
-        brandThemeCss,
-        paragonThemeCss,
-    });
-    const { coreCssAsset: brandCoreCssAsset, themeVariantCssAssets: brandThemeVariantCssAssets, } = (0, assetUtils_1.getCssAssetsFromCompilation)(compilation, {
-        isBrandOverride: true,
-        brandThemeCss,
-        paragonThemeCss,
-    });
-    const scriptContents = (0, scriptUtils_1.generateScriptContents)({
-        paragonCoreCssAsset,
-        paragonThemeVariantCssAssets,
-        brandCoreCssAsset,
-        brandThemeVariantCssAssets,
-        paragonThemeCss,
-        paragonVersion,
-        brandThemeCss,
-        brandVersion,
-    });
-    // We expect this to be a string at all times.
-    const originalSource = file.source.source();
-    const newSource = (0, scriptUtils_1.insertScriptContentsIntoDocument)({
-        originalSource,
-        // @ts-expect-error This parameter doesn't exist in the function.
-        coreCssAsset: paragonCoreCssAsset,
-        themeVariantCssAssets: paragonThemeVariantCssAssets,
-        scriptContents,
-    });
-    compilation.updateAsset('index.html', new webpack_1.sources.RawSource(newSource.source()));
-    return scriptContents;
-}

package/config/webpack/plugins/paragon-webpack-plugin/utils/index.js

@@ -1,9 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.injectParagonThemeVariantStylesheets = exports.injectParagonCoreStylesheets = exports.getParagonStylesheetUrls = exports.injectMetadataIntoDocument = void 0;
-var htmlUtils_1 = require("./htmlUtils");
-Object.defineProperty(exports, "injectMetadataIntoDocument", { enumerable: true, get: function () { return htmlUtils_1.injectMetadataIntoDocument; } });
-var paragonStylesheetUtils_1 = require("./paragonStylesheetUtils");
-Object.defineProperty(exports, "getParagonStylesheetUrls", { enumerable: true, get: function () { return paragonStylesheetUtils_1.getParagonStylesheetUrls; } });
-Object.defineProperty(exports, "injectParagonCoreStylesheets", { enumerable: true, get: function () { return paragonStylesheetUtils_1.injectParagonCoreStylesheets; } });
-Object.defineProperty(exports, "injectParagonThemeVariantStylesheets", { enumerable: true, get: function () { return paragonStylesheetUtils_1.injectParagonThemeVariantStylesheets; } });

package/config/webpack/plugins/paragon-webpack-plugin/utils/paragonStylesheetUtils.js

@@ -1,114 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.injectParagonCoreStylesheets = injectParagonCoreStylesheets;
-exports.injectParagonThemeVariantStylesheets = injectParagonThemeVariantStylesheets;
-exports.getParagonStylesheetUrls = getParagonStylesheetUrls;
-const stylesheetUtils_1 = require("./stylesheetUtils");
-const tagUtils_1 = require("./tagUtils");
-/**
- * Injects Paragon core stylesheets into the document.
- *
- * @param {Object} options - The options object.
- * @param {string|object} options.source - The source HTML document.
- * @param {Object} options.paragonCoreCss - The Paragon core CSS object.
- * @param {Object} options.paragonThemeCss - The Paragon theme CSS object.
- * @param {Object} options.brandThemeCss - The brand theme CSS object.
- * @return {string|object} The modified HTML document with Paragon core stylesheets injected.
- */
-function injectParagonCoreStylesheets({ source, paragonCoreCss, paragonThemeCss, brandThemeCss, }) {
-    return (0, stylesheetUtils_1.insertStylesheetsIntoDocument)({
-        source,
-        urls: paragonCoreCss.urls,
-        // @ts-expect-error These two parameters don't exist on insertStylesheetsIntoDocument
-        paragonThemeCss,
-        brandThemeCss,
-    });
-}
-/**
- * Injects Paragon theme variant stylesheets into the document.
- *
- * @param {Object} options - The options object.
- * @param {string|object} options.source - The source HTML document.
- * @param {Object} options.paragonThemeVariantCss - The Paragon theme variant CSS object.
- * @param {Object} options.paragonThemeCss - The Paragon theme CSS object.
- * @param {Object} options.brandThemeCss - The brand theme CSS object.
- * @return {string|object} The modified HTML document with Paragon theme variant stylesheets injected.
- */
-function injectParagonThemeVariantStylesheets({ source, paragonThemeVariantCss, paragonThemeCss, brandThemeCss, }) {
-    let newSource = source;
-    Object.values(paragonThemeVariantCss).forEach(({ urls }) => {
-        newSource = (0, stylesheetUtils_1.insertStylesheetsIntoDocument)({
-            source: (typeof newSource === 'object' ? newSource.source() : newSource),
-            urls,
-            // @ts-expect-error These two parameters don't exist on insertStylesheetsIntoDocument
-            paragonThemeCss,
-            brandThemeCss,
-        });
-    });
-    return newSource;
-}
-/**
- * Retrieves the URLs of the Paragon stylesheets based on the provided theme URLs, Paragon version, and brand version.
- *
- * @param {Object} options - The options object.
- * @param {Object} options.paragonThemeUrls - The URLs of the Paragon theme.
- * @param {string} options.paragonVersion - The version of the Paragon theme.
- * @param {string} options.brandVersion - The version of the brand theme.
- * @return {Object} An object containing the URLs of the Paragon stylesheets.
- */
-function getParagonStylesheetUrls({ paragonThemeUrls, paragonVersion, brandVersion }) {
-    const paragonCoreCssUrl = 'urls' in paragonThemeUrls.core && paragonThemeUrls.core.urls !== undefined ? paragonThemeUrls.core.urls.default : paragonThemeUrls.core.url;
-    const brandCoreCssUrl = 'urls' in paragonThemeUrls.core && paragonThemeUrls.core.urls !== undefined ? paragonThemeUrls.core.urls.brandOverride : undefined;
-    const defaultThemeVariants = paragonThemeUrls.defaults || {};
-    const coreCss = {
-        urls: {
-            default: (0, tagUtils_1.handleVersionSubstitution)({
-                url: paragonCoreCssUrl,
-                wildcardKeyword: '$paragonVersion',
-                localVersion: paragonVersion
-            }),
-            brandOverride: (0, tagUtils_1.handleVersionSubstitution)({
-                url: brandCoreCssUrl,
-                wildcardKeyword: '$brandVersion',
-                localVersion: brandVersion
-            }),
-        },
-    };
-    const themeVariantsCss = {};
-    const themeVariantsEntries = Object.entries(paragonThemeUrls.variants || {});
-    themeVariantsEntries.forEach(([themeVariant, { url, urls }]) => {
-        const themeVariantMetadata = { urls: {} };
-        if (url) {
-            themeVariantMetadata.urls = {
-                default: (0, tagUtils_1.handleVersionSubstitution)({
-                    url,
-                    wildcardKeyword: '$paragonVersion',
-                    localVersion: paragonVersion,
-                }),
-                // If there is no brand override URL, then we don't need to do any version substitution
-                // but we still need to return the property.
-                brandOverride: undefined,
-            };
-        }
-        else if (urls) {
-            themeVariantMetadata.urls = {
-                default: (0, tagUtils_1.handleVersionSubstitution)({
-                    url: urls.default,
-                    wildcardKeyword: '$paragonVersion',
-                    localVersion: paragonVersion,
-                }),
-                brandOverride: (0, tagUtils_1.handleVersionSubstitution)({
-                    url: urls.brandOverride,
-                    wildcardKeyword: '$brandVersion',
-                    localVersion: brandVersion,
-                }),
-            };
-        }
-        themeVariantsCss[themeVariant] = themeVariantMetadata;
-    });
-    return {
-        core: coreCss,
-        variants: themeVariantsCss,
-        defaults: defaultThemeVariants,
-    };
-}