[FIX] cssVariables: Don't use CSS vars within @font-face directives (#257)

Browsers do not seem to support usage of custom CSS properties
(aka CSS variables) within @font-face directives.

The skeleton style-sheet should therefore not contain a reference to the
variables but just use the actual value provided by the LESS variable.

BCP: 2270189546

Author: matz3

lib/plugin/css-variables-collector.js

@@ -11,6 +11,7 @@ const CSSVariablesCollectorPlugin = module.exports = function(config) {
 	this.ruleStack = [];
 	this.mixinStack = [];
 	this.parenStack = [];
+	this.fontFaceDirectiveStack = [];
 };
 
 CSSVariablesCollectorPlugin.prototype = {
@@ -20,8 +21,8 @@ CSSVariablesCollectorPlugin.prototype = {
 
 	isReplacing: true,
 
-	_isInMixinOrParen() {
-		return this.mixinStack.length > 0 || this.parenStack.length > 0;
+	_isInMixinOrParenOrFontFaceDirective() {
+		return this.mixinStack.length > 0 || this.parenStack.length > 0 || this.fontFaceDirectiveStack.length > 0;
 	},
 
 	_isVarInRule() {
@@ -39,7 +40,7 @@ CSSVariablesCollectorPlugin.prototype = {
 	},
 
 	_isRelevant() {
-		return !this._isInMixinOrParen() && this._isVarInRule();
+		return !this._isInMixinOrParenOrFontFaceDirective() && this._isVarInRule();
 	},
 
 	toLessVariables(varsOverride) {
@@ -153,7 +154,7 @@ CSSVariablesCollectorPlugin.prototype = {
 	visitRule(node, visitArgs) {
 		// check rule for being a variable declaration
 		const isVarDeclaration = typeof node.name === "string" && node.name.startsWith("@");
-		if (!this._isInMixinOrParen() && isVarDeclaration) {
+		if (!this._isInMixinOrParenOrFontFaceDirective() && isVarDeclaration) {
 			// add the variable declaration to the list of vars
 			const varName = node.name.substr(1);
 			const isVarInLib = this._isVarInLibrary({
@@ -199,6 +200,22 @@ CSSVariablesCollectorPlugin.prototype = {
 		return node;
 	},
 
+	visitDirective(node, visitArgs) {
+		// store the @font-face directive context
+		if (node.name === "@font-face") {
+			this.fontFaceDirectiveStack.push(node);
+		}
+		return node;
+	},
+
+	visitDirectiveOut(node) {
+		// remove @font-face directive context
+		if (node.name === "@font-face") {
+			this.fontFaceDirectiveStack.pop();
+		}
+		return node;
+	},
+
 	visitUrl(node, visitArgs) {
 		// we mark the less variables which should be updated after eval
 		// => strangewise less variables with "none" values are also urls

test/expected/simple/test-RTL.css

@@ -2,3 +2,17 @@
   float: right;
   color: #ff0000;
 }
+@keyframes myKeyframes {
+  0%,
+  80%,
+  100% {
+    transform: scale(1);
+  }
+  40% {
+    transform: scale(2);
+  }
+}
+@font-face {
+  font-family: "MyFont";
+  src: url("MyFont.woff2") format("woff2");
+}

test/expected/simple/test-RTL.min.css

@@ -1 +1 @@
-.myRule{float:right;color:#f00}
+.myRule{float:right;color:#f00}@keyframes myKeyframes{0%,80%,100%{transform:scale(1)}40%{transform:scale(2)}}@font-face{font-family:"MyFont";src:url("MyFont.woff2") format("woff2")}

test/expected/simple/test-cssvars-skeleton.css

@@ -2,3 +2,17 @@
   float: left;
   color: var(--myColor);
 }
+@keyframes myKeyframes {
+  0%,
+  80%,
+  100% {
+    transform: var(--myScale1);
+  }
+  40% {
+    transform: var(--myScale2);
+  }
+}
+@font-face {
+  font-family: "MyFont";
+  src: url("MyFont.woff2") format("woff2");
+}

test/expected/simple/test-cssvars-variables.css

@@ -1,3 +1,7 @@
 :root {
   --myColor: #ff0000;
+  --myFontFamily: "MyFont";
+  --myFontUrl: url("MyFont.woff2");
+  --myScale1: scale(1);
+  --myScale2: scale(2);
 }

test/expected/simple/test-cssvars-variables.source.less

@@ -1,5 +1,13 @@
 @myColor: #ff0000;
+@myFontFamily: "MyFont";
+@myFontUrl: url("MyFont.woff2");
+@myScale1: scale(1);
+@myScale2: scale(2);
 
 :root {
 --myColor: @myColor;
+--myFontFamily: @myFontFamily;
+--myFontUrl: @myFontUrl;
+--myScale1: @myScale1;
+--myScale2: @myScale2;
 }

test/expected/simple/test-inline-parameters.css

@@ -2,6 +2,20 @@
   float: left;
   color: #ff0000;
 }
+@keyframes myKeyframes {
+  0%,
+  80%,
+  100% {
+    transform: scale(1);
+  }
+  40% {
+    transform: scale(2);
+  }
+}
+@font-face {
+  font-family: "MyFont";
+  src: url("MyFont.woff2") format("woff2");
+}
 
 /* Inline theming parameters */
-#sap-ui-theme-foo\.bar{background-image:url('data:text/plain;utf-8,%7B%22myColor%22%3A%22%23ff0000%22%7D')}
+#sap-ui-theme-foo\.bar{background-image:url('data:text/plain;utf-8,%7B%22myColor%22%3A%22%23ff0000%22%2C%22myFontFamily%22%3A%22%5C%22MyFont%5C%22%22%2C%22myFontUrl%22%3A%22url(%5C%22MyFont.woff2%5C%22)%22%2C%22myScale1%22%3A%22scale(1)%22%2C%22myScale2%22%3A%22scale(2)%22%7D')}

test/expected/simple/test-variables.json

@@ -1,3 +1,7 @@
 {
-  "myColor": "#ff0000"
+  "myColor": "#ff0000",
+  "myFontFamily": "\"MyFont\"",
+  "myFontUrl": "url(\"MyFont.woff2\")",
+  "myScale1": "scale(1)",
+  "myScale2": "scale(2)"
 }

test/expected/simple/test-variables.min.json

@@ -1 +1 @@
-{ "myColor" : "#f00" }
+{ "myColor" : "#f00", "myFontFamily": "\"MyFont\"", "myFontUrl": "url(\"MyFont.woff2\")", "myScale1": "scale(1)", "myScale2": "scale(2)" }

test/expected/simple/test.css

@@ -2,3 +2,17 @@
   float: left;
   color: #ff0000;
 }
+@keyframes myKeyframes {
+  0%,
+  80%,
+  100% {
+    transform: scale(1);
+  }
+  40% {
+    transform: scale(2);
+  }
+}
+@font-face {
+  font-family: "MyFont";
+  src: url("MyFont.woff2") format("woff2");
+}