Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Step 3 — Add LESS compilation #4

Open
wants to merge 1 commit into
base: 02-ie11
Choose a base branch
from
Open

Step 3 — Add LESS compilation #4

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
15 changes: 14 additions & 1 deletion package.json
View file
Open in desktop
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
View file
Open in desktop
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
View file
Open in desktop
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
View file
Open in desktop

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
View file
Open in desktop
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
View file
Open in desktop
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
View file
Open in desktop
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