stilr - npm Package Compare versions

Comparing version 0.0.2 to 0.1.0

dist/index.js

@@ -26,3 +26,3 @@ 'use strict';
 
-      var className = (0, _utils.createHash)((0, _utils.normalizeObj)(style));
+      var className = (0, _utils.createClassName)((0, _utils.sortObject)(style));
 
@@ -29,0 +29,0 @@ if (pseudos.length) {

dist/utils.js

@@ -6,4 +6,6 @@ 'use strict';
 });
-exports.normalizeObj = normalizeObj;
+exports.sortObject = sortObject;
 exports.createHash = createHash;
+exports.stringifyObject = stringifyObject;
+exports.createClassName = createClassName;
 exports.createMarkup = createMarkup;
@@ -14,3 +16,3 @@ exports.seperateStyles = seperateStyles;
 
-function normalizeObj(obj) {
+function sortObject(obj) {
   return Object.keys(obj).sort().reduce(function (acc, key) {
@@ -23,41 +25,28 @@ var val = obj[key];
 
-function createHash(obj) {
-  var str = (function () {
-    var _join = [];
-    var _iteratorNormalCompletion = true;
-    var _didIteratorError = false;
-    var _iteratorError = undefined;
-
-    try {
-      for (var _iterator = Object.keys(obj)[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) {
-        var key = _step.value;
-
-        _join.push(obj[key]);
-      }
-    } catch (err) {
-      _didIteratorError = true;
-      _iteratorError = err;
-    } finally {
-      try {
-        if (!_iteratorNormalCompletion && _iterator['return']) {
-          _iterator['return']();
-        }
-      } finally {
-        if (_didIteratorError) {
-          throw _iteratorError;
-        }
-      }
-    }
-
-    return _join;
-  })().join('');
-  var hash = 5381;
+function createHash(str) {
   var i = str.length;
   if (i === 0) return 0;
 
+  var hash = 5381;
   while (i) hash = hash * 33 ^ str.charCodeAt(--i);
 
-  return '_' + (hash >>> 0).toString(36);
+  return hash >>> 0;
 }
 
+function stringifyObject(obj) {
+  var keys = Object.keys(obj);
+  var str = '';
+
+  for (var i = 0, len = keys.length; i < len; i++) {
+    str += keys[i] + obj[keys[i]];
+  }
+
+  return str;
+}
+
+function createClassName(obj) {
+
+  return '_' + createHash(stringifyObject(obj)).toString(36);
+}
+
 function createMarkup(obj) {
@@ -80,3 +69,3 @@ return (0, _reactLibCSSPropertyOperations.createMarkupForStyles)(obj);
     if (isPseudo(entry, style)) {
-      var hash = createHash(normalizeObj(style));
+      var hash = createClassName(sortObject(style));
       acc.pseudos.push(entry);
@@ -88,3 +77,3 @@ acc.style[entry] = hash;
     if (isMediaQuery(entry, style)) {
-      var hash = createHash(normalizeObj(style));
+      var hash = createClassName(sortObject(style));
       acc.mediaQueries.push(entry);
@@ -91,0 +80,0 @@ acc.style[entry] = hash;

lib/index.js

 import {
-  normalizeObj,
-  createHash,
+  sortObject,
+  createClassName,
   createMarkup,
@@ -17,3 +17,3 @@ seperateStyles
       let { style, pseudos, mediaQueries } = seperateStyles( styles[key] );
-      const className = createHash( normalizeObj( style ));
+      const className = createClassName( sortObject( style ));
 
@@ -20,0 +20,0 @@ if ( pseudos.length ) {

lib/utils.js

 import { createMarkupForStyles } from 'react/lib/CSSPropertyOperations';
 
-export function normalizeObj(obj) {
+export function sortObject(obj) {
   return Object.keys( obj )
@@ -13,14 +13,29 @@ .sort()
 
-export function createHash(obj) {
-  const str = [ for (key of Object.keys(obj)) obj[key] ].join('');
-  let hash = 5381;
+export function createHash(str) {
   let i = str.length;
   if (i === 0) return 0;
 
+  let hash = 5381;
   while (i)
     hash = (hash * 33) ^ str.charCodeAt(--i);
 
-  return '_' + ( hash >>> 0 ).toString(36);
+  return hash >>> 0;
 }
 
+export function stringifyObject(obj) {
+  const keys = Object.keys(obj);
+  let str = '';
+
+  for (let i = 0, len = keys.length; i < len; i++) {
+    str += keys[i] + obj[keys[i]];
+  }
+
+  return str;
+}
+
+export function createClassName(obj) {
+
+  return '_' + createHash( stringifyObject(obj) ).toString(36);
+}
+
 export function createMarkup(obj) {
@@ -44,3 +59,3 @@ return createMarkupForStyles( obj );
     if ( isPseudo( entry, style ) ) {
-      let hash = createHash( normalizeObj( style ));
+      let hash = createClassName( sortObject( style ));
       acc.pseudos.push(entry);
@@ -52,3 +67,3 @@ acc.style[entry] = hash;
     if ( isMediaQuery( entry, style ) ) {
-      let hash = createHash( normalizeObj( style ));
+      let hash = createClassName( sortObject( style ));
       acc.mediaQueries.push( entry );
@@ -55,0 +70,0 @@ acc.style[entry] = hash;

package.json

 {
   "name": "stilr",
-  "version": "0.0.2",
+  "version": "0.1.0",
   "description": "Encapsulated styling for your javascript components with all the power of javascript and CSS combined. Usefull with React",
@@ -10,4 +10,15 @@ "main": "dist",
   "keywords": [
-    "sleek", "stil", "still", "stilet", "style", "simple", "stilr",
-    "styling", "css", "react", "inline", "component", "encapsulation",
+    "sleek",
+    "stil",
+    "still",
+    "stilet",
+    "style",
+    "simple",
+    "stilr",
+    "styling",
+    "css",
+    "react",
+    "inline",
+    "component",
+    "encapsulation",
     "react-component"
@@ -14,0 +25,0 @@ ],

README.md

@@ -1,2 +0,2 @@
-#Stilr
+# Stilr [![Build Status](https://travis-ci.org/chriskjaer/stilr.svg)](https://travis-ci.org/chriskjaer/stilr) [![npm version](https://badge.fury.io/js/stilr.svg)](http://badge.fury.io/js/stilr)
 
@@ -16,3 +16,3 @@ Encapsulated styling for your javascript components with all the power of
 #### `object StyleSheet.create(object spec)`
-Stilr extracts the styles from the style object and returns and object with the
+Stilr extracts the styles from the style object and returns an object with the
 same keys mapped to class names.
@@ -29,3 +29,3 @@
     color: '#fff',
-    :'hover': {                 // Pseudo Selectors are allowed
+    ':hover': {                 // Pseudo Selectors are allowed
       color: '#000'
@@ -39,3 +39,3 @@ },
 
-console.log(styles.container);  // => '_xsrhhm'
+console.log(styles.container);  // => '_xsrhhm' -- (The class name for this style.)
 ```
@@ -140,9 +140,9 @@
     const { type, children } = this.props;
-    const classNames = [
+    const buttonStyles = [
       styles.base,
       styles[ type ]
-    ];
+    ].join(' ');
 
     return (
-      <button className={ classNames }>
+      <button className={ buttonStyles }>
         { children }
@@ -203,3 +203,3 @@ </button>
 
-In case you were wondering: Yes, this would would be ideal place to add something like autoprefixer, minification etc.
+In case you were wondering: Yes, this would would be an ideal place to add something like autoprefixer, minification etc.
 
@@ -228,5 +228,5 @@
 
-Under the hood, stilr creates classes based on a hash of your style object
+Under the hood, stilr creates class names based on a content hash of your style object
 which means that when the content is the same, the same hash will always be
-returned.
+returned. 
 
@@ -233,0 +233,0 @@

Fixed alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

18667

increased by2.87%

Number of package files

12

increased by9.09%

Number of medium supply chain risk alerts

0

decreased by-100%

Worsened metrics

Lines of code

281

decreased by-1.06%

No dependency changes