[INTERNAL] Variables: improved tests and coverage to be 100%

Author: petermuessig

lib/index.js

@@ -193,6 +193,8 @@ Builder.prototype.build = function(options) {
 			const libName = config.libName = options.library.name;
 			config.libPath = libName.replace(/\./g, "/");
 			config.prefix = "_" + libName.replace(/\./g, "_") + "_";
+		} else {
+			config.prefix = ""; // no library, no prefix
 		}
 
 		// Keep filename for later usage (see ImportCollectorPlugin) as less modifies the parserOptions.filename

lib/plugin/css-variables-collector.js

@@ -107,6 +107,7 @@ CSSVariablesCollectorPlugin.prototype = {
 
 	visitOperation(node, visitArgs) {
 		if (this._isRelevant()) {
+			// console.log("visitOperation", this.ruleStack[this.ruleStack.length - 1], this._getCSS(node));
 			return new less.tree.Call("calc", [new less.tree.Expression([node.operands[0], new less.tree.Anonymous(node.op), node.operands[1]])]);
 		}
 		return node;
@@ -116,6 +117,7 @@ CSSVariablesCollectorPlugin.prototype = {
 		// if variables are used inside rules, generate a new calculated variable for it!
 		const isRelevantFunction = typeof less.tree.functions[node.name] === "function" && ["rgba"].indexOf(node.name) === -1;
 		if (this._isRelevant() && isRelevantFunction) {
+			// console.log("visitCall", this.ruleStack[this.ruleStack.length - 1], this._getCSS(node));
 			const css = this._getCSS(node);
 			let newName = this.config.prefix + "function_" + node.name + Object.keys(this.vars).length;
 			// check for duplicate value in vars already
@@ -139,6 +141,7 @@ CSSVariablesCollectorPlugin.prototype = {
 	visitNegative(node, visitArgs) {
 		// convert negative into calc function
 		if (this._isRelevant()) {
+			console.log("visitNegative", this.ruleStack[this.ruleStack.length - 1], this._getCSS(node));
 			return new less.tree.Call("calc", [new less.tree.Expression([new less.tree.Anonymous("-1"), new less.tree.Anonymous("*"), node.value])]);
 		}
 		return node;

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

@@ -12,3 +12,28 @@ a:hover {
 .lazy-eval {
   width: var(--var);
 }
+.nested .calc-vars {
+  height: var(--c);
+  width: var(--d);
+  color: var(--function_lighten12);
+  top: calc(-1 * var(--top));
+  line-height: calc(var(--lineHeight) / 2);
+  background: #428bca;
+  border-color: #92bce0;
+  background: #5697d0;
+}
+.nested .calc-vars-duplicate {
+  color: var(--function_lighten12);
+  padding-left: calc(20px + 0.5rem);
+  border-color: #ffffff;
+  background: #ffffff;
+}
+.nested .calc-vars-duplicate somePrefix.somePadding {
+  padding: 1rem;
+  box-sizing: border-box;
+}
+@media (max-width: 599px) {
+  .nested .calc-vars-duplicate somePrefix.somePadding {
+    padding: 0;
+  }
+}

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

@@ -5,4 +5,11 @@
   --link-color-active: var(--link-color);
   --a: 100%;
   --var: var(--a);
+  --b: #245682;
+  --padLeft: 20px;
+  --top: 5rem;
+  --lineHeight: 2rem;
+  --c: calc(20%);
+  --d: -100%;
+  --function_lighten12: #3071a9;
 }

test/expected/complex/test.css

@@ -12,3 +12,28 @@ a:hover {
 .lazy-eval {
   width: 9%;
 }
+.nested .calc-vars {
+  height: calc(20%);
+  width: -100%;
+  color: #3071a9;
+  top: -5rem;
+  line-height: 1rem;
+  background: #428bca;
+  border-color: #92bce0;
+  background: #5697d0;
+}
+.nested .calc-vars-duplicate {
+  color: #3071a9;
+  padding-left: calc(20px + 0.5rem);
+  border-color: #ffffff;
+  background: #ffffff;
+}
+.nested .calc-vars-duplicate somePrefix.somePadding {
+  padding: 1rem;
+  box-sizing: border-box;
+}
+@media (max-width: 599px) {
+  .nested .calc-vars-duplicate somePrefix.somePadding {
+    padding: 0;
+  }
+}

test/fixtures/complex/test.less

@@ -25,3 +25,53 @@ a:hover {
 
 @var: @a;
 @a: 100%;
+
+.nested {
+
+  @b: darken(@link-color-active, 20%);
+  @padLeft: 20px;
+  @top: 5rem;
+  @lineHeight: 2rem;
+
+  .my-mixin(@bgColor: #fff) {
+    background: @bgColor;
+    border-color: lighten(@bgColor, 20%);
+	& when not (@bgColor = #000) {
+		background: lighten(@bgColor, 5%);
+	}
+  }
+
+
+.other-mixin(@rootClass) {
+	@{rootClass}.somePadding {
+		padding: 1rem;
+		box-sizing: border-box;
+	}
+
+	@media (max-width:599px) {
+		@{rootClass}.somePadding {
+			padding: 0;
+		}
+	}
+}
+
+  .calc-vars {
+    @c: calc(100% - 80px);
+    @d: -@a;
+    height: @c;
+    width: @d;
+    color: lighten(@b, 10%);
+	top: -@top;
+	line-height: @lineHeight / 2;
+    .my-mixin(@link-color)
+  }
+
+  .calc-vars-duplicate {
+    color: lighten(@b, 10%);
+	padding-left: ~"calc(@{padLeft} + 0.5rem)";
+    .my-mixin(#fff);
+	.other-mixin(somePrefix);
+  }
+
+}
+