Add LESS compilation

Daniel Spitzer · Daniel Spitzer · commit 976830f14865 · 2018-04-22T14:35:40.000+02:00
diff --git a/package.json b/package.json
@@ -8,15 +8,28 @@
     "react-scripts": "1.1.4"
   },
   "scripts": {
-    "start": "node scripts/start",
+    "prestart": "npm run build-css",
+    "start": "run-p -ncr watch-css start-script",
+    "start-script": "node scripts/start",
+
+    "prebuild": "npm run build-css",
     "build": "node scripts/build",
+
+    "pretest": "npm run build-css",
     "test": "node scripts/test --env=jsdom",
+
     "eject": "react-scripts eject",
+
+    "build-css": "node-less-chokidar src",
+    "watch-css": "node-less-chokidar src --watch",
+
     "preanalyze": "npm run build",
     "analyze": "source-map-explorer --html build/static/js/main.* > packages.html"
   },
   "devDependencies": {
     "module-alias": "^2.0.6",
+    "node-less-chokidar": "^0.1.2",
+    "npm-run-all": "^4.1.2",
     "preact-compat-enzyme": "^0.2.5",
     "preact-render-to-json": "^3.6.6",
     "preact-test-utils": "^0.1.3",
diff --git a/packages.html b/packages.html
@@ -2,7 +2,7 @@
 <head>
 <meta charset="UTF-8">
 <link rel="stylesheet" href="data:text/css;base64,LyogVmVuZG9yZWQgZnJvbSBodHRwczovL2dpdGh1Yi5jb20vcm1taC93ZWJ0cmVlbWFwL2Jsb2IvOWZhMGMwNjZhMTBlYTQ0MDJkOTYwYjBjNmMxYTQzMjg0NmFjN2ZjNC93ZWJ0cmVlbWFwLmNzcyAqLwoKLndlYnRyZWVtYXAtbm9kZSB7CiAgLyogUmVxdWlyZWQgYXR0cmlidXRlcy4gKi8KICBwb3NpdGlvbjogYWJzb2x1dGU7CiAgb3ZlcmZsb3c6IGhpZGRlbjsgICAvKiBUbyBoaWRlIG92ZXJsb25nIGNhcHRpb25zLiAqLwogIGJhY2tncm91bmQ6IHdoaXRlOyAgLyogTm9kZXMgbXVzdCBiZSBvcGFxdWUgZm9yIHpJbmRleCBsYXllcmluZy4gKi8KICBib3JkZXI6IHNvbGlkIDFweCBibGFjazsgIC8qIENhbGN1bGF0aW9ucyBhc3N1bWUgMXB4IGJvcmRlci4gKi8KCiAgLyogT3B0aW9uYWw6IENTUyBhbmltYXRpb24uICovCiAgdHJhbnNpdGlvbjogdG9wICAgIDAuM3MsCiAgICAgICAgICAgICAgbGVmdCAgIDAuM3MsCiAgICAgICAgICAgICAgd2lkdGggIDAuM3MsCiAgICAgICAgICAgICAgaGVpZ2h0IDAuM3M7Cn0KCi8qIE9wdGlvbmFsOiBoaWdobGlnaHQgbm9kZXMgb24gbW91c2VvdmVyLiAqLwoud2VidHJlZW1hcC1ub2RlOmhvdmVyIHsKICBiYWNrZ3JvdW5kOiAjZWVlOwp9CgovKiBPcHRpb25hbDogRGlmZmVyZW50IGJhY2tncm91bmQgY29sb3JzIGRlcGVuZGluZyBvbiBzeW1ib2wuICovCi53ZWJ0cmVlbWFwLXN5bWJvbC1ic3MgewogIGJhY2tncm91bmQ6ICM2NkMyQTU7Cn0KLndlYnRyZWVtYXAtc3ltYm9sLWRhdGEgewogIGJhY2tncm91bmQ6ICNGQzhENjI7Cn0KLndlYnRyZWVtYXAtc3ltYm9sLXJlYWQtb25seV9kYXRhIHsKICBiYWNrZ3JvdW5kOiAjOERBMENCOwp9Ci53ZWJ0cmVlbWFwLXN5bWJvbC1jb2RlIHsKICBiYWNrZ3JvdW5kOiAjRTc4QUMzOwp9Ci53ZWJ0cmVlbWFwLXN5bWJvbC13ZWFrX3N5bWJvbCB7CiAgYmFja2dyb3VuZDogI0E2RDg1NDsKfQoud2VidHJlZW1hcC1zeW1ib2wtYnNzLndlYnRyZWVtYXAtYWdncmVnYXRlIHsKICBiYWNrZ3JvdW5kOiAjQjNFMkNEOwp9Ci53ZWJ0cmVlbWFwLXN5bWJvbC1kYXRhLndlYnRyZWVtYXAtYWdncmVnYXRlIHsKICBiYWNrZ3JvdW5kOiAjRkRDREFDOwp9Ci53ZWJ0cmVlbWFwLXN5bWJvbC1yZWFkLW9ubHlfZGF0YS53ZWJ0cmVlbWFwLWFnZ3JlZ2F0ZSB7CiAgYmFja2dyb3VuZDogI0NCRDVFODsKfQoud2VidHJlZW1hcC1zeW1ib2wtY29kZS53ZWJ0cmVlbWFwLWFnZ3JlZ2F0ZSB7CiAgYmFja2dyb3VuZDogI0Y0Q0FFNDsKfQoud2VidHJlZW1hcC1zeW1ib2wtd2Vha19zeW1ib2wud2VidHJlZW1hcC1hZ2dyZWdhdGUgewogIGJhY2tncm91bmQ6ICNFNkY1Qzk7Cn0KCiNsZWdlbmQgPiAqIHsKICBib3JkZXI6IHNvbGlkIDFweCAjNDQ0Owp9CgovKiBPcHRpb25hbDogRGlmZmVyZW50IGJvcmRlcnMgZGVwZW5kaW5nIG9uIGxldmVsLiAqLwoud2VidHJlZW1hcC1sZXZlbDAgewogIGJvcmRlcjogc29saWQgMXB4ICM0NDQ7Cn0KLndlYnRyZWVtYXAtbGV2ZWwxIHsKICBib3JkZXI6IHNvbGlkIDFweCAjNjY2Owp9Ci53ZWJ0cmVlbWFwLWxldmVsMiB7CiAgYm9yZGVyOiBzb2xpZCAxcHggIzg4ODsKfQoud2VidHJlZW1hcC1sZXZlbDMgewogIGJvcmRlcjogc29saWQgMXB4ICNhYWE7Cn0KLndlYnRyZWVtYXAtbGV2ZWw0IHsKICBib3JkZXI6IHNvbGlkIDFweCAjY2NjOwp9CgovKiBPcHRpb25hbDogc3R5bGluZyBvbiBub2RlIGNhcHRpb25zLiAqLwoud2VidHJlZW1hcC1jYXB0aW9uIHsKICBmb250LWZhbWlseTogc2Fucy1zZXJpZjsKICBmb250LXNpemU6IDExcHg7CiAgcGFkZGluZzogMnB4OwogIHRleHQtYWxpZ246IGNlbnRlcjsKfQoKLyogT3B0aW9uYWw6IHN0eWxpbmcgb24gY2FwdGlvbnMgb24gbW91c2UgaG92ZXIuICovCi8qLndlYnRyZWVtYXAtbm9kZTpob3ZlciA+IC53ZWJ0cmVlbWFwLWNhcHRpb24gewogIHRleHQtZGVjb3JhdGlvbjogdW5kZXJsaW5lOwp9Ki8K">
-<title>build/static/js/main.d722544c.js - Source Map Explorer</title>
+<title>build/static/js/main.62a3ad43.js - Source Map Explorer</title>
 
 <style>
 html, body {
@@ -43,15 +43,15 @@
 
 <script>
 var tree = {
-  "../static/js/main.d722544c.js": 2124,
-  "../webpack/bootstrap 37631ed09a0f3e7fb3b8": 449,
+  "../static/js/main.62a3ad43.js": 2124,
+  "../webpack/bootstrap d8b6b2b453aa261c567a": 449,
   "../node_modules/preact-compat/dist/preact-compat.es.js": 9092,
-  "../node_modules/promise/lib/core.js": 1842,
+  "../node_modules/react-scripts/node_modules/promise/lib/core.js": 1842,
   "../node_modules/react-scripts/config/polyfills.js": 92,
-  "../node_modules/promise/lib/rejection-tracking.js": 1169,
+  "../node_modules/react-scripts/node_modules/promise/lib/rejection-tracking.js": 1169,
   "../node_modules/asap/browser-raw.js": 645,
   "../node_modules/webpack/buildin/global.js": 146,
-  "../node_modules/promise/lib/es6-extensions.js": 1186,
+  "../node_modules/react-scripts/node_modules/promise/lib/es6-extensions.js": 1186,
   "../node_modules/whatwg-fetch/fetch.js": 7254,
   "../node_modules/object-assign/index.js": 923,
   "index.js": 88,
@@ -62,7 +62,7 @@
   "../node_modules/fbjs/lib/invariant.js": 374,
   "../node_modules/prop-types/lib/ReactPropTypesSecret.js": 59,
   "../node_modules/preact/dist/preact.esm.js": 8488,
-  "App.js": 482,
+  "App.js": 466,
   "logo.svg": 48,
   "registerServiceWorker.js": 1269,
   "<unmapped>": 42
diff --git a/src/App.css b/src/App.css
@@ -1,28 +1,27 @@
 .App {
   text-align: center;
 }
-
-.App-logo {
+.App .logo {
   animation: App-logo-spin infinite 20s linear;
   height: 80px;
 }
-
-.App-header {
+.App .header {
   background-color: #222;
   height: 150px;
   padding: 20px;
   color: white;
 }
-
-.App-title {
+.App .title {
   font-size: 1.5em;
 }
-
-.App-intro {
+.App .intro {
   font-size: large;
 }
-
 @keyframes App-logo-spin {
-  from { transform: rotate(0deg); }
-  to { transform: rotate(360deg); }
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
 }
diff --git a/src/App.css.map b/src/App.css.map
diff --git a/src/App.js b/src/App.js
@@ -13,11 +13,11 @@ class App extends Component {
 	render() {
 		return (
 			<div className="App">
-				<header className="App-header">
-					<img src={logo} className="App-logo" alt="logo" />
-					<h1 className="App-title">Welcome to React</h1>
+				<header className="header">
+					<img src={logo} className="logo" alt="logo" />
+					<h1 className="title">Welcome to React</h1>
 				</header>
-				<p className="App-intro">
+				<p className="intro">
 					To get started, edit <code>src/App.js</code> and save to reload.
 				</p>
 				<Thing />
diff --git a/src/App.less b/src/App.less
@@ -0,0 +1,31 @@
+.App {
+	text-align: center;
+	.logo {
+		animation: App-logo-spin infinite 20s linear;
+		height: 80px;
+	}
+
+	.header {
+		background-color: #222;
+		height: 150px;
+		padding: 20px;
+		color: white;
+	}
+
+	.title {
+		font-size: 1.5em;
+	}
+
+	.intro {
+		font-size: large;
+	}
+}
+
+@keyframes App-logo-spin {
+	from {
+		transform: rotate(0deg);
+	}
+	to {
+		transform: rotate(360deg);
+	}
+}
diff --git a/src/__snapshots__/App.test.js.snap b/src/__snapshots__/App.test.js.snap
@@ -5,21 +5,21 @@ exports[`can render into snapshots 1`] = `
   class="App"
 >
   <header
-    class="App-header"
+    class="header"
   >
     <img
       alt="logo"
-      class="App-logo"
+      class="logo"
       src="logo.svg"
     />
     <h1
-      class="App-title"
+      class="title"
     >
       Welcome to React
     </h1>
   </header>
   <p
-    class="App-intro"
+    class="intro"
   >
     To get started, edit 
     <code>
@@ -38,21 +38,21 @@ exports[`can shallow render into snapshots 1`] = `
   class="App"
 >
   <header
-    class="App-header"
+    class="header"
   >
     <img
       alt="logo"
-      class="App-logo"
+      class="logo"
       src="logo.svg"
     />
     <h1
-      class="App-title"
+      class="title"
     >
       Welcome to React
     </h1>
   </header>
   <p
-    class="App-intro"
+    class="intro"
   >
     To get started, edit 
     <code>
diff --git a/yarn.lock b/yarn.lock
