add support for using less in codepen examples

Author: nlundquist

codepen-data.js

@@ -1,5 +1,6 @@
 var scriptRegExp = /<script\s([^>]+)>([\s\S]*?)<\/script>/ig;
 var styleRegExp = /<style>([\s\S]*?)<\/style>/i;
+var lessRegExp = /<style type="text\/less">([\s\S]*?)<\/style>/i;
 var templateRegExp = /<template\s?([^>]+)?>([\s\S]*?)<\/template>/ig;
 var moduleTest = /type=["']([\w\/]+)["']/;
 var srcTest = /src=/;
@@ -22,12 +23,18 @@ var types = {
 			// It doesn't have a src, so we assume this has a body
 			else if (matchTest) {
 				HTML = HTML.replace(match, "").trim();
-				var CSS;
+				var CSS, PRECSS;
 				var styleResults = HTMLwithoutTemplates.match(styleRegExp);
 				if (styleResults) {
 					HTML = HTML.replace(styleResults[0], "").trim();
 					CSS = styleResults[1].trim();
 				}
+				var lessResults = HTMLwithoutTemplates.match(lessRegExp);
+				if (lessResults) {
+					HTML = HTML.replace(lessResults[0], "").trim();
+					CSS = lessResults[1].trim();
+					PRECSS = 'less';
+				}
 				if (types[matchTest[1]]) {
 					result = types[matchTest[1]](code.trim());
 				} else {
@@ -39,6 +46,10 @@ var types = {
 				}
 				if (CSS) {
 					result.css = CSS;
+
+					if (PRECSS) {
+						result.css_pre_processor = PRECSS;
+					}
 				}
 			}
 		});

test.js

@@ -115,6 +115,22 @@ describe("bit-docs-html-codepen-link", function() {
 		assert.equal(data.js_pre_processor, 'babel');
 	});
 
+	it("is able to parse less in html", function() {
+		var data = codepenData.html(`
+			<style type="text/less">
+				@custom-color: #454545;
+			</style>
+			<span>Hello.</span>
+			<script type="module">
+				function greeter(person) { return "Hello, " + person; }
+			</script>
+		`);
+		console.log(JSON.stringify(data));
+		assert.equal(data.css.trim(), '@custom-color: #454545;');
+		assert.equal(data.css_pre_processor, 'less');
+	});
+
+
 	it.skip("is able to create external js", function(){
 		var data = codepenData.html(`
 			<script src="https://cdnjs.cloudflare.com/ajax/libs/rxjs/6.2.1/rxjs.umd.js" codepen-external></script>