Rebuild

components/App.jsx

@@ -1,10 +1,9 @@
 
 import React from 'react'
-import { find, findIndex } from 'lodash'
+import { findIndex } from 'lodash'
 import css from 'basscss.github.io/css/base.css'
-import Container from 'babel-loader!basscss.github.io/components/Container.jsx'
-import Header from 'babel-loader!basscss.github.io/components/PageHeader.jsx'
-import Footer from 'babel-loader!basscss.github.io/components/Footer.jsx'
+import Header from 'basscss.github.io/components/PageHeader.jsx'
+import Footer from 'basscss.github.io/components/Footer.jsx'
 import { CarbonAd } from 'blk'
 import { Row, Col } from 'rebass'
 import Modules from './Modules.jsx'
@@ -16,6 +15,8 @@ class App extends React.Component {
   constructor () {
     super ()
     this.selectModule = this.selectModule.bind(this)
+    this.selectAll = this.selectAll.bind(this)
+    this.selectNone = this.selectNone.bind(this)
     this.handlePropertyChange = this.handlePropertyChange.bind(this)
     this.state = {
       defaults: [],
@@ -25,7 +26,7 @@ class App extends React.Component {
 
   selectModule (e) {
     let active = this.state.activeModules
-    let modules = this.props.modules.modules
+    let modules = this.props.modules
     let index = findIndex(modules, { name: e.target.name })
     if (index > -1) {
       let activeIndex = active.indexOf(index)
@@ -41,6 +42,19 @@ class App extends React.Component {
     }
   }
 
+  selectAll (e) {
+    let active = []
+    let modules = this.props.modules
+    modules.forEach(function(mod, i) {
+      active.push(i)
+    })
+    this.setState({ activeModules: active })
+  }
+
+  selectNone (e) {
+    this.setState({ activeModules: [] })
+  }
+
   handlePropertyChange (e) {
     let defaults = this.state.defaults
     let index = findIndex(defaults, { key: e.target.name })
@@ -51,7 +65,7 @@ class App extends React.Component {
   }
 
   componentDidMount () {
-    this.setState({ defaults: this.props.modules.defaults })
+    this.setState({ defaults: this.props.defaults })
   }
 
   render () {
@@ -62,16 +76,19 @@ class App extends React.Component {
         <Header {...props}
           meta={<CarbonAd />} />
         <Row>
-          <Col sm={6} md={3}>
+          <Col sm={6} md={4}>
             <Modules {...props}
               {...state}
-              onSelect={this.selectModule} />
+              onSelect={this.selectModule}
+              selectAll={this.selectAll}
+              selectNone={this.selectNone} />
           </Col>
-          <Col sm={6} md={5}>
+          <Col sm={6} md={4}>
             <Defaults {...props}
               {...state}
               onChange={this.handlePropertyChange} />
           </Col>
+          <div className='clearfix md-hide' />
           <Col md={4}>
             <Css {...props} {...state} />
           </Col>

components/Css.jsx

@@ -1,14 +1,109 @@
 
 import React from 'react'
+//import cssnext from 'cssnext'
+import postcss from 'postcss'
+import cssImport from 'postcss-import'
+import customMedia from 'postcss-custom-media'
+import customProperties from 'postcss-custom-properties'
+import calc from 'postcss-calc'
+import colorFunction from 'postcss-color-function'
+import cssstats from 'cssstats'
+import filesize from 'filesize'
+
+let removeComments = postcss.plugin('remove-comments', function(opts) {
+  opts = opts || {}
+  return function(root) {
+    root.eachComment(function(comment) {
+      comment.removeSelf()
+    })
+  }
+})
+
+let removeRoot = postcss.plugin('remove-root', function(opts) {
+  opts = opts || {}
+  return function(root) {
+    root.eachRule(function(rule) {
+      if (rule.selector === ':root') {
+        rule.removeSelf()
+      }
+    })
+  }
+})
 
 class Css extends React.Component {
 
   render () {
+    let props = this.props
+    let modules = props.modules
+    let active = props.activeModules
+    let defaults = props.defaults
+    let defaultsObj = {}
+    defaults.forEach(function(def) {
+      defaultsObj[def.key] = def.value
+    })
+
+    let source = active.map(function(index) {
+      return modules[index].css
+    })
+
+    let compiled = postcss()
+      .use(cssImport())
+      .use(customMedia())
+      .use(customProperties({
+        variables: defaultsObj
+      }))
+      .use(calc())
+      .use(colorFunction())
+      .use(removeComments())
+      .use(removeRoot())
+      .process(source.join(' '))
+      .css
+
+    let stats = cssstats(compiled)
+
+    let css = [
+      '/*',
+      '',
+      '  Basscss',
+      '  http://basscss.com',
+      '',
+      '  ' + filesize(stats.gzipSize),
+      '  ' + stats.rules.length + ' Rules',
+      '  ' + stats.selectors.length + ' Selectors',
+      '  ' + stats.declarations.all.length + ' Declarations',
+      '  Generated with http://basscss.com/customize',
+      '',
+      '*/',
+      compiled
+    ].join('\n')
+
+    let blob = new Blob([css], { type: 'text/plain' })
+    let download = (window.URL || window.webkitURL).createObjectURL( blob )
+
+    let styles = {
+      pre: {
+        minHeight: '100vh',
+        maxHeight: '220vh',
+        margin: 0
+      }
+    }
 
     return (
       <div>
-        <h3>Transpiled CSS</h3>
-        <pre>css...</pre>
+        <div className='flex flex-center'>
+          <h3 className='flex-auto'>CSS</h3>
+          <div className=''>
+            <a href={download}
+              download='basscss-custom.css'
+              className='btn btn-primary'>
+              Download
+            </a>
+          </div>
+        </div>
+        <div className='border'>
+          <pre dangerouslySetInnerHTML={{ __html: css }}
+            style={styles.pre} />
+        </div>
       </div>
     )
   }

components/Defaults.jsx

@@ -10,6 +10,9 @@ class Defaults extends React.Component {
     return (
       <div>
         <h3>Defaults</h3>
+        <p className='h5'>
+          Note: custom property values must be valid CSS.
+        </p>
         <Row>
           {defaults.map(function(def, i) {
             return (

components/Module.jsx

@@ -0,0 +1,39 @@
+
+import React from 'react'
+
+class Module extends React.Component {
+
+  render () {
+    let props = this.props
+    let mod = props.module
+    let optional = mod.optional ? <span className='h6 regular black'>Optional</span> : false
+    let styles = {
+      label: {
+        cursor: 'pointer'
+      }
+    }
+    return (
+      <label className={[
+          'py1 flex flex-center',
+          (props.checked ? 'bg-aqua' : '')
+        ].join(' ')}
+        style={styles.label}>
+        <div className='mr1'>
+          <input type='checkbox'
+            name={mod.name}
+            checked={props.checked}
+            onChange={props.onSelect} />
+        </div>
+        <div className='flex-auto'>
+          <h4 className='m0'>{mod.name} {optional}</h4>
+          <div className='h5'>{mod.description}</div>
+          <div className='h6'>v{mod.version}</div>
+        </div>
+      </label>
+    )
+  }
+
+}
+
+export default Module
+

components/Modules.jsx

@@ -1,34 +1,47 @@
 
 import React from 'react'
 import { findIndex } from 'lodash'
+import { Btn } from 'rebass'
+import Module from './Module.jsx'
 
 class Modules extends React.Component {
 
   render () {
     let props = this.props
-    let mods = props.modules.modules
+    let mods = props.modules
     let active = props.activeModules
+
+    let styles = {
+      btn: {
+        padding: '4px 4px'
+      }
+    }
+
     return (
       <div>
-        <h2>Modules</h2>
+        <div className='flex flex-baseline'>
+          <h3 className='flex-auto'>Modules</h3>
+          <div>
+            <button className='h6 btn blue'
+              style={styles.btn}
+              onClick={props.selectAll}>
+              Select All
+            </button>
+            <button className='h6 btn blue'
+              style={styles.btn}
+              onClick={props.selectNone}>
+              Select None
+            </button>
+          </div>
+        </div>
         <ul className='list-reset border-top'>
           {mods.map(function(mod, i) {
             let checked = active.indexOf(i) > -1
             return (
               <li key={i} className='border-bottom'>
-                <label className='py1 flex flex-center'>
-                  <div className='mr1'>
-                    <input type='checkbox'
-                      name={mod.name}
-                      checked={checked}
-                      onChange={props.onSelect} />
-                  </div>
-                  <div className='flex-auto'>
-                    <h4 className='m0'>{mod.name}</h4>
-                    <div className='h5'>{mod.description}</div>
-                    <div className='h6'>v{mod.version}</div>
-                  </div>
-                </label>
+                <Module {...props}
+                  module={mod}
+                  checked={checked} />
               </li>
             )
           })}

data.js

@@ -2,10 +2,16 @@
 import pkg from 'basscss/package.json'
 import modules from './data.json'
 
+let optionals = modules.optionals.map(function(mod) {
+  mod.optional = true
+  return mod
+})
+
 export default {
   title: 'Customize',
   path: '/customize',
   version: pkg.version,
-  modules: modules,
+  modules: modules.modules.concat(optionals),
+  defaults: modules.defaults
 }
 

package.json

@@ -4,6 +4,7 @@
   "description": "Web app for custom Basscss builds",
   "scripts": {
     "data": "node scripts/data",
+    "prod": "webpack -p --progress --colors",
     "dev": "webpack-dev-server --progress --colors",
     "start": "npm run data && npm run dev"
   },
@@ -15,11 +16,19 @@
     "basscss.github.io": "github:basscss/basscss.github.io",
     "blk": "^3.1.0",
     "css-loader": "^0.15.1",
+    "cssnext": "^1.8.0",
     "cssnext-loader": "^1.0.1",
+    "cssstats": "^1.10.0",
+    "filesize": "^3.1.2",
     "get-module-info": "^1.3.0",
     "json-loader": "^0.5.2",
     "lodash": "^3.10.0",
     "postcss": "^4.1.14",
+    "postcss-calc": "^4.1.0",
+    "postcss-color-function": "^1.3.0",
+    "postcss-custom-media": "^4.1.0",
+    "postcss-custom-properties": "^4.0.0",
+    "postcss-import": "^6.0.0",
     "react": "^0.13.3",
     "rebass": "^0.1.4",
     "style-loader": "^0.12.3",

webpack.config.js

@@ -10,14 +10,19 @@ module.exports = {
 
   module: {
     loaders: [
-      { test: /(\.js$|\.jsx?$)/, loader: 'babel-loader' },
+      { test: /\.js$/, exclude: /node_modules/, loader: 'babel-loader' },
+      { test: /\.jsx$/, loader: 'babel-loader' },
       { test: /\.json$/, loader: 'json-loader' },
       { test: /\.css$/, loader: 'style-loader!css-loader!cssnext-loader' }
     ]
   },
 
   cssnext: {
     compress: true
+  },
+
+  node: {
+    fs: 'empty'
   }
 
 }