fela-monolithic - npm Package Compare versions

Comparing version 4.2.5 to 4.2.6

dist/fela-monolithic.js

@@ -117,7 +117,13 @@ (function (global, factory) {
   function generateClassName(str, prefix) {
+    if (str.className) {
+      var name = prefix + str.className;
+      delete str.className;
+      return name;
+    }
+    var stringified = JSON.stringify(str);
     var val = 5381;
-    var i = str.length;
+    var i = stringified.length;
 
     while (i) {
-      val = val * 33 ^ str.charCodeAt(--i);
+      val = val * 33 ^ stringified.charCodeAt(--i);
     }
@@ -192,3 +198,3 @@
       }
-      var className = generateClassName(JSON.stringify(style), renderer.selectorPrefix || 'fela-');
+      var className = generateClassName(style, renderer.selectorPrefix || 'fela-');
       var selector = getCSSSelector(className);
@@ -244,5 +250,3 @@
   var monolithic = (function () {
-    return function (renderer) {
-      return addMonolithicClassNames(renderer);
-    };
+    return addMonolithicClassNames;
   });
@@ -249,0 +253,0 @@

dist/fela-monolithic.min.js

@@ -1,1 +0,1 @@
-!function(e,n){"object"==typeof exports&&"undefined"!=typeof module?module.exports=n(require("hyphenate-style-name")):"function"==typeof define&&define.amd?define(["hyphenate-style-name"],n):e.FelaMonolithic=n(e.hyphenateStyleName)}(this,function(e){"use strict";function n(e,n){return n?"@media "+e+"{"+n+"}":""}function r(e,n){return 0===e.length?n:e+" and "+n}function t(n,r){return e(n)+":"+r}function o(e,n){return e+"{"+n+"}"}function u(e){var n=arguments.length>1&&void 0!==arguments[1]?arguments[1]:"";return"."+e+n}function i(e){return"@media"===e.substr(0,6)}function a(e){return null!==e.match(/^(:|\[|>|&)/g)}function f(e){return void 0===e||"string"==typeof e&&e.indexOf("undefined")>-1}function c(e){return"&"===e.charAt(0)?e.slice(1):e}function l(e,n){for(var r=5381,t=e.length;t;)r=33*r^e.charCodeAt(--t);return n+(r>>>0).toString(36)}function s(e){return e._parseMonolithicRules=function(n,u){var l=arguments.length>2&&void 0!==arguments[2]?arguments[2]:"",s=[],y=[],d=[],p=function(o){var p=u[o],m="undefined"==typeof p?"undefined":h.typeof(p);if(f(p))return"continue";if("number"===m||"string"===m)return s.push(t(o,p)),"continue";if(Array.isArray(p))return p.forEach(function(e){return s.push(t(o,e))}),"continue";if(a(o))return e._parseMonolithicRules(n+c(o),p,l).rules.forEach(function(e){return y.push(e)}),"continue";if(i(o)){var g=r(l,o.slice(6).trim()),v=e._parseMonolithicRules(n,p,g);return d.push({rules:v.rules,media:g}),v.media.forEach(function(e){return d.push(e)}),"continue"}return e._parseMonolithicRules(n+" "+o,p,l).rules.forEach(function(e){return y.push(e)}),"continue"};for(var m in u){p(m)}return y.unshift(o(n,s.join(";"))),{rules:y,media:d}},e._renderStyleToClassNames=function(r){if(!Object.keys(r).length)return"";var t=l(JSON.stringify(r),e.selectorPrefix||"fela-"),o=u(t);if(e.cache[t])return" "+t;var i=e._parseMonolithicRules(o,r),a=i.rules,f=i.media,c=a.join("");return e.cache[t]||(e.cache[t]=""),a.length&&(e.rules+=c,e.cache[t]+=c,e._emitChange({selector:o,declaration:c,type:y})),f.length&&f.forEach(function(r){var u=r.media,i=r.rules.join("");e.mediaRules.hasOwnProperty(u)||(e.mediaRules[u]=""),e.mediaRules[u]+=i,e.cache[t]+=n(u,i),e._emitChange({selector:o,declaration:i,media:u,type:y})})," "+t},e}e="default"in e?e.default:e;var h={};h.typeof="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},h.defineProperty=function(e,n,r){return n in e?Object.defineProperty(e,n,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[n]=r,e},h.extends=Object.assign||function(e){for(var n=1;n<arguments.length;n++){var r=arguments[n];for(var t in r)Object.prototype.hasOwnProperty.call(r,t)&&(e[t]=r[t])}return e},h.toConsumableArray=function(e){if(Array.isArray(e)){for(var n=0,r=Array(e.length);n<e.length;n++)r[n]=e[n];return r}return Array.from(e)};var y=1,d=function(){return function(e){return s(e)}};return d});
+!function(e,n){"object"==typeof exports&&"undefined"!=typeof module?module.exports=n(require("hyphenate-style-name")):"function"==typeof define&&define.amd?define(["hyphenate-style-name"],n):e.FelaMonolithic=n(e.hyphenateStyleName)}(this,function(e){"use strict";function n(e,n){return n?"@media "+e+"{"+n+"}":""}function r(e,n){return 0===e.length?n:e+" and "+n}function t(n,r){return e(n)+":"+r}function i(e,n){return e+"{"+n+"}"}function o(e){var n=arguments.length>1&&void 0!==arguments[1]?arguments[1]:"";return"."+e+n}function u(e){return"@media"===e.substr(0,6)}function a(e){return null!==e.match(/^(:|\[|>|&)/g)}function c(e){return void 0===e||"string"==typeof e&&e.indexOf("undefined")>-1}function f(e){return"&"===e.charAt(0)?e.slice(1):e}function l(e,n){if(e.className){var r=n+e.className;return delete e.className,r}for(var t=JSON.stringify(e),i=5381,o=t.length;o;)i=33*i^t.charCodeAt(--o);return n+(i>>>0).toString(36)}function s(e){return e._parseMonolithicRules=function(n,o){var l=arguments.length>2&&void 0!==arguments[2]?arguments[2]:"",s=[],y=[],d=[],p=function(i){var p=o[i],m="undefined"==typeof p?"undefined":h.typeof(p);if(c(p))return"continue";if("number"===m||"string"===m)return s.push(t(i,p)),"continue";if(Array.isArray(p))return p.forEach(function(e){return s.push(t(i,e))}),"continue";if(a(i))return e._parseMonolithicRules(n+f(i),p,l).rules.forEach(function(e){return y.push(e)}),"continue";if(u(i)){var v=r(l,i.slice(6).trim()),g=e._parseMonolithicRules(n,p,v);return d.push({rules:g.rules,media:v}),g.media.forEach(function(e){return d.push(e)}),"continue"}return e._parseMonolithicRules(n+" "+i,p,l).rules.forEach(function(e){return y.push(e)}),"continue"};for(var m in o){p(m)}return y.unshift(i(n,s.join(";"))),{rules:y,media:d}},e._renderStyleToClassNames=function(r){if(!Object.keys(r).length)return"";var t=l(r,e.selectorPrefix||"fela-"),i=o(t);if(e.cache[t])return" "+t;var u=e._parseMonolithicRules(i,r),a=u.rules,c=u.media,f=a.join("");return e.cache[t]||(e.cache[t]=""),a.length&&(e.rules+=f,e.cache[t]+=f,e._emitChange({selector:i,declaration:f,type:y})),c.length&&c.forEach(function(r){var o=r.media,u=r.rules.join("");e.mediaRules.hasOwnProperty(o)||(e.mediaRules[o]=""),e.mediaRules[o]+=u,e.cache[t]+=n(o,u),e._emitChange({selector:i,declaration:u,media:o,type:y})})," "+t},e}e="default"in e?e.default:e;var h={};h.typeof="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},h.defineProperty=function(e,n,r){return n in e?Object.defineProperty(e,n,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[n]=r,e},h.extends=Object.assign||function(e){for(var n=1;n<arguments.length;n++){var r=arguments[n];for(var t in r)Object.prototype.hasOwnProperty.call(r,t)&&(e[t]=r[t])}return e},h.toConsumableArray=function(e){if(Array.isArray(e)){for(var n=0,r=Array(e.length);n<e.length;n++)r[n]=e[n];return r}return Array.from(e)};var y=1,d=function(){return s};return d});

package.json

 {
   "name": "fela-monolithic",
-  "version": "4.2.5",
+  "version": "4.2.6",
   "description": "Fela enhancer for having monolithic classnames",
+  "module": "index.es2015.js",
   "main": "index.js",
@@ -24,4 +25,4 @@ "files": [
   "peerDependencies": {
-    "fela": "4.2.5"
+    "fela": "4.2.6"
   }
 }

README.md

 # fela-monolithic
 
 <img alt="npm downloads" src="https://img.shields.io/npm/dm/fela-monolithic.svg">
-<img alt="gzipped size" src="https://img.shields.io/badge/gzipped-1.25kb-brightgreen.svg">
+<img alt="gzipped size" src="https://img.shields.io/badge/gzipped-1.27kb-brightgreen.svg">
 
 The monolithic enhancer will use unique class names instead of atomic ones.
 These generated class names are not re-usable like the atomic design but allows you to debug and modify styles with ease.
-Every ruleset will have it's own unique class - this means that a new class will be generated if you are using props and they change.
+Every ruleset will have it's own unique class - this means that a new class will be generated if you are using props and they change. If you want to fix the class name, you can add property `className` into your rule set. This can be useful if you want to generate an external stylesheet that's human readable, re-usable and can be used on non-JS projects.
 
@@ -18,5 +18,5 @@ ## Installation
 <!-- Fela (Development): Unminified version including all warnings -->
-<script src="https://unpkg.com/fela-monolithic@4.2.5/dist/fela-monolithic.js"></script>
+<script src="https://unpkg.com/fela-monolithic@4.2.6/dist/fela-monolithic.js"></script>
 <!-- Fela (Production): Minified version -->
-<script src="https://unpkg.com/fela-monolithic@4.2.5/dist/fela-monolithic.min.js"></script>
+<script src="https://unpkg.com/fela-monolithic@4.2.6/dist/fela-monolithic.min.js"></script>
 ```
@@ -32,4 +32,29 @@
 })
+
+const rule = () => ({
+  className: 'custom',
+  color: 'red'
+})
+
+renderer.renderRule(rule)
 ```
 
+outputs
+
+```css
+.fela-custom {
+  color: red
+}
+```
+
+if `className` property is not used, the output will be
+
+```css
+.fela-137u7ef {
+  color: red
+}
+```
+
+`137u7ef` is a hash based on rule properties (`color: red` in this case). The prefix `fela` can be configured in createRenderer.
+
 ## License
@@ -36,0 +61,0 @@ Fela is licensed under the [MIT License](http://opensource.org/licenses/MIT).<br>

No alert changes

Improved metrics

Total package byte prevSize

26639

increased by4.13%

Lines of code

207

increased by1.97%

Number of lines in readme file

62

increased by67.57%

No dependency changes