Skip to content

Commit

Permalink
Add LESS compilation
Browse files Browse the repository at this point in the history
  • Loading branch information
Daniel Spitzer committed Apr 22, 2018
1 parent 16a6b59 commit e0c3df4
Show file tree
Hide file tree
Showing 8 changed files with 347 additions and 48 deletions.
15 changes: 14 additions & 1 deletion package.json
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down
14 changes: 7 additions & 7 deletions packages.html
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand Down Expand Up @@ -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,
Expand All @@ -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
Expand Down
21 changes: 10 additions & 11 deletions src/App.css
Original file line number Diff line number Diff line change
@@ -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);
}
}
1 change: 1 addition & 0 deletions src/App.css.map

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

8 changes: 4 additions & 4 deletions src/App.js
Original file line number Diff line number Diff line change
Expand Up @@ -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 />
Expand Down
31 changes: 31 additions & 0 deletions src/App.less
Original file line number Diff line number Diff line change
@@ -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);
}
}
16 changes: 8 additions & 8 deletions src/__snapshots__/App.test.js.snap
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand All @@ -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>
Expand Down
Loading

0 comments on commit e0c3df4

Please sign in to comment.