feat: make css vars fallback script work with embedded vars (#251)

Author: vladitasev

packages/main/config/postcss.bundles/postcss.config.js

@@ -1,7 +1,10 @@
 const postcssImport = require('postcss-import');
+const postcssAddFallback = require('../../lib/postcss-add-fallback/index.js');
+
 module.exports = {
   plugins: [
-    postcssImport()
+    postcssImport(),
+    postcssAddFallback(),
   ]
-}
+};
 

packages/main/config/postcss.components/postcss.config.js

@@ -6,4 +6,4 @@ module.exports = {
     postcssNesting(),
     postcssAddFallback({importFrom: "./dist/themes-next/sap_fiori_3/parameters-bundle.css"}),
   ]
-}
+};

packages/main/lib/postcss-add-fallback/index.js

@@ -1,4 +1,4 @@
-const postcss = require('postcss')
+const postcss = require('postcss');
 const fs = require('fs');
 
 const findCSSVars = styleString => {
@@ -14,17 +14,12 @@ const findCSSVars = styleString => {
 module.exports = postcss.plugin('add fallback plugin', function (opts) {
 	let params = new Map();
 	opts = opts || {};
-	if (!opts.importFrom) {
-		console.log("importFrom option not specified, plugin will add no fallback parameters");
-	} else {
-		// Work with options here
-		const sourceParams = fs.readFileSync(opts.importFrom).toString();
-		params = findCSSVars(sourceParams);
-	}
 
 	return function (root, result) {
-		if (!opts.importFrom) {
-			return;
+		// If importFrom was given, parse all CSS variables from there
+		if (opts.importFrom) {
+			const sourceParams = fs.readFileSync(opts.importFrom).toString();
+			params = findCSSVars(sourceParams);
 		}
 
 		root.walkDecls(decl => {
@@ -36,13 +31,16 @@ module.exports = postcss.plugin('add fallback plugin', function (opts) {
 					decl.value = decl.value.replace(varName, `${varName}, ${params.get(varName)}`)
 				}
 			}
+			params.set(decl.prop, decl.value);
 		});
 
 		// add the importFrom file as dependency so this file is processed again on changes
-		result.messages.push({
-			type: "dependency",
-			file: opts.importFrom,
-			parent: root.source.input.file,
-		});
+		if (opts.importFrom) {
+			result.messages.push({
+				type: "dependency",
+				file: opts.importFrom,
+				parent: root.source.input.file,
+			});
+		}
 	}
-});
+});