@fower/parser - npm Package Compare versions

Comparing version 1.25.0 to 1.26.0

dist/index.d.ts

 export { Parser } from './parser';
-export { atomCache } from './cache';
+export { isUnitProp } from './is-unit-prop';

dist/parser.cjs.development.js

@@ -84,4 +84,2 @@ 'use strict';
 
-var atomCache = /*#__PURE__*/new Map();
-
 //  from https://github.com/modulz/stitches/blob/canary/packages/core/src/unitOnlyProps.js
@@ -99,2 +97,9 @@ var reg = /(-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)$/;
 
+/**
+ * @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'];
@@ -117,3 +122,4 @@ /**
     this.atoms = [];
-    this.traverseProps(props);
+    this.propList = [];
+    this.traverseProps();
 
@@ -127,12 +133,32 @@ if (store.store.config.autoDarkMode) {
 
-  /**
-   * 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;
+  _proto.digitPreprocessor = function digitPreprocessor(propItem) {
+    var spacings = store.store.config.theme.spacings;
+    if (!digitReg.test(propItem.key)) return propItem; // is theme space key
 
+    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 || {},
@@ -142,26 +168,146 @@ breakpoints = _ref.breakpoints,
 
+    var propKey = propItem.propKey,
+        propValue = propItem.propValue;
     var breakpointKeys = Object.keys(breakpoints);
     var modeKeys = modes || [];
     var pseudoKeys = pseudos;
-    var _props$excludedProps = props.excludedProps,
-        excludedProps = _props$excludedProps === void 0 ? [] : _props$excludedProps;
-    var entries = Object.entries(props);
+    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" */
 
-    if (props != null && props.className) {
-      for (var _iterator = _createForOfIteratorHelperLoose(props.className.split(/\s+/)), _step; !(_step = _iterator()).done;) {
+    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;) {
         var item = _step.value;
-        entries.push([item, true]);
+        this.props[item] = true;
       }
-    } // traverse Props
+    }
 
+    var _this$props$excludedP = this.props.excludedProps,
+        excludedProps = _this$props$excludedP === void 0 ? [] : _this$props$excludedP;
 
-    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
+    for (var propKey in this.props) {
+      if (!Reflect.has(this.props, propKey)) continue; // the prop should be excluded by user setting
+
       if (excludedProps.includes(propKey)) continue;
       if (reactProps.includes(propKey)) continue;
-      if (!this.isValidProp(propKey, propValue)) continue; // parse css prop
+      var propValue = this.props[propKey];
+      if (!this.isValidProp(propKey, propValue)) continue;
+      var propItem = this.postfixPreprocessor({
+        propKey: propKey,
+        propValue: propValue,
+        key: propKey,
+        meta: {}
+      });
 
+      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') {
@@ -216,5 +362,2 @@ this.parseCSSObject(propValue);
         _atom.style = {};
-
-        _atom.createClassName(store.store.config.prefix);
-
         this.addAtom(_atom);
@@ -224,6 +367,3 @@ continue;
 
-      var atom$1 = new atom.Atom({
-        propKey: propKey,
-        propValue: propValue
-      });
+      var atom$1 = new atom.Atom(item);
 
@@ -238,4 +378,4 @@ try {
 
-    for (var _iterator2 = _createForOfIteratorHelperLoose(this.plugins), _step2; !(_step2 = _iterator2()).done;) {
-      var plugin = _step2.value;
+    for (var _iterator4 = _createForOfIteratorHelperLoose(this.plugins), _step4; !(_step4 = _iterator4()).done;) {
+      var plugin = _step4.value;
 
@@ -267,4 +407,4 @@ if (plugin.afterAtomStyleCreate) {
 
-    for (var _iterator3 = _createForOfIteratorHelperLoose(this.atoms), _step3; !(_step3 = _iterator3()).done;) {
-      var atom$1 = _step3.value;
+    for (var _iterator5 = _createForOfIteratorHelperLoose(this.atoms), _step5; !(_step5 = _iterator5()).done;) {
+      var atom$1 = _step5.value;
 
@@ -282,4 +422,4 @@ if (colorKeys.includes(atom$1.type) && !atom$1.meta.mode) {
 
-        var _ref2 = colorValue.match(/^([a-z]+)(\d+)$/i) || [],
-            mapKey = _ref2[2];
+        var _ref3 = colorValue.match(/^([a-z]+)(\d+)$/i) || [],
+            mapKey = _ref3[2];
 
@@ -300,6 +440,4 @@ if (['white', 'black'].includes(colorValue)) mapKey = colorValue;
 
-        _darkAtom.createClassName(this.config.prefix);
+        var cachedAtom = store.store.atomCache.get(_darkAtom.id);
 
-        var cachedAtom = atomCache.get(_darkAtom.id);
-
         if (cachedAtom) {
@@ -313,4 +451,4 @@ darkAtoms.push(cachedAtom);
 
-    for (var _i2 = 0, _darkAtoms = darkAtoms; _i2 < _darkAtoms.length; _i2++) {
-      var darkAtom = _darkAtoms[_i2];
+    for (var _i = 0, _darkAtoms = darkAtoms; _i < _darkAtoms.length; _i++) {
+      var darkAtom = _darkAtoms[_i];
       this.addAtom(darkAtom);
@@ -371,5 +509,5 @@ }
         colorPostfix = meta.colorPostfix;
-    return Object.entries(style).reduce(function (r, _ref3) {
-      var key = _ref3[0],
-          value = _ref3[1];
+    return Object.entries(style).reduce(function (r, _ref4) {
+      var key = _ref4[0],
+          value = _ref4[1];
       var cssKey = utils.jsKeyToCssKey(key);
@@ -391,4 +529,4 @@ var posfix = important ? ' !important' : '';
     // if not cached, let's cache it
-    if (!atomCache.get(atom.id)) {
-      atomCache.set(atom.id, atom);
+    if (!store.store.atomCache.get(atom.id)) {
+      store.store.atomCache.set(atom.id, atom);
     }
@@ -401,14 +539,14 @@
 
-    for (var _i3 = 0, _entries2 = entries; _i3 < _entries2.length; _i3++) {
-      var _entries2$_i = _entries2[_i3],
-          mode = _entries2$_i[0],
-          colors = _entries2$_i[1];
+    for (var _i2 = 0, _entries = entries; _i2 < _entries.length; _i2++) {
+      var _entries$_i = _entries[_i2],
+          mode = _entries$_i[0],
+          colors = _entries$_i[1];
       if (!atom.style) continue;
 
-      var _entries3 = Object.entries(atom.style);
+      var _entries2 = Object.entries(atom.style);
 
-      if (!_entries3.length) continue;
-      var _entries3$ = _entries3[0],
-          styleKey = _entries3$[0],
-          styleValue = _entries3$[1];
+      if (!_entries2.length) continue;
+      var _entries2$ = _entries2[0],
+          styleKey = _entries2$[0],
+          styleValue = _entries2$[1];
       var colorValue = colors[styleValue];
@@ -458,4 +596,4 @@
   _proto.mutateAtom = function mutateAtom(atom) {
-    for (var _iterator4 = _createForOfIteratorHelperLoose(this.plugins), _step4; !(_step4 = _iterator4()).done;) {
-      var plugin = _step4.value;
+    for (var _iterator6 = _createForOfIteratorHelperLoose(this.plugins), _step6; !(_step6 = _iterator6()).done;) {
+      var plugin = _step6.value;
       if (!(plugin.isMatch != null && plugin.isMatch(atom.key))) continue;
@@ -468,3 +606,3 @@
 
-    var cachedAtom = atomCache.get(atom.id);
+    var cachedAtom = store.store.atomCache.get(atom.id);
 
@@ -474,5 +612,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
 
@@ -484,4 +621,4 @@ if (atom.handled) {
 
-    for (var _iterator5 = _createForOfIteratorHelperLoose(this.plugins), _step5; !(_step5 = _iterator5()).done;) {
-      var _plugin = _step5.value;
+    for (var _iterator7 = _createForOfIteratorHelperLoose(this.plugins), _step7; !(_step7 = _iterator7()).done;) {
+      var _plugin = _step7.value;
       if (!(_plugin.isMatch != null && _plugin.isMatch(atom.key))) continue;
@@ -497,3 +634,2 @@
 
-      atom.createClassName(store.store.config.prefix);
       atom.handled = true;
@@ -512,7 +648,7 @@ break; // break from this plugin
 
-    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;
+    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;
       var entries = Object.entries(style);
@@ -557,3 +693,3 @@ if (!entries.length) continue;
 
-      var cachedAtom = atomCache.get(atom$1.id);
+      var cachedAtom = store.store.atomCache.get(atom$1.id);
 
@@ -585,2 +721,3 @@ if (cachedAtom) {
     this.atoms.reduce(function (result, cur) {
+      if (!cur.style || !Object.keys(cur.style).length) return result;
       var index = result.findIndex(function (i) {
@@ -622,7 +759,7 @@ return i.styleKeysHash === cur.styleKeysHash;
       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];
 
@@ -656,6 +793,8 @@ var cssValue = _this2.formatCssValue(utils.jsKeyToCssKey(key), colors[value] || value);
       return parseInt(b.meta.breakpoint || '0') - parseInt(a.meta.breakpoint || '0');
-    }); // console.log('this.atoms-----:', this.atoms)
+    });
 
     var _loop = function _loop() {
-      var atom = _step7.value;
+      var atom = _step9.value;
+      atom.createClassName(store.store.config.prefix); // only create atom className when toRules
+
       var rule = '';
@@ -696,8 +835,9 @@ var className = atom.className,
 
-    for (var _iterator7 = _createForOfIteratorHelperLoose(this.atoms), _step7; !(_step7 = _iterator7()).done;) {
+    for (var _iterator9 = _createForOfIteratorHelperLoose(this.atoms), _step9; !(_step9 = _iterator9()).done;) {
       var _ret = _loop();
 
       if (_ret === "continue") continue;
-    }
+    } // console.log('this.atoms-----:', this.atoms)
 
+
     return rules;
@@ -713,5 +853,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) {
@@ -759,3 +899,3 @@ return [atom.propKey, atom.key, atom.id, 'css'].includes(key);
 exports.Parser = Parser;
-exports.atomCache = atomCache;
+exports.isUnitProp = isUnitProp;
 //# sourceMappingURL=parser.cjs.development.js.map

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"),n=require("@fower/sheet"),o=require("@fower/css-object-processor"),i=require("@fower/utils");function s(){return(s=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 a(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 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 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 c=new Map,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)$/,d=["children","onClick","onChange","onBlur","className","placeholder"];exports.Parser=function(){function a(e){void 0===e&&(e={}),this.props=e,this.atoms=[],this.traverseProps(e),t.store.config.autoDarkMode&&this.autoDarkMode()}var f,m=a.prototype;return m.traverseProps=function(r){if(!i.isEmptyObj(r)){var n=this.config,o=n.pseudos,a=void 0===o?[]:o,c=n.theme||{},l=c.breakpoints,f=c.modes,m=Object.keys(l),p=f||[],h=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]);for(var A=0,S=b;A<S.length;A++){var j=S[A],C=j[0],O=j[1];if(!y.includes(C)&&!d.includes(C)&&this.isValidProp(C,O))if("css"!==C){if(C.startsWith("_")){var N=C.replace(/^_/,""),w=Array.isArray(O)?O.reduce((function(e,t){var r;return s({},e,((r={})[t]=!0,r))}),{}):O;if(p.includes(N)){this.parseCSSObject(w,{mode:N});continue}if(m.includes(N)){this.parseCSSObject(w,{breakpoint:l[N]});continue}if(h.includes(N)){this.parseCSSObject(w,{pseudo:":"+N});continue}}var K=t.store.compositions.get(C);if(K){this.parseCSSObject(K,{});var P=new e.Atom({propKey:C,propValue:O});P.handled=!0,P.style={},P.createClassName(t.store.config.prefix),this.addAtom(P)}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,M=u(this.plugins);!(V=M()).done;){var T=V.value;T.afterAtomStyleCreate&&T.afterAtomStyleCreate(this)}}},m.autoDarkMode=function(){for(var t,r={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"],o=[],i=u(this.atoms);!(t=i()).done;){var a=t.value;if(n.includes(a.type)&&!a.meta.mode){if(this.atoms.find((function(e){return n.includes(e.type)&&"dark"===e.meta.mode})))continue;var l=Object.entries(a.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(a).replace(new RegExp(""+f,"g"),r[f]);"white"===f&&(m=m.replace(/White/g,"Black")),"black"===f&&(m=m.replace(/Black/g,"White"));var p=JSON.parse(m),h=new e.Atom(s({},p,{className:"",propKey:p.propKey+"--dark",meta:s({},p.meta,{mode:"dark"})}));h.createClassName(this.config.prefix);var v=c.get(h.id);o.push(v||h)}}for(var y=0,b=o;y<b.length;y++)this.addAtom(b[y])},m.formatCssValue=function(e,r){if(!l.test(e))return r;var n;if(i.isPercentNumber(String(r)))return String(r).replace("p","%");if(!i.isNumber(r))return r;if((n=Number(r))<1&&n>0)return 100*n+"%";var o=t.store.config;return"none"!==o.unit?o.transformUnit?o.transformUnit(n):r+t.store.config.unit:n},m.styleToString=function(e,n){var o=this,s=n.important,a=n.colorPostfix;return Object.entries(e).reduce((function(e,n){var u=n[1],c=i.jsKeyToCssKey(n[0]),l=s?" !important":"",d=t.store.theme.colors;return e+(c+": ")+(u=a?r.formatColor(d[u]||u,a):o.formatCssValue(c,d[u]||u))+l+";"}),"")},m.addAtom=function(e){c.get(e.id)||c.set(e.id,e);for(var t=this.config.theme.colors.modes,r=0,n=Object.entries(void 0===t?{}:t);r<n.length;r++){var o=n[r],i=o[0],a=o[1];if(e.style){var u=Object.entries(e.style);if(u.length){var l=u[0],d=l[0],f=a[l[1]];if(f){var m="--"+i,p=JSON.parse(JSON.stringify(e));p.className=e.className+m,p.key=e.key+m,p.id=e.id+m,p.meta=s({mode:i},e.meta),p.style[d]=f,this.atoms.push(p)}}}}this.atoms.push(e)},m.isValidProp=function(e,t){return"css"===e||!!e.startsWith("_")||!!Array.isArray(t)||!!["string","boolean","number","undefined"].includes(typeof t)},m.mutateAtom=function(e){for(var r,n=u(this.plugins);!(r=n()).done;){var o=r.value;null!=o.isMatch&&o.isMatch(e.key)&&o.beforeHandleAtom&&(e=o.beforeHandleAtom(e,this))}var i=c.get(e.id);if(i)throw this.addAtom(i),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 s,a=u(this.plugins);!(s=a()).done;){var l=s.value;if(null!=l.isMatch&&l.isMatch(e.key)){l.beforeHandleAtom&&(e=l.beforeHandleAtom(e,this)),l.handleAtom&&(e=null==l.handleAtom?void 0:l.handleAtom(e,this)),e.createClassName(t.store.config.prefix),e.handled=!0;break}}},m.parseCSSObject=function(t,r){void 0===r&&(r={});for(var n,s=o.parse(t),a=i.objectToClassName(t),l=u(s);!(n=l()).done;){var d=n.value,f=d.selector,m=d.selectorType,p=d.style,h=Object.entries(p);if(h.length){var v=h[0],y={propKey:v[0],propValue:v[1],meta:r};"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=p,b.id=i.objectToClassName({style:p}),b.className=g?i.objectToClassName(p):a,b.handled=!0);var k=c.get(b.id);this.addAtom(k||b)}}},m.makeResponsiveStyle=function(e,t){return"@media (min-width: "+e+") {"+t+"}"},m.getClassNames=function(){var e=[];this.atoms.reduce((function(t,r){var n=t.findIndex((function(e){return e.styleKeysHash===r.styleKeysHash}));return r.isValid?(-1===n?(e.push(r.className),t=[].concat(t,[r])):(t.splice(n,1,r),e.splice(n,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},m.toStyle=function(){var e=this;return this.atoms.reduce((function(r,n){if(!n.isValid)return r;var o=t.store.theme.colors,a=Object.entries(n.style).reduce((function(t,r){var n,a=r[0],u=r[1],c=e.formatCssValue(i.jsKeyToCssKey(a),o[u]||u);return s({},t,((n={})[a]=c,n))}),{});return s({},r,a)}),{})},m.toRules=function(e){var t=this;void 0===e&&(e=!1);var r=this.config.theme.modePrefix,n=void 0===r?"":r,o=[];this.atoms=this.atoms.sort((function(e,t){return parseInt(t.meta.breakpoint||"0")-parseInt(e.meta.breakpoint||"0")}));for(var s,a=function(){var r=s.value,a="",u=r.className,c=r.style,l=void 0===c?{}:c;if(!r.isValid)return"continue";if(i.isEmptyObj(l))return"continue";if(!e&&r.inserted)return"continue";r.inserted=!0;var d=r.meta,f=d.pseudo,m=d.mode,p=d.breakpoint,h=void 0===p?"":p,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="."+n+m+" "+y),v&&(y=y+" "+v),a=y+" { "+t.styleToString(l,r.meta)+" }",h&&(a=t.makeResponsiveStyle(h,a)),o.push(a)},c=u(this.atoms);!(s=c()).done;)a();return o},m.getParsedProps=function(){var e=this.props,t=this.atoms;return i.isEmptyObj(e)?{}:Object.entries(e).reduce((function(e,r){var n=r[0],o=r[1];return t.find((function(e){return[e.propKey,e.key,e.id,"css"].includes(n)}))||(e[n]=o),e}),{})},m.insertRule=function(){var e=this.toRules();n.styleSheet.insertStyles(e)},(f=[{key:"uniqueClassName",get:function(){return i.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)}}(a.prototype,f),a}(),exports.atomCache=c;
+"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;
 //# sourceMappingURL=parser.cjs.production.min.js.map

dist/parser.d.ts

 import { Atom } from '@fower/atom';
+import { Props, PropItem } from '@fower/types';
 declare type Dict = Record<string, any>;
-interface Props {
-    className?: string;
-    [key: string]: any;
-}
 /**
+ * @example p2,mx4,left10,spaceX4...
+ * @example p-20,opacity-80
+ */
+export declare const digitReg: RegExp;
+/**
  * An Abstract tool to handle atomic props
  */
 export declare class Parser {
-    readonly props: Props;
+    props: Props;
     constructor(props?: Props);
@@ -17,2 +19,3 @@ /**
     atoms: Atom[];
+    propList: PropItem[];
     get uniqueClassName(): string;
@@ -22,6 +25,9 @@ get hasResponsive(): boolean;
     get plugins(): any[];
+    digitPreprocessor(propItem: PropItem): PropItem;
+    postfixPreprocessor(propItem: PropItem): PropItem;
+    preprocessProps(): PropItem[];
     /**
      * traverse Props to init atoms
      */
-    traverseProps(props: Props): void;
+    traverseProps(): void;
     autoDarkMode(): void;
@@ -28,0 +34,0 @@ /**

dist/parser.esm.js

@@ -80,4 +80,2 @@ import { Atom } from '@fower/atom';
 
-var atomCache = /*#__PURE__*/new Map();
-
 //  from https://github.com/modulz/stitches/blob/canary/packages/core/src/unitOnlyProps.js
@@ -95,2 +93,9 @@ var reg = /(-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)$/;
 
+/**
+ * @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'];
@@ -113,3 +118,4 @@ /**
     this.atoms = [];
-    this.traverseProps(props);
+    this.propList = [];
+    this.traverseProps();
 
@@ -123,12 +129,32 @@ if (store.config.autoDarkMode) {
 
-  /**
-   * 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;
+  _proto.digitPreprocessor = function digitPreprocessor(propItem) {
+    var spacings = store.config.theme.spacings;
+    if (!digitReg.test(propItem.key)) return propItem; // is theme space key
 
+    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 || {},
@@ -138,26 +164,146 @@ breakpoints = _ref.breakpoints,
 
+    var propKey = propItem.propKey,
+        propValue = propItem.propValue;
     var breakpointKeys = Object.keys(breakpoints);
     var modeKeys = modes || [];
     var pseudoKeys = pseudos;
-    var _props$excludedProps = props.excludedProps,
-        excludedProps = _props$excludedProps === void 0 ? [] : _props$excludedProps;
-    var entries = Object.entries(props);
+    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" */
 
-    if (props != null && props.className) {
-      for (var _iterator = _createForOfIteratorHelperLoose(props.className.split(/\s+/)), _step; !(_step = _iterator()).done;) {
+    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;) {
         var item = _step.value;
-        entries.push([item, true]);
+        this.props[item] = true;
       }
-    } // traverse Props
+    }
 
+    var _this$props$excludedP = this.props.excludedProps,
+        excludedProps = _this$props$excludedP === void 0 ? [] : _this$props$excludedP;
 
-    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
+    for (var propKey in this.props) {
+      if (!Reflect.has(this.props, propKey)) continue; // the prop should be excluded by user setting
+
       if (excludedProps.includes(propKey)) continue;
       if (reactProps.includes(propKey)) continue;
-      if (!this.isValidProp(propKey, propValue)) continue; // parse css prop
+      var propValue = this.props[propKey];
+      if (!this.isValidProp(propKey, propValue)) continue;
+      var propItem = this.postfixPreprocessor({
+        propKey: propKey,
+        propValue: propValue,
+        key: propKey,
+        meta: {}
+      });
 
+      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') {
@@ -212,5 +358,2 @@ this.parseCSSObject(propValue);
         _atom.style = {};
-
-        _atom.createClassName(store.config.prefix);
-
         this.addAtom(_atom);
@@ -220,6 +363,3 @@ continue;
 
-      var atom = new Atom({
-        propKey: propKey,
-        propValue: propValue
-      });
+      var atom = new Atom(item);
 
@@ -234,4 +374,4 @@ try {
 
-    for (var _iterator2 = _createForOfIteratorHelperLoose(this.plugins), _step2; !(_step2 = _iterator2()).done;) {
-      var plugin = _step2.value;
+    for (var _iterator4 = _createForOfIteratorHelperLoose(this.plugins), _step4; !(_step4 = _iterator4()).done;) {
+      var plugin = _step4.value;
 
@@ -263,4 +403,4 @@ if (plugin.afterAtomStyleCreate) {
 
-    for (var _iterator3 = _createForOfIteratorHelperLoose(this.atoms), _step3; !(_step3 = _iterator3()).done;) {
-      var atom = _step3.value;
+    for (var _iterator5 = _createForOfIteratorHelperLoose(this.atoms), _step5; !(_step5 = _iterator5()).done;) {
+      var atom = _step5.value;
 
@@ -278,4 +418,4 @@ if (colorKeys.includes(atom.type) && !atom.meta.mode) {
 
-        var _ref2 = colorValue.match(/^([a-z]+)(\d+)$/i) || [],
-            mapKey = _ref2[2];
+        var _ref3 = colorValue.match(/^([a-z]+)(\d+)$/i) || [],
+            mapKey = _ref3[2];
 
@@ -296,6 +436,4 @@ if (['white', 'black'].includes(colorValue)) mapKey = colorValue;
 
-        _darkAtom.createClassName(this.config.prefix);
+        var cachedAtom = store.atomCache.get(_darkAtom.id);
 
-        var cachedAtom = atomCache.get(_darkAtom.id);
-
         if (cachedAtom) {
@@ -309,4 +447,4 @@ darkAtoms.push(cachedAtom);
 
-    for (var _i2 = 0, _darkAtoms = darkAtoms; _i2 < _darkAtoms.length; _i2++) {
-      var darkAtom = _darkAtoms[_i2];
+    for (var _i = 0, _darkAtoms = darkAtoms; _i < _darkAtoms.length; _i++) {
+      var darkAtom = _darkAtoms[_i];
       this.addAtom(darkAtom);
@@ -367,5 +505,5 @@ }
         colorPostfix = meta.colorPostfix;
-    return Object.entries(style).reduce(function (r, _ref3) {
-      var key = _ref3[0],
-          value = _ref3[1];
+    return Object.entries(style).reduce(function (r, _ref4) {
+      var key = _ref4[0],
+          value = _ref4[1];
       var cssKey = jsKeyToCssKey(key);
@@ -387,4 +525,4 @@ var posfix = important ? ' !important' : '';
     // if not cached, let's cache it
-    if (!atomCache.get(atom.id)) {
-      atomCache.set(atom.id, atom);
+    if (!store.atomCache.get(atom.id)) {
+      store.atomCache.set(atom.id, atom);
     }
@@ -397,14 +535,14 @@
 
-    for (var _i3 = 0, _entries2 = entries; _i3 < _entries2.length; _i3++) {
-      var _entries2$_i = _entries2[_i3],
-          mode = _entries2$_i[0],
-          colors = _entries2$_i[1];
+    for (var _i2 = 0, _entries = entries; _i2 < _entries.length; _i2++) {
+      var _entries$_i = _entries[_i2],
+          mode = _entries$_i[0],
+          colors = _entries$_i[1];
       if (!atom.style) continue;
 
-      var _entries3 = Object.entries(atom.style);
+      var _entries2 = Object.entries(atom.style);
 
-      if (!_entries3.length) continue;
-      var _entries3$ = _entries3[0],
-          styleKey = _entries3$[0],
-          styleValue = _entries3$[1];
+      if (!_entries2.length) continue;
+      var _entries2$ = _entries2[0],
+          styleKey = _entries2$[0],
+          styleValue = _entries2$[1];
       var colorValue = colors[styleValue];
@@ -454,4 +592,4 @@
   _proto.mutateAtom = function mutateAtom(atom) {
-    for (var _iterator4 = _createForOfIteratorHelperLoose(this.plugins), _step4; !(_step4 = _iterator4()).done;) {
-      var plugin = _step4.value;
+    for (var _iterator6 = _createForOfIteratorHelperLoose(this.plugins), _step6; !(_step6 = _iterator6()).done;) {
+      var plugin = _step6.value;
       if (!(plugin.isMatch != null && plugin.isMatch(atom.key))) continue;
@@ -464,3 +602,3 @@
 
-    var cachedAtom = atomCache.get(atom.id);
+    var cachedAtom = store.atomCache.get(atom.id);
 
@@ -470,5 +608,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
 
@@ -480,4 +617,4 @@ if (atom.handled) {
 
-    for (var _iterator5 = _createForOfIteratorHelperLoose(this.plugins), _step5; !(_step5 = _iterator5()).done;) {
-      var _plugin = _step5.value;
+    for (var _iterator7 = _createForOfIteratorHelperLoose(this.plugins), _step7; !(_step7 = _iterator7()).done;) {
+      var _plugin = _step7.value;
       if (!(_plugin.isMatch != null && _plugin.isMatch(atom.key))) continue;
@@ -493,3 +630,2 @@
 
-      atom.createClassName(store.config.prefix);
       atom.handled = true;
@@ -508,7 +644,7 @@ break; // break from this plugin
 
-    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;
+    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;
       var entries = Object.entries(style);
@@ -553,3 +689,3 @@ if (!entries.length) continue;
 
-      var cachedAtom = atomCache.get(atom.id);
+      var cachedAtom = store.atomCache.get(atom.id);
 
@@ -581,2 +717,3 @@ if (cachedAtom) {
     this.atoms.reduce(function (result, cur) {
+      if (!cur.style || !Object.keys(cur.style).length) return result;
       var index = result.findIndex(function (i) {
@@ -618,7 +755,7 @@ return i.styleKeysHash === cur.styleKeysHash;
       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];
 
@@ -652,6 +789,8 @@ var cssValue = _this2.formatCssValue(jsKeyToCssKey(key), colors[value] || value);
       return parseInt(b.meta.breakpoint || '0') - parseInt(a.meta.breakpoint || '0');
-    }); // console.log('this.atoms-----:', this.atoms)
+    });
 
     var _loop = function _loop() {
-      var atom = _step7.value;
+      var atom = _step9.value;
+      atom.createClassName(store.config.prefix); // only create atom className when toRules
+
       var rule = '';
@@ -692,8 +831,9 @@ var className = atom.className,
 
-    for (var _iterator7 = _createForOfIteratorHelperLoose(this.atoms), _step7; !(_step7 = _iterator7()).done;) {
+    for (var _iterator9 = _createForOfIteratorHelperLoose(this.atoms), _step9; !(_step9 = _iterator9()).done;) {
       var _ret = _loop();
 
       if (_ret === "continue") continue;
-    }
+    } // console.log('this.atoms-----:', this.atoms)
 
+
     return rules;
@@ -709,5 +849,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) {
@@ -754,3 +894,3 @@ return [atom.propKey, atom.key, atom.id, 'css'].includes(key);
 
-export { Parser, atomCache };
+export { Parser, isUnitProp };
 //# sourceMappingURL=parser.esm.js.map

package.json

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

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

186451

increased by25.69%

Lines of code

1579

increased by18.45%

Worsened metrics

Dependency count

6

increased by20%

Number of package files

13

decreased by-7.14%

Dependency changes

• + Added@fower/types@^1.26.0

• Updated@fower/atom@^1.26.0

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

• Updated@fower/sheet@^1.26.0

• Updated@fower/store@^1.26.0

• Updated@fower/utils@^1.26.0