some tests, misc

Author: threepointone

examples/css.js

@@ -1,44 +1,41 @@
 // inline css prop
 
 import React from 'react'
-
-
-import { cssFor, merge } from '../src'
-import { css } from '../src/css'
+import { cssFor, merge } from 'glamor'
+import { css } from 'glamor/css'
 
 function log(x) {
   console.log((x || ''), this) // eslint-disable-line no-console
   return this
 }
 
-  
+
 let someTag = '.xyz:hover'
 
 let rule = css`
-  color: yellow; /* 'real' css syntax */
-  /* pseudo classes */
-  ${css`color: greenish`}
+  color: yellow;
   :hover {
-    /* just javascript */
+    /* with interpolations */
     color: ${ Math.random() > 0.5 ? 'red' : 'blue' };
   }
+
   & > h1 { color: purple }
-  /* contextual selectors */
   html.ie9 & ${someTag} { padding: 300px }
-  /* compose with objects */
-  /* or more rules */
-  /* media queries */
+
+  /* and composition */
+  ${css`color: greenish`}
+
   @media (min-width: 300px) {
     color: orange;
     border: 1px ${'solid'} blue;
     ${{ color: 'brown' }}
-    /* increase specificity */
     && {
       color: blue;
       ${{ color: 'browner' }}
     }
   }
 `
+
 export const App = () => <div className={rule}>
   ...
 </div>

perf/script.js

@@ -1,3 +1,21 @@
+// hashes per second 
+
+// sheet inserts per second 
+// 
+
+
+// unique rules per second - 1kv
+// unique rules per second - complicated objects 
+// merge( simple / complicated) - small / large batches
+// autoprefix rules per second 
+// - without plugin 
+// - with plugin, no affected keys 
+// - with plugin, affected keys 
+// - browser specific perfs?
+
+// selector performance - growth rate from few to many 
+
+
 // /* eslint-disable no-console */
 
 // import React from 'react'

src/autoprefix.js

@@ -12,7 +12,7 @@ function includes(obj, search) {
 }
 
 function values(obj) {
-  return Object.keys(obj).map(function (key) {return obj[key] })
+  return Object.keys(obj).map(key => obj[key])
 }
 
 let webkitPrefix = 'Webkit'

src/css/README.md

@@ -1,13 +1,18 @@
 css
 ---
 
+[work in progress]
+
 tl:dr; 
   - you can now write 'real' css in your javascript
-  - with syntax highlighting and linting (via [styled components'](https://github.com/styled-components/styled-components) work)
+  - with syntax highlighting and linting
   - that can be precompiled / extracted 
-  - all glamor goodies apply 
+  - glamor goodies apply 
 
 ```jsx
+import { css } from 'glamor/lib/css'
+
+
 let rule = css`
   color: red;
   font-family: helvetica, sans-serif
@@ -61,13 +66,22 @@ let rule = css`
 `
 ```
 
+syntax highlighting 
+---
+atom - via [language-babel](https://github.com/styled-components/styled-components#syntax-highlighting)
+sublime text - [open PR](https://github.com/babel/babel-sublime/pull/289)
+
+linting
+---
+via [stylelint-processor-styled-components](https://github.com/styled-components/stylelint-processor-styled-components)
+
 
 babel plugin
 ---
 
-While the css literal syntax is great for developing, it nearly doubles the library size, 
-and is slower than we'd like for production. By using the babel plugin, we can strip out the tagged literal syntax,
-and replaces with a glamor friendly json form. everybody wins! this - 
+While the css literal syntax is great for DX, it's slower / heavier 
+than we'd like for runtime. The babel plugin replaces the inline css with a 
+glamor friendly json form. Everybody wins! This - 
 ```jsx
 css` color: red `
 ```
@@ -77,13 +91,19 @@ css({ color: 'red' })
 ```
 eliminating the need for the css parser in the js bundle. wowzah.
 
+To use, add 'glamor/lib/css/babel' to the `plugins` field in your babel config. 
+
+
 
 todo
+---
 
+- move to [rework](https://github.com/reworkcss/css)/anything else for parsing 
 - direct selectors `> h1 {...}`
-- attribute selectors 
 - match more of the css spec (currently ~2.1)
+- leading comments
 - fallback values
 - more interpolation points
 - better parsing errors
 - tests!!!
+- guidance for difference types of 'static' css extraction

src/css/babel.js

@@ -8,7 +8,7 @@
 // print back, replacing stubs with interpolations
 // tada?
 
-// let template = require('babel-template')
+// todo - custom function instead of merge
 let { parse } = require('./spec.js')
 
 function convert(node, ctx, interpolated) {
@@ -79,8 +79,8 @@ let conversions = {
   PseudoSelector(node, ctx) {
     return ':' + node.value
   },
-  AttributeSelector() {
-
+  AttributeSelector(node, ctx) {
+    return `[${node.attribute}${node.operator ? node.operator + node.value : ''}]`
   },
   Function() {
 

src/css/index.js

@@ -67,8 +67,8 @@ export const conversions = {
   PseudoSelector(node, ctx) {
     return ':' + node.value
   },
-  AttributeSelector() {
-
+  AttributeSelector(node, ctx) {
+    return `[${node.attribute}${node.operator ? node.operator + node.value : ''}]`
   },
   Function() {
 
@@ -103,8 +103,12 @@ export const conversions = {
   }
 }
 
-
 export function css(strings, ...values) {
+  return merge(_css(strings, ...values))
+}
+
+export function _css(strings, ...values) {
+
   let stubs = {}, ctr = 0
   strings = strings.reduce((arr, x, i) => {
     arr.push(x)
@@ -120,5 +124,5 @@ export function css(strings, ...values) {
 
 
   let parsed = parse(strings)
-  return merge(convert(parsed, { stubs }))
+  return convert(parsed, { stubs })
 }

src/css/spec.js

@@ -167,7 +167,12 @@ stubs = stubsHead:stub
       };
     }
 
-stub = stub_id:(S_ P U R "-" num) S*  { return { type:'Stub', id: stub_id.join('').trim() } }
+stub = stub_id:(S_ P U R "-" num) S*  { 
+    return { 
+      type:'Stub', 
+      id: stub_id.join('').trim() 
+      } 
+    }
 
 contextual
   = AMP { return { type: 'Contextual' } }

src/css/spec.pegjs

@@ -26,7 +26,7 @@ plugins.keyframes = new PluginSet(prefixes)
 
 // define some constants
 const isBrowser = typeof window !== 'undefined'
-const isDev = (x => (x === 'development') || !x)(process.env.NODE_ENV)
+const isDev = (process.env.NODE_ENV === 'development') || !process.env.NODE_ENV
 const isTest = process.env.NODE_ENV === 'test'
 
 /**** simulations  ****/

src/index.js

@@ -24,8 +24,8 @@ styleSheet.flush()
 
 */
 
-function last() {
-  return this[this.length -1]
+function last(arr) {
+  return arr[arr.length -1]
 }
 
 function sheetForTag(tag) {
@@ -42,7 +42,7 @@ function sheetForTag(tag) {
 }
 
 const isBrowser = typeof window !== 'undefined' 
-const isDev = (x => (x === 'development') || !x)(process.env.NODE_ENV)
+const isDev = (process.env.NODE_ENV === 'development') || (!process.env.NODE_ENV) //(x => (x === 'development') || !x)(process.env.NODE_ENV)
 const isTest = process.env.NODE_ENV === 'test' 
 
 const oldIE = (() => {  
@@ -74,7 +74,7 @@ export class StyleSheet {
     this.ctr = 0
   }
   getSheet() {
-    return sheetForTag(this.tags::last())  
+    return sheetForTag(last(this.tags))  
   }
   inject() {
     if(this.injected) {
@@ -129,7 +129,7 @@ export class StyleSheet {
       //   this.tags::last().styleSheet.cssText+= rule
       // }
       else{
-        this.tags::last().appendChild(document.createTextNode(rule))
+        last(this.tags).appendChild(document.createTextNode(rule))
       }      
     }
     else{
@@ -143,42 +143,44 @@ export class StyleSheet {
     }
     return this.ctr -1
   }
-  _replace(index, rule) {
-    // this weirdness for perf, and chrome's weird bug 
-    // https://stackoverflow.com/questions/20007992/chrome-suddenly-stopped-accepting-insertrule
-    try {  
-      let sheet = this.getSheet()        
-      sheet.deleteRule(index) // todo - correct index here     
-      sheet.insertRule(rule, index)
-    }
-    catch(e) {
-      if(isDev) {
-        // might need beter dx for this 
-        console.warn('whoops, problem replacing rule', rule) //eslint-disable-line no-console
-      }          
-    }          
-
-  }
-  replace(index, rule) {
-    if(isBrowser) {
-      if(this.isSpeedy && this.getSheet().insertRule) {
-        this._replace(index, rule)
-      }
-      else {
-        let _slot = Math.floor((index  + this.maxLength) / this.maxLength) - 1        
-        let _index = (index % this.maxLength) + 1
-        let tag = this.tags[_slot]
-        tag.replaceChild(document.createTextNode(rule), tag.childNodes[_index])
-      }
-    }
-    else {
-      this.sheet.cssRules = [ ...this.sheet.cssRules.slice(0, index), { cssText: rule }, ...this.sheet.cssRules.slice(index + 1) ]
-    }
-  }
-  delete(index) {
-    // we insert a blank rule when 'deleting' so previously returned indexes remain stable
-    return this.replace(index, '')
-  }
+  // commenting this out till we decide on v3's decision 
+  // _replace(index, rule) {
+  //   // this weirdness for perf, and chrome's weird bug 
+  //   // https://stackoverflow.com/questions/20007992/chrome-suddenly-stopped-accepting-insertrule
+  //   try {  
+  //     let sheet = this.getSheet()        
+  //     sheet.deleteRule(index) // todo - correct index here     
+  //     sheet.insertRule(rule, index)
+  //   }
+  //   catch(e) {
+  //     if(isDev) {
+  //       // might need beter dx for this 
+  //       console.warn('whoops, problem replacing rule', rule) //eslint-disable-line no-console
+  //     }          
+  //   }          
+
+  // }
+  // replace(index, rule) {
+  //   if(isBrowser) {
+  //     if(this.isSpeedy && this.getSheet().insertRule) {
+  //       this._replace(index, rule)
+  //     }
+  //     else {
+  //       let _slot = Math.floor((index  + this.maxLength) / this.maxLength) - 1        
+  //       let _index = (index % this.maxLength) + 1
+  //       let tag = this.tags[_slot]
+  //       tag.replaceChild(document.createTextNode(rule), tag.childNodes[_index])
+  //     }
+  //   }
+  //   else {
+  //     let rules = this.sheet.cssRules
+  //     this.sheet.cssRules = [ ...rules.slice(0, index), { cssText: rule }, ...rules.slice(index + 1) ]
+  //   }
+  // }
+  // delete(index) {
+  //   // we insert a blank rule when 'deleting' so previously returned indexes remain stable
+  //   return this.replace(index, '')
+  // }
   flush() {
     if(isBrowser) {
       this.tags.forEach(tag => tag.parentNode.removeChild(tag))

src/sheet.js

@@ -735,7 +735,7 @@ describe('jsxstyle', () => {
   })
 })
 
-import { css } from '../src/css'
+import { _css, css } from '../src/css'
 describe('css', () => {
   // how to test the plugin?
   let node
@@ -750,11 +750,86 @@ describe('css', () => {
     flush()
   })
   it('can parse some css and return a rule', () => {
-    css` color: red; `
-    expect(styleSheet.rules().map(x => x.cssText)).toEqual([ '.css-bf70yn, [data-css-bf70yn] { color: red; }' ])
+    // css` color: red `
+    let red = 'red'
+    let rule = _css` 
+      /* 'real' css syntax */
+      color: yellow; 
+      font-weight: bold;
+      /* pseudo classes */  
+      :hover {
+        /* just javascript */
+        color: ${ red };
+      }
+      
+      /* contextual selectors */
+      & > h1 { color: purple }  
+      html.ie9 & span { padding: 300px }
+      & [type='checked'] { border: 1px dashed black }
+      
+      /* compose with objects */
+      ${{ color: 'red' }}
+      
+      /* or more rules */
+      ${ _css`color: greenish` }
+      
+      /* media queries */
+      @media (min-width: 300px) {
+        color: orange;
+        border: 1px solid blue;
+        ${{ color: 'brown' }}
+        /* increase specificity */
+        && {
+          color: blue;
+          ${{ color: 'browner' }}
+        }
+      }
+    `
+    expect(rule).toEqual([
+      { 'color': 'yellow' },
+      { 'fontWeight': 'bold' },
+      { ':hover': { 'color': 'red' } },
+      { '&>h1': { 'color': 'purple' } },
+      { 'html.ie9 & span': { 'padding': '300px' } },
+      { '& [type=checked]': { 'border': '1px dashed black' } },
+      [ { 'color': 'red' } ],
+      [ [ { color: 'greenish' } ] ],
+      { '@media (min-width:300px)': [
+        { 'color': 'orange' },
+        { 'border': '1px solid blue' },
+        [ { 'color': 'brown' } ],
+        { '&&': { 'color': 'browner' } } 
+      ] }
+    ])
+    
   })
 })
 
+// comments everywhere 
+
+// declarations - 
+// color: blue
+// fontWeight: 200 vs width: 300 (px)
+// multiword - border: 1px solid blue - check units
+// !important 
+// functions???
+
+// non ascii, base 64 encoded data uris, etc
+
+
+// selectors -
+// pseudo
+// direct
+// element id class attribute pseudo
+// contextual 
+
+// media queries 
+
+
+// custom vars/props?
+
+// fallbacks 
+
 
 // a useful utility for quickly tapping objects. use with the :: operator 
 // {x: 1}::log()