bss - npm Package Compare versions

Comparing version 1.0.1 to 1.0.2

bss.js

@@ -1,2 +0,445 @@
-!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e():"function"==typeof define&&define.amd?define(e):t.b=e()}(this,function(){"use strict";function t(e){return e.hasOwnProperty("width")?e:t(Object.getPrototypeOf(e))}function e(t,e){if("string"==typeof t){if("string"==typeof e||"number"==typeof e){return n={},n[t]=e,n;var n}return h(t)}return Array.isArray(t)&&Array.isArray(t.raw)?(arguments[0]={raw:t},h(String.raw.apply(null,arguments))):t.style||r(t)}function n(t){return t.charAt(0).toLowerCase()+t.slice(1)}function r(t){return Object.keys(t).reduce(function(e,n){var r=t[n];return r||0===r||""===r?("content"===n&&'"'!==r.charAt(0)?e[n]='"'+r+'"':e[n in w?w[n]:n]=p(n,r),e):e},{})}function i(t,e){for(var n in e)e.hasOwnProperty(n)&&(t[n]=e[n])}function o(t){return t.slice("-"===t.charAt(0)?1:0).replace(/-([a-z])/g,function(t){return t[1].toUpperCase()})}function c(t){return t.replace(/([A-Z])/g,"-$1").toLowerCase()}function u(t){return t.charAt(0)+(t.match(/([A-Z])/g)||[]).join("").toLowerCase()}function a(t){var e=u(t),n=k[e]&&k[e]!==t?t:e;return A[n]=t,n}function f(t){var e={},n=[],r=!1;return Object.keys(t).forEach(function(i){"@"===i.charAt(0)?n.push(i+"{"+f(t[i])+"}"):" "===i.charAt(0)||":"===i.charAt(0)?n.push(s(".$"+i,t[i])):(e[i]=t[i],r=!0)}),r&&n.unshift(s(".$",e)),n}function s(t,e){return t+"{"+l("string"==typeof e?h(e):e)+"}"}function l(t){return Object.keys(t).map(function(e){return d(t,e)}).join("")}function h(t){return t.split("\n").reduce(function(t,e){var n=e.replace(";","").trim().split(/[: ]/);if(n.length>1){var r=o(n.shift().trim());t[A[r]||r]=p(A[r]||r,n.join(" ").trim())}return t},{})}function d(t,e){return($.test(e)?"-":"")+c(e)+":"+t[e]+";"}function p(t,e){return e+(!isNaN(e)&&E.indexOf(t)>-1?"px":"")}function y(t,e){if(M.push(t),L)return S.textContent+=t;P.insertRule(t,arguments.length>1?e:P.cssRules.length)}function m(t){var e=f(t),n=e.join("");if(n in C)return C[n];var r=z+ ++R;return e.map(function(t){return y(t.replace(/\.\$/,"."+r))}),C[n]=r,r}function g(t,n){return i(g.style,e.apply(null,arguments)),b(g)}function b(t){var e=Object.create(g,{style:{value:t.style}});return t===g&&(g.style={}),e}function v(t){return function(e){for(var n=arguments,r=this,i=0;i<arguments.length;i++)t in r.style?r.style[t]+=" "+p(t,n[i]):(n[i]||0===n[i])&&(r.style[t]=p(t,n[i]));return b(this)}}function j(t,n){if(1===arguments.length)return Object.keys(t).forEach(function(e){return j(e,t[e])});y(s(t,e(n)),0)}function O(t,n){return 1===arguments.length?Object.keys(t).forEach(function(e){return O(e,t[e])}):"object"==typeof n?(delete g[t],void Object.defineProperty(g,t,{get:function(){return i(this.style,e(n)),b(this)}})):void(g[t]=function(){var t=n.apply(null,arguments);return i(this.style,t.style),b(this)})}var k={ai:"alignItems",b:"bottom",bc:"backgroundColor",br:"borderRadius",bs:"boxShadow",c:"color",d:"display",f:"float",fd:"flexDirection",ff:"fontFamily",fs:"fontSize",h:"height",jc:"justifyContent",l:"left",m:"margin",mb:"marginBottom",ml:"marginLeft",mr:"marginRight",mt:"marginTop",o:"opacity",p:"padding",pb:"paddingBottom",pl:"paddingLeft",pr:"paddingRight",pt:"paddingTop",r:"right",t:"top",ta:"textAlign",td:"textDecoration",tt:"textTransform",w:"width"},A=Object.create(null),x=Object.keys(t(document.documentElement.style)).filter(function(t){return"string"==typeof document.documentElement.style[t]}),w=Object.create(null,{}),$=/^(o|O|ms|MS|Ms|moz|Moz|webkit|Webkit|WebKit)([A-Z])/,E=function(){var t=document.createElement("div");return x.filter(function(e){try{return t.style[e]="1px",t.style.setProperty(e,"1px"),"1px"===t.style[e].slice(-3)}catch(t){return}})}(),C=Object.create(null,{}),S=document.createElement("style");document.head.appendChild(S);var P=S.sheet,L=!1,M=[],R=0,z="b"+("000"+(46656*Math.random()|0).toString(36)).slice(-3)+("000"+(46656*Math.random()|0).toString(36)).slice(-3),D=0,T={},Z=["active","any","checked","default","disabled","empty","enabled","first","first-child","first-of-type","fullscreen","focus","hover","indeterminate","in-range","invalid","last-child","last-of-type","left","link","only-child","only-of-type","optional","out-of-range","read-only","read-write","required","right","root","scope","target","valid","visited","dir","lang","not","nth-child","nth-last-child","nth-last-of-type","nth-of-type","after","before","first-letter","first-line","selection","backdrop","placeholder","marker","spelling-error","grammar-error"];return g.setDebug=function(t){L=t},g.style={},g.toString=function(){return"."+this.class},g.$keyframes=function(t){var e=Object.keys(t).map(function(e){return s(e,t[e].style||t[e])}).join("");if(e in T)return T[e];var n=z+ ++D;return T[e]=n,y("@keyframes "+n+"{"+e+"}"),n},g.getSheet=function(){var t=M.join("");return M=[],t},g.helper=O,g.css=j,g.classPrefix=z,x.forEach(function(t){if($.test(t)){var e=n(t.replace($,"$2"));if(-1===x.indexOf(e))return w[e]=t,void(g[e]=g[a(e)]=v(t))}g[t]=g[a(t)]=v(t)}),g.content=function(t){return this.style.content='"'+t+'"',b(this)},Object.defineProperty(g,"class",{get:function(){return m(this.style)}}),g.$media=function(t,n){return this.style["@media "+t]=e(n),b(this)},g.$nest=function(t,n){return this.style[(":"===t.charAt(0)?"":" ")+t]=e(n),b(this)},Z.forEach(function(t){return g["$"+o(t)]=function(n,r){return this.style[":"+t+(r?"("+n+")":"")]=e(r||n),b(this)}}),g.helper("$animate",function(t,e){return g.animation(g.$keyframes(e)+" "+t)}),g});
+(function (global, factory) {
+	typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
+	typeof define === 'function' && define.amd ? define(factory) :
+	(global.b = factory());
+}(this, (function () { 'use strict';
+
+var popular = {
+  ai : 'alignItems',
+  b  : 'bottom',
+  bc : 'backgroundColor',
+  br : 'borderRadius',
+  bs : 'boxShadow',
+  c  : 'color',
+  d  : 'display',
+  f  : 'float',
+  fd : 'flexDirection',
+  ff : 'fontFamily',
+  fs : 'fontSize',
+  h  : 'height',
+  jc : 'justifyContent',
+  l  : 'left',
+  m  : 'margin',
+  mb : 'marginBottom',
+  ml : 'marginLeft',
+  mr : 'marginRight',
+  mt : 'marginTop',
+  o  : 'opacity',
+  p  : 'padding',
+  pb : 'paddingBottom',
+  pl : 'paddingLeft',
+  pr : 'paddingRight',
+  pt : 'paddingTop',
+  r  : 'right',
+  t  : 'top',
+  ta : 'textAlign',
+  td : 'textDecoration',
+  tt : 'textTransform',
+  w  : 'width'
+};
+
+var shorts = Object.create(null);
+
+var cssProperties = Object.keys(
+  findWidth(document.documentElement.style)
+).filter(function (prop) { return typeof document.documentElement.style[prop] === 'string'; });
+
+function findWidth(obj) {
+  return obj.hasOwnProperty('width')
+    ? obj
+    : findWidth(Object.getPrototypeOf(obj))
+}
+
+var vendorMap = Object.create(null, {});
+
+var vendorRegex = /^(o|O|ms|MS|Ms|moz|Moz|webkit|Webkit|WebKit)([A-Z])/;
+
+function parse(input, value) {
+  if (typeof input === 'string') {
+    if (typeof value === 'string' || typeof value === 'number')
+      { return (( obj = {}, obj[input] = value, obj ))
+        var obj; }
+
+    return stringToObject(input)
+  } else if (Array.isArray(input) && Array.isArray(input.raw)) {
+    arguments[0] = { raw: input };
+    return stringToObject(String.raw.apply(null, arguments))
+  }
+
+  return input.style || sanitize(input)
+}
+
+var memoize = function (fn, cache) {
+  if ( cache === void 0 ) cache = {};
+
+  return function (item) { return item in cache
+    ? cache[item]
+    : cache[item] = fn(item); };
+};
+
+var appendPx = memoize(function (prop) {
+  var el = document.createElement('div');
+
+  try {
+    el.style[prop] = '1px';
+    el.style.setProperty(prop, '1px');
+    return el.style[prop].slice(-3) === '1px' ? 'px' : ''
+  } catch (err) {
+    return ''
+  }
+}, {
+  flex: ''
+});
+
+function lowercaseFirst(string) {
+  return string.charAt(0).toLowerCase() + string.slice(1)
+}
+
+function sanitize(styles) {
+  return Object.keys(styles).reduce(function (acc, key) {
+    var value = styles[key];
+
+    if (!value && value !== 0 && value !== '')
+      { return acc }
+
+    if (key === 'content' && value.charAt(0) !== '"')
+      { acc[key] = '"' + value + '"'; }
+    else
+      { acc[key in vendorMap ? vendorMap[key] : key] = addPx(key, value); }
+
+    return acc
+  }, {})
+}
+
+function assign(obj, obj2) {
+  for (var key in obj2) {
+    if (obj2.hasOwnProperty(key))
+      { obj[key] = obj2[key]; }
+  }
+}
+
+function hyphenToCamelCase(hyphen) {
+  return hyphen.slice(hyphen.charAt(0) === '-' ? 1 : 0).replace(/-([a-z])/g, function(match) {
+    return match[1].toUpperCase()
+  })
+}
+
+function camelCaseToHyphen(camelCase) {
+  return camelCase.replace(/([A-Z])/g, '-$1').toLowerCase()
+}
+
+function initials(camelCase) {
+  return camelCase.charAt(0) + (camelCase.match(/([A-Z])/g) || []).join('').toLowerCase()
+}
+
+function short(prop) {
+  var acronym = initials(prop)
+      , short = popular[acronym] && popular[acronym] !== prop ? prop : acronym;
+
+  shorts[short] = prop;
+  return short
+}
+
+
+
+function objectToRules(style) {
+  var base = {}
+      , rules = [];
+
+  var hasBase = false;
+
+  Object.keys(style).forEach(function (key) {
+    if (key.charAt(0) === '@') {
+      rules.push(key + '{' + objectToRules(style[key]) + '}');
+    } else if (key.charAt(0) === ' ' || key.charAt(0) === ':') {
+      rules.push(selectorBlock('.$' + key, style[key]));
+    } else {
+      base[key] = style[key];
+      hasBase = true;
+    }
+  });
+
+  if (hasBase)
+    { rules.unshift(selectorBlock('.$', base)); }
+
+  return rules
+}
+
+function selectorBlock(selector, style) {
+  return selector + '{'
+    + stylesToCss((typeof style === 'string' ? stringToObject(style) : style))
+    + '}'
+}
+
+function stylesToCss(style) {
+  return Object.keys(style).map(function (k) { return propToString(style, k); }).join('')
+}
+
+function stringToObject(string) {
+  return string.replace(/;/g, '\n').split('\n').reduce(function (acc, line) {
+    var tokens = line.trim().split(/[: ]/);
+    if (tokens.length > 1) {
+      var key = hyphenToCamelCase(tokens.shift().trim());
+      acc[shorts[key] || key] = addPx(shorts[key] || key, tokens.join(' ').trim());
+    }
+    return acc
+  }, {})
+}
+
+
+
+function propToString(style, k) {
+  return (vendorRegex.test(k) ? '-' : '')
+  + camelCaseToHyphen(k) + ':' + style[k] + ';'
+}
+
+function addPx(key, value) {
+  return value + (isNaN(value) ? '' : appendPx(key))
+}
+
+var document$1 = window.document;
+var classes = Object.create(null, {});
+var styleSheet = document$1 && document$1.createElement('style');
+styleSheet && document$1.head.appendChild(styleSheet);
+var sheet = styleSheet && styleSheet.sheet;
+
+var debug = false;
+var rules = [];
+var count$1 = 0;
+
+var classPrefix = 'b' + ('000' + ((Math.random() * 46656) | 0).toString(36)).slice(-3) +
+                    ('000' + ((Math.random() * 46656) | 0).toString(36)).slice(-3);
+
+function setDebug(d) {
+  debug = d;
+}
+
+function getSheet() {
+  var content = rules.join('');
+  rules = [];
+  return content
+}
+
+function insert(rule, index) {
+  rules.push(rule);
+
+  if (debug)
+    { return styleSheet.textContent += rule }
+
+  sheet && sheet.insertRule(rule, arguments.length > 1
+    ? index
+    : sheet.cssRules.length
+  );
+}
+
+function createClass(style) {
+  var rules = objectToRules(style)
+      , css = rules.join('');
+
+  if (css in classes)
+    { return classes[css] }
+
+  var className = classPrefix + (++count$1);
+
+  rules.map(function (rule) { return insert(rule.replace(/\.\$/, '.' + className)); }
+  );
+
+  classes[css] = className;
+
+  return className
+}
+
+var count = 0;
+var keyframeCache = {};
+
+var keyframes = function(props) {
+  var content = Object.keys(props).map(function (key) { return selectorBlock(key, props[key].style || props[key]); }
+  ).join('');
+
+  if (content in keyframeCache)
+    { return keyframeCache[content] }
+
+  var name = classPrefix + ++count;
+  keyframeCache[content] = name;
+  insert('@keyframes ' + name + '{' + content + '}');
+
+  return name
+};
+
+var pseudos = [
+  'active',
+  'any',
+  'checked',
+  'default',
+  'disabled',
+  'empty',
+  'enabled',
+  'first',
+  'first-child',
+  'first-of-type',
+  'fullscreen',
+  'focus',
+  'hover',
+  'indeterminate',
+  'in-range',
+  'invalid',
+  'last-child',
+  'last-of-type',
+  'left',
+  'link',
+  'only-child',
+  'only-of-type',
+  'optional',
+  'out-of-range',
+  'read-only',
+  'read-write',
+  'required',
+  'right',
+  'root',
+  'scope',
+  'target',
+  'valid',
+  'visited',
+
+  // With value
+  'dir',
+  'lang',
+  'not',
+  'nth-child',
+  'nth-last-child',
+  'nth-last-of-type',
+  'nth-of-type',
+
+  // Elements
+  'after',
+  'before',
+  'first-letter',
+  'first-line',
+  'selection',
+  'backdrop',
+  'placeholder',
+  'marker',
+  'spelling-error',
+  'grammar-error'
+];
+
+function bss(input, value) {
+  assign(bss.style, parse.apply(null, arguments));
+  return chain(bss)
+}
+
+bss.setDebug = setDebug;
+
+bss.style = {};
+
+bss.valueOf = function() {
+  return '.' + this.class
+};
+
+bss.$keyframes = keyframes;
+bss.getSheet = getSheet;
+bss.helper = helper;
+bss.css = css;
+bss.classPrefix = classPrefix;
+
+function chain(instance) {
+  var newInstance = Object.create(bss, { style: { value: instance.style } });
+
+  if (instance === bss)
+    { bss.style = {}; }
+
+  return newInstance
+}
+
+cssProperties.forEach(function (prop) {
+  if (vendorRegex.test(prop)) {
+    var unprefixed = lowercaseFirst(prop.replace(vendorRegex, '$2'));
+    if (cssProperties.indexOf(unprefixed) === -1) {
+      vendorMap[unprefixed] = prop;
+      bss[unprefixed] = bss[short(unprefixed)] = setter(prop);
+      return
+    }
+  }
+
+  bss[prop] = bss[short(prop)] = setter(prop);
+});
+
+bss.content = function(arg) {
+  this.style.content = '"' + arg + '"';
+  return chain(this)
+};
+
+Object.defineProperty(bss, 'class', {
+  get: function() {
+    return createClass(this.style)
+  }
+});
+
+bss.$media = function(value, style) {
+  this.style['@media ' + value] = parse(style);
+  return chain(this)
+};
+
+bss.$nest = function(value, style) {
+  this.style[(value.charAt(0) === ':' ? '' : ' ') + value] = parse(style);
+  return chain(this)
+};
+
+pseudos.forEach(function (name) { return bss['$' + hyphenToCamelCase(name)] = function(value, b) {
+    this.style[':' + name + (b ? '(' + value + ')' : '')] = parse(b || value);
+    return chain(this)
+  }; }
+);
+
+function setter(prop) {
+  return function CssProperty(value) {
+    var arguments$1 = arguments;
+    var this$1 = this;
+
+    for (var i = 0; i < arguments.length; i++) {
+      if (prop in this$1.style)
+        { this$1.style[prop] += ' ' + addPx(prop, arguments$1[i]); }
+      else if (arguments$1[i] || arguments$1[i] === 0)
+        { this$1.style[prop] = addPx(prop, arguments$1[i]); }
+    }
+
+    return chain(this)
+  }
+}
+
+function css(selector, style) {
+  if (arguments.length === 1)
+    { return Object.keys(selector).forEach(function (key) { return css(key, selector[key]); }) }
+
+  insert(selectorBlock(selector, parse(style)), 0);
+}
+
+function helper(name, styling) {
+  if (arguments.length === 1)
+    { return Object.keys(name).forEach(function (key) { return helper(key, name[key]); }) }
+
+  if (typeof styling === 'object') {
+    delete bss[name]; // Needed to avoid weird get calls in chrome
+    Object.defineProperty(bss, name, {
+      get: function() {
+        assign(this.style, parse(styling));
+        return chain(this)
+      }
+    });
+    return
+  }
+
+  bss[name] = function Helper() {
+    var result = styling.apply(null, arguments);
+    assign(this.style, result.style);
+    return chain(this)
+  };
+}
+
+bss.helper('$animate', function (value, props) { return bss.animation(bss.$keyframes(props) + ' ' + value); }
+);
+
+return bss;
+
+})));
 //# sourceMappingURL=bss.js.map

lib/index.js

@@ -34,3 +34,3 @@ import keyframes from './keyframes'
 
-bss.toString = function() {
+bss.valueOf = function() {
   return '.' + this.class
@@ -37,0 +37,0 @@ }

lib/popular.js

@@ -32,3 +32,3 @@ export default {
   tt : 'textTransform',
-  w  : 'width',
+  w  : 'width'
 }

lib/sheet.js

@@ -5,6 +5,7 @@ import {
 
+const document = window.document
 const classes = Object.create(null, {})
-const styleSheet = document.createElement('style')
-document.head.appendChild(styleSheet)
-const sheet = styleSheet.sheet
+const styleSheet = document && document.createElement('style')
+styleSheet && document.head.appendChild(styleSheet)
+const sheet = styleSheet && styleSheet.sheet
 
@@ -34,3 +35,3 @@ let debug = false
 
-  sheet.insertRule(rule, arguments.length > 1
+  sheet && sheet.insertRule(rule, arguments.length > 1
     ? index
@@ -37,0 +38,0 @@ : sheet.cssRules.length

lib/utils.js

@@ -33,16 +33,20 @@ import popular from './popular'
 
-// Figure out recognizing shorthands (eg gridGap)
-const pxProperties = (function() {
+const memoize = (fn, cache = {}) => item =>
+  item in cache
+    ? cache[item]
+    : cache[item] = fn(item)
+
+const appendPx = memoize(prop => {
   const el = document.createElement('div')
 
-  return cssProperties.filter(prop => {
-    try {
-      el.style[prop] = '1px'
-      el.style.setProperty(prop, '1px')
-      return el.style[prop].slice(-3) === '1px'
-    } catch (err) {
-      return
-    }
-  })
-}())
+  try {
+    el.style[prop] = '1px'
+    el.style.setProperty(prop, '1px')
+    return el.style[prop].slice(-3) === '1px' ? 'px' : ''
+  } catch (err) {
+    return ''
+  }
+}, {
+  flex: ''
+})
 
@@ -138,4 +142,4 @@ export function lowercaseFirst(string) {
 function stringToObject(string) {
-  return string.split('\n').reduce((acc, line) => {
-    const tokens = line.replace(';', '').trim().split(/[: ]/)
+  return string.replace(/;/g, '\n').split('\n').reduce((acc, line) => {
+    const tokens = line.trim().split(/[: ]/)
     if (tokens.length > 1) {
@@ -159,4 +163,3 @@ const key = hyphenToCamelCase(tokens.shift().trim())
 export function addPx(key, value) {
-  const result = value + (!isNaN(value) && pxProperties.indexOf(key) > -1 ? 'px' : '')
-  return result
+  return value + (isNaN(value) ? '' : appendPx(key))
 }

package.json

 {
   "name": "bss",
-  "version": "1.0.1",
+  "version": "1.0.2",
   "description": "Better Style Sheets",
   "main": "bss.js",
-  "browser": "bss.js",
   "module": "lib/index.js",
@@ -8,0 +7,0 @@ "scripts": {

README.md

@@ -19,3 +19,3 @@ [![version](https://img.shields.io/npm/v/bss.svg)]() [![gzipped](http://img.badgesize.io/porsager/bss/master/bss.js.svg?compression=gzip&label=gzipped)]() [![license](https://img.shields.io/github/license/porsager/wright.svg)]()
 - [`.class` Returns a class name](#class)
-- [`.toString() or '' +` returns '.' + b.class](#tostring)
+- [`.valueOf() or '' +` returns '.' + b.class](#tostring)
 
@@ -138,5 +138,5 @@ ## Installation
 
-### `toString()`
+### `valueOf()`
 
-`.toString()` will be called if b is used like `'div' + b` because javascript casts automatically using `.toString()`.
+`.valueOf()` will be called if b is used like `'div' + b` because javascript casts automatically using `.valueOf()`.
 Casting `b` to a string will call `.class` and prepend a period for easy use in vdom libraries.
@@ -147,5 +147,5 @@ ``` js
 
-You can also override `.toString` to return the class if needed
+You can also override `.valueOf` if you set classNames instead of selectors
 ``` 
-b.toString = () => b.class
+b.valueOf = function() { return b.class + ' ' }
 
@@ -152,0 +152,0 @@ `<div class="${ b.textAlign('green') }`"></div>` // Returns eg. <div class="bdp4f3o1"></div>

rollup.config.js

@@ -5,12 +5,24 @@ import buble from 'rollup-plugin-buble'
 
-export default {
-  entry: 'lib/index.js',
-  dest: 'bss.js',
-  format: 'umd',
-  moduleName: 'b',
-  sourceMap: true,
-  exports: 'default',
-  plugins: process.env.TEST
-    ? []
-    : [
+export default [
+  {
+    entry: 'lib/index.js',
+    dest: 'bss.js',
+    format: 'umd',
+    moduleName: 'b',
+    sourceMap: true,
+    exports: 'default',
+    plugins: process.env.TEST
+      ? []
+      : [
+        buble(),
+        filesize()
+      ]
+  }, {
+    entry: 'lib/index.js',
+    dest: 'bss.min.js',
+    format: 'umd',
+    moduleName: 'b',
+    sourceMap: true,
+    exports: 'default',
+    plugins: [
       buble(),
@@ -20,2 +32,3 @@ uglify({ mangle: true, compress: true }),
     ]
-}
+  }
+]

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

81975

increased by69.55%

Number of package files

16

increased by14.29%

Lines of code

1031

increased by57.4%

No dependency changes