Adjust docs

Author: jxnblk

README.md

@@ -15,7 +15,7 @@ fast af css-in-js in 1kb
 const rule = cxs(`color: tomato`)
 ```
 
-CXS is a minimal CSS-in-JS solution that uses
+CXS is a minimal CSS-in-JS solution with
 an API that closely follows the native CSSStyleSheet API
 to maximize performance and reduce bloat.
 

docs/About.js

@@ -7,7 +7,7 @@ import Column from './Column'
 const About = () => (
   <section id='about'>
     <Box pt={5} pb={5}>
-      <Text f={4} bold>
+      <Text f={4}>
         CXS is a minimal CSS-in-JS solution with an API that closely follows the native CSSStyleSheet API to maximize performance and reduce bloat.
       </Text>
     </Box>

docs/Pre.js

@@ -1,10 +1,12 @@
 import cxs from 'cxs/component'
 import Text from './Text'
 
+const wrap = props => props.wrap ? { whiteSpace: 'pre-wrap' } : null
 const Pre = cxs(Text)`
   font-family: 'Roboto Mono', 'SF Mono', Menlo, monospace;
   margin: 0;
   overflow: auto;
+  ${wrap}
 `
 
 Pre.defaultProps = {

docs/Stats.js

@@ -13,6 +13,7 @@ class Stats extends React.Component {
   }
 
   componentDidMount () {
+    console.timeEnd('mount')
     const css = cxs.css
     this.setState({
       css,
@@ -25,6 +26,7 @@ class Stats extends React.Component {
 
     return (
       <Pre f={0}
+        wrap
         title={css}
         onClick={e => alert(css) }>
         CXS generated {format(bytes)} bytes of CSS to render this page.

docs/bundle.js

@@ -12,5 +12,6 @@
 <meta name='twitter:description' content='Fast af css-in-js in 1kb'>
 <meta name='twitter:image' content='http://jxnblk.com/cxs/card.png'>
 <div id=app></div>
+<script>console.time('mount')</script>
 <script src=bundle.js></script>
 <script>window.twttr = (function(d, s, id) { var js, fjs = d.getElementsByTagName(s)[0], t = window.twttr || {}; if (d.getElementById(id)) return t; js = d.createElement(s); js.id = id; js.src = "https://platform.twitter.com/widgets.js"; fjs.parentNode.insertBefore(js, fjs); t._e = []; t.ready = function(f) { t._e.push(f); }; return t; }(document, "script", "twitter-wjs"));</script>

docs/index.html

@@ -5,7 +5,7 @@
   "main": "dist/index.js",
   "scripts": {
     "prepublish": "babel src -d dist",
-    "build": "webpack -p",
+    "build": "NODE_ENV=production webpack -p",
     "start": "webpack-dev-server",
     "size": "npm run prepublish && bundlesize",
     "standard": "standard",
@@ -61,10 +61,6 @@
       "path": "./dist/component.js",
       "maxSize": "1.1 kb"
     },
-    {
-      "path": "./dist/object.js",
-      "maxSize": "2 kb"
-    },
     {
       "path": "./dist/atomic.js",
       "maxSize": "2 kb"

object.js

@@ -1,6 +1,7 @@
 import cxs from './index'
 
-const atomic = (styles, { media, child = '' } = {}) => {
+const atomic = (styles, opts = {}) => {
+  const { media, child = '' } = opts
   const classNames = []
 
   for (let key in styles) {
@@ -51,7 +52,7 @@ export const combine = (s = '') => (...args) => args
   .trim()
 
 const RE = /[^a-zA-Z0-9-_]/g
-export const clean = str => str.replace(RE, '-')
+export const clean = str => ('' + str).replace(RE, '-')
 
 export const abbrMedia = media => {
   if (!media) return ''

package.json

@@ -135,4 +135,3 @@ test('addPx adds px unit to number values', t => {
   t.is(a, '32px')
   t.is(b, 1.5)
 })
-

src/atomic.js

@@ -163,3 +163,18 @@ test('cache returns a rule object', t => {
   t.is(typeof cached, 'object')
   t.is(cached.toString(), a.toString())
 })
+
+test('keyframes', t => {
+  const rule = cxs('transform:scale(.75);opacity:.5', {
+    selector: 'from',
+    media: '@keyframes glow'
+  }).push('transform: scale(1);opacity:1', {
+    selector: 'to',
+    media: '@keyframes glow'
+  })
+  const css = cxs.css
+  t.is(typeof css, 'string')
+  t.regex(css, /@keyframes glow/)
+  t.regex(css, /glow{from{/)
+  t.regex(css, /glow{to{/)
+})

src/object.js

@@ -1,17 +1,15 @@
 const path = require('path')
+const webpack = require('webpack')
 
 const config = {
-  entry: {
-    bundle: './docs/entry.js'
-  },
+  entry: './docs/entry.js',
   output: {
-    path: path.join(__dirname, '/example'),
-    filename: '[name].js'
+    path: path.join(__dirname, '/docs'),
+    filename: 'bundle.js'
   },
   resolve: {
     alias: {
       'cxs': path.join(__dirname, 'src')
-      // 'cxs/component': path.join(__dirname, 'src')
     }
   },
 
@@ -21,9 +19,19 @@ const config = {
         test: /\.js$/,
         exclude: /node_modules/,
         loader: 'babel-loader'
+      },
+      {
+        test: /\.js$/,
+        include: /objss/,
+        loader: 'babel-loader'
       }
     ]
   },
+  plugins: [
+    new webpack.DefinePlugin({
+      'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV)
+    })
+  ],
   devServer: {
     contentBase: 'docs'
   }