cxs - npm Package Compare versions

Comparing version 1.0.0-beta.1 to 1.0.0-beta.2

dist/common-declarations.js

@@ -46,3 +46,3 @@ 'use strict';
 
-  border: [0],
+  // border: [ 0 ],
   borderRadius: [0]
@@ -49,0 +49,0 @@

dist/index.js

@@ -6,3 +6,3 @@ 'use strict';
 });
-exports.clearCache = exports.attach = exports.getCss = exports.getRules = exports.cache = undefined;
+exports.cache = undefined;
 
@@ -31,2 +31,4 @@ var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function (obj) { return typeof obj; } : function (obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol ? "symbol" : typeof obj; };
 
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
 var styleTag = null;
@@ -46,16 +48,15 @@ var cache = exports.cache = {};
     } else if ((typeof arg === 'undefined' ? 'undefined' : _typeof(arg)) === 'object') {
-      (function () {
-        var hashname = 'cxs-' + (0, _nodeMurmurhash2.default)(JSON.stringify(arg), 128);
-        var rules = createRules(hashname, arg);
+      var hashname = 'cxs-' + (0, _nodeMurmurhash2.default)(JSON.stringify(arg), 128);
+      var rules = createRules(hashname, arg);
 
-        rules.forEach(function (rule) {
-          if (rule.selector !== '.' + hashname && !/\:/.test(rule.selector)) {
-            classNames.push(rule.selector.replace(/^\./, ''));
-          }
-          // if (cache[rule.id]) { // console.warn('Rule already exists', cache[rule.id], rule) }
+      rules.forEach(function (rule) {
+        if (!/\:/.test(rule.selector)) {
+          classNames.push(rule.selector.replace(/^\./, ''));
+        }
+        if (cache[rule.id]) {
+          // console.warn('Rule already exists', cache[rule.id], rule)
+        } else {
           cache[rule.id] = rule;
-        });
-
-        classNames.push(hashname);
-      })();
+        }
+      });
     }
@@ -67,66 +68,83 @@ });
 
-var createSubRule = function createSubRule(baseHashname, key, obj) {
-  if (/^:/.test(key)) {
-    // Pseudo-class
-    var rules = createRules(baseHashname + key, obj);
-    return rules[0]; // Ignore nested objects
-  } else if (/^@media/.test(key)) {
-    // Media query
-    var _rules = createRules(baseHashname, obj, key);
-    return _rules[0];
-  } else {
-    console.warn('not a pseudoclass or media query', key, obj);
-    return '';
-  }
-};
-
-var createRules = function createRules(hashname, style, media) {
+var createRules = function createRules(hashname, rawStyle, media) {
   var selector = '.' + hashname;
   var declarations = [];
   var rules = [];
+  var style = filterNull(rawStyle);
 
-  var _extractCommonDeclara = extractCommonDeclarations(style, media);
+  extractCommonDeclarations(style, { media: media, hashname: hashname }).forEach(function (r) {
+    return rules.push(r);
+  });
 
-  var customStyle = _extractCommonDeclara.customStyle;
-  var commonRules = _extractCommonDeclara.commonRules;
+  var customStyle = filterCommonDeclarations(style);
+  var prefixed = (0, _inlineStylePrefixAll2.default)(customStyle);
 
-
-  commonRules.forEach(function (r) {
+  createNestedRules(hashname, prefixed).forEach(function (r) {
     return rules.push(r);
   });
 
-  var prefixed = (0, _inlineStylePrefixAll2.default)(customStyle);
+  var ruleset = createRuleset(selector, prefixed);
+  var css = media ? media + ' { ' + ruleset + ' }' : ruleset;
+  var id = media ? hashname + media : hashname;
 
+  var rule = {
+    id: id,
+    order: media ? 2 : 1,
+    selector: selector,
+    css: css
+  };
+
+  rules.unshift(rule);
+
+  return rules;
+};
+
+var createRuleset = function createRuleset(selector, style) {
+  var declarations = [];
+
   var _loop = function _loop(key) {
-    var value = prefixed[key];
-    if (Array.isArray(value)) {
-      value.forEach(function (val) {
-        var declaration = (0, _lodash.kebabCase)(key) + ':' + val;
+    var value = style[key];
+    var prop = toCssProperty(key);
+    if (isNestedStyle(value)) {
+      // Skip
+    } else if (Array.isArray(value)) {
+      value.forEach(function (v) {
+        var declaration = prop + ':' + v;
         declarations.push(declaration);
       });
-    } else if ((typeof value === 'undefined' ? 'undefined' : _typeof(value)) === 'object') {
-      // Handle pseudo-classes, media queries, etc.
-      var r = createSubRule(hashname, key, value);
-      rules.push(r);
-    } else {
-      var val = typeof value === 'number' ? (0, _addPxToStyle2.default)(key, value) : value;
-      var declaration = (0, _lodash.kebabCase)(key) + ':' + val;
+    } else if (typeof value === 'number') {
+      var declaration = prop + ':' + (0, _addPxToStyle2.default)(key, value);
       declarations.push(declaration);
+    } else if (typeof value === 'string') {
+      var _declaration = prop + ':' + value;
+      declarations.push(_declaration);
     }
   };
 
-  for (var key in prefixed) {
+  for (var key in style) {
     _loop(key);
   }
 
-  var ruleSet = selector + '{' + declarations.join(';') + '}';
-  var css = media ? media + ' { ' + ruleSet + ' }' : ruleSet;
+  return selector + '{' + declarations.join(';') + '}';
+};
 
-  var rule = {
-    id: hashname + (media ? media : ''),
-    selector: selector,
-    css: css
-  };
+var createNestedRules = function createNestedRules(hashname, style) {
+  var rules = [];
 
-  rules.unshift(rule);
+  for (var key in style) {
+    var _value = style[key];
+    if ((typeof _value === 'undefined' ? 'undefined' : _typeof(_value)) === 'object' && !Array.isArray(_value)) {
+      if (/^:/.test(key)) {
+        // Pseudo-class
+        createRules(hashname + key, _value).forEach(function (r) {
+          return rules.push(r);
+        });
+      } else if (/^@media/.test(key)) {
+        // Media query
+        createRules(hashname, _value, key).forEach(function (r) {
+          return rules.push(r);
+        });
+      }
+    }
+  }
 
@@ -136,10 +154,21 @@ return rules;
 
-var extractCommonDeclarations = function extractCommonDeclarations(style, media) {
+var filterCommonDeclarations = function filterCommonDeclarations(style) {
+  var newStyle = {};
+  for (var key in style) {
+    var index = _commonDeclarations2.default[key] ? _commonDeclarations2.default[key].indexOf(style[key]) : -1;
+    if (index < 0) {
+      newStyle[key] = style[key];
+    }
+  }
+  return newStyle;
+};
+
+var extractCommonDeclarations = function extractCommonDeclarations(style, _ref) {
+  var media = _ref.media;
+  var hashname = _ref.hashname;
+
   var commonRules = [];
 
-  if (media) {
-    return {
-      commonRules: commonRules,
-      customStyle: style
-    };
+  if (media || /:/.test(hashname)) {
+    return commonRules;
   }
@@ -150,10 +179,11 @@
     if (index > -1) {
-      var property = (0, _lodash.kebabCase)(key);
+      var property = toCssProperty(key);
       // To do: handle prefixed declarations (flex, inline-flex)
-      var _value = style[key];
-      var selector = '.cxs-' + property + '-' + _value;
+      var _value2 = style[key];
+      var selector = '.cxs-' + property + '-' + _value2;
       var rule = {
         id: selector,
+        order: 0,
         selector: selector,
-        css: selector + '{' + property + ':' + _value + '}'
+        css: createRuleset(selector, _defineProperty({}, key, _value2))
       };
@@ -165,23 +195,37 @@ commonRules.push(rule);
 
-  return {
-    customStyle: style,
-    commonRules: commonRules
-  };
+  return commonRules;
 };
 
-var getRules = exports.getRules = function getRules() {
-  var cssRules = Object.keys(cache || {}).map(function (k) {
-    return cache[k].css || false;
-  }).filter(function (r) {
-    return r.length;
-  });
+var filterNull = function filterNull(obj) {
+  var newObj = {};
+  for (var key in obj) {
+    if (obj[key] !== null) {
+      newObj[key] = obj[key];
+    }
+  }
+  return newObj;
+};
 
-  return cssRules;
+var toCssProperty = function toCssProperty(key) {
+  if (/^[A-Z]/.test(key)) {
+    var _prop = '-' + (0, _lodash.kebabCase)(key);
+    return _prop;
+  } else {
+    return (0, _lodash.kebabCase)(key);
+  }
 };
 
-var getCss = exports.getCss = function getCss() {
-  return getRules().join('');
+var createDeclaration = function createDeclaration(key, value) {
+  return toCssProperty(key) + ':' + value;
 };
 
-var attach = exports.attach = function attach() {
+var isNestedStyle = function isNestedStyle(value) {
+  return value === null || (typeof value === 'undefined' ? 'undefined' : _typeof(value)) === 'object' && !Array.isArray(value);
+};
+
+var sortRules = function sortRules(a, b) {
+  return a.order - b.order;
+};
+
+cxs.attach = function () {
   if (typeof document === 'undefined') {
@@ -192,3 +236,3 @@ console.warn('Cannot attach stylesheet without a document');
 
-  var rules = getRules();
+  var rules = cxs.getRules();
   styleTag = styleTag || document.getElementById('cxs');
@@ -204,15 +248,28 @@
   rules.forEach(function (rule, i) {
-    cxs.sheet.insertRule(rule, i);
+    try {
+      cxs.sheet.insertRule(rule, cxs.sheet.cssRules.length);
+    } catch (e) {
+      // console.warn('Could not insert rule', rule, e)
+    }
   });
 };
 
-var clearCache = exports.clearCache = function clearCache() {
+cxs.getRules = function () {
+  var cssRules = Object.keys(cache || {}).map(function (k) {
+    return cache[k].css || false;
+  }).filter(function (r) {
+    return r.length;
+  }).sort(sortRules);
+
+  return cssRules;
+};
+
+cxs.getCss = function () {
+  return cxs.getRules().join('');
+};
+
+cxs.clearCache = function () {
   exports.cache = cache = {};
 };
 
-cxs.getRules = getRules;
-cxs.getCss = getCss;
-cxs.attach = attach;
-cxs.clearCache = clearCache;
-
 exports.default = cxs;

example/entry.js

@@ -23,4 +23,34 @@
   '#888',
+  'cyan',
+  '#07f',
+  '#70f',
+  '#f07',
+  'magenta',
+  'yellow',
 ]
 
+const store = {
+  _state: {
+    title: 'Hello cxs',
+    count: 0
+  },
+  get state () {
+    return store._state
+  },
+  set state (obj) {
+    store._state = { ...state, ...obj }
+    store.listeners.forEach(l => l(store))
+  },
+  setState (obj) {
+    store._state = { ...store.state, ...obj }
+    store.listeners.forEach(l => l(store))
+  },
+  listeners: [],
+  subscribe (listener) {
+    if (typeof listener === 'function') {
+      store.listeners.push(listener)
+    }
+  }
+}
+
 const Button = ({
@@ -53,27 +83,18 @@ text,
 
-const store = {
-  _state: {
-    title: 'Hello cxs',
-    count: 0
-  },
-  get state () {
-    return store._state
-  },
-  set state (obj) {
-    store._state = { ...state, ...obj }
-    store.listeners.forEach(l => l(store))
-  },
-  setState (obj) {
-    store._state = { ...store.state, ...obj }
-    store.listeners.forEach(l => l(store))
-  },
-  listeners: [],
-  subscribe (listener) {
-    if (typeof listener === 'function') {
-      store.listeners.push(listener)
-    }
+// For perf testing
+const Box = ({
+  color
+}) => {
+  const cx = {
+    height: 32,
+    backgroundColor: color
   }
+
+  return jx`
+    <div className=${cx}>
+    </div>
+  `
 }
 
-const view = (store) => {
+const View = (store) => {
   const { setState, state } = store
@@ -111,2 +132,8 @@ const { title, count } = state
 
+  const boxes = Array.from({ length: count })
+    .map((n, i) => i)
+    .map((n) => {
+      return Box({ color: colors[n % colors.length] })
+    })
+
   return jx`
@@ -131,3 +158,11 @@ <div className=${cx.root}>
         })}
+        ${Button({
+          text: '++',
+          className: cx.button,
+          onclick: (e) => setState({ count: state.count + 8 })
+        })}
       </div>
+      <div>
+        ${boxes}
+      </div>
     </div>
@@ -140,11 +175,12 @@ `
 const update = (store) => {
-  const newTree = view(store)
+  const newTree = View(store)
   yo.update(tree, newTree)
-  // cxs.attach()
+  cxs.attach()
   console.log(cxs.getRules().length)
   console.log(cxs.getRules())
+  console.log(cxs.sheet)
 }
 
-const tree = view(store)
-// cxs.attach()
+const tree = View(store)
+cxs.attach()
 
@@ -151,0 +187,0 @@ store.subscribe(update)

package.json

 {
   "name": "cxs",
-  "version": "1.0.0-beta.1",
+  "version": "1.0.0-beta.2",
   "description": "",
-  "main": "index.js",
+  "main": "dist/index.js",
   "scripts": {
@@ -7,0 +7,0 @@ "prepublish": "mkdir -p dist && babel src --out-dir dist",

src/common-declarations.js

@@ -77,3 +77,3 @@
 
-  border: [ 0 ],
+  // border: [ 0 ],
   borderRadius: [ 0 ],
@@ -80,0 +80,0 @@

src/index.js

@@ -22,10 +22,11 @@
       rules.forEach(rule => {
-        if (rule.selector !== '.' + hashname && !/\:/.test(rule.selector)) {
+        if (!/\:/.test(rule.selector)) {
           classNames.push(rule.selector.replace(/^\./, ''))
         }
-        // if (cache[rule.id]) { // console.warn('Rule already exists', cache[rule.id], rule) }
-        cache[rule.id] = rule
+        if (cache[rule.id]) {
+          // console.warn('Rule already exists', cache[rule.id], rule)
+        } else {
+          cache[rule.id] = rule
+        }
       })
-
-      classNames.push(hashname)
     }
@@ -37,53 +38,24 @@ })
 
-const createSubRule = (baseHashname, key, obj) => {
-  if (/^:/.test(key)) {
-    // Pseudo-class
-    const rules = createRules(baseHashname + key, obj)
-    return rules[0] // Ignore nested objects
-  } else if (/^@media/.test(key)) {
-    // Media query
-    const rules = createRules(baseHashname, obj, key)
-    return rules[0]
-  } else {
-    console.warn('not a pseudoclass or media query', key, obj)
-    return ''
-  }
-}
-
-const createRules = (hashname, style, media) => {
+const createRules = (hashname, rawStyle, media) => {
   const selector = '.' + hashname
   const declarations = []
   const rules = []
+  const style = filterNull(rawStyle)
 
-  const { customStyle, commonRules } = extractCommonDeclarations(style, media)
+  extractCommonDeclarations(style, { media, hashname })
+    .forEach(r => rules.push(r))
 
-  commonRules.forEach(r => rules.push(r))
-
+  const customStyle = filterCommonDeclarations(style)
   const prefixed = prefix(customStyle)
 
-  for (let key in prefixed) {
-    const value = prefixed[key]
-    if (Array.isArray(value)) {
-      value.forEach(val => {
-        const declaration = `${kebabCase(key)}:${val}`
-        declarations.push(declaration)
-      })
-    } else if (typeof value === 'object') {
-      // Handle pseudo-classes, media queries, etc.
-      const r = createSubRule(hashname, key, value)
-      rules.push(r)
-    } else {
-      const val = typeof value === 'number'
-        ? addPx(key, value)
-        : value
-      const declaration = `${kebabCase(key)}:${val}`
-      declarations.push(declaration)
-    }
-  }
+  createNestedRules(hashname, prefixed)
+    .forEach(r => rules.push(r))
 
-  const ruleSet = `${selector}{${declarations.join(';')}}`
-  const css = media ? `${media} { ${ruleSet} }` : ruleSet
+  const ruleset = createRuleset(selector, prefixed)
+  const css = media ? `${media} { ${ruleset} }` : ruleset
+  const id = media ? hashname + media : hashname
 
   const rule = {
-    id: hashname + (media ? media : ''),
+    id,
+    order: media ? 2 : 1,
     selector,
@@ -98,16 +70,70 @@ css
 
-const extractCommonDeclarations = (style, media) => {
-  const commonRules = []
+const createRuleset = (selector, style) => {
+  const declarations = []
 
-  if (media) {
-    return {
-      commonRules,
-      customStyle: style
+  for (let key in style) {
+    const value = style[key]
+    const prop = toCssProperty(key)
+    if (isNestedStyle(value)) {
+      // Skip
+    } else if (Array.isArray(value)) {
+      value.forEach(v => {
+        const declaration = prop + ':' + v
+        declarations.push(declaration)
+      })
+    } else if (typeof value === 'number') {
+      const declaration = prop + ':' + addPx(key, value)
+      declarations.push(declaration)
+    } else if (typeof value === 'string') {
+      const declaration = prop + ':' + value
+      declarations.push(declaration)
     }
   }
 
+  return `${selector}{${declarations.join(';')}}`
+}
+
+const createNestedRules = (hashname, style) => {
+  const rules = []
+
   for (let key in style) {
+    const value = style[key]
+    if (typeof value === 'object' && !Array.isArray(value)) {
+      if (/^:/.test(key)) {
+        // Pseudo-class
+        createRules(hashname + key, value)
+          .forEach(r => rules.push(r))
+      } else if (/^@media/.test(key)) {
+        // Media query
+        createRules(hashname, value, key)
+          .forEach(r => rules.push(r))
+      }
+    }
+  }
+
+  return rules
+}
+
+const filterCommonDeclarations = (style) => {
+  const newStyle = {}
+  for (let key in style) {
     const index = commonDeclarations[key] ? commonDeclarations[key].indexOf(style[key]) : -1
+    if (index < 0) {
+      newStyle[key] = style[key]
+    }
+  }
+  return newStyle
+}
+
+const extractCommonDeclarations = (style, { media, hashname }) => {
+  const commonRules = []
+
+  if (media || /:/.test(hashname)) {
+    return commonRules
+  }
+
+  for (let key in style) {
+    const index = commonDeclarations[key] ? commonDeclarations[key].indexOf(style[key]) : -1
     if (index > -1) {
-      const property = kebabCase(key)
+      const property = toCssProperty(key)
       // To do: handle prefixed declarations (flex, inline-flex)
@@ -118,4 +144,5 @@ const value = style[key]
         id: selector,
+        order: 0,
         selector,
-        css: `${selector}{${property}:${value}}`
+        css: createRuleset(selector, { [key]: value })
       }
@@ -127,21 +154,38 @@ commonRules.push(rule)
 
-  return {
-    customStyle: style,
-    commonRules
+  return commonRules
+}
+
+const filterNull = (obj) => {
+  const newObj = {}
+  for (let key in obj) {
+    if (obj[key] !== null) {
+      newObj[key] = obj[key]
+    }
   }
+  return newObj
 }
 
-export const getRules = () => {
-  const cssRules = Object.keys(cache || {})
-    .map(k => cache[k].css || false)
-    .filter(r => r.length)
+const toCssProperty = (key) => {
+  if (/^[A-Z]/.test(key)) {
+    const prop = '-' + kebabCase(key)
+    return prop
+  } else {
+    return kebabCase(key)
+  }
+}
 
-  return cssRules
+const createDeclaration = (key, value) => {
+  return toCssProperty(key) + ':' + value
 }
 
-export const getCss = () => {
-  return getRules().join('')
+const isNestedStyle = (value) => {
+  return value === null || (typeof value === 'object' && !Array.isArray(value))
 }
 
-export const attach = () => {
+const sortRules = (a, b) => {
+  return a.order - b.order
+}
+
+
+cxs.attach = () => {
   if (typeof document === 'undefined') {
@@ -152,3 +196,3 @@ console.warn('Cannot attach stylesheet without a document')
 
-  const rules = getRules()
+  const rules = cxs.getRules()
   styleTag = styleTag || document.getElementById('cxs')
@@ -164,16 +208,29 @@
   rules.forEach((rule, i) => {
-    cxs.sheet.insertRule(rule, i)
+    try {
+      cxs.sheet.insertRule(rule, cxs.sheet.cssRules.length)
+    } catch (e) {
+      // console.warn('Could not insert rule', rule, e)
+    }
   })
 }
 
-export const clearCache = () => {
+cxs.getRules = () => {
+  const cssRules = Object.keys(cache || {})
+    .map(k => cache[k].css || false)
+    .filter(r => r.length)
+    .sort(sortRules)
+
+  return cssRules
+}
+
+
+cxs.getCss = () => {
+  return cxs.getRules().join('')
+}
+
+cxs.clearCache = () => {
   cache = {}
 }
 
-cxs.getRules = getRules
-cxs.getCss = getCss
-cxs.attach = attach
-cxs.clearCache = clearCache
-
 export default cxs
 

test/cxs.spec.js

@@ -15,6 +15,9 @@
 
+test.beforeEach(() => {
+  cxs.clearCache()
+})
+
 test('should not throw', t => {
   t.notThrows(() => {
     const cx = cxs(style)
-    cxs.clearCache()
   })
@@ -26,3 +29,2 @@ })
   t.is(typeof cx, 'string')
-  cxs.clearCache()
 })
@@ -34,3 +36,2 @@
   t.is(cx, `cxs-${hashname}`)
-  cxs.clearCache()
 })
@@ -44,3 +45,2 @@
   t.is(typeof cache[id], 'object')
-  cxs.clearCache()
 })
@@ -51,3 +51,2 @@
   t.regex(cx, /^cxs.+\sred\sm1$/)
-  cxs.clearCache()
 })
@@ -68,3 +67,2 @@
   t.true(tag.tagName === 'STYLE')
-  cxs.clearCache()
 })
@@ -82,3 +80,2 @@
   t.is(rules.length, 2)
-  cxs.clearCache()
 })
@@ -93,3 +90,2 @@
   t.regex(rules[0], /font-size:32px}$/)
-  cxs.clearCache()
 })
@@ -104,3 +100,2 @@
   t.regex(rules[0], /\-webkit\-flex/)
-  cxs.clearCache()
 })
@@ -121,4 +116,2 @@
   t.regex(hoverRule.selector, /\:hover$/)
-
-  cxs.clearCache()
 })
@@ -138,7 +131,5 @@
   t.regex(rules[1], /^@media/)
-
-  cxs.clearCache()
 })
 
-test('should extract common declarations', t => {
+test('extracts common declarations', t => {
   t.plan(4)
@@ -156,6 +147,35 @@ const sx = {
   t.is(cx.split(' ').length, 3)
+})
 
-  cxs.clearCache()
+test('ignores null values', t => {
+  const cx = cxs({
+    color: 'tomato',
+    padding: null
+  })
+  const css = cxs.getCss()
+  t.is(css.includes('null'), false)
 })
 
+test('handles 0 values', t => {
+  const cx = cxs({
+    padding: 0,
+    fontFamily: 0,
+    border: 0
+  })
+  const css = cxs.getCss()
+  t.is(css.includes('border'), true)
+})
+
+test('should handle ::-moz-inner-focus', t => {
+  const cx = cxs({
+    color: 'tomato',
+    '::-moz-inner-focus': {
+      border: 0,
+      padding: 0
+    }
+  })
+  const css = cxs.getCss()
+  t.is(css.includes('-moz-inner-focus'), true)
+})
+
 /*
@@ -162,0 +182,0 @@ - context rerender

No alert changes

Improved metrics

Total package byte prevSize

25095

increased by16.73%

Lines of code

840

increased by21.39%

No dependency changes