Handle additional cases of calc compressions with nested calc functions, shapes, and subtracting negative values (#264)

Author: brandoncorrea

src/main/java/org/primefaces/extensions/optimizerplugin/optimizer/CssCompressor.java

@@ -545,26 +545,7 @@ public void compress(Writer out, int linebreakpos) throws IOException {
 			css = css.replace("___YUICSSMIN_PRESERVED_TOKEN_" + i + "___", preservedTokens.get(i));
 		}
 
-		// Add spaces back in between operators for css calc function
-		// https://developer.mozilla.org/en-US/docs/Web/CSS/calc
-		// Added by Eric Arnol-Martin (earnolmartin@gmail.com)
-		sb = new StringBuilder();
-		p = Pattern.compile("calc\\([^;}]*\\)");
-		m = p.matcher(css);
-		while (m.find()) {
-			String s = m.group();
-			s = s.replaceAll("\\s+", "");
-			s = s.replaceAll("(?<=[-|%)pxemrvhw\\d])\\+", " + ");
-			s = s.replaceAll("(?<=[-|%)pxemrvhw\\d])-", " - ");
-			s = s.replaceAll("(?<=[-|%)pxemrvhw\\d])\\*", " * ");
-			s = s.replaceAll("(?<=[-|%)pxemrvhw\\d])/", " / ");
-			s = s.replaceAll("(var\\(-\\s-\\s)", "var(--");
-			s = s.replaceAll("\\)(var\\(--)", ") var(--"); // #168
-
-			m.appendReplacement(sb, s);
-		}
-		m.appendTail(sb);
-		css = sb.toString();
+		css = performCalcCompressions(css);
 
 		// #240 add spaces after parens
 		css = css.replaceAll("\\)(?=[a-zA-Z0-9])", ") ")       // Add space after ')' if followed by letter/digit
@@ -653,4 +634,56 @@ public static String normalizeSpace(final String str) {
 		}
 		return new String(newChars, 0, count - (whitespacesCount > 0 ? 1 : 0)).trim();
 	}
+
+	private static String performCalcCompressions(String css) {
+		StringBuilder compressed = new StringBuilder();
+		while (!css.isBlank())
+			css = seekNextCalcCompression(compressed, css);
+		return compressed.toString();
+	}
+
+	private static String seekNextCalcCompression(StringBuilder compressed, String css) {
+		int calcStartIndex = css.indexOf("calc(");
+		if (calcStartIndex >= 0)
+			return compressCalcFormAt(compressed, css, calcStartIndex);
+		compressed.append(css);
+		return "";
+	}
+
+	private static String compressCalcFormAt(StringBuilder compressed, String css, int calcStartIndex) {
+		compressed.append(css, 0, calcStartIndex);
+		css = css.substring(calcStartIndex);
+		String calcForm = readNextCalcForm(css);
+		compressed.append(compressCalcForm(calcForm));
+		return css.substring(calcForm.length());
+	}
+
+	private static String readNextCalcForm(String css) {
+		// Assumes "calc(" is at the head of the string
+		int cursor = 4;
+		int depth = 1;
+		while (++cursor < css.length()) {
+			char next = css.charAt(cursor);
+			if (next == '(') depth++;
+			else if (next == ')') depth--;
+			if (depth == 0) break;
+		}
+		cursor = Integer.min(cursor, css.length() - 1);
+		return css.substring(0, cursor + 1);
+	}
+
+	// Add spaces back in between operators for css calc function
+	// https://developer.mozilla.org/en-US/docs/Web/CSS/calc
+	// Added by Eric Arnol-Martin (earnolmartin@gmail.com)
+	private static String compressCalcForm(String calcForm) {
+		return calcForm
+				.replaceAll("\\s+", "")
+				.replaceAll("(?<=[-|%)pxemrvhw\\d])--", " - -")
+				.replaceAll("(?<=[-|%)pxemrvhw\\d])\\+", " + ")
+				.replaceAll("(?<=[-|%)pxemrvhw\\d])-", " - ")
+				.replaceAll("(?<=[-|%)pxemrvhw\\d])\\*", " * ")
+				.replaceAll("(?<=[-|%)pxemrvhw\\d])/", " / ")
+				.replaceAll("(var\\(-\\s-\\s)", "var(--")
+				.replaceAll("\\)(var\\(--)", ") var(--");
+	}
 }

src/test/resources/calc.css

@@ -5,4 +5,9 @@
 	right: calc(((100% - 1200px) /2) + 16px);
 	height:calc(50% + 4px);
 	bottom:calc(100vh - 20px);
+}
+
+.test-calc-edge-cases {
+    left: calc( 100% - calc( 50px + 10px ) );
+    right: calc(100% - calc(50px - -10px));
 }

src/test/resources/calc.css.min

@@ -1 +1 @@
-.test-calc{top:calc(-100vw + 4em) !important;left:calc(50% - (100px * 2));width:calc(25% + 10px);right:calc(((100% - 1200px) / 2) + 16px);height:calc(50% + 4px);bottom:calc(100vh - 20px)}
+.test-calc{top:calc(-100vw + 4em) !important;left:calc(50% - (100px * 2));width:calc(25% + 10px);right:calc(((100% - 1200px) / 2) + 16px);height:calc(50% + 4px);bottom:calc(100vh - 20px)}.test-calc-edge-cases{left:calc(100% - calc(50px + 10px));right:calc(100% - calc(50px - -10px))}

src/test/resources/malformed-calc.css

@@ -0,0 +1,3 @@
+.unclosed-calc {
+    bottom:calc( calc(100vh - 20px )
+}

src/test/resources/malformed-calc.css.min

@@ -0,0 +1 @@
+.unclosed-calc{bottom:calc(calc(100vh - 20px)}

src/test/resources/shape.css

@@ -0,0 +1,45 @@
+/* Example from: https://developer.mozilla.org/en-US/docs/Web/CSS/basic-shape/shape */
+.foo {
+    /* <fill-rule> */
+    clip-path: shape(nonzero from 0 0, line to 10px 10px);
+
+    /* <move-command>, <line-command>, and close */
+    offset-path: shape(from 10px 10px, move by 10px 5px, line by 20px 40%, close);
+
+    /* <hvline-command> */
+    offset-path: shape(from 10px 10px, hline by 50px, vline to 5rem);
+
+    /* <curve-command> */
+    offset-path: shape(
+            from 10px 10px,
+            curve to 80px 80px with 160px 1px / 20% 16px
+    );
+
+    /* <smooth-command> */
+    offset-path: shape(from 10px 10px, smooth to 100px 50pt);
+
+    /* <arc-command> */
+    offset-path: shape(
+            from 5% 0.5rem,
+            arc to 80px 1pt of 10% ccw large rotate 25deg
+    );
+
+    /* Using a CSS math function */
+    offset-path: shape(
+            from 5px -5%,
+            hline to 50px,
+            vline by calc(0% + 160px),
+            hline by 70.5px,
+            close,
+            vline by 60px
+    );
+
+    clip-path: shape(
+            evenodd from 10px 10px,
+            curve to 60px 20% with 40px 0,
+            smooth to 90px 0,
+            curve by -20px 60% with 10% 40px / 20% 20px,
+            smooth by -40% -10px with -10px 70px,
+            close
+    );
+}

src/test/resources/shape.css.min

@@ -0,0 +1 @@
+.foo{clip-path:shape(nonzero from 0 0,line to 10px 10px);offset-path:shape(from 10px 10px,move by 10px 5px,line by 20px 40%,close);offset-path:shape(from 10px 10px,hline by 50px,vline to 5rem);offset-path:shape(from 10px 10px,curve to 80px 80px with 160px 1px / 20% 16px);offset-path:shape(from 10px 10px,smooth to 100px 50pt);offset-path:shape(from 5% .5rem,arc to 80px 1pt of 10% ccw large rotate 25deg);offset-path:shape(from 5px -5%,hline to 50px,vline by calc(0% + 160px),hline by 70.5px,close,vline by 60px);clip-path:shape(evenodd from 10px 10px,curve to 60px 20% with 40px 0,smooth to 90px 0,curve by -20px 60% with 10% 40px / 20% 20px,smooth by -40% -10px with -10px 70px,close)}

src/test/resources/unicode.css

@@ -0,0 +1,3 @@
+.arrow::before {
+    content: "↓";
+}

src/test/resources/unicode.css.min

@@ -0,0 +1 @@
+.arrow::before{content:"↓"}