@fower/parser - npm Package Compare versions

Comparing version 1.27.0 to 1.28.0

dist/parser.cjs.development.js

@@ -7,2 +7,3 @@ 'use strict';
 var store = require('@fower/store');
+var cache = require('@fower/cache');
 var colorHelper = require('@fower/color-helper');
@@ -115,2 +116,7 @@ var sheet = require('@fower/sheet');
     this.propList = [];
+
+    this.getClassNameById = function (id) {
+      return store.store.config.prefix + id;
+    };
+
     this.traverseProps(props);
@@ -151,5 +157,4 @@
       }
-    }
+    } // traverse Props
 
-    console.log('entries====:', entries); // traverse Props
 
@@ -166,3 +171,3 @@ for (var _i = 0, _entries = entries; _i < _entries.length; _i++) {
       if (propKey === 'css') {
-        this.parseCSSObject(propValue);
+        this.parseCSSObject(propValue, {});
         continue;
@@ -284,3 +289,2 @@ }
         var _darkAtom = new atom.Atom(_extends({}, cloned, {
-          className: '',
           propKey: cloned.propKey + '--dark',
@@ -292,3 +296,3 @@ meta: _extends({}, cloned.meta, {
 
-        var cachedAtom = store.store.atomCache.get(_darkAtom.id);
+        var cachedAtom = cache.atomCache.get(_darkAtom.id);
 
@@ -379,8 +383,7 @@ if (cachedAtom) {
     // if not cached, let's cache it
-    if (!store.store.atomCache.get(atom.id)) {
-      store.store.atomCache.set(atom.id, atom);
+    if (!cache.atomCache.get(atom.id)) {
+      cache.atomCache.set(atom.id, atom);
     }
 
-    atom.createClassName(store.store.config.prefix); // only create atom className when toRules
-
+    var ssrAtomIds = sheet.styleSheet.getSsrAtomIds();
     var _this$config$theme$co = this.config.theme.colors.modes,
@@ -409,3 +412,2 @@ modes = _this$config$theme$co === void 0 ? {} : _this$config$theme$co;
         var modeAtom = JSON.parse(JSON.stringify(atom));
-        modeAtom.className = atom.className + postfix;
         modeAtom.key = atom.key + postfix;
@@ -417,2 +419,3 @@ modeAtom.id = atom.id + postfix;
         modeAtom.style[styleKey] = colorValue;
+        if (ssrAtomIds.includes(modeAtom.id)) modeAtom.inserted = true;
         this.atoms.push(modeAtom);
@@ -422,2 +425,3 @@ }
 
+    if (ssrAtomIds.includes(atom.id)) atom.inserted = true;
     this.atoms.push(atom);
@@ -459,3 +463,3 @@ }
 
-    var cachedAtom = store.store.atomCache.get(atom.id);
+    var cachedAtom = cache.atomCache.get(atom.id);
 
@@ -465,5 +469,4 @@ if (cachedAtom) {
       throw new Error('atom is cached, add to this.atoms derectly, no need to mutate');
-    }
+    } // if handled, push to this.atoms and skip it
 
-    atom = atom.preprocessAtom(store.store.config); // if handled, push to this.atoms and skip it
 
@@ -498,3 +501,2 @@ if (atom.handled) {
     var parsed = cssObjectProcessor.parse(propValue);
-    var prefixClassName = utils.objectToClassName(propValue);
 
@@ -507,3 +509,4 @@ for (var _iterator6 = _createForOfIteratorHelperLoose(parsed), _step6; !(_step6 = _iterator6()).done;) {
       var entries = Object.entries(style);
-      if (!entries.length) continue;
+      if (!entries.length) continue; // entries.length is 1
+
       var _entries$2 = entries[0],
@@ -515,7 +518,12 @@ propKey = _entries$2[0],
         propValue: _propValue,
-        meta: meta
+        meta: _extends({}, meta)
       };
 
       if (selectorType === 'pseudo' && option.meta) {
-        option.meta.pseudo = selector;
+        var _ref4 = selector.match(/(:+)(.+)/) || [],
+            pseudoPrefix = _ref4[1],
+            pseudo = _ref4[2];
+
+        option.meta.pseudoPrefix = pseudoPrefix;
+        option.meta.pseudo = pseudo;
       }
@@ -528,3 +536,2 @@
       var atom$1 = new atom.Atom(option);
-      var isVoid = selectorType === 'void';
 
@@ -539,12 +546,7 @@ try {
       if (!atom$1.style) {
-        atom$1.style = style; // TODO: need refactor
-
-        atom$1.id = utils.objectToClassName({
-          style: style
-        });
-        atom$1.className = isVoid ? utils.objectToClassName(style) : prefixClassName;
+        atom$1.style = style;
         atom$1.handled = true;
       }
 
-      var cachedAtom = store.store.atomCache.get(atom$1.id);
+      var cachedAtom = cache.atomCache.get(atom$1.id);
 
@@ -568,2 +570,4 @@ if (cachedAtom) {
   _proto.getClassNames = function getClassNames() {
+    var _this2 = this;
+
     /**
@@ -583,8 +587,10 @@ * handle override style
 
+      var className = _this2.getClassNameById(cur.id);
+
       if (index === -1) {
-        classNames.push(cur.className);
+        classNames.push(className);
         result = [].concat(result, [cur]);
       } else {
         result.splice(index, 1, cur);
-        classNames.splice(index, 1, cur.className);
+        classNames.splice(index, 1, className);
       }
@@ -609,3 +615,3 @@
   _proto.toStyle = function toStyle() {
-    var _this2 = this;
+    var _this3 = this;
 
@@ -616,9 +622,9 @@ var style = this.atoms.reduce(function (result, atom) {
       var colors = store.store.theme.colors;
-      var style = Object.entries(atom.style).reduce(function (c, _ref4) {
+      var style = Object.entries(atom.style).reduce(function (c, _ref5) {
         var _extends3;
 
-        var key = _ref4[0],
-            value = _ref4[1];
+        var key = _ref5[0],
+            value = _ref5[1];
 
-        var cssValue = _this2.formatCssValue(utils.jsKeyToCssKey(key), colors[value] || value);
+        var cssValue = _this3.formatCssValue(utils.jsKeyToCssKey(key), colors[value] || value);
 
@@ -638,3 +644,3 @@ return _extends({}, c, (_extends3 = {}, _extends3[key] = cssValue, _extends3));
   _proto.toRules = function toRules(enableInserted) {
-    var _this3 = this;
+    var _this4 = this;
 
@@ -656,3 +662,3 @@ if (enableInserted === void 0) {
       var rule = '';
-      var className = atom.className,
+      var id = atom.id,
           isValid = atom.isValid,
@@ -673,2 +679,3 @@ _atom$style = atom.style,
           pseudo = _atom$meta.pseudo,
+          pseudoPrefix = _atom$meta.pseudoPrefix,
           mode = _atom$meta.mode,
@@ -679,12 +686,15 @@ _atom$meta$breakpoint = _atom$meta.breakpoint,
 
-      var shouldUseUniqueClassName = !!_this3.atoms.find(function (i) {
+      var shouldUseUniqueClassName = !!_this4.atoms.find(function (i) {
         return i.styleKeys === atom.styleKeys && (atom.meta.breakpoint || i.meta.breakpoint);
       });
-      var uniqueSelector = shouldUseUniqueClassName || atom.meta.breakpoint ? '.' + _this3.uniqueClassName : '';
+      var uniqueSelector = shouldUseUniqueClassName || atom.meta.breakpoint ? '.' + _this4.uniqueClassName : '';
+
+      var className = _this4.getClassNameById(id);
+
       var selector = uniqueSelector + "." + className;
-      if (pseudo) selector = selector + pseudo;
+      if (pseudo) selector = selector + pseudoPrefix + pseudo;
       if (mode) selector = "." + modePrefix + mode + " " + selector;
       if (childSelector) selector = selector + " " + childSelector;
-      rule = selector + " { " + _this3.styleToString(style, atom.meta) + " }";
-      if (breakpoint) rule = _this3.makeResponsiveStyle(breakpoint, rule);
+      rule = selector + " { " + _this4.styleToString(style, atom.meta) + " }";
+      if (breakpoint) rule = _this4.makeResponsiveStyle(breakpoint, rule);
       rules.push(rule);
@@ -710,5 +720,5 @@ };
 
-    var parsedProps = entries.reduce(function (result, _ref5) {
-      var key = _ref5[0],
-          value = _ref5[1];
+    var parsedProps = entries.reduce(function (result, _ref6) {
+      var key = _ref6[0],
+          value = _ref6[1];
       var find = atoms.find(function (atom) {
@@ -715,0 +725,0 @@ return [atom.propKey, atom.key, atom.id, 'css'].includes(key);

dist/parser.cjs.production.min.js

@@ -1,2 +0,2 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("@fower/atom"),t=require("@fower/store"),r=require("@fower/color-helper"),o=require("@fower/sheet"),n=require("@fower/css-object-processor"),s=require("@fower/utils");function i(){return(i=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var r=arguments[t];for(var o in r)Object.prototype.hasOwnProperty.call(r,o)&&(e[o]=r[o])}return e}).apply(this,arguments)}function a(e,t){(null==t||t>e.length)&&(t=e.length);for(var r=0,o=new Array(t);r<t;r++)o[r]=e[r];return o}function u(e,t){var r="undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(r)return(r=r.call(e)).next.bind(r);if(Array.isArray(e)||(r=function(e,t){if(e){if("string"==typeof e)return a(e,void 0);var r=Object.prototype.toString.call(e).slice(8,-1);return"Object"===r&&e.constructor&&(r=e.constructor.name),"Map"===r||"Set"===r?Array.from(e):"Arguments"===r||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(r)?a(e,void 0):void 0}}(e))||t&&e&&"number"==typeof e.length){r&&(e=r);var o=0;return function(){return o>=e.length?{done:!0}:{done:!1,value:e[o++]}}}throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}var c=/(-columns|(^|[^e]-)padding|[^t]-spacing|l-align|rows|(^|(^border|[dkmnptx]|le|ne)-)width|^border|tom|[ek]-start|(o|[^e]-du)ration|us|(^|[^tv]-)left|(^|-)top|tance|rgin|e-offset|(er|g|n|t)-block|(^|[^tv]-)right|basis|[gnt]-inline|gap|(^|[^e]-)height|ness|(^|[^p]-)inset|[ek]-end|elay|tline|ve|dent|-rotate|n-rule|(c|ck|d|ne|t)-size)$/;function l(e){return c.test(e)}var d=["children","onClick","onChange","onBlur","className","placeholder"];exports.Parser=function(){function a(e){void 0===e&&(e={}),this.props=e,this.atoms=[],this.propList=[],this.traverseProps(e),t.store.config.autoDarkMode&&this.autoDarkMode()}var c,f=a.prototype;return f.traverseProps=function(r){if(!s.isEmptyObj(r)){var o=this.config,n=o.pseudos,a=void 0===n?[]:n,c=o.theme||{},l=c.breakpoints,f=c.modes,m=Object.keys(l),h=f||[],p=a,v=r.excludedProps,y=void 0===v?[]:v,b=Object.entries(r);if(null!=r&&r.className)for(var g,k=u(r.className.split(/\s+/));!(g=k()).done;)b.push([g.value,!0]);console.log("entries====:",b);for(var j=0,A=b;j<A.length;j++){var S=A[j],C=S[0],O=S[1];if(!y.includes(C)&&!d.includes(C)&&this.isValidProp(C,O))if("css"!==C){if(C.startsWith("_")){var w=C.replace(/^_/,""),N=Array.isArray(O)?O.reduce((function(e,t){var r;return i({},e,((r={})[t]=!0,r))}),{}):O;if(h.includes(w)){this.parseCSSObject(N,{mode:w});continue}if(m.includes(w)){this.parseCSSObject(N,{breakpoint:l[w]});continue}if(p.includes(w)){this.parseCSSObject(N,{pseudo:":"+w});continue}}var P=t.store.compositions.get(C);if(P){this.parseCSSObject(P,{});var K=new e.Atom({propKey:C,propValue:O});K.handled=!0,K.style={},this.addAtom(K)}else{var x=new e.Atom({propKey:C,propValue:O});try{this.mutateAtom(x),x.handled&&this.addAtom(x)}catch(e){continue}}}else this.parseCSSObject(O)}for(var V,T=u(this.plugins);!(V=T()).done;){var q=V.value;q.afterAtomStyleCreate&&q.afterAtomStyleCreate(this)}}},f.autoDarkMode=function(){for(var r,o={white:"black",black:"white",50:"900",100:"800",200:"700",300:"600",400:"500",500:"400",600:"300",700:"200",800:"100",900:"50"},n=["color","backgroundColor","borderColor"],s=[],a=u(this.atoms);!(r=a()).done;){var c=r.value;if(n.includes(c.type)&&!c.meta.mode){if(this.atoms.find((function(e){return n.includes(e.type)&&"dark"===e.meta.mode})))continue;var l=Object.entries(c.style);if(null==l||!l.length)continue;var d=l[0][1];if(!d)continue;var f=(d.match(/^([a-z]+)(\d+)$/i)||[])[2];["white","black"].includes(d)&&(f=d);var m=JSON.stringify(c).replace(new RegExp(""+f,"g"),o[f]);"white"===f&&(m=m.replace(/White/g,"Black")),"black"===f&&(m=m.replace(/Black/g,"White"));var h=JSON.parse(m),p=new e.Atom(i({},h,{className:"",propKey:h.propKey+"--dark",meta:i({},h.meta,{mode:"dark"})})),v=t.store.atomCache.get(p.id);s.push(v||p)}}for(var y=0,b=s;y<b.length;y++)this.addAtom(b[y])},f.formatCssValue=function(e,r){if(!l(e))return r;var o;if(s.isPercentNumber(String(r)))return String(r).replace("p","%");if(!s.isNumber(r))return r;if((o=Number(r))<1&&o>0)return 100*o+"%";var n=t.store.config;return"none"!==n.unit?n.transformUnit?n.transformUnit(o):r+t.store.config.unit:o},f.styleToString=function(e,o){var n=this,i=o.important,a=o.colorPostfix;return Object.entries(e).reduce((function(e,o){var u=o[1],c=s.jsKeyToCssKey(o[0]),l=i?" !important":"",d=t.store.theme.colors;return e+(c+": ")+(u=a?r.formatColor(d[u]||u,a):n.formatCssValue(c,d[u]||u))+l+";"}),"")},f.addAtom=function(e){t.store.atomCache.get(e.id)||t.store.atomCache.set(e.id,e),e.createClassName(t.store.config.prefix);for(var r=this.config.theme.colors.modes,o=0,n=Object.entries(void 0===r?{}:r);o<n.length;o++){var s=n[o],a=s[0],u=s[1];if(e.style){var c=Object.entries(e.style);if(c.length){var l=c[0],d=l[0],f=u[l[1]];if(f){var m="--"+a,h=JSON.parse(JSON.stringify(e));h.className=e.className+m,h.key=e.key+m,h.id=e.id+m,h.meta=i({mode:a},e.meta),h.style[d]=f,this.atoms.push(h)}}}}this.atoms.push(e)},f.isValidProp=function(e,t){return"css"===e||!!e.startsWith("_")||!!Array.isArray(t)||!!["string","boolean","number","undefined"].includes(typeof t)},f.mutateAtom=function(e){for(var r,o=u(this.plugins);!(r=o()).done;){var n=r.value;null!=n.isMatch&&n.isMatch(e.key)&&n.beforeHandleAtom&&(e=n.beforeHandleAtom(e,this))}var s=t.store.atomCache.get(e.id);if(s)throw this.addAtom(s),new Error("atom is cached, add to this.atoms derectly, no need to mutate");if((e=e.preprocessAtom(t.store.config)).handled)throw this.addAtom(e),new Error("atom is handled, add to this.atoms derectly ,no need to mutate");for(var i,a=u(this.plugins);!(i=a()).done;){var c=i.value;if(null!=c.isMatch&&c.isMatch(e.key)){c.beforeHandleAtom&&(e=c.beforeHandleAtom(e,this)),c.handleAtom&&(e=null==c.handleAtom?void 0:c.handleAtom(e,this)),e.handled=!0;break}}},f.parseCSSObject=function(r,o){void 0===o&&(o={});for(var i,a=n.parse(r),c=s.objectToClassName(r),l=u(a);!(i=l()).done;){var d=i.value,f=d.selector,m=d.selectorType,h=d.style,p=Object.entries(h);if(p.length){var v=p[0],y={propKey:v[0],propValue:v[1],meta:o};"pseudo"===m&&y.meta&&(y.meta.pseudo=f),"child"===m&&y.meta&&(y.meta.childSelector=f);var b=new e.Atom(y),g="void"===m;try{this.mutateAtom(b)}catch(e){continue}b.style||(b.style=h,b.id=s.objectToClassName({style:h}),b.className=g?s.objectToClassName(h):c,b.handled=!0);var k=t.store.atomCache.get(b.id);this.addAtom(k||b)}}},f.makeResponsiveStyle=function(e,t){return"@media (min-width: "+e+") {"+t+"}"},f.getClassNames=function(){var e=[];this.atoms.reduce((function(t,r){if(!r.style||!Object.keys(r.style).length)return t;var o=t.findIndex((function(e){return e.styleKeysHash===r.styleKeysHash}));return r.isValid?(-1===o?(e.push(r.className),t=[].concat(t,[r])):(t.splice(o,1,r),e.splice(o,1,r.className)),t):t}),[]);var t=this.props.className,r=(void 0===t?"":t).split(/\s+/).filter((function(t){return!e.includes(t)&&!!t}));return e=e.concat(r),this.hasResponsive&&e.unshift(this.uniqueClassName),e},f.toStyle=function(){var e=this;return this.atoms.reduce((function(r,o){if(!o.isValid)return r;var n=t.store.theme.colors,a=Object.entries(o.style).reduce((function(t,r){var o,a=r[0],u=r[1],c=e.formatCssValue(s.jsKeyToCssKey(a),n[u]||u);return i({},t,((o={})[a]=c,o))}),{});return i({},r,a)}),{})},f.toRules=function(e){var t=this;void 0===e&&(e=!1);var r=this.config.theme.modePrefix,o=void 0===r?"":r,n=[];this.atoms=this.atoms.sort((function(e,t){return parseInt(t.meta.breakpoint||"0")-parseInt(e.meta.breakpoint||"0")}));for(var i,a=function(){var r=i.value,a="",u=r.className,c=r.style,l=void 0===c?{}:c;if(!r.isValid)return"continue";if(s.isEmptyObj(l))return"continue";if(!e&&r.inserted)return"continue";r.inserted=!0;var d=r.meta,f=d.pseudo,m=d.mode,h=d.breakpoint,p=void 0===h?"":h,v=d.childSelector,y=(t.atoms.find((function(e){return e.styleKeys===r.styleKeys&&(r.meta.breakpoint||e.meta.breakpoint)}))||r.meta.breakpoint?"."+t.uniqueClassName:"")+"."+u;f&&(y+=f),m&&(y="."+o+m+" "+y),v&&(y=y+" "+v),a=y+" { "+t.styleToString(l,r.meta)+" }",p&&(a=t.makeResponsiveStyle(p,a)),n.push(a)},c=u(this.atoms);!(i=c()).done;)a();return n},f.getParsedProps=function(){var e=this.props,t=this.atoms;return s.isEmptyObj(e)?{}:Object.entries(e).reduce((function(e,r){var o=r[0],n=r[1];return t.find((function(e){return[e.propKey,e.key,e.id,"css"].includes(o)}))||(e[o]=n),e}),{})},f.insertRule=function(){var e=this.toRules();o.styleSheet.insertStyles(e)},(c=[{key:"uniqueClassName",get:function(){return s.objectToClassName(Object.keys(this.props))}},{key:"hasResponsive",get:function(){return!!this.atoms.find((function(e){return!!e.meta.breakpoint}))}},{key:"config",get:function(){return t.store.config}},{key:"plugins",get:function(){return t.store.config.plugins}}])&&function(e,t){for(var r=0;r<t.length;r++){var o=t[r];o.enumerable=o.enumerable||!1,o.configurable=!0,"value"in o&&(o.writable=!0),Object.defineProperty(e,o.key,o)}}(a.prototype,c),a}(),exports.isUnitProp=l;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("@fower/atom"),t=require("@fower/store"),r=require("@fower/cache"),n=require("@fower/color-helper"),i=require("@fower/sheet"),o=require("@fower/css-object-processor"),s=require("@fower/utils");function a(){return(a=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var r=arguments[t];for(var n in r)Object.prototype.hasOwnProperty.call(r,n)&&(e[n]=r[n])}return e}).apply(this,arguments)}function u(e,t){(null==t||t>e.length)&&(t=e.length);for(var r=0,n=new Array(t);r<t;r++)n[r]=e[r];return n}function c(e,t){var r="undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(r)return(r=r.call(e)).next.bind(r);if(Array.isArray(e)||(r=function(e,t){if(e){if("string"==typeof e)return u(e,void 0);var r=Object.prototype.toString.call(e).slice(8,-1);return"Object"===r&&e.constructor&&(r=e.constructor.name),"Map"===r||"Set"===r?Array.from(e):"Arguments"===r||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(r)?u(e,void 0):void 0}}(e))||t&&e&&"number"==typeof e.length){r&&(e=r);var n=0;return function(){return n>=e.length?{done:!0}:{done:!1,value:e[n++]}}}throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}var l=/(-columns|(^|[^e]-)padding|[^t]-spacing|l-align|rows|(^|(^border|[dkmnptx]|le|ne)-)width|^border|tom|[ek]-start|(o|[^e]-du)ration|us|(^|[^tv]-)left|(^|-)top|tance|rgin|e-offset|(er|g|n|t)-block|(^|[^tv]-)right|basis|[gnt]-inline|gap|(^|[^e]-)height|ness|(^|[^p]-)inset|[ek]-end|elay|tline|ve|dent|-rotate|n-rule|(c|ck|d|ne|t)-size)$/;function d(e){return l.test(e)}var f=["children","onClick","onChange","onBlur","className","placeholder"];exports.Parser=function(){function u(e){void 0===e&&(e={}),this.props=e,this.atoms=[],this.propList=[],this.getClassNameById=function(e){return t.store.config.prefix+e},this.traverseProps(e),t.store.config.autoDarkMode&&this.autoDarkMode()}var l,h=u.prototype;return h.traverseProps=function(r){if(!s.isEmptyObj(r)){var n=this.config,i=n.pseudos,o=void 0===i?[]:i,u=n.theme||{},l=u.breakpoints,d=u.modes,h=Object.keys(l),m=d||[],p=o,v=r.excludedProps,y=void 0===v?[]:v,b=Object.entries(r);if(null!=r&&r.className)for(var g,k=c(r.className.split(/\s+/));!(g=k()).done;)b.push([g.value,!0]);for(var S=0,A=b;S<A.length;S++){var C=A[S],j=C[0],O=C[1];if(!y.includes(j)&&!f.includes(j)&&this.isValidProp(j,O))if("css"!==j){if(j.startsWith("_")){var w=j.replace(/^_/,""),N=Array.isArray(O)?O.reduce((function(e,t){var r;return a({},e,((r={})[t]=!0,r))}),{}):O;if(m.includes(w)){this.parseCSSObject(N,{mode:w});continue}if(h.includes(w)){this.parseCSSObject(N,{breakpoint:l[w]});continue}if(p.includes(w)){this.parseCSSObject(N,{pseudo:":"+w});continue}}var P=t.store.compositions.get(j);if(P){this.parseCSSObject(P,{});var K=new e.Atom({propKey:j,propValue:O});K.handled=!0,K.style={},this.addAtom(K)}else{var x=new e.Atom({propKey:j,propValue:O});try{this.mutateAtom(x),x.handled&&this.addAtom(x)}catch(e){continue}}}else this.parseCSSObject(O,{})}for(var V,q=c(this.plugins);!(V=q()).done;){var I=V.value;I.afterAtomStyleCreate&&I.afterAtomStyleCreate(this)}}},h.autoDarkMode=function(){for(var t,n={white:"black",black:"white",50:"900",100:"800",200:"700",300:"600",400:"500",500:"400",600:"300",700:"200",800:"100",900:"50"},i=["color","backgroundColor","borderColor"],o=[],s=c(this.atoms);!(t=s()).done;){var u=t.value;if(i.includes(u.type)&&!u.meta.mode){if(this.atoms.find((function(e){return i.includes(e.type)&&"dark"===e.meta.mode})))continue;var l=Object.entries(u.style);if(null==l||!l.length)continue;var d=l[0][1];if(!d)continue;var f=(d.match(/^([a-z]+)(\d+)$/i)||[])[2];["white","black"].includes(d)&&(f=d);var h=JSON.stringify(u).replace(new RegExp(""+f,"g"),n[f]);"white"===f&&(h=h.replace(/White/g,"Black")),"black"===f&&(h=h.replace(/Black/g,"White"));var m=JSON.parse(h),p=new e.Atom(a({},m,{propKey:m.propKey+"--dark",meta:a({},m.meta,{mode:"dark"})})),v=r.atomCache.get(p.id);o.push(v||p)}}for(var y=0,b=o;y<b.length;y++)this.addAtom(b[y])},h.formatCssValue=function(e,r){if(!d(e))return r;var n;if(s.isPercentNumber(String(r)))return String(r).replace("p","%");if(!s.isNumber(r))return r;if((n=Number(r))<1&&n>0)return 100*n+"%";var i=t.store.config;return"none"!==i.unit?i.transformUnit?i.transformUnit(n):r+t.store.config.unit:n},h.styleToString=function(e,r){var i=this,o=r.important,a=r.colorPostfix;return Object.entries(e).reduce((function(e,r){var u=r[1],c=s.jsKeyToCssKey(r[0]),l=o?" !important":"",d=t.store.theme.colors;return e+(c+": ")+(u=a?n.formatColor(d[u]||u,a):i.formatCssValue(c,d[u]||u))+l+";"}),"")},h.addAtom=function(e){r.atomCache.get(e.id)||r.atomCache.set(e.id,e);for(var t=i.styleSheet.getSsrAtomIds(),n=this.config.theme.colors.modes,o=0,s=Object.entries(void 0===n?{}:n);o<s.length;o++){var u=s[o],c=u[0],l=u[1];if(e.style){var d=Object.entries(e.style);if(d.length){var f=d[0],h=f[0],m=l[f[1]];if(m){var p="--"+c,v=JSON.parse(JSON.stringify(e));v.key=e.key+p,v.id=e.id+p,v.meta=a({mode:c},e.meta),v.style[h]=m,t.includes(v.id)&&(v.inserted=!0),this.atoms.push(v)}}}}t.includes(e.id)&&(e.inserted=!0),this.atoms.push(e)},h.isValidProp=function(e,t){return"css"===e||!!e.startsWith("_")||!!Array.isArray(t)||!!["string","boolean","number","undefined"].includes(typeof t)},h.mutateAtom=function(e){for(var t,n=c(this.plugins);!(t=n()).done;){var i=t.value;null!=i.isMatch&&i.isMatch(e.key)&&i.beforeHandleAtom&&(e=i.beforeHandleAtom(e,this))}var o=r.atomCache.get(e.id);if(o)throw this.addAtom(o),new Error("atom is cached, add to this.atoms derectly, no need to mutate");if(e.handled)throw this.addAtom(e),new Error("atom is handled, add to this.atoms derectly ,no need to mutate");for(var s,a=c(this.plugins);!(s=a()).done;){var u=s.value;if(null!=u.isMatch&&u.isMatch(e.key)){u.beforeHandleAtom&&(e=u.beforeHandleAtom(e,this)),u.handleAtom&&(e=null==u.handleAtom?void 0:u.handleAtom(e,this)),e.handled=!0;break}}},h.parseCSSObject=function(t,n){void 0===n&&(n={});for(var i,s=c(o.parse(t));!(i=s()).done;){var u=i.value,l=u.selector,d=u.selectorType,f=u.style,h=Object.entries(f);if(h.length){var m=h[0],p={propKey:m[0],propValue:m[1],meta:a({},n)};if("pseudo"===d&&p.meta){var v=l.match(/(:+)(.+)/)||[],y=v[2];p.meta.pseudoPrefix=v[1],p.meta.pseudo=y}"child"===d&&p.meta&&(p.meta.childSelector=l);var b=new e.Atom(p);try{this.mutateAtom(b)}catch(e){continue}b.style||(b.style=f,b.handled=!0);var g=r.atomCache.get(b.id);this.addAtom(g||b)}}},h.makeResponsiveStyle=function(e,t){return"@media (min-width: "+e+") {"+t+"}"},h.getClassNames=function(){var e=this,t=[];this.atoms.reduce((function(r,n){if(!n.style||!Object.keys(n.style).length)return r;var i=r.findIndex((function(e){return e.styleKeysHash===n.styleKeysHash}));if(!n.isValid)return r;var o=e.getClassNameById(n.id);return-1===i?(t.push(o),r=[].concat(r,[n])):(r.splice(i,1,n),t.splice(i,1,o)),r}),[]);var r=this.props.className,n=(void 0===r?"":r).split(/\s+/).filter((function(e){return!t.includes(e)&&!!e}));return t=t.concat(n),this.hasResponsive&&t.unshift(this.uniqueClassName),t},h.toStyle=function(){var e=this;return this.atoms.reduce((function(r,n){if(!n.isValid)return r;var i=t.store.theme.colors,o=Object.entries(n.style).reduce((function(t,r){var n,o=r[0],u=r[1],c=e.formatCssValue(s.jsKeyToCssKey(o),i[u]||u);return a({},t,((n={})[o]=c,n))}),{});return a({},r,o)}),{})},h.toRules=function(e){var t=this;void 0===e&&(e=!1);var r=this.config.theme.modePrefix,n=void 0===r?"":r,i=[];this.atoms=this.atoms.sort((function(e,t){return parseInt(t.meta.breakpoint||"0")-parseInt(e.meta.breakpoint||"0")}));for(var o,a=function(){var r=o.value,a="",u=r.id,c=r.style,l=void 0===c?{}:c;if(!r.isValid)return"continue";if(s.isEmptyObj(l))return"continue";if(!e&&r.inserted)return"continue";r.inserted=!0;var d=r.meta,f=d.pseudo,h=d.pseudoPrefix,m=d.mode,p=d.breakpoint,v=void 0===p?"":p,y=d.childSelector,b=(t.atoms.find((function(e){return e.styleKeys===r.styleKeys&&(r.meta.breakpoint||e.meta.breakpoint)}))||r.meta.breakpoint?"."+t.uniqueClassName:"")+"."+t.getClassNameById(u);f&&(b=b+h+f),m&&(b="."+n+m+" "+b),y&&(b=b+" "+y),a=b+" { "+t.styleToString(l,r.meta)+" }",v&&(a=t.makeResponsiveStyle(v,a)),i.push(a)},u=c(this.atoms);!(o=u()).done;)a();return i},h.getParsedProps=function(){var e=this.props,t=this.atoms;return s.isEmptyObj(e)?{}:Object.entries(e).reduce((function(e,r){var n=r[0],i=r[1];return t.find((function(e){return[e.propKey,e.key,e.id,"css"].includes(n)}))||(e[n]=i),e}),{})},h.insertRule=function(){var e=this.toRules();i.styleSheet.insertStyles(e)},(l=[{key:"uniqueClassName",get:function(){return s.objectToClassName(Object.keys(this.props))}},{key:"hasResponsive",get:function(){return!!this.atoms.find((function(e){return!!e.meta.breakpoint}))}},{key:"config",get:function(){return t.store.config}},{key:"plugins",get:function(){return t.store.config.plugins}}])&&function(e,t){for(var r=0;r<t.length;r++){var n=t[r];n.enumerable=n.enumerable||!1,n.configurable=!0,"value"in n&&(n.writable=!0),Object.defineProperty(e,n.key,n)}}(u.prototype,l),u}(),exports.isUnitProp=d;
 //# sourceMappingURL=parser.cjs.production.min.js.map

dist/parser.d.ts

@@ -24,2 +24,3 @@ import { Atom } from '@fower/atom';
     get plugins(): any[];
+    getClassNameById: (id: string) => string;
     /**
@@ -26,0 +27,0 @@ * traverse Props to init atoms

dist/parser.esm.js

 import { Atom } from '@fower/atom';
 import { store } from '@fower/store';
+import { atomCache } from '@fower/cache';
 import { formatColor } from '@fower/color-helper';
@@ -110,2 +111,7 @@ import { styleSheet } from '@fower/sheet';
     this.propList = [];
+
+    this.getClassNameById = function (id) {
+      return store.config.prefix + id;
+    };
+
     this.traverseProps(props);
@@ -146,5 +152,4 @@
       }
-    }
+    } // traverse Props
 
-    console.log('entries====:', entries); // traverse Props
 
@@ -161,3 +166,3 @@ for (var _i = 0, _entries = entries; _i < _entries.length; _i++) {
       if (propKey === 'css') {
-        this.parseCSSObject(propValue);
+        this.parseCSSObject(propValue, {});
         continue;
@@ -279,3 +284,2 @@ }
         var _darkAtom = new Atom(_extends({}, cloned, {
-          className: '',
           propKey: cloned.propKey + '--dark',
@@ -287,3 +291,3 @@ meta: _extends({}, cloned.meta, {
 
-        var cachedAtom = store.atomCache.get(_darkAtom.id);
+        var cachedAtom = atomCache.get(_darkAtom.id);
 
@@ -374,8 +378,7 @@ if (cachedAtom) {
     // if not cached, let's cache it
-    if (!store.atomCache.get(atom.id)) {
-      store.atomCache.set(atom.id, atom);
+    if (!atomCache.get(atom.id)) {
+      atomCache.set(atom.id, atom);
     }
 
-    atom.createClassName(store.config.prefix); // only create atom className when toRules
-
+    var ssrAtomIds = styleSheet.getSsrAtomIds();
     var _this$config$theme$co = this.config.theme.colors.modes,
@@ -404,3 +407,2 @@ modes = _this$config$theme$co === void 0 ? {} : _this$config$theme$co;
         var modeAtom = JSON.parse(JSON.stringify(atom));
-        modeAtom.className = atom.className + postfix;
         modeAtom.key = atom.key + postfix;
@@ -412,2 +414,3 @@ modeAtom.id = atom.id + postfix;
         modeAtom.style[styleKey] = colorValue;
+        if (ssrAtomIds.includes(modeAtom.id)) modeAtom.inserted = true;
         this.atoms.push(modeAtom);
@@ -417,2 +420,3 @@ }
 
+    if (ssrAtomIds.includes(atom.id)) atom.inserted = true;
     this.atoms.push(atom);
@@ -454,3 +458,3 @@ }
 
-    var cachedAtom = store.atomCache.get(atom.id);
+    var cachedAtom = atomCache.get(atom.id);
 
@@ -460,5 +464,4 @@ if (cachedAtom) {
       throw new Error('atom is cached, add to this.atoms derectly, no need to mutate');
-    }
+    } // if handled, push to this.atoms and skip it
 
-    atom = atom.preprocessAtom(store.config); // if handled, push to this.atoms and skip it
 
@@ -493,3 +496,2 @@ if (atom.handled) {
     var parsed = parse(propValue);
-    var prefixClassName = objectToClassName(propValue);
 
@@ -502,3 +504,4 @@ for (var _iterator6 = _createForOfIteratorHelperLoose(parsed), _step6; !(_step6 = _iterator6()).done;) {
       var entries = Object.entries(style);
-      if (!entries.length) continue;
+      if (!entries.length) continue; // entries.length is 1
+
       var _entries$2 = entries[0],
@@ -510,7 +513,12 @@ propKey = _entries$2[0],
         propValue: _propValue,
-        meta: meta
+        meta: _extends({}, meta)
       };
 
       if (selectorType === 'pseudo' && option.meta) {
-        option.meta.pseudo = selector;
+        var _ref4 = selector.match(/(:+)(.+)/) || [],
+            pseudoPrefix = _ref4[1],
+            pseudo = _ref4[2];
+
+        option.meta.pseudoPrefix = pseudoPrefix;
+        option.meta.pseudo = pseudo;
       }
@@ -523,3 +531,2 @@
       var atom = new Atom(option);
-      var isVoid = selectorType === 'void';
 
@@ -534,12 +541,7 @@ try {
       if (!atom.style) {
-        atom.style = style; // TODO: need refactor
-
-        atom.id = objectToClassName({
-          style: style
-        });
-        atom.className = isVoid ? objectToClassName(style) : prefixClassName;
+        atom.style = style;
         atom.handled = true;
       }
 
-      var cachedAtom = store.atomCache.get(atom.id);
+      var cachedAtom = atomCache.get(atom.id);
 
@@ -563,2 +565,4 @@ if (cachedAtom) {
   _proto.getClassNames = function getClassNames() {
+    var _this2 = this;
+
     /**
@@ -578,8 +582,10 @@ * handle override style
 
+      var className = _this2.getClassNameById(cur.id);
+
       if (index === -1) {
-        classNames.push(cur.className);
+        classNames.push(className);
         result = [].concat(result, [cur]);
       } else {
         result.splice(index, 1, cur);
-        classNames.splice(index, 1, cur.className);
+        classNames.splice(index, 1, className);
       }
@@ -604,3 +610,3 @@
   _proto.toStyle = function toStyle() {
-    var _this2 = this;
+    var _this3 = this;
 
@@ -611,9 +617,9 @@ var style = this.atoms.reduce(function (result, atom) {
       var colors = store.theme.colors;
-      var style = Object.entries(atom.style).reduce(function (c, _ref4) {
+      var style = Object.entries(atom.style).reduce(function (c, _ref5) {
         var _extends3;
 
-        var key = _ref4[0],
-            value = _ref4[1];
+        var key = _ref5[0],
+            value = _ref5[1];
 
-        var cssValue = _this2.formatCssValue(jsKeyToCssKey(key), colors[value] || value);
+        var cssValue = _this3.formatCssValue(jsKeyToCssKey(key), colors[value] || value);
 
@@ -633,3 +639,3 @@ return _extends({}, c, (_extends3 = {}, _extends3[key] = cssValue, _extends3));
   _proto.toRules = function toRules(enableInserted) {
-    var _this3 = this;
+    var _this4 = this;
 
@@ -651,3 +657,3 @@ if (enableInserted === void 0) {
       var rule = '';
-      var className = atom.className,
+      var id = atom.id,
           isValid = atom.isValid,
@@ -668,2 +674,3 @@ _atom$style = atom.style,
           pseudo = _atom$meta.pseudo,
+          pseudoPrefix = _atom$meta.pseudoPrefix,
           mode = _atom$meta.mode,
@@ -674,12 +681,15 @@ _atom$meta$breakpoint = _atom$meta.breakpoint,
 
-      var shouldUseUniqueClassName = !!_this3.atoms.find(function (i) {
+      var shouldUseUniqueClassName = !!_this4.atoms.find(function (i) {
         return i.styleKeys === atom.styleKeys && (atom.meta.breakpoint || i.meta.breakpoint);
       });
-      var uniqueSelector = shouldUseUniqueClassName || atom.meta.breakpoint ? '.' + _this3.uniqueClassName : '';
+      var uniqueSelector = shouldUseUniqueClassName || atom.meta.breakpoint ? '.' + _this4.uniqueClassName : '';
+
+      var className = _this4.getClassNameById(id);
+
       var selector = uniqueSelector + "." + className;
-      if (pseudo) selector = selector + pseudo;
+      if (pseudo) selector = selector + pseudoPrefix + pseudo;
       if (mode) selector = "." + modePrefix + mode + " " + selector;
       if (childSelector) selector = selector + " " + childSelector;
-      rule = selector + " { " + _this3.styleToString(style, atom.meta) + " }";
-      if (breakpoint) rule = _this3.makeResponsiveStyle(breakpoint, rule);
+      rule = selector + " { " + _this4.styleToString(style, atom.meta) + " }";
+      if (breakpoint) rule = _this4.makeResponsiveStyle(breakpoint, rule);
       rules.push(rule);
@@ -705,5 +715,5 @@ };
 
-    var parsedProps = entries.reduce(function (result, _ref5) {
-      var key = _ref5[0],
-          value = _ref5[1];
+    var parsedProps = entries.reduce(function (result, _ref6) {
+      var key = _ref6[0],
+          value = _ref6[1];
       var find = atoms.find(function (atom) {
@@ -710,0 +720,0 @@ return [atom.propKey, atom.key, atom.id, 'css'].includes(key);

package.json

 {
   "name": "@fower/parser",
-  "version": "1.27.0",
+  "version": "1.28.0",
   "license": "MIT",
@@ -24,10 +24,11 @@ "main": "dist/index.js",
   "dependencies": {
-    "@fower/atom": "^1.27.0",
-    "@fower/css-object-processor": "^1.27.0",
-    "@fower/sheet": "^1.27.0",
-    "@fower/store": "^1.27.0",
-    "@fower/types": "^1.27.0",
-    "@fower/utils": "^1.27.0"
+    "@fower/atom": "^1.28.0",
+    "@fower/cache": "^1.28.0",
+    "@fower/css-object-processor": "^1.28.0",
+    "@fower/sheet": "^1.28.0",
+    "@fower/store": "^1.28.0",
+    "@fower/types": "^1.28.0",
+    "@fower/utils": "^1.28.0"
   },
-  "gitHead": "ed8b71692d5c1a6f23279c0f6b4bb47cf18adacf"
+  "gitHead": "5bf8d61bd49f8a82aebd6492ed162584430fdf21"
 }

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

150808

increased by0.35%

Lines of code

1344

increased by0.75%

Worsened metrics

Dependency count

7

increased by16.67%

Dependency changes

• + Added@fower/cache@^1.28.0

• + Added@fower/cache@1.29.0(transitive)

• Updated@fower/atom@^1.28.0

• Updated@fower/css-object-processor@^1.28.0

• Updated@fower/sheet@^1.28.0

• Updated@fower/store@^1.28.0

• Updated@fower/types@^1.28.0

• Updated@fower/utils@^1.28.0