build: Add cssPrune/cssKeep options

Author: lauriro

cli.js

@@ -24,6 +24,8 @@ var fs = require("fs")
 		banner: "",
 		cat: true,
 		assets: "{h}.{ext}",
+		cssKeep: ["is-"],
+		cssPrune: true,
 		fetch: true,
 		jsmin: "",
 		min: "",

lib/build.js

@@ -12,6 +12,8 @@
 //-    --out           Output file
 //-    --readme        Replace readme tags in file
 //-    --ver           Override version string
+//-    --cssPrune      Remove unused CSS classes (default: true)
+//-    --cssKeep       Class prefixes to always keep (default: is)
 //-    --worker        Update worker file
 //-
 //-  Examples
@@ -36,7 +38,7 @@ var child = require("child_process")
 }
 , httpRe = /^https?(?=:)/
 , cssOpts = {
-	color: true, import: true,
+	calc: true, color: true, import: true,
 	prefix: {
 		// Need for -moz/ms/o- have dropped before 2020. Properties that still needed -webkit- around 2020:
 		"appearance": ["-webkit-"],
@@ -47,6 +49,7 @@ var child = require("child_process")
 }
 , jsMinCmd
 , fileHashes
+, classes
 , linked = module.filename.indexOf(process.cwd()) !== 0
 
 if (linked) {
@@ -187,6 +190,7 @@ function html(opts, next) {
 	} catch(e) {}
 
 	$$("[exclude]").forEach(remove)
+	classes = new Set()
 
 	following("cat", "cat-drop", function(el, siblings) {
 		if (opts.cat === false) {
@@ -273,13 +277,25 @@ function html(opts, next) {
 		write("", cacheFile, JSON.stringify(cache, null, 2))
 	}
 
+	cssOpts.root = inDir
+	cssOpts.url = urlFn
+	if (opts.cssPrune !== false) {
+		$$("[class]").forEach(function(el) {
+			el.className.split(/\s+/).forEach(function(c) { if (c) classes.add(c) })
+		})
+		$$("script[type='ui'][src]").forEach(function(el) {
+			if (!el._txt && !el.textContent.trim()) {
+				parseView(cli.readFile(path.resolve(inDir, getSrc(el))), "ui", {}, null)
+			}
+		})
+		var keep = opts.cssKeep && opts.cssKeep.length ? new RegExp("^(" + opts.cssKeep.join("|") + ")") : null
+		cssOpts.prune = { keep: classes, keepRe: keep }
+	}
+
 	$$("[src]:not([src^='data:']),[href]:not(a,base,[href^='data:'])").forEach(function(el) {
 		if (el._txt) return
 		cpOut(el)
 	})
-
-	cssOpts.root = inDir
-	cssOpts.url = urlFn
 	next(doc.toString({ css: cssOpts }))
 
 	function assetUrl(u) {
@@ -451,9 +467,13 @@ function view2js(content) {
 
 function cssMin(str, urlFn) {
 	var sheet = new CSSStyleSheet()
+	, prune = cssOpts.prune
 	sheet.replaceSync(str)
 	cssOpts.url = urlFn
-	return CSS.minify(sheet, cssOpts)
+	cssOpts.prune = null
+	var out = CSS.minify(sheet, cssOpts)
+	cssOpts.prune = prune
+	return out
 }
 
 function parseView(content, extTo, lastMinEl, urlFn) {
@@ -475,6 +495,10 @@ function parseView(content, extTo, lastMinEl, urlFn) {
 		} else if (map.hasOwnProperty(line)) last = i - 1
 	}
 
+	if (classes) arr.forEach(function(line) {
+		line.replace(/\.([-\w]+)/g, function(_, c) { classes.add(c) })
+	})
+
 	var out = ""
 	if ((line = map["%css"])) {
 		if (lastMinEl.css) {
@@ -504,10 +528,6 @@ function viewMin(str, attrs) {
 	, templateRe = /([ \t]*)(%?)((?:("|')(?:\\\4|.)*?\4|[-\w:.#[\]]=?)*)[ \t]*([>^;@|\\\/]|!?=|)(([\])}]?).*?([[({]?))(?=\x1f|\n|$)+/g
 	, parent = 0
 	, stack = [-1]
-	, jsBlock = -1
-	, jsBlockBuf = ""
-	, jsBlockPrefix = ""
-	, jsBlockIndent = ""
 	, joinBindingsRe = /(\n +)([;^][^\n]+)\1(?=[;^])/g
 	, joinSelectorRe = /(\n +)([\w:.#[](?:[^"' \n]|("|')(?:\\\3|(?!\3).)*?\3)*)\1 (?=[;^])/g
 
@@ -529,16 +549,7 @@ function viewMin(str, attrs) {
 			}
 			stack.shift()
 		}
-		if (jsBlock >= 0 && q <= jsBlock) {
-			jsBlockBuf += "\n" + all.slice(indent.length)
-			out[parent] += jsBlockIndent + jsBlockPrefix + clean(jsBlockBuf) + "\n"
-			jsBlock = -1
-			return
-		}
-
-		if (jsBlock >= 0) {
-			jsBlockBuf += "\n" + all.slice(indent.length)
-		} else if (!isString(out[parent])) {
+		if (!isString(out[parent])) {
 			out[parent]._j += all + "\n"
 		} else if (plugin && (name === "todo def")) {
 			out[parent] += all
@@ -553,16 +564,8 @@ function viewMin(str, attrs) {
 		} else {
 			if (op === "/") return
 			all = all.slice(indent.length)
-			if (mapStart && (op === ";" || op === "^" || op === "@")) {
-				jsBlock = q
-				jsBlockIndent = " ".repeat(indent.length)
-				name = all.lastIndexOf("function")
-				jsBlockPrefix = name > 0 ? clean(all.slice(0, name)) + " " : clean(all.slice(0, all.lastIndexOf(mapStart)))
-				jsBlockBuf = all.slice(name > 0 ? name : all.lastIndexOf(mapStart))
-			} else {
-				if (op === ";" || op === "^" || op === "@") all = clean(all)
-				out[parent] += " ".repeat(indent.length) + all + "\n"
-			}
+			if (op === ";" || op === "^" || op === "@") all = clean(all)
+			out[parent] += " ".repeat(indent.length) + all + "\n"
 		}
 	}
 }

package.json

@@ -22,7 +22,7 @@
     "test": "node ./cli.js t test/index.js"
   },
   "dependencies": {
-    "@litejs/dom": "26.4.0"
+    "@litejs/dom": "26.4.3"
   },
   "bin": {
     "lj": "./cli.js"

test/build.js

@@ -9,7 +9,6 @@ describe("build", function() {
 	cli.rmrf("test/data/temp")
 
 	describe("file {0}", [
-		["build-cp"],
 		["build-inline"],
 		["build-simple"],
 		["build-ui-css"],

test/data/build-cp/a.css

@@ -37,6 +37,7 @@
 		</style>
 	</head>
 	<body >
+		<p class="base grid a b c"></p>
 		<script src="lib1.js" cat="dummy/load.js" inline></script>
 		<script src="a.js" cat></script>
 		<script cat>var b = 2</script>

test/data/build-cp/dev.html

@@ -0,0 +1,4 @@
+	img {
+		background: url("a.svg");
+	}
+