@ecomplus/storefront-framework 5.17.13 → 5.18.2

package/functions/package.json

@@ -13,9 +13,9 @@
   },
   "main": "index.js",
   "dependencies": {
-    "@ecomplus/storefront-renderer": "^2.8.10",
-    "firebase-admin": "^10.0.1",
-    "firebase-functions": "^3.16.0"
+    "@ecomplus/storefront-renderer": "^2.8.14",
+    "firebase-admin": "^10.0.2",
+    "firebase-functions": "^3.18.0"
   },
   "devDependencies": {
     "firebase-functions-test": "^0.3.3"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ecomplus/storefront-framework",
-  "version": "5.17.13",
+  "version": "5.18.2",
   "description": "Framework for PWA and JAMstack e-commerce templates with E-Com Plus APIs",
   "main": "src/index.js",
   "bin": {
@@ -36,30 +36,30 @@
   },
   "homepage": "https://github.com/ecomplus/storefront/tree/master/@ecomplus/storefront-framework#readme",
   "dependencies": {
-    "@babel/core": "^7.16.7",
+    "@babel/core": "^7.17.2",
     "@babel/plugin-syntax-dynamic-import": "^7.8.3",
-    "@babel/preset-env": "^7.16.7",
-    "@ecomplus/storefront-renderer": "^2.8.11",
+    "@babel/preset-env": "^7.16.11",
+    "@ecomplus/storefront-renderer": "^2.8.14",
     "@ecomplus/storefront-router": "^2.2.1",
-    "autoprefixer": "^9.8.8",
+    "autoprefixer": "^10.4.2",
     "babel-loader": "^8.2.3",
     "clean-webpack-plugin": "^4.0.0",
     "copy-webpack-plugin": "^6.4.1",
-    "core-js": ">=3.19.0 <3.21",
+    "core-js": ">=3.19.0 <3.22",
     "css-loader": "^3.6.0",
-    "cssnano": "^4.1.11",
+    "cssnano": "^5.0.17",
     "ejs": "^3.1.6",
     "file-loader": "^6.2.0",
     "json-sass-vars": "^3.1.0",
     "mini-css-extract-plugin": "^0.12.0",
     "mkdirp": "^1.0.4",
-    "postcss": "^7.0.39",
+    "postcss": "^8.4.6",
     "postcss-loader": "^4.3.0",
     "raw-loader": "^4.0.2",
     "recursive-readdir": "^2.2.2",
-    "resolve-url-loader": "^4.0.0",
-    "sass": "^1.47.0",
-    "sass-loader": "^10.2.0",
+    "resolve-url-loader": "^5.0.0",
+    "sass": "^1.49.7",
+    "sass-loader": "^10.2.1",
     "terser-webpack-plugin": "^4.2.3",
     "url-loader": "^4.1.1",
     "vue-loader": "^15.9.8",

package/src/webpack.config.js

@@ -38,6 +38,24 @@ try {
 // base output name for entry files on production
 const filenameSchema = process.env.WEBPACK_OUTPUT_FILENAME || '[name].[contenthash]'
 
+// inject brand colors
+let scssInject = `$primary: ${primaryColor}; ` +
+`$secondary: ${secondaryColor}; ` +
+`$settings-theme: ${jsonSassVars.convertJs(settings.theme || {})}; `
+if (settings.icons_font && settings.icons_font.length > 2) {
+  scssInject += `$icons-font: "${settings.icons_font}"; `
+}
+if (settings.font_family && settings.font_family.length > 2) {
+  const fontUrl = 'https://fonts.googleapis.com/css2' +
+    `?family=${settings.font_family.replace(/\s+/g, '+')}` +
+      ':wght@300;400;700&display=swap'
+  scssInject += `$web-font-path: "${fontUrl}"; ` +
+    `$font-family-sans-serif: "${settings.font_family}", ` +
+      '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", ' +
+      'Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", ' +
+      '"Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; '
+}
+
 // setup base loaders for styles module
 // parse SCSS and fix compiled CSS with Postcss
 const getBaseScssModule = () => ([
@@ -72,10 +90,7 @@ const getBaseScssModule = () => ([
   {
     loader: 'sass-loader',
     options: {
-      // inject brand colors
-      additionalData: `$primary: ${primaryColor}; ` +
-        `$secondary: ${secondaryColor}; ` +
-        `$settings-theme: ${jsonSassVars.convertJs(settings.theme || {})}; `,
+      additionalData: scssInject,
       sassOptions: {
         // include path to import from node modules
         includePaths: [