@fower/parser - npm Package Compare versions

Comparing version 1.26.0 to 1.27.0

dist/parser.cjs.development.js

@@ -96,9 +96,2 @@ 'use strict';
 
-/**
- * @example p2,mx4,left10,spaceX4...
- * @example p-20,opacity-80
- */
-
-var digitReg = /^([mp][xytrbl]?|space[xy]?|top|right|bottom|left|[wh]|square|circle|min[hw]|max[hw]|opacity|delay|duration|translate[xyz]|scale[xy]?|rotate[xy]?|skew[xy]?|text|zIndex|leading|stroke|fontWeight|outlineOffset|order|flex(Grow|Shrink|Basis)?|(row|column)?Gap|gridTemplateColumns|border[trbl]?|rounded(Top(Left|Right)?|Right|Bottom(Left|Right)?|Left)?)(-?-?\d+[a-z]*?|-auto)$/i; //  high-frequency used props in react
-
 var reactProps = ['children', 'onClick', 'onChange', 'onBlur', 'className', 'placeholder'];
@@ -122,3 +115,3 @@ /**
     this.propList = [];
-    this.traverseProps();
+    this.traverseProps(props);
 
@@ -132,32 +125,12 @@ if (store.store.config.autoDarkMode) {
 
-  _proto.digitPreprocessor = function digitPreprocessor(propItem) {
-    var spacings = store.store.config.theme.spacings;
-    if (!digitReg.test(propItem.key)) return propItem; // is theme space key
+  /**
+   * traverse Props to init atoms
+   */
+  _proto.traverseProps = function traverseProps(props) {
+    if (utils.isEmptyObj(props)) return;
+    var _this$config = this.config,
+        _this$config$pseudos = _this$config.pseudos,
+        pseudos = _this$config$pseudos === void 0 ? [] : _this$config$pseudos,
+        theme = _this$config.theme;
 
-    var isSpace = /^([a-z]+)(\d+)$/i.test(propItem.key);
-    /**
-     *  match props link: m4,mx2,mt9, spaceX4...
-     *  to m4 -> [ key: m, value: 4 ]
-     *  to m-20 -> [ key: m, value: 20 ]
-     *  to m-20px -> [ key: m, value: '20px' ]
-     */
-
-    var keyStr = propItem.key.toString();
-    var result = keyStr.match(/^([a-z]+)(\d+)$/i) || keyStr.match(/^([a-z]*)-(-?\d+[a-z]*?)$/i) || keyStr.match(/^([a-z]+)-(auto)$/i);
-    if (!result) return propItem;
-    var newKey = result[1],
-        newPropValue = result[2];
-    propItem.key = newKey;
-    propItem.value = isSpace ? spacings[newPropValue.toLowerCase()] : newPropValue;
-    return propItem;
-  };
-
-  _proto.postfixPreprocessor = function postfixPreprocessor(propItem) {
-    var connector = '--';
-    var specialPseudos = ['after', 'before', 'placeholder', 'selection'];
-    var _store$config = store.store.config,
-        _store$config$pseudos = _store$config.pseudos,
-        pseudos = _store$config$pseudos === void 0 ? [] : _store$config$pseudos,
-        theme = _store$config.theme;
-
     var _ref = theme || {},
@@ -167,146 +140,27 @@ breakpoints = _ref.breakpoints,
 
-    var propKey = propItem.propKey,
-        propValue = propItem.propValue;
     var breakpointKeys = Object.keys(breakpoints);
     var modeKeys = modes || [];
     var pseudoKeys = pseudos;
-    var regResponsiveStr = connector + "(" + breakpointKeys.join('|') + ")";
-    var regModeStr = connector + "(" + modeKeys.join('|') + ")";
-    var regPseudoStr = connector + "(" + pseudoKeys.join('|') + ")";
-    var regMode = new RegExp(regModeStr);
-    var regPseudo = new RegExp(regPseudoStr);
-    var regResponsive = new RegExp(regResponsiveStr);
-    var regImportant = /--i/i;
-    var regColorPostfix = /--[told](\d{1,2}|100)($|--)/i;
-    /** handle value like: bg="red500--T40", color="#666--O30" */
+    var _props$excludedProps = props.excludedProps,
+        excludedProps = _props$excludedProps === void 0 ? [] : _props$excludedProps;
+    var entries = Object.entries(props);
 
-    if (regColorPostfix.test(propValue)) {
-      var _propValue$split = propValue.split('--'),
-          colorName = _propValue$split[0],
-          postfix = _propValue$split[1];
-
-      propItem.value = colorName;
-      propItem.meta.colorPostfix = postfix;
-    }
-
-    var isMode = regMode.test(propKey);
-    var isPseudo = regPseudo.test(propKey);
-    var isResponsive = regResponsive.test(propKey);
-    var isImportant = regImportant.test(propKey);
-    var isColorPostfix = regColorPostfix.test(propKey);
-    var hasPostfix = isMode || isPseudo || isResponsive || isImportant || isColorPostfix;
-    if (!hasPostfix) return this.digitPreprocessor(propItem);
-    var result = propKey.split(connector);
-    propItem.key = result[0]; // key that already removed postfix
-
-    if (isMode) {
-      propItem.meta.mode = result.find(function (i) {
-        return modeKeys.includes(i);
-      });
-    }
-
-    if (isPseudo) {
-      var pseudo = result.find(function (i) {
-        return pseudoKeys.includes(i);
-      });
-      var pseudoPrefix = specialPseudos.includes(pseudo) ? '::' : ':';
-      propItem.meta.pseudo = pseudoPrefix + pseudo;
-    }
-
-    if (isResponsive) {
-      var breakpointType = result.find(function (i) {
-        return breakpointKeys.includes(i);
-      });
-      propItem.meta.breakpoint = breakpoints[breakpointType];
-    }
-
-    if (isImportant) {
-      propItem.meta.important = !!result.find(function (i) {
-        return i === 'i';
-      });
-    }
-
-    if (isColorPostfix) {
-      propItem.meta.colorPostfix = result.find(function (i) {
-        return regColorPostfix.test("--" + i);
-      });
-    } // check is theme space key, if yes, preprocess it
-    // this.digitPreprocessor(spacings)
-
-
-    return this.digitPreprocessor(propItem);
-  };
-
-  _proto.preprocessProps = function preprocessProps() {
-    var _this$props;
-
-    var propList = [];
-    if (!this.props) return [];
-
-    if ((_this$props = this.props) != null && _this$props.className) {
-      for (var _iterator = _createForOfIteratorHelperLoose(this.props.className.split(/\s+/)), _step; !(_step = _iterator()).done;) {
+    if (props != null && props.className) {
+      for (var _iterator = _createForOfIteratorHelperLoose(props.className.split(/\s+/)), _step; !(_step = _iterator()).done;) {
         var item = _step.value;
-        this.props[item] = true;
+        entries.push([item, true]);
       }
     }
 
-    var _this$props$excludedP = this.props.excludedProps,
-        excludedProps = _this$props$excludedP === void 0 ? [] : _this$props$excludedP;
+    console.log('entries====:', entries); // traverse Props
 
-    for (var propKey in this.props) {
-      if (!Reflect.has(this.props, propKey)) continue; // the prop should be excluded by user setting
-
+    for (var _i = 0, _entries = entries; _i < _entries.length; _i++) {
+      var _entries$_i = _entries[_i],
+          propKey = _entries$_i[0],
+          propValue = _entries$_i[1];
+      // the prop should be excluded by user setting
       if (excludedProps.includes(propKey)) continue;
       if (reactProps.includes(propKey)) continue;
-      var propValue = this.props[propKey];
-      if (!this.isValidProp(propKey, propValue)) continue;
-      var propItem = this.postfixPreprocessor({
-        propKey: propKey,
-        propValue: propValue,
-        key: propKey,
-        meta: {}
-      });
+      if (!this.isValidProp(propKey, propValue)) continue; // parse css prop
 
-      for (var _iterator2 = _createForOfIteratorHelperLoose(this.plugins), _step2; !(_step2 = _iterator2()).done;) {
-        var plugin = _step2.value;
-
-        if (plugin.isMatch(propItem.key)) {
-          if (plugin.beforeParseProps) {
-            plugin.beforeParseProps(propItem, this);
-          }
-
-          this.propList.push(propItem);
-          break;
-        }
-      }
-    }
-
-    return propList;
-  }
-  /**
-   * traverse Props to init atoms
-   */
-  ;
-
-  _proto.traverseProps = function traverseProps() {
-    if (utils.isEmptyObj(this.props)) return;
-    var _this$config = this.config,
-        _this$config$pseudos = _this$config.pseudos,
-        pseudos = _this$config$pseudos === void 0 ? [] : _this$config$pseudos,
-        theme = _this$config.theme;
-
-    var _ref2 = theme || {},
-        breakpoints = _ref2.breakpoints,
-        modes = _ref2.modes;
-
-    var breakpointKeys = Object.keys(breakpoints);
-    var modeKeys = modes || [];
-    var pseudoKeys = pseudos;
-    this.preprocessProps(); // traverse Props
-
-    for (var _iterator3 = _createForOfIteratorHelperLoose(this.propList), _step3; !(_step3 = _iterator3()).done;) {
-      var item = _step3.value;
-      var propKey = item.propKey,
-          propValue = item.propValue; // parse css prop
-
       if (propKey === 'css') {
@@ -365,3 +219,6 @@ this.parseCSSObject(propValue);
 
-      var atom$1 = new atom.Atom(item);
+      var atom$1 = new atom.Atom({
+        propKey: propKey,
+        propValue: propValue
+      });
 
@@ -376,4 +233,4 @@ try {
 
-    for (var _iterator4 = _createForOfIteratorHelperLoose(this.plugins), _step4; !(_step4 = _iterator4()).done;) {
-      var plugin = _step4.value;
+    for (var _iterator2 = _createForOfIteratorHelperLoose(this.plugins), _step2; !(_step2 = _iterator2()).done;) {
+      var plugin = _step2.value;
 
@@ -405,4 +262,4 @@ if (plugin.afterAtomStyleCreate) {
 
-    for (var _iterator5 = _createForOfIteratorHelperLoose(this.atoms), _step5; !(_step5 = _iterator5()).done;) {
-      var atom$1 = _step5.value;
+    for (var _iterator3 = _createForOfIteratorHelperLoose(this.atoms), _step3; !(_step3 = _iterator3()).done;) {
+      var atom$1 = _step3.value;
 
@@ -420,4 +277,4 @@ if (colorKeys.includes(atom$1.type) && !atom$1.meta.mode) {
 
-        var _ref3 = colorValue.match(/^([a-z]+)(\d+)$/i) || [],
-            mapKey = _ref3[2];
+        var _ref2 = colorValue.match(/^([a-z]+)(\d+)$/i) || [],
+            mapKey = _ref2[2];
 
@@ -448,4 +305,4 @@ if (['white', 'black'].includes(colorValue)) mapKey = colorValue;
 
-    for (var _i = 0, _darkAtoms = darkAtoms; _i < _darkAtoms.length; _i++) {
-      var darkAtom = _darkAtoms[_i];
+    for (var _i2 = 0, _darkAtoms = darkAtoms; _i2 < _darkAtoms.length; _i2++) {
+      var darkAtom = _darkAtoms[_i2];
       this.addAtom(darkAtom);
@@ -506,5 +363,5 @@ }
         colorPostfix = meta.colorPostfix;
-    return Object.entries(style).reduce(function (r, _ref4) {
-      var key = _ref4[0],
-          value = _ref4[1];
+    return Object.entries(style).reduce(function (r, _ref3) {
+      var key = _ref3[0],
+          value = _ref3[1];
       var cssKey = utils.jsKeyToCssKey(key);
@@ -530,2 +387,4 @@ var posfix = important ? ' !important' : '';
 
+    atom.createClassName(store.store.config.prefix); // only create atom className when toRules
+
     var _this$config$theme$co = this.config.theme.colors.modes,
@@ -536,14 +395,14 @@ modes = _this$config$theme$co === void 0 ? {} : _this$config$theme$co;
 
-    for (var _i2 = 0, _entries = entries; _i2 < _entries.length; _i2++) {
-      var _entries$_i = _entries[_i2],
-          mode = _entries$_i[0],
-          colors = _entries$_i[1];
+    for (var _i3 = 0, _entries2 = entries; _i3 < _entries2.length; _i3++) {
+      var _entries2$_i = _entries2[_i3],
+          mode = _entries2$_i[0],
+          colors = _entries2$_i[1];
       if (!atom.style) continue;
 
-      var _entries2 = Object.entries(atom.style);
+      var _entries3 = Object.entries(atom.style);
 
-      if (!_entries2.length) continue;
-      var _entries2$ = _entries2[0],
-          styleKey = _entries2$[0],
-          styleValue = _entries2$[1];
+      if (!_entries3.length) continue;
+      var _entries3$ = _entries3[0],
+          styleKey = _entries3$[0],
+          styleValue = _entries3$[1];
       var colorValue = colors[styleValue];
@@ -593,4 +452,4 @@
   _proto.mutateAtom = function mutateAtom(atom) {
-    for (var _iterator6 = _createForOfIteratorHelperLoose(this.plugins), _step6; !(_step6 = _iterator6()).done;) {
-      var plugin = _step6.value;
+    for (var _iterator4 = _createForOfIteratorHelperLoose(this.plugins), _step4; !(_step4 = _iterator4()).done;) {
+      var plugin = _step4.value;
       if (!(plugin.isMatch != null && plugin.isMatch(atom.key))) continue;
@@ -608,4 +467,5 @@
       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
 
@@ -617,4 +477,4 @@ if (atom.handled) {
 
-    for (var _iterator7 = _createForOfIteratorHelperLoose(this.plugins), _step7; !(_step7 = _iterator7()).done;) {
-      var _plugin = _step7.value;
+    for (var _iterator5 = _createForOfIteratorHelperLoose(this.plugins), _step5; !(_step5 = _iterator5()).done;) {
+      var _plugin = _step5.value;
       if (!(_plugin.isMatch != null && _plugin.isMatch(atom.key))) continue;
@@ -643,7 +503,7 @@
 
-    for (var _iterator8 = _createForOfIteratorHelperLoose(parsed), _step8; !(_step8 = _iterator8()).done;) {
-      var _step8$value = _step8.value,
-          selector = _step8$value.selector,
-          selectorType = _step8$value.selectorType,
-          style = _step8$value.style;
+    for (var _iterator6 = _createForOfIteratorHelperLoose(parsed), _step6; !(_step6 = _iterator6()).done;) {
+      var _step6$value = _step6.value,
+          selector = _step6$value.selector,
+          selectorType = _step6$value.selectorType,
+          style = _step6$value.style;
       var entries = Object.entries(style);
@@ -752,7 +612,7 @@ if (!entries.length) continue;
       var colors = store.store.theme.colors;
-      var style = Object.entries(atom.style).reduce(function (c, _ref5) {
+      var style = Object.entries(atom.style).reduce(function (c, _ref4) {
         var _extends3;
 
-        var key = _ref5[0],
-            value = _ref5[1];
+        var key = _ref4[0],
+            value = _ref4[1];
 
@@ -789,5 +649,3 @@ var cssValue = _this2.formatCssValue(utils.jsKeyToCssKey(key), colors[value] || value);
     var _loop = function _loop() {
-      var atom = _step9.value;
-      atom.createClassName(store.store.config.prefix); // only create atom className when toRules
-
+      var atom = _step7.value;
       var rule = '';
@@ -828,3 +686,3 @@ var className = atom.className,
 
-    for (var _iterator9 = _createForOfIteratorHelperLoose(this.atoms), _step9; !(_step9 = _iterator9()).done;) {
+    for (var _iterator7 = _createForOfIteratorHelperLoose(this.atoms), _step7; !(_step7 = _iterator7()).done;) {
       var _ret = _loop();
@@ -846,5 +704,5 @@
 
-    var parsedProps = entries.reduce(function (result, _ref6) {
-      var key = _ref6[0],
-          value = _ref6[1];
+    var parsedProps = entries.reduce(function (result, _ref5) {
+      var key = _ref5[0],
+          value = _ref5[1];
       var find = atoms.find(function (atom) {
@@ -851,0 +709,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"),i=require("@fower/css-object-processor"),s=require("@fower/utils");function n(){return(n=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=/^([mp][xytrbl]?|space[xy]?|top|right|bottom|left|[wh]|square|circle|min[hw]|max[hw]|opacity|delay|duration|translate[xyz]|scale[xy]?|rotate[xy]?|skew[xy]?|text|zIndex|leading|stroke|fontWeight|outlineOffset|order|flex(Grow|Shrink|Basis)?|(row|column)?Gap|gridTemplateColumns|border[trbl]?|rounded(Top(Left|Right)?|Right|Bottom(Left|Right)?|Left)?)(-?-?\d+[a-z]*?|-auto)$/i,p=["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(),t.store.config.autoDarkMode&&this.autoDarkMode()}var c,f=a.prototype;return f.digitPreprocessor=function(e){var r=t.store.config.theme.spacings;if(!d.test(e.key))return e;var o=/^([a-z]+)(\d+)$/i.test(e.key),i=e.key.toString(),s=i.match(/^([a-z]+)(\d+)$/i)||i.match(/^([a-z]*)-(-?\d+[a-z]*?)$/i)||i.match(/^([a-z]+)-(auto)$/i);if(!s)return e;var n=s[2];return e.key=s[1],e.value=o?r[n.toLowerCase()]:n,e},f.postfixPreprocessor=function(e){var r=t.store.config,o=r.pseudos,i=void 0===o?[]:o,s=r.theme||{},n=s.breakpoints,a=s.modes,u=e.propKey,c=e.propValue,l=Object.keys(n),d=a||[],p=i,f="--("+l.join("|")+")",h="--("+d.join("|")+")",m="--("+p.join("|")+")",v=new RegExp(h),y=new RegExp(m),b=new RegExp(f),g=/--[told](\d{1,2}|100)($|--)/i;if(g.test(c)){var k=c.split("--"),j=k[1];e.value=k[0],e.meta.colorPostfix=j}var w=v.test(u),S=y.test(u),C=b.test(u),A=/--i/i.test(u),O=g.test(u);if(!(w||S||C||A||O))return this.digitPreprocessor(e);var x=u.split("--");if(e.key=x[0],w&&(e.meta.mode=x.find((function(e){return d.includes(e)}))),S){var P=x.find((function(e){return p.includes(e)})),N=["after","before","placeholder","selection"].includes(P)?"::":":";e.meta.pseudo=N+P}if(C){var K=x.find((function(e){return l.includes(e)}));e.meta.breakpoint=n[K]}return A&&(e.meta.important=!!x.find((function(e){return"i"===e}))),O&&(e.meta.colorPostfix=x.find((function(e){return g.test("--"+e)}))),this.digitPreprocessor(e)},f.preprocessProps=function(){var e;if(!this.props)return[];if(null!=(e=this.props)&&e.className)for(var t,r=u(this.props.className.split(/\s+/));!(t=r()).done;)this.props[t.value]=!0;var o=this.props.excludedProps,i=void 0===o?[]:o;for(var s in this.props)if(Reflect.has(this.props,s)&&!i.includes(s)&&!p.includes(s)){var n=this.props[s];if(this.isValidProp(s,n))for(var a,c=this.postfixPreprocessor({propKey:s,propValue:n,key:s,meta:{}}),l=u(this.plugins);!(a=l()).done;){var d=a.value;if(d.isMatch(c.key)){d.beforeParseProps&&d.beforeParseProps(c,this),this.propList.push(c);break}}}return[]},f.traverseProps=function(){if(!s.isEmptyObj(this.props)){var r=this.config,o=r.pseudos,i=void 0===o?[]:o,a=r.theme||{},c=a.breakpoints,l=a.modes,d=Object.keys(c),p=l||[],f=i;this.preprocessProps();for(var h,m=u(this.propList);!(h=m()).done;){var v=h.value,y=v.propKey,b=v.propValue;if("css"!==y){if(y.startsWith("_")){var g=y.replace(/^_/,""),k=Array.isArray(b)?b.reduce((function(e,t){var r;return n({},e,((r={})[t]=!0,r))}),{}):b;if(p.includes(g)){this.parseCSSObject(k,{mode:g});continue}if(d.includes(g)){this.parseCSSObject(k,{breakpoint:c[g]});continue}if(f.includes(g)){this.parseCSSObject(k,{pseudo:":"+g});continue}}var j=t.store.compositions.get(y);if(j){this.parseCSSObject(j,{});var w=new e.Atom({propKey:y,propValue:b});w.handled=!0,w.style={},this.addAtom(w)}else{var S=new e.Atom(v);try{this.mutateAtom(S),S.handled&&this.addAtom(S)}catch(e){continue}}}else this.parseCSSObject(b)}for(var C,A=u(this.plugins);!(C=A()).done;){var O=C.value;O.afterAtomStyleCreate&&O.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"},i=["color","backgroundColor","borderColor"],s=[],a=u(this.atoms);!(r=a()).done;){var c=r.value;if(i.includes(c.type)&&!c.meta.mode){if(this.atoms.find((function(e){return i.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 p=(d.match(/^([a-z]+)(\d+)$/i)||[])[2];["white","black"].includes(d)&&(p=d);var f=JSON.stringify(c).replace(new RegExp(""+p,"g"),o[p]);"white"===p&&(f=f.replace(/White/g,"Black")),"black"===p&&(f=f.replace(/Black/g,"White"));var h=JSON.parse(f),m=new e.Atom(n({},h,{className:"",propKey:h.propKey+"--dark",meta:n({},h.meta,{mode:"dark"})})),v=t.store.atomCache.get(m.id);s.push(v||m)}}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 i=t.store.config;return"none"!==i.unit?i.transformUnit?i.transformUnit(o):r+t.store.config.unit:o},f.styleToString=function(e,o){var i=this,n=o.important,a=o.colorPostfix;return Object.entries(e).reduce((function(e,o){var u=o[1],c=s.jsKeyToCssKey(o[0]),l=n?" !important":"",d=t.store.theme.colors;return e+(c+": ")+(u=a?r.formatColor(d[u]||u,a):i.formatCssValue(c,d[u]||u))+l+";"}),"")},f.addAtom=function(e){t.store.atomCache.get(e.id)||t.store.atomCache.set(e.id,e);for(var r=this.config.theme.colors.modes,o=0,i=Object.entries(void 0===r?{}:r);o<i.length;o++){var s=i[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],p=u[l[1]];if(p){var f="--"+a,h=JSON.parse(JSON.stringify(e));h.className=e.className+f,h.key=e.key+f,h.id=e.id+f,h.meta=n({mode:a},e.meta),h.style[d]=p,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 i=r.value;null!=i.isMatch&&i.isMatch(e.key)&&i.beforeHandleAtom&&(e=i.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.handled)throw this.addAtom(e),new Error("atom is handled, add to this.atoms derectly ,no need to mutate");for(var n,a=u(this.plugins);!(n=a()).done;){var c=n.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 n,a=i.parse(r),c=s.objectToClassName(r),l=u(a);!(n=l()).done;){var d=n.value,p=d.selector,f=d.selectorType,h=d.style,m=Object.entries(h);if(m.length){var v=m[0],y={propKey:v[0],propValue:v[1],meta:o};"pseudo"===f&&y.meta&&(y.meta.pseudo=p),"child"===f&&y.meta&&(y.meta.childSelector=p);var b=new e.Atom(y),g="void"===f;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 i=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),i[u]||u);return n({},t,((o={})[a]=c,o))}),{});return n({},r,a)}),{})},f.toRules=function(e){var r=this;void 0===e&&(e=!1);var o=this.config.theme.modePrefix,i=void 0===o?"":o,n=[];this.atoms=this.atoms.sort((function(e,t){return parseInt(t.meta.breakpoint||"0")-parseInt(e.meta.breakpoint||"0")}));for(var a,c=function(){var o=a.value;o.createClassName(t.store.config.prefix);var u="",c=o.className,l=o.style,d=void 0===l?{}:l;if(!o.isValid)return"continue";if(s.isEmptyObj(d))return"continue";if(!e&&o.inserted)return"continue";o.inserted=!0;var p=o.meta,f=p.pseudo,h=p.mode,m=p.breakpoint,v=void 0===m?"":m,y=p.childSelector,b=(r.atoms.find((function(e){return e.styleKeys===o.styleKeys&&(o.meta.breakpoint||e.meta.breakpoint)}))||o.meta.breakpoint?"."+r.uniqueClassName:"")+"."+c;f&&(b+=f),h&&(b="."+i+h+" "+b),y&&(b=b+" "+y),u=b+" { "+r.styleToString(d,o.meta)+" }",v&&(u=r.makeResponsiveStyle(v,u)),n.push(u)},l=u(this.atoms);!(a=l()).done;)c();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],i=r[1];return t.find((function(e){return[e.propKey,e.key,e.id,"css"].includes(o)}))||(e[o]=i),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/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;
 //# sourceMappingURL=parser.cjs.production.min.js.map

dist/parser.d.ts

@@ -24,9 +24,6 @@ import { Atom } from '@fower/atom';
     get plugins(): any[];
-    digitPreprocessor(propItem: PropItem): PropItem;
-    postfixPreprocessor(propItem: PropItem): PropItem;
-    preprocessProps(): PropItem[];
     /**
      * traverse Props to init atoms
      */
-    traverseProps(): void;
+    traverseProps(props: Props): void;
     autoDarkMode(): void;
@@ -33,0 +30,0 @@ /**

dist/parser.esm.js

@@ -92,9 +92,2 @@ import { Atom } from '@fower/atom';
 
-/**
- * @example p2,mx4,left10,spaceX4...
- * @example p-20,opacity-80
- */
-
-var digitReg = /^([mp][xytrbl]?|space[xy]?|top|right|bottom|left|[wh]|square|circle|min[hw]|max[hw]|opacity|delay|duration|translate[xyz]|scale[xy]?|rotate[xy]?|skew[xy]?|text|zIndex|leading|stroke|fontWeight|outlineOffset|order|flex(Grow|Shrink|Basis)?|(row|column)?Gap|gridTemplateColumns|border[trbl]?|rounded(Top(Left|Right)?|Right|Bottom(Left|Right)?|Left)?)(-?-?\d+[a-z]*?|-auto)$/i; //  high-frequency used props in react
-
 var reactProps = ['children', 'onClick', 'onChange', 'onBlur', 'className', 'placeholder'];
@@ -118,3 +111,3 @@ /**
     this.propList = [];
-    this.traverseProps();
+    this.traverseProps(props);
 
@@ -128,32 +121,12 @@ if (store.config.autoDarkMode) {
 
-  _proto.digitPreprocessor = function digitPreprocessor(propItem) {
-    var spacings = store.config.theme.spacings;
-    if (!digitReg.test(propItem.key)) return propItem; // is theme space key
+  /**
+   * traverse Props to init atoms
+   */
+  _proto.traverseProps = function traverseProps(props) {
+    if (isEmptyObj(props)) return;
+    var _this$config = this.config,
+        _this$config$pseudos = _this$config.pseudos,
+        pseudos = _this$config$pseudos === void 0 ? [] : _this$config$pseudos,
+        theme = _this$config.theme;
 
-    var isSpace = /^([a-z]+)(\d+)$/i.test(propItem.key);
-    /**
-     *  match props link: m4,mx2,mt9, spaceX4...
-     *  to m4 -> [ key: m, value: 4 ]
-     *  to m-20 -> [ key: m, value: 20 ]
-     *  to m-20px -> [ key: m, value: '20px' ]
-     */
-
-    var keyStr = propItem.key.toString();
-    var result = keyStr.match(/^([a-z]+)(\d+)$/i) || keyStr.match(/^([a-z]*)-(-?\d+[a-z]*?)$/i) || keyStr.match(/^([a-z]+)-(auto)$/i);
-    if (!result) return propItem;
-    var newKey = result[1],
-        newPropValue = result[2];
-    propItem.key = newKey;
-    propItem.value = isSpace ? spacings[newPropValue.toLowerCase()] : newPropValue;
-    return propItem;
-  };
-
-  _proto.postfixPreprocessor = function postfixPreprocessor(propItem) {
-    var connector = '--';
-    var specialPseudos = ['after', 'before', 'placeholder', 'selection'];
-    var _store$config = store.config,
-        _store$config$pseudos = _store$config.pseudos,
-        pseudos = _store$config$pseudos === void 0 ? [] : _store$config$pseudos,
-        theme = _store$config.theme;
-
     var _ref = theme || {},
@@ -163,146 +136,27 @@ breakpoints = _ref.breakpoints,
 
-    var propKey = propItem.propKey,
-        propValue = propItem.propValue;
     var breakpointKeys = Object.keys(breakpoints);
     var modeKeys = modes || [];
     var pseudoKeys = pseudos;
-    var regResponsiveStr = connector + "(" + breakpointKeys.join('|') + ")";
-    var regModeStr = connector + "(" + modeKeys.join('|') + ")";
-    var regPseudoStr = connector + "(" + pseudoKeys.join('|') + ")";
-    var regMode = new RegExp(regModeStr);
-    var regPseudo = new RegExp(regPseudoStr);
-    var regResponsive = new RegExp(regResponsiveStr);
-    var regImportant = /--i/i;
-    var regColorPostfix = /--[told](\d{1,2}|100)($|--)/i;
-    /** handle value like: bg="red500--T40", color="#666--O30" */
+    var _props$excludedProps = props.excludedProps,
+        excludedProps = _props$excludedProps === void 0 ? [] : _props$excludedProps;
+    var entries = Object.entries(props);
 
-    if (regColorPostfix.test(propValue)) {
-      var _propValue$split = propValue.split('--'),
-          colorName = _propValue$split[0],
-          postfix = _propValue$split[1];
-
-      propItem.value = colorName;
-      propItem.meta.colorPostfix = postfix;
-    }
-
-    var isMode = regMode.test(propKey);
-    var isPseudo = regPseudo.test(propKey);
-    var isResponsive = regResponsive.test(propKey);
-    var isImportant = regImportant.test(propKey);
-    var isColorPostfix = regColorPostfix.test(propKey);
-    var hasPostfix = isMode || isPseudo || isResponsive || isImportant || isColorPostfix;
-    if (!hasPostfix) return this.digitPreprocessor(propItem);
-    var result = propKey.split(connector);
-    propItem.key = result[0]; // key that already removed postfix
-
-    if (isMode) {
-      propItem.meta.mode = result.find(function (i) {
-        return modeKeys.includes(i);
-      });
-    }
-
-    if (isPseudo) {
-      var pseudo = result.find(function (i) {
-        return pseudoKeys.includes(i);
-      });
-      var pseudoPrefix = specialPseudos.includes(pseudo) ? '::' : ':';
-      propItem.meta.pseudo = pseudoPrefix + pseudo;
-    }
-
-    if (isResponsive) {
-      var breakpointType = result.find(function (i) {
-        return breakpointKeys.includes(i);
-      });
-      propItem.meta.breakpoint = breakpoints[breakpointType];
-    }
-
-    if (isImportant) {
-      propItem.meta.important = !!result.find(function (i) {
-        return i === 'i';
-      });
-    }
-
-    if (isColorPostfix) {
-      propItem.meta.colorPostfix = result.find(function (i) {
-        return regColorPostfix.test("--" + i);
-      });
-    } // check is theme space key, if yes, preprocess it
-    // this.digitPreprocessor(spacings)
-
-
-    return this.digitPreprocessor(propItem);
-  };
-
-  _proto.preprocessProps = function preprocessProps() {
-    var _this$props;
-
-    var propList = [];
-    if (!this.props) return [];
-
-    if ((_this$props = this.props) != null && _this$props.className) {
-      for (var _iterator = _createForOfIteratorHelperLoose(this.props.className.split(/\s+/)), _step; !(_step = _iterator()).done;) {
+    if (props != null && props.className) {
+      for (var _iterator = _createForOfIteratorHelperLoose(props.className.split(/\s+/)), _step; !(_step = _iterator()).done;) {
         var item = _step.value;
-        this.props[item] = true;
+        entries.push([item, true]);
       }
     }
 
-    var _this$props$excludedP = this.props.excludedProps,
-        excludedProps = _this$props$excludedP === void 0 ? [] : _this$props$excludedP;
+    console.log('entries====:', entries); // traverse Props
 
-    for (var propKey in this.props) {
-      if (!Reflect.has(this.props, propKey)) continue; // the prop should be excluded by user setting
-
+    for (var _i = 0, _entries = entries; _i < _entries.length; _i++) {
+      var _entries$_i = _entries[_i],
+          propKey = _entries$_i[0],
+          propValue = _entries$_i[1];
+      // the prop should be excluded by user setting
       if (excludedProps.includes(propKey)) continue;
       if (reactProps.includes(propKey)) continue;
-      var propValue = this.props[propKey];
-      if (!this.isValidProp(propKey, propValue)) continue;
-      var propItem = this.postfixPreprocessor({
-        propKey: propKey,
-        propValue: propValue,
-        key: propKey,
-        meta: {}
-      });
+      if (!this.isValidProp(propKey, propValue)) continue; // parse css prop
 
-      for (var _iterator2 = _createForOfIteratorHelperLoose(this.plugins), _step2; !(_step2 = _iterator2()).done;) {
-        var plugin = _step2.value;
-
-        if (plugin.isMatch(propItem.key)) {
-          if (plugin.beforeParseProps) {
-            plugin.beforeParseProps(propItem, this);
-          }
-
-          this.propList.push(propItem);
-          break;
-        }
-      }
-    }
-
-    return propList;
-  }
-  /**
-   * traverse Props to init atoms
-   */
-  ;
-
-  _proto.traverseProps = function traverseProps() {
-    if (isEmptyObj(this.props)) return;
-    var _this$config = this.config,
-        _this$config$pseudos = _this$config.pseudos,
-        pseudos = _this$config$pseudos === void 0 ? [] : _this$config$pseudos,
-        theme = _this$config.theme;
-
-    var _ref2 = theme || {},
-        breakpoints = _ref2.breakpoints,
-        modes = _ref2.modes;
-
-    var breakpointKeys = Object.keys(breakpoints);
-    var modeKeys = modes || [];
-    var pseudoKeys = pseudos;
-    this.preprocessProps(); // traverse Props
-
-    for (var _iterator3 = _createForOfIteratorHelperLoose(this.propList), _step3; !(_step3 = _iterator3()).done;) {
-      var item = _step3.value;
-      var propKey = item.propKey,
-          propValue = item.propValue; // parse css prop
-
       if (propKey === 'css') {
@@ -361,3 +215,6 @@ this.parseCSSObject(propValue);
 
-      var atom = new Atom(item);
+      var atom = new Atom({
+        propKey: propKey,
+        propValue: propValue
+      });
 
@@ -372,4 +229,4 @@ try {
 
-    for (var _iterator4 = _createForOfIteratorHelperLoose(this.plugins), _step4; !(_step4 = _iterator4()).done;) {
-      var plugin = _step4.value;
+    for (var _iterator2 = _createForOfIteratorHelperLoose(this.plugins), _step2; !(_step2 = _iterator2()).done;) {
+      var plugin = _step2.value;
 
@@ -401,4 +258,4 @@ if (plugin.afterAtomStyleCreate) {
 
-    for (var _iterator5 = _createForOfIteratorHelperLoose(this.atoms), _step5; !(_step5 = _iterator5()).done;) {
-      var atom = _step5.value;
+    for (var _iterator3 = _createForOfIteratorHelperLoose(this.atoms), _step3; !(_step3 = _iterator3()).done;) {
+      var atom = _step3.value;
 
@@ -416,4 +273,4 @@ if (colorKeys.includes(atom.type) && !atom.meta.mode) {
 
-        var _ref3 = colorValue.match(/^([a-z]+)(\d+)$/i) || [],
-            mapKey = _ref3[2];
+        var _ref2 = colorValue.match(/^([a-z]+)(\d+)$/i) || [],
+            mapKey = _ref2[2];
 
@@ -444,4 +301,4 @@ if (['white', 'black'].includes(colorValue)) mapKey = colorValue;
 
-    for (var _i = 0, _darkAtoms = darkAtoms; _i < _darkAtoms.length; _i++) {
-      var darkAtom = _darkAtoms[_i];
+    for (var _i2 = 0, _darkAtoms = darkAtoms; _i2 < _darkAtoms.length; _i2++) {
+      var darkAtom = _darkAtoms[_i2];
       this.addAtom(darkAtom);
@@ -502,5 +359,5 @@ }
         colorPostfix = meta.colorPostfix;
-    return Object.entries(style).reduce(function (r, _ref4) {
-      var key = _ref4[0],
-          value = _ref4[1];
+    return Object.entries(style).reduce(function (r, _ref3) {
+      var key = _ref3[0],
+          value = _ref3[1];
       var cssKey = jsKeyToCssKey(key);
@@ -526,2 +383,4 @@ var posfix = important ? ' !important' : '';
 
+    atom.createClassName(store.config.prefix); // only create atom className when toRules
+
     var _this$config$theme$co = this.config.theme.colors.modes,
@@ -532,14 +391,14 @@ modes = _this$config$theme$co === void 0 ? {} : _this$config$theme$co;
 
-    for (var _i2 = 0, _entries = entries; _i2 < _entries.length; _i2++) {
-      var _entries$_i = _entries[_i2],
-          mode = _entries$_i[0],
-          colors = _entries$_i[1];
+    for (var _i3 = 0, _entries2 = entries; _i3 < _entries2.length; _i3++) {
+      var _entries2$_i = _entries2[_i3],
+          mode = _entries2$_i[0],
+          colors = _entries2$_i[1];
       if (!atom.style) continue;
 
-      var _entries2 = Object.entries(atom.style);
+      var _entries3 = Object.entries(atom.style);
 
-      if (!_entries2.length) continue;
-      var _entries2$ = _entries2[0],
-          styleKey = _entries2$[0],
-          styleValue = _entries2$[1];
+      if (!_entries3.length) continue;
+      var _entries3$ = _entries3[0],
+          styleKey = _entries3$[0],
+          styleValue = _entries3$[1];
       var colorValue = colors[styleValue];
@@ -589,4 +448,4 @@
   _proto.mutateAtom = function mutateAtom(atom) {
-    for (var _iterator6 = _createForOfIteratorHelperLoose(this.plugins), _step6; !(_step6 = _iterator6()).done;) {
-      var plugin = _step6.value;
+    for (var _iterator4 = _createForOfIteratorHelperLoose(this.plugins), _step4; !(_step4 = _iterator4()).done;) {
+      var plugin = _step4.value;
       if (!(plugin.isMatch != null && plugin.isMatch(atom.key))) continue;
@@ -604,4 +463,5 @@
       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
 
@@ -613,4 +473,4 @@ if (atom.handled) {
 
-    for (var _iterator7 = _createForOfIteratorHelperLoose(this.plugins), _step7; !(_step7 = _iterator7()).done;) {
-      var _plugin = _step7.value;
+    for (var _iterator5 = _createForOfIteratorHelperLoose(this.plugins), _step5; !(_step5 = _iterator5()).done;) {
+      var _plugin = _step5.value;
       if (!(_plugin.isMatch != null && _plugin.isMatch(atom.key))) continue;
@@ -639,7 +499,7 @@
 
-    for (var _iterator8 = _createForOfIteratorHelperLoose(parsed), _step8; !(_step8 = _iterator8()).done;) {
-      var _step8$value = _step8.value,
-          selector = _step8$value.selector,
-          selectorType = _step8$value.selectorType,
-          style = _step8$value.style;
+    for (var _iterator6 = _createForOfIteratorHelperLoose(parsed), _step6; !(_step6 = _iterator6()).done;) {
+      var _step6$value = _step6.value,
+          selector = _step6$value.selector,
+          selectorType = _step6$value.selectorType,
+          style = _step6$value.style;
       var entries = Object.entries(style);
@@ -748,7 +608,7 @@ if (!entries.length) continue;
       var colors = store.theme.colors;
-      var style = Object.entries(atom.style).reduce(function (c, _ref5) {
+      var style = Object.entries(atom.style).reduce(function (c, _ref4) {
         var _extends3;
 
-        var key = _ref5[0],
-            value = _ref5[1];
+        var key = _ref4[0],
+            value = _ref4[1];
 
@@ -785,5 +645,3 @@ var cssValue = _this2.formatCssValue(jsKeyToCssKey(key), colors[value] || value);
     var _loop = function _loop() {
-      var atom = _step9.value;
-      atom.createClassName(store.config.prefix); // only create atom className when toRules
-
+      var atom = _step7.value;
       var rule = '';
@@ -824,3 +682,3 @@ var className = atom.className,
 
-    for (var _iterator9 = _createForOfIteratorHelperLoose(this.atoms), _step9; !(_step9 = _iterator9()).done;) {
+    for (var _iterator7 = _createForOfIteratorHelperLoose(this.atoms), _step7; !(_step7 = _iterator7()).done;) {
       var _ret = _loop();
@@ -842,5 +700,5 @@
 
-    var parsedProps = entries.reduce(function (result, _ref6) {
-      var key = _ref6[0],
-          value = _ref6[1];
+    var parsedProps = entries.reduce(function (result, _ref5) {
+      var key = _ref5[0],
+          value = _ref5[1];
       var find = atoms.find(function (atom) {
@@ -847,0 +705,0 @@ return [atom.propKey, atom.key, atom.id, 'css'].includes(key);

package.json

 {
   "name": "@fower/parser",
-  "version": "1.26.0",
+  "version": "1.27.0",
   "license": "MIT",
@@ -24,10 +24,10 @@ "main": "dist/index.js",
   "dependencies": {
-    "@fower/atom": "^1.26.0",
-    "@fower/css-object-processor": "^1.26.0",
-    "@fower/sheet": "^1.26.0",
-    "@fower/store": "^1.26.0",
-    "@fower/types": "^1.26.0",
-    "@fower/utils": "^1.26.0"
+    "@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"
   },
-  "gitHead": "ab78646846162af83605883eef9fbd725dfbe4f8"
+  "gitHead": "ed8b71692d5c1a6f23279c0f6b4bb47cf18adacf"
 }

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

Worsened metrics

Total package byte prevSize

150277

decreased by-19.4%

Lines of code

1334

decreased by-15.52%

Dependency changes

• Updated@fower/atom@^1.27.0

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

• Updated@fower/sheet@^1.27.0

• Updated@fower/store@^1.27.0

• Updated@fower/types@^1.27.0

• Updated@fower/utils@^1.27.0