186526/unpkg
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Minify CSS

Browse Source
This commit is contained in:
Michael Jackson
2016-05-03 12:54:13 -07:00
parent ff43c2cc50
commit 5b8c8e6742
4 changed files with 54 additions and 39 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
modules/StyleUtils.js Normal file
View File

@ -0,0 +1,9 @@
import fs from 'fs'
import path from 'path'
import csso from 'csso'
export const readCSS = (...args) =>
minifyCSS(fs.readFileSync(path.resolve.apply(path, args), 'utf8'))
export const minifyCSS = (css) =>
csso.minify(css).css

36
modules/components/HomePage.css Normal file
View File

@ -0,0 +1,36 @@
body {
font: 14px Helvetica, sans-serif;
line-height: 1.5;
padding: 5px 20px;
}
@media all and (min-width: 660px) {
body {
padding: 50px 20px;
}
}
header, #wrapper {
max-width: 600px;
margin: 0 auto;
}
header {
text-align: center;
}
code {
background: #eee;
}
table {
border-color: black;
border-style: solid;
border-width: 0 0 1px 1px;
}
table th, table td {
text-align: left;
vertical-align: top;
padding: 5px 7px;
border-color: black;
border-style: solid;
border-width: 1px 1px 0 0;
}

47
modules/components/HomePage.js
View File

@ -1,42 +1,11 @@
import React from 'react' import React from 'react'
import { readCSS } from '../StyleUtils'
const styles = `
body {
font: 14px Helvetica, sans-serif;
line-height: 1.5;
padding: 5px 20px;
}
@media all and (min-width: 660px) {
body {
padding: 50px 20px;
}
}
header, #wrapper {
max-width: 600px;
margin: 0 auto;
}
header {
text-align: center;
}
code {
background: #eee;
}
table {
border-color: black;
border-style: solid;
border-width: 0 0 1px 1px;
}
table th, table td {
text-align: left;
vertical-align: top;
padding: 5px 7px;
border-color: black;
border-style: solid;
border-width: 1px 1px 0 0;
}
`
const HomePage = React.createClass({ const HomePage = React.createClass({
statics: {
css: readCSS(__dirname, './HomePage.css')
},
render() { render() {
return ( return (
<html> <html>
@ -44,7 +13,7 @@ const HomePage = React.createClass({
<title>npmcdn</title> <title>npmcdn</title>
<meta name="viewport" content="width=device-width, initial-scale=1"/> <meta name="viewport" content="width=device-width, initial-scale=1"/>
<meta name="rendered-at" content={(new Date).toISOString()}/> <meta name="rendered-at" content={(new Date).toISOString()}/>
<style dangerouslySetInnerHTML={{ __html: styles }}/> <style dangerouslySetInnerHTML={{ __html: HomePage.css }}/>
</head> </head>
<body> <body>
<header> <header>
@ -54,8 +23,8 @@ const HomePage = React.createClass({
<p>npmcdn is a CDN for packages that are published via <a href="https://www.npmjs.com/">npm</a>. Use it to quickly and easily load files using a simple URL like <code>https://npmcdn.com/package@version/path/to/file</code>.</p> <p>npmcdn is a CDN for packages that are published via <a href="https://www.npmjs.com/">npm</a>. Use it to quickly and easily load files using a simple URL like <code>https://npmcdn.com/package@version/path/to/file</code>.</p>
<p>A few examples:</p> <p>A few examples:</p>
<ul> <ul>
<li><a href="/react@0.14.2/dist/react.min.js">https://npmcdn.com/react@0.14.2/dist/react.min.js</a></li> <li><a href="/react@15.0.1/dist/react.min.js">https://npmcdn.com/react@15.0.1/dist/react.min.js</a></li>
<li><a href="/react-dom@0.14.2/dist/react-dom.min.js">https://npmcdn.com/react-dom@0.14.2/dist/react-dom.min.js</a></li> <li><a href="/react-dom@15.0.1/dist/react-dom.min.js">https://npmcdn.com/react-dom@15.0.1/dist/react-dom.min.js</a></li>
<li><a href="/history@1.12.5/umd/History.min.js">https://npmcdn.com/history@1.12.5/umd/History.min.js</a></li> <li><a href="/history@1.12.5/umd/History.min.js">https://npmcdn.com/history@1.12.5/umd/History.min.js</a></li>
<li><a href="/react-router@1.0.0/umd/ReactRouter.min.js">https://npmcdn.com/react-router@1.0.0/umd/ReactRouter.min.js</a></li> <li><a href="/react-router@1.0.0/umd/ReactRouter.min.js">https://npmcdn.com/react-router@1.0.0/umd/ReactRouter.min.js</a></li>
</ul> </ul>

1
package.json
View File

@ -6,6 +6,7 @@
"babel-preset-react": "^6.5.0", "babel-preset-react": "^6.5.0",
"babel-register": "^6.7.2", "babel-register": "^6.7.2",
"cors": "^2.7.1", "cors": "^2.7.1",
"csso": "^2.0.0",
"express": "^4.13.4", "express": "^4.13.4",
"express-react-views": "^0.10.1", "express-react-views": "^0.10.1",
"npm-http-server": "^2.9.1", "npm-http-server": "^2.9.1",