From 20ccc62cf0e7e71d893818b469c55dd4dc6d1a66 Mon Sep 17 00:00:00 2001
From: yuanchuan <yuanchuan23@gmail.com>
Date: Fri, 2 Jun 2017 21:52:32 +0800
Subject: [PATCH] add shortcuts to css property

---
 css-doodle.js              | 35 +++++++++++++++++++++++++++++------
 css-doodle.min.js          |  2 +-
 docs/lib/css-doodle.min.js |  2 +-
 src/generator.js           |  7 +++++--
 src/shortcuts.js           | 21 +++++++++++++++++++++
 5 files changed, 57 insertions(+), 10 deletions(-)
 create mode 100644 src/shortcuts.js

diff --git a/css-doodle.js b/css-doodle.js
index 8c66f9d..70a93ba 100644
--- a/css-doodle.js
+++ b/css-doodle.js
@@ -134,7 +134,7 @@ function remove_unit(str) {
   return unit ? +(str.replace(unit, '')) : str;
 }
 
-const { cos, sin, tan, sqrt, pow, PI } = Math;
+const { cos, sin, sqrt, pow, PI } = Math;
 const DEG = PI / 180;
 
 function polygon(option, fn) {
@@ -273,8 +273,10 @@ function heart() {
       - cos(3 * t) / 18
       - cos(4 * t) / 18;
     return rotate(
-      x * 1.2, (y + .2) * 1.1, 180
-    )
+      x * 1.2,
+      (y + .2) * 1.1,
+      180
+    );
   });
 }
 
@@ -318,7 +320,7 @@ function whale() {
       cos(t) * r + .75,
       sin(t) * r * 1.2,
       180
-    )
+    );
   });
 }
 
@@ -398,6 +400,25 @@ var func = Object.freeze({
   shape: shape
 });
 
+var shortcuts = {
+
+  ['size'](value) {
+    var [w, h = w] = value.split(/[,，\/\s]+\s*/);
+    return `width: ${ w }; height: ${ h };`;
+  },
+
+  ['min-size'](value) {
+    var [w, h = w] = value.split(/[,，\/\s]+\s*/);
+    return `min-width: ${ w }; min-height: ${ h };`;
+  },
+
+  ['max-size'](value) {
+    var [w, h = w] = value.split(/[,，\/\s]+\s*/);
+    return `max-width: ${ w }; max-height: ${ h };`;
+  }
+
+};
+
 class Rules {
   constructor(tokens) {
     this.tokens = tokens;
@@ -467,9 +488,11 @@ class Rules {
       // fix clip bug
       rule += ';overflow: hidden;';
     }
-    if (property == 'size') {
-      rule = `width: ${ value }; height: ${ value };`;
+
+    if (shortcuts[property]) {
+      rule = shortcuts[property](value);
     }
+
     return rule;
   }
   compose(coords, tokens) {
diff --git a/css-doodle.min.js b/css-doodle.min.js
index fb08936..b60a3df 100644
--- a/css-doodle.min.js
+++ b/css-doodle.min.js
@@ -1 +1 @@
-!function(e,n){typeof exports==='object'&&typeof module!=='undefined'?n():typeof define==='function'&&define.amd?define(n):(n())}(this,(function(){"use strict";var e={even:e=>!!(e%2),odd:e=>!(e%2)};function n(e,n,t){return e=>e==t}function t(e,n){return(t,r)=>e==t&&n==r}function r(n,t,r){return t=>/^(even|odd)$/.test(t)?e[t](n-1):t==n}function u(n,t,r){return n=>/^(even|odd)$/.test(n)?e[n](t-1):n==t}function o(n,t,r){return n=>e.even(r-1)}function c(n,t,r){return n=>e.odd(r-1)}var s=Object.freeze({nth:n,at:t,row:r,col:u,even:o,odd:c});function i(e){if(Array.isArray(e))return e;return Object.keys(e).map(n=>e[n])}function l(e,...n){return n.reduce((e,n)=>e.apply(null,i(n)),e)}function a(e){return(e||[]).join('\n')}function p(e){return Array.isArray(e)?e:[e]}function f(e,n,t){return Math.max(n,Math.min(t,e))}function h(e){return`-webkit-${e}${e}`}let m={};function d(e,n){return function(...t){let r=e+t.join('-');if(m[r])return m[r];return m[r]=n.apply(null,t)}}function y(...e){let n=e.reduce((e,n)=>e.concat(n),[]);return n[Math.floor(Math.random()*n.length)]}function g(e,n,t){let r=0,u=e=>e>0&&e<1?.1:1,o=arguments.length;o==1&&([e,n]=[u(e),e]);o<3&&(t=u(e));let c=[];while(t>0&&e<n||t<0&&e>n){c.push(e);e+=t;if(r++>=1e3)break}return c}function x(e){return function(...n){let t=w(n[0]);if(t){n=n.map(b);return _(e,t).apply(null,n)}return e.apply(null,n)}}function _(e,n){return function(...t){t=t.map(b);let r=e.apply(null,t);n&&(r=r.map(e=>e+n));return r}}function w(e){if(!e)return'';let n=/(%|cm|fr|rem|em|ex|in|mm|pc|pt|px|vh|vw|vmax|vmin|deg|ms|s)$/,t=''.trim.call(e).match(n);return t?t[0]:''}function b(e){let n=w(e);return n?+(e.replace(n,'')):e}let{cos:v,sin:z,tan:k,sqrt:L,pow:T,PI:H}=Math,M=H/180;function S(e,n){typeof arguments[0]=='function'&&(n=e,e={});n||(n=e=>[v(e),z(e)]);var t=e.split||120,r=e.scale||1,u=M*(e.start||0),o=e.deg?e.deg*M:H/(t/2),c=[];for(var s=0;s<t;++s){var i=u+o*s,[l,a]=n(i);c.push(l*50*r+50+'% '+(a*50*r+50+'%'))}return`polygon(${c.join(',')})`}function j(e,n,t){var r=M*t;return[e*v(r)-n*z(r),n*v(r)+e*z(r)]}function A(){return'circle(49%)'}function W(){return S({split:3,start:-90},e=>[v(e)*1.1,z(e)*1.1+.2])}function C(){return S({split:4})}function R(){return S({split:5,start:54})}function q(){return S({split:6,start:30})}function B(){return S({split:7,start:-90})}function E(){return S({split:8})}function O(){return S({split:5,start:54,deg:144})}function P(){return'polygon(50% 5%, 80% 50%, 50% 95%, 20% 50%)'}function D(){return"polygon(\n 5% 35%, 35% 35%, 35% 5%, 65% 5%,\n 65% 35%, 95% 35%, 95% 65%, 65% 65%,\n 65% 95%, 35% 95%, 35% 65%, 5% 65%\n )"}function F(e = 3){e=f(e,3,5);e==4&&(e=2);return S({split:240},n=>{var t=v(e*n)*v(n),r=v(e*n)*z(n);e==3&&(t-=.2);e==2&&(t/=1.1,r/=1.1);return[t,r]})}function G(e = 3){e=f(e,3,6);var n=1-e;return S({scale:1/e},t=>{var r=n*v(t)+v(n*(t-H)),u=n*z(t)+z(n*(t-H));e==3&&(r=r*1.1-.6,u*=1.1);return[r,u]})}function I(){return G(4)}function J(){return S(e=>{var n=.7*L(2)*v(e),t=T(z(e),2)+1;return[n/t,n*z(e)/t]})}function K(){return S(e=>{var n=.75*T(z(e),3),t=v(1*e)*.7222222222222222-v(2*e)*.2777777777777778-v(3*e)/18-v(4*e)/18;return j(n*1.2,(t+.2)*1.1,180)})}function N(){return S(e=>{var[n,t]=[T(z(e),3),T(v(e),3)];return j((n+t)*v(e)*1.3-.45,(n+t)*z(e)*1.3-.45,-90)})}function Q(){return S(e=>j(v(e),T(z(e),2)/(2+z(e))-.5,180))}function U(){return S(e=>[z(e),(1+z(e))*v(e)/1.4])}function V(){return S(e=>[v(e)-T(z(e),2)/L(2),z(2*e)/2])}function X(){return S({split:240},e=>{var n=3.4*(T(z(e),2)-.5)*v(e);return j(v(e)*n+.75,z(e)*n*1.2,180)})}var Y=Object.freeze({circle:A,triangle:W,rhombus:C,pentagon:R,hexgon:q,heptagon:B,octagon:E,star:O,diamond:P,cross:D,clover:F,hypocycloid:G,astroid:I,infinity:J,heart:K,bean:N,bicorn:Q,pear:U,fish:V,whale:X});function Z(e,n,t){return e=>t}function $(e,n,t){return n=>e}function ee(e,n,t){return e=>n}function ne(){return function(...e){return y.apply(null,e)}}function te(){return ne.apply(null,arguments)}function re(){return function(...e){return y(d('range',x(g)).apply(null,e))}}function ue(e,n,t){return d('shape',function(e,...n){if(e){e=e.trim();if(Y[e]){return Y[e].apply(null,n)}}})}var oe=Object.freeze({index:Z,row:$,col:ee,any:ne,pick:te,rand:re,shape:ue});class ce{constructor(e){this.tokens=e;this.rules={};this.props={};this.styles={host:'',cells:''}}add_rule(e,n){var t=this.rules[e];t||(t=this.rules[e]=[]);t.push.apply(t,p(n))}compose_selector(e,n = ''){return`.cell:nth-of-type(${e}) .shape${n}`}compose_argument(e,n){var t=e.map(e=>{if(e.type=='text'){return e.value}else if(e.type=='func'){var t=oe[e.name.substr(1)];if(t){var r=e.arguments.map(e=>{return this.compose_argument(e,n)});return l(t,n,r)}}});return t.length>2?t.join(''):t[0]}compose_value(e,n){return e.reduce((e,t)=>{switch(t.type){case 'text':{e+=t.value;break};case 'func':{var r=oe[t.name.substr(1)];if(r){var u=t.arguments.map(e=>{return this.compose_argument(e,n)});e+=l(r,n,u)}}}return e},'')}compose_rule(e,n){var t=e.property,r=this.compose_value(e.value,n);t=='transition'&&(this.props.has_transition=!0);var u=`${t}:${r};`;t=='clip-path'&&(u=h(u),u+=';overflow:hidden;');t=='size'&&(u=`width:${r};height:${r};`);return u}compose(e,n){(n||this.tokens).forEach((n,t)=>{if(n.skip)return!1;switch(n.type){case 'rule':this.add_rule(this.compose_selector(e.count),this.compose_rule(n,e));break;case 'psudo':{n.selector.startsWith(':doodle')&&(n.selector=n.selector.replace(/^\:+doodle/,':host'));var c=n.selector.startsWith(':host');c&&(n.skip=!0);var i=n.styles.map(n=>this.compose_rule(n,e)),a=c?n.selector:this.compose_selector(e.count,n.selector);this.add_rule(a,i);break};case 'cond':var o=s[n.name.substr(1)];if(o){var r=n.arguments.map(n=>{return this.compose_argument(n,e)}),u=l(o,e,r);u&&this.compose(e,n.styles)};break}})}output(){Object.keys(this.rules).forEach(e=>{var n=e.startsWith(':host');let t=n?'host':'cells';this.styles[t]+=`${e}{${a(this.rules[e])}}`});return{props:this.props,styles:this.styles}}}function se(e,n){var t=new ce(e);for(var r=1,u=0;r<=n.x;++r){for(var o=1;o<=n.y;++o)t.compose({x:r,y:o,count:++u})}return t.output()}let ie={func(e = ''){return{type:'func',name:e,arguments:[]}},argument(){return{type:'argument',value:[]}},text(e = ''){return{type:'text',value:e}},comment(e){return{type:'comment',value:e}},psudo(e = ''){return{type:'psudo',selector:e,styles:[]}},cond(e = ''){return{type:'cond',name:e,styles:[],arguments:[]}},rule(e = ''){return{type:'rule',property:e,value:[]}}},le={'(':')','[':']','{':'}'},ae={white_space(e){return /[\s\n\t]/.test(e)},open_bracket(e){return le.hasOwnProperty(e)},close_bracket_of(e){var n=le[e];return e=>e==n},number(e){return!isNaN(e)}};function pe(e){var n=0,t=1,r=1;return{curr:(t = 0)=>e[n+t],end:()=>e.length<=n,info:()=>({index:n,col:t,line:r}),next:()=>{var u=e[n++];u=='\n'?(r++, t=0):t++;return u}}}function fe(e,{col:n,line:t}){throw new Error(`(at line ${t}, column ${n}) ${e}`)}function he(e){if(e.trim().length){return ae.number(+e)?+e:e.trim()}else{return e}}function me(e){var[n,t]=[e.curr(),e.curr()],r=ae.close_bracket_of(t);e.next();while(!e.end()){if(r(t=e.curr())){n+=t;break}else ae.open_bracket(t)?(n+=me(e)):(n+=t);e.next()}return n}function de(e,n ={}){var t=ie.comment(),r=e.curr();r!='#'&&e.next();e.next();while(!e.end()){if((r=e.curr())=='*'&&e.curr(1)=='/')break;else t.value+=r;r=e.curr();if(n.inline){if(r=='\n')return t}else{if(r=='*'&&e.curr(1)=='/')break}t.value+=r;e.next()}e.next();e.next();return t}function ye(e){var n='',t;while(!e.end()){if((t=e.curr())==':')break;else /[a-zA-Z\-]/.test(t)?ae.white_space(t)||(n+=t):fe('Syntax error:Bad property name.',e.info());e.next()}return n}function ge(e,n){var t='',r;e.next();while(!e.end()){if((r=e.curr())==n){if(e.curr(-1)!=='\\')break;else t+=r}else t+=r;e.next()}return t}function xe(e){var n=[],t=[],r='',u;while(!e.end()){if(ae.open_bracket(u=e.curr()))r+=me(e);else if(/['"]/.test(u))r+=ge(e,u);else if(u=='@')t.length||(r=r.trimLeft()),r.length&&(t.push(ie.text(r)),r=''),t.push(_e(e));else if(/[,)]/.test(u)){r.length&&(t.length?(r=r.trimRight(),r.length&&t.push(ie.text(r))):t.push(ie.text(he(r))));n.push(t.slice());[t,r]=[[],''];if(u==')')break}else r+=u;e.next()}return n}function _e(e){var n=ie.func(),t='',r;while(!e.end()){if((r=e.curr())==')')break;if(r=='('){e.next();n.name=t;n.arguments=xe(e);break}else t+=r;e.next()}return n}function we(e){var n=ie.text(),t;let r=[];while(!e.end()){if((t=e.curr())=='\n'){e.next();continue}else if(/[;}]/.test(t)){n.value.length&&r.push(n);n=ie.text();break}else t=='@'?(n.value.length&&r.push(n),n=ie.text(),r.push(_e(e))):(!ae.white_space(t)||!ae.white_space(e.curr(-1)))&&(t==':'&&fe('Syntax error:Bad property name.',e.info()),n.value+=t);e.next()}n.value.length&&r.push(n);r.length&&(r[0].value=r[0].value.trimLeft());return r}function be(e){var n='',t;while(!e.end()){if((t=e.curr())=='{')break;else ae.white_space(t)||(n+=t);e.next()}return n}function ve(e){var n={name:'',arguments:[]},t;while(!e.end()){if((t=e.curr())=='(')e.next(),n.arguments=xe(e);else if(/[){]/.test(t))break;else ae.white_space(t)||(n.name+=t);e.next()}return n}function ze(e){var n=ie.psudo(),t;while(!e.end()){if((t=e.curr())=='}')break;if(ae.white_space(t)){e.next();continue}else n.selector?n.styles.push(ke(e)):(n.selector=be(e));e.next()}return n}function ke(e){var n=ie.rule(),t;while(!e.end()){if((t=e.curr())==';')break;else if(!n.property.length)n.property=ye(e);else{n.value=we(e);break}e.next()}return n}function Le(e){var n=ie.cond(),t;while(!e.end()){if((t=e.curr())=='}')break;else if(!n.name.length)Object.assign(n,ve(e));else if(t==':'){var r=ze(e);r.selector&&n.styles.push(r)}else if(t=='@')n.styles.push(Le(e));else if(!ae.white_space(t)){var u=ke(e);u.property&&n.styles.push(u)}e.next()}return n}function Te(e){let n=pe(e),t=[];while(!n.end()){var r=n.curr();if(ae.white_space(r)){n.next();continue}else if(r=='/'&&n.curr(1)=='*')t.push(de(n));else if(r=='#'||r=='/'&&n.curr(1)=='/')t.push(de(n,{inline:!0}));else if(r==':'){var u=ze(n);u.selector&&t.push(u)}else if(r=='@'){var o=Le(n);o.name.length&&t.push(o)}else if(!ae.white_space(r)){var c=ke(n);c.property&&t.push(c)}n.next()}return t}function He(e,n){return se(Te(e),n)}let Me=1,Se=16;function je(e){let[n,t]=(e+'').replace(/\s+/g,'').replace(/[,，xX]+/,'x').split('x').map(Number),r={x:f(n||Me,1,Se),y:f(t||n||Me,1,Se)};return Object.assign({},r,{count:r.x*r.y})}let Ae="\n:host{display:block;visibility:visible;width:1em;height:1em;}.container{position:relative;width:100%;height:100%\n}.container:after{content:'';display:block;clear:both;visibility:hidden\n}.cell{position:relative;float:left;line-height:0;box-sizing:border-box\n}.shape{box-sizing:border-box;line-height:0;position:absolute;width:100%;height:100%;transform-origin:center center;z-index:1;display:flex;align-items:center;justify-content:center\n}";class We extends HTMLElement{constructor(){super();this.doodle=this.attachShadow({mode:'open'})}connectedCallback(){setTimeout(()=>{if(!this.innerHTML.trim()){return!1}let e;try{e=He(this.innerHTML,this.size=je(this.getAttribute('grid')))}catch(e){this.innerHTML='';throw new Error(e)};let{has_transition:n}=e.props;this.doodle.innerHTML=`<style>${Ae}</style><style class="style-container">${this.style_size()}${e.styles.host}</style><style class="style-cells">${n?'':e.styles.cells}</style><div class="container">${this.html_cells()}</div>`;n&&setTimeout(()=>{this.set_style('.style-cells',e.styles.cells)},50)})}style_size(){return`.cell{width:${100/this.size.y+'%'};height:${100/this.size.x+'%'};}`}html_cells(){let e="\n<div class=\"cell\"><div class=\"shape\"></div></div>";return e.repeat(this.size.count)}set_style(e,n){let t=this.shadowRoot.querySelector(e);t&&(t.styleSheet?(t.styleSheet.cssText=n):(t.innerHTML=n))}update(e){if(!e){return!1}this.size||(this.size=je(this.getAttribute('grid')));let n=He(e,this.size);this.set_style('.style-container',this.style_size()+n.styles.host);this.set_style('.style-cells',n.styles.cells);this.innerHTML=e}refresh(){this.update(this.innerHTML)}get grid(){return Object.assign({},this.size)}set grid(e){this.setAttribute('grid',e);this.connectedCallback()}static get observedAttributes(){return['grid']}attributeChangedCallback(e,n,t){e=='grid'&&n&&(n!==t&&(this.grid=t))}}customElements.define('css-doodle',We)}))
\ No newline at end of file
+!function(e,n){typeof exports==='object'&&typeof module!=='undefined'?n():typeof define==='function'&&define.amd?define(n):(n())}(this,(function(){"use strict";var e={even:e=>!!(e%2),odd:e=>!(e%2)};function n(e,n,t){return e=>e==t}function t(e,n){return(t,r)=>e==t&&n==r}function r(n,t,r){return t=>/^(even|odd)$/.test(t)?e[t](n-1):t==n}function u(n,t,r){return n=>/^(even|odd)$/.test(n)?e[n](t-1):n==t}function o(n,t,r){return n=>e.even(r-1)}function c(n,t,r){return n=>e.odd(r-1)}var s=Object.freeze({nth:n,at:t,row:r,col:u,even:o,odd:c});function i(e){if(Array.isArray(e))return e;return Object.keys(e).map(n=>e[n])}function l(e,...n){return n.reduce((e,n)=>e.apply(null,i(n)),e)}function a(e){return(e||[]).join('\n')}function p(e){return Array.isArray(e)?e:[e]}function f(e,n,t){return Math.max(n,Math.min(t,e))}function m(e){return`-webkit-${e}${e}`}let h={};function d(e,n){return function(...t){let r=e+t.join('-');if(h[r])return h[r];return h[r]=n.apply(null,t)}}function y(...e){let n=e.reduce((e,n)=>e.concat(n),[]);return n[Math.floor(Math.random()*n.length)]}function g(e,n,t){let r=0,u=e=>e>0&&e<1?.1:1,o=arguments.length;o==1&&([e,n]=[u(e),e]);o<3&&(t=u(e));let c=[];while(t>0&&e<n||t<0&&e>n){c.push(e);e+=t;if(r++>=1e3)break}return c}function x(e){return function(...n){let t=w(n[0]);if(t){n=n.map(z);return _(e,t).apply(null,n)}return e.apply(null,n)}}function _(e,n){return function(...t){t=t.map(z);let r=e.apply(null,t);n&&(r=r.map(e=>e+n));return r}}function w(e){if(!e)return'';let n=/(%|cm|fr|rem|em|ex|in|mm|pc|pt|px|vh|vw|vmax|vmin|deg|ms|s)$/,t=''.trim.call(e).match(n);return t?t[0]:''}function z(e){let n=w(e);return n?+(e.replace(n,'')):e}let{cos:b,sin:v,sqrt:k,pow:L,PI:T}=Math,H=T/180;function M(e,n){typeof arguments[0]=='function'&&(n=e,e={});n||(n=e=>[b(e),v(e)]);var t=e.split||120,r=e.scale||1,u=H*(e.start||0),o=e.deg?e.deg*H:T/(t/2),c=[];for(var s=0;s<t;++s){var i=u+o*s,[l,a]=n(i);c.push(l*50*r+50+'% '+(a*50*r+50+'%'))}return`polygon(${c.join(',')})`}function S(e,n,t){var r=H*t;return[e*b(r)-n*v(r),n*b(r)+e*v(r)]}function j(){return'circle(49%)'}function A(){return M({split:3,start:-90},e=>[b(e)*1.1,v(e)*1.1+.2])}function W(){return M({split:4})}function C(){return M({split:5,start:54})}function R(){return M({split:6,start:30})}function q(){return M({split:7,start:-90})}function B(){return M({split:8})}function E(){return M({split:5,start:54,deg:144})}function O(){return'polygon(50% 5%, 80% 50%, 50% 95%, 20% 50%)'}function P(){return"polygon(\n 5% 35%, 35% 35%, 35% 5%, 65% 5%,\n 65% 35%, 95% 35%, 95% 65%, 65% 65%,\n 65% 95%, 35% 95%, 35% 65%, 5% 65%\n )"}function D(e = 3){e=f(e,3,5);e==4&&(e=2);return M({split:240},n=>{var t=b(e*n)*b(n),r=b(e*n)*v(n);e==3&&(t-=.2);e==2&&(t/=1.1,r/=1.1);return[t,r]})}function F(e = 3){e=f(e,3,6);var n=1-e;return M({scale:1/e},t=>{var r=n*b(t)+b(n*(t-T)),u=n*v(t)+v(n*(t-T));e==3&&(r=r*1.1-.6,u*=1.1);return[r,u]})}function G(){return F(4)}function I(){return M(e=>{var n=.7*k(2)*b(e),t=L(v(e),2)+1;return[n/t,n*v(e)/t]})}function J(){return M(e=>{var n=.75*L(v(e),3),t=b(1*e)*.7222222222222222-b(2*e)*.2777777777777778-b(3*e)/18-b(4*e)/18;return S(n*1.2,(t+.2)*1.1,180)})}function K(){return M(e=>{var[n,t]=[L(v(e),3),L(b(e),3)];return S((n+t)*b(e)*1.3-.45,(n+t)*v(e)*1.3-.45,-90)})}function N(){return M(e=>S(b(e),L(v(e),2)/(2+v(e))-.5,180))}function Q(){return M(e=>[v(e),(1+v(e))*b(e)/1.4])}function U(){return M(e=>[b(e)-L(v(e),2)/k(2),v(2*e)/2])}function V(){return M({split:240},e=>{var n=3.4*(L(v(e),2)-.5)*b(e);return S(b(e)*n+.75,v(e)*n*1.2,180)})}var X=Object.freeze({circle:j,triangle:A,rhombus:W,pentagon:C,hexgon:R,heptagon:q,octagon:B,star:E,diamond:O,cross:P,clover:D,hypocycloid:F,astroid:G,infinity:I,heart:J,bean:K,bicorn:N,pear:Q,fish:U,whale:V});function Y(e,n,t){return e=>t}function Z(e,n,t){return n=>e}function $(e,n,t){return e=>n}function ee(){return function(...e){return y.apply(null,e)}}function ne(){return ee.apply(null,arguments)}function te(){return function(...e){return y(d('range',x(g)).apply(null,e))}}function re(e,n,t){return d('shape',function(e,...n){if(e){e=e.trim();if(X[e]){return X[e].apply(null,n)}}})}var ue=Object.freeze({index:Y,row:Z,col:$,any:ee,pick:ne,rand:te,shape:re}),oe={['size'](e){var[n,t = n]=e.split(/[,，\/\s]+\s*/);return`width:${n};height:${t};`},['min-size'](e){var[n,t = n]=e.split(/[,，\/\s]+\s*/);return`min-width:${n};min-height:${t};`},['max-size'](e){var[n,t = n]=e.split(/[,，\/\s]+\s*/);return`max-width:${n};max-height:${t};`}};class ce{constructor(e){this.tokens=e;this.rules={};this.props={};this.styles={host:'',cells:''}}add_rule(e,n){var t=this.rules[e];t||(t=this.rules[e]=[]);t.push.apply(t,p(n))}compose_selector(e,n = ''){return`.cell:nth-of-type(${e}) .shape${n}`}compose_argument(e,n){var t=e.map(e=>{if(e.type=='text'){return e.value}else if(e.type=='func'){var t=ue[e.name.substr(1)];if(t){var r=e.arguments.map(e=>{return this.compose_argument(e,n)});return l(t,n,r)}}});return t.length>2?t.join(''):t[0]}compose_value(e,n){return e.reduce((e,t)=>{switch(t.type){case 'text':{e+=t.value;break};case 'func':{var r=ue[t.name.substr(1)];if(r){var u=t.arguments.map(e=>{return this.compose_argument(e,n)});e+=l(r,n,u)}}}return e},'')}compose_rule(e,n){var t=e.property,r=this.compose_value(e.value,n);t=='transition'&&(this.props.has_transition=!0);var u=`${t}:${r};`;t=='clip-path'&&(u=m(u),u+=';overflow:hidden;');oe[t]&&(u=oe[t](r));return u}compose(e,n){(n||this.tokens).forEach((n,t)=>{if(n.skip)return!1;switch(n.type){case 'rule':this.add_rule(this.compose_selector(e.count),this.compose_rule(n,e));break;case 'psudo':{n.selector.startsWith(':doodle')&&(n.selector=n.selector.replace(/^\:+doodle/,':host'));var c=n.selector.startsWith(':host');c&&(n.skip=!0);var i=n.styles.map(n=>this.compose_rule(n,e)),a=c?n.selector:this.compose_selector(e.count,n.selector);this.add_rule(a,i);break};case 'cond':var o=s[n.name.substr(1)];if(o){var r=n.arguments.map(n=>{return this.compose_argument(n,e)}),u=l(o,e,r);u&&this.compose(e,n.styles)};break}})}output(){Object.keys(this.rules).forEach(e=>{var n=e.startsWith(':host');let t=n?'host':'cells';this.styles[t]+=`${e}{${a(this.rules[e])}}`});return{props:this.props,styles:this.styles}}}function se(e,n){var t=new ce(e);for(var r=1,u=0;r<=n.x;++r){for(var o=1;o<=n.y;++o)t.compose({x:r,y:o,count:++u})}return t.output()}let ie={func(e = ''){return{type:'func',name:e,arguments:[]}},argument(){return{type:'argument',value:[]}},text(e = ''){return{type:'text',value:e}},comment(e){return{type:'comment',value:e}},psudo(e = ''){return{type:'psudo',selector:e,styles:[]}},cond(e = ''){return{type:'cond',name:e,styles:[],arguments:[]}},rule(e = ''){return{type:'rule',property:e,value:[]}}},le={'(':')','[':']','{':'}'},ae={white_space(e){return /[\s\n\t]/.test(e)},open_bracket(e){return le.hasOwnProperty(e)},close_bracket_of(e){var n=le[e];return e=>e==n},number(e){return!isNaN(e)}};function pe(e){var n=0,t=1,r=1;return{curr:(t = 0)=>e[n+t],end:()=>e.length<=n,info:()=>({index:n,col:t,line:r}),next:()=>{var u=e[n++];u=='\n'?(r++, t=0):t++;return u}}}function fe(e,{col:n,line:t}){throw new Error(`(at line ${t}, column ${n}) ${e}`)}function me(e){if(e.trim().length){return ae.number(+e)?+e:e.trim()}else{return e}}function he(e){var[n,t]=[e.curr(),e.curr()],r=ae.close_bracket_of(t);e.next();while(!e.end()){if(r(t=e.curr())){n+=t;break}else ae.open_bracket(t)?(n+=he(e)):(n+=t);e.next()}return n}function de(e,n ={}){var t=ie.comment(),r=e.curr();r!='#'&&e.next();e.next();while(!e.end()){if((r=e.curr())=='*'&&e.curr(1)=='/')break;else t.value+=r;r=e.curr();if(n.inline){if(r=='\n')return t}else{if(r=='*'&&e.curr(1)=='/')break}t.value+=r;e.next()}e.next();e.next();return t}function ye(e){var n='',t;while(!e.end()){if((t=e.curr())==':')break;else /[a-zA-Z\-]/.test(t)?ae.white_space(t)||(n+=t):fe('Syntax error:Bad property name.',e.info());e.next()}return n}function ge(e,n){var t='',r;e.next();while(!e.end()){if((r=e.curr())==n){if(e.curr(-1)!=='\\')break;else t+=r}else t+=r;e.next()}return t}function xe(e){var n=[],t=[],r='',u;while(!e.end()){if(ae.open_bracket(u=e.curr()))r+=he(e);else if(/['"]/.test(u))r+=ge(e,u);else if(u=='@')t.length||(r=r.trimLeft()),r.length&&(t.push(ie.text(r)),r=''),t.push(_e(e));else if(/[,)]/.test(u)){r.length&&(t.length?(r=r.trimRight(),r.length&&t.push(ie.text(r))):t.push(ie.text(me(r))));n.push(t.slice());[t,r]=[[],''];if(u==')')break}else r+=u;e.next()}return n}function _e(e){var n=ie.func(),t='',r;while(!e.end()){if((r=e.curr())==')')break;if(r=='('){e.next();n.name=t;n.arguments=xe(e);break}else t+=r;e.next()}return n}function we(e){var n=ie.text(),t;let r=[];while(!e.end()){if((t=e.curr())=='\n'){e.next();continue}else if(/[;}]/.test(t)){n.value.length&&r.push(n);n=ie.text();break}else t=='@'?(n.value.length&&r.push(n),n=ie.text(),r.push(_e(e))):(!ae.white_space(t)||!ae.white_space(e.curr(-1)))&&(t==':'&&fe('Syntax error:Bad property name.',e.info()),n.value+=t);e.next()}n.value.length&&r.push(n);r.length&&(r[0].value=r[0].value.trimLeft());return r}function ze(e){var n='',t;while(!e.end()){if((t=e.curr())=='{')break;else ae.white_space(t)||(n+=t);e.next()}return n}function be(e){var n={name:'',arguments:[]},t;while(!e.end()){if((t=e.curr())=='(')e.next(),n.arguments=xe(e);else if(/[){]/.test(t))break;else ae.white_space(t)||(n.name+=t);e.next()}return n}function ve(e){var n=ie.psudo(),t;while(!e.end()){if((t=e.curr())=='}')break;if(ae.white_space(t)){e.next();continue}else n.selector?n.styles.push(ke(e)):(n.selector=ze(e));e.next()}return n}function ke(e){var n=ie.rule(),t;while(!e.end()){if((t=e.curr())==';')break;else if(!n.property.length)n.property=ye(e);else{n.value=we(e);break}e.next()}return n}function Le(e){var n=ie.cond(),t;while(!e.end()){if((t=e.curr())=='}')break;else if(!n.name.length)Object.assign(n,be(e));else if(t==':'){var r=ve(e);r.selector&&n.styles.push(r)}else if(t=='@')n.styles.push(Le(e));else if(!ae.white_space(t)){var u=ke(e);u.property&&n.styles.push(u)}e.next()}return n}function Te(e){let n=pe(e),t=[];while(!n.end()){var r=n.curr();if(ae.white_space(r)){n.next();continue}else if(r=='/'&&n.curr(1)=='*')t.push(de(n));else if(r=='#'||r=='/'&&n.curr(1)=='/')t.push(de(n,{inline:!0}));else if(r==':'){var u=ve(n);u.selector&&t.push(u)}else if(r=='@'){var o=Le(n);o.name.length&&t.push(o)}else if(!ae.white_space(r)){var c=ke(n);c.property&&t.push(c)}n.next()}return t}function He(e,n){return se(Te(e),n)}let Me=1,Se=16;function je(e){let[n,t]=(e+'').replace(/\s+/g,'').replace(/[,，xX]+/,'x').split('x').map(Number),r={x:f(n||Me,1,Se),y:f(t||n||Me,1,Se)};return Object.assign({},r,{count:r.x*r.y})}let Ae="\n:host{display:block;visibility:visible;width:1em;height:1em;}.container{position:relative;width:100%;height:100%\n}.container:after{content:'';display:block;clear:both;visibility:hidden\n}.cell{position:relative;float:left;line-height:0;box-sizing:border-box\n}.shape{box-sizing:border-box;line-height:0;position:absolute;width:100%;height:100%;transform-origin:center center;z-index:1;display:flex;align-items:center;justify-content:center\n}";class We extends HTMLElement{constructor(){super();this.doodle=this.attachShadow({mode:'open'})}connectedCallback(){setTimeout(()=>{if(!this.innerHTML.trim()){return!1}let e;try{e=He(this.innerHTML,this.size=je(this.getAttribute('grid')))}catch(e){this.innerHTML='';throw new Error(e)};let{has_transition:n}=e.props;this.doodle.innerHTML=`<style>${Ae}</style><style class="style-container">${this.style_size()}${e.styles.host}</style><style class="style-cells">${n?'':e.styles.cells}</style><div class="container">${this.html_cells()}</div>`;n&&setTimeout(()=>{this.set_style('.style-cells',e.styles.cells)},50)})}style_size(){return`.cell{width:${100/this.size.y+'%'};height:${100/this.size.x+'%'};}`}html_cells(){let e="\n<div class=\"cell\"><div class=\"shape\"></div></div>";return e.repeat(this.size.count)}set_style(e,n){let t=this.shadowRoot.querySelector(e);t&&(t.styleSheet?(t.styleSheet.cssText=n):(t.innerHTML=n))}update(e){if(!e){return!1}this.size||(this.size=je(this.getAttribute('grid')));let n=He(e,this.size);this.set_style('.style-container',this.style_size()+n.styles.host);this.set_style('.style-cells',n.styles.cells);this.innerHTML=e}refresh(){this.update(this.innerHTML)}get grid(){return Object.assign({},this.size)}set grid(e){this.setAttribute('grid',e);this.connectedCallback()}static get observedAttributes(){return['grid']}attributeChangedCallback(e,n,t){e=='grid'&&n&&(n!==t&&(this.grid=t))}}customElements.define('css-doodle',We)}))
\ No newline at end of file
diff --git a/docs/lib/css-doodle.min.js b/docs/lib/css-doodle.min.js
index fb08936..b60a3df 100644
--- a/docs/lib/css-doodle.min.js
+++ b/docs/lib/css-doodle.min.js
@@ -1 +1 @@
-!function(e,n){typeof exports==='object'&&typeof module!=='undefined'?n():typeof define==='function'&&define.amd?define(n):(n())}(this,(function(){"use strict";var e={even:e=>!!(e%2),odd:e=>!(e%2)};function n(e,n,t){return e=>e==t}function t(e,n){return(t,r)=>e==t&&n==r}function r(n,t,r){return t=>/^(even|odd)$/.test(t)?e[t](n-1):t==n}function u(n,t,r){return n=>/^(even|odd)$/.test(n)?e[n](t-1):n==t}function o(n,t,r){return n=>e.even(r-1)}function c(n,t,r){return n=>e.odd(r-1)}var s=Object.freeze({nth:n,at:t,row:r,col:u,even:o,odd:c});function i(e){if(Array.isArray(e))return e;return Object.keys(e).map(n=>e[n])}function l(e,...n){return n.reduce((e,n)=>e.apply(null,i(n)),e)}function a(e){return(e||[]).join('\n')}function p(e){return Array.isArray(e)?e:[e]}function f(e,n,t){return Math.max(n,Math.min(t,e))}function h(e){return`-webkit-${e}${e}`}let m={};function d(e,n){return function(...t){let r=e+t.join('-');if(m[r])return m[r];return m[r]=n.apply(null,t)}}function y(...e){let n=e.reduce((e,n)=>e.concat(n),[]);return n[Math.floor(Math.random()*n.length)]}function g(e,n,t){let r=0,u=e=>e>0&&e<1?.1:1,o=arguments.length;o==1&&([e,n]=[u(e),e]);o<3&&(t=u(e));let c=[];while(t>0&&e<n||t<0&&e>n){c.push(e);e+=t;if(r++>=1e3)break}return c}function x(e){return function(...n){let t=w(n[0]);if(t){n=n.map(b);return _(e,t).apply(null,n)}return e.apply(null,n)}}function _(e,n){return function(...t){t=t.map(b);let r=e.apply(null,t);n&&(r=r.map(e=>e+n));return r}}function w(e){if(!e)return'';let n=/(%|cm|fr|rem|em|ex|in|mm|pc|pt|px|vh|vw|vmax|vmin|deg|ms|s)$/,t=''.trim.call(e).match(n);return t?t[0]:''}function b(e){let n=w(e);return n?+(e.replace(n,'')):e}let{cos:v,sin:z,tan:k,sqrt:L,pow:T,PI:H}=Math,M=H/180;function S(e,n){typeof arguments[0]=='function'&&(n=e,e={});n||(n=e=>[v(e),z(e)]);var t=e.split||120,r=e.scale||1,u=M*(e.start||0),o=e.deg?e.deg*M:H/(t/2),c=[];for(var s=0;s<t;++s){var i=u+o*s,[l,a]=n(i);c.push(l*50*r+50+'% '+(a*50*r+50+'%'))}return`polygon(${c.join(',')})`}function j(e,n,t){var r=M*t;return[e*v(r)-n*z(r),n*v(r)+e*z(r)]}function A(){return'circle(49%)'}function W(){return S({split:3,start:-90},e=>[v(e)*1.1,z(e)*1.1+.2])}function C(){return S({split:4})}function R(){return S({split:5,start:54})}function q(){return S({split:6,start:30})}function B(){return S({split:7,start:-90})}function E(){return S({split:8})}function O(){return S({split:5,start:54,deg:144})}function P(){return'polygon(50% 5%, 80% 50%, 50% 95%, 20% 50%)'}function D(){return"polygon(\n 5% 35%, 35% 35%, 35% 5%, 65% 5%,\n 65% 35%, 95% 35%, 95% 65%, 65% 65%,\n 65% 95%, 35% 95%, 35% 65%, 5% 65%\n )"}function F(e = 3){e=f(e,3,5);e==4&&(e=2);return S({split:240},n=>{var t=v(e*n)*v(n),r=v(e*n)*z(n);e==3&&(t-=.2);e==2&&(t/=1.1,r/=1.1);return[t,r]})}function G(e = 3){e=f(e,3,6);var n=1-e;return S({scale:1/e},t=>{var r=n*v(t)+v(n*(t-H)),u=n*z(t)+z(n*(t-H));e==3&&(r=r*1.1-.6,u*=1.1);return[r,u]})}function I(){return G(4)}function J(){return S(e=>{var n=.7*L(2)*v(e),t=T(z(e),2)+1;return[n/t,n*z(e)/t]})}function K(){return S(e=>{var n=.75*T(z(e),3),t=v(1*e)*.7222222222222222-v(2*e)*.2777777777777778-v(3*e)/18-v(4*e)/18;return j(n*1.2,(t+.2)*1.1,180)})}function N(){return S(e=>{var[n,t]=[T(z(e),3),T(v(e),3)];return j((n+t)*v(e)*1.3-.45,(n+t)*z(e)*1.3-.45,-90)})}function Q(){return S(e=>j(v(e),T(z(e),2)/(2+z(e))-.5,180))}function U(){return S(e=>[z(e),(1+z(e))*v(e)/1.4])}function V(){return S(e=>[v(e)-T(z(e),2)/L(2),z(2*e)/2])}function X(){return S({split:240},e=>{var n=3.4*(T(z(e),2)-.5)*v(e);return j(v(e)*n+.75,z(e)*n*1.2,180)})}var Y=Object.freeze({circle:A,triangle:W,rhombus:C,pentagon:R,hexgon:q,heptagon:B,octagon:E,star:O,diamond:P,cross:D,clover:F,hypocycloid:G,astroid:I,infinity:J,heart:K,bean:N,bicorn:Q,pear:U,fish:V,whale:X});function Z(e,n,t){return e=>t}function $(e,n,t){return n=>e}function ee(e,n,t){return e=>n}function ne(){return function(...e){return y.apply(null,e)}}function te(){return ne.apply(null,arguments)}function re(){return function(...e){return y(d('range',x(g)).apply(null,e))}}function ue(e,n,t){return d('shape',function(e,...n){if(e){e=e.trim();if(Y[e]){return Y[e].apply(null,n)}}})}var oe=Object.freeze({index:Z,row:$,col:ee,any:ne,pick:te,rand:re,shape:ue});class ce{constructor(e){this.tokens=e;this.rules={};this.props={};this.styles={host:'',cells:''}}add_rule(e,n){var t=this.rules[e];t||(t=this.rules[e]=[]);t.push.apply(t,p(n))}compose_selector(e,n = ''){return`.cell:nth-of-type(${e}) .shape${n}`}compose_argument(e,n){var t=e.map(e=>{if(e.type=='text'){return e.value}else if(e.type=='func'){var t=oe[e.name.substr(1)];if(t){var r=e.arguments.map(e=>{return this.compose_argument(e,n)});return l(t,n,r)}}});return t.length>2?t.join(''):t[0]}compose_value(e,n){return e.reduce((e,t)=>{switch(t.type){case 'text':{e+=t.value;break};case 'func':{var r=oe[t.name.substr(1)];if(r){var u=t.arguments.map(e=>{return this.compose_argument(e,n)});e+=l(r,n,u)}}}return e},'')}compose_rule(e,n){var t=e.property,r=this.compose_value(e.value,n);t=='transition'&&(this.props.has_transition=!0);var u=`${t}:${r};`;t=='clip-path'&&(u=h(u),u+=';overflow:hidden;');t=='size'&&(u=`width:${r};height:${r};`);return u}compose(e,n){(n||this.tokens).forEach((n,t)=>{if(n.skip)return!1;switch(n.type){case 'rule':this.add_rule(this.compose_selector(e.count),this.compose_rule(n,e));break;case 'psudo':{n.selector.startsWith(':doodle')&&(n.selector=n.selector.replace(/^\:+doodle/,':host'));var c=n.selector.startsWith(':host');c&&(n.skip=!0);var i=n.styles.map(n=>this.compose_rule(n,e)),a=c?n.selector:this.compose_selector(e.count,n.selector);this.add_rule(a,i);break};case 'cond':var o=s[n.name.substr(1)];if(o){var r=n.arguments.map(n=>{return this.compose_argument(n,e)}),u=l(o,e,r);u&&this.compose(e,n.styles)};break}})}output(){Object.keys(this.rules).forEach(e=>{var n=e.startsWith(':host');let t=n?'host':'cells';this.styles[t]+=`${e}{${a(this.rules[e])}}`});return{props:this.props,styles:this.styles}}}function se(e,n){var t=new ce(e);for(var r=1,u=0;r<=n.x;++r){for(var o=1;o<=n.y;++o)t.compose({x:r,y:o,count:++u})}return t.output()}let ie={func(e = ''){return{type:'func',name:e,arguments:[]}},argument(){return{type:'argument',value:[]}},text(e = ''){return{type:'text',value:e}},comment(e){return{type:'comment',value:e}},psudo(e = ''){return{type:'psudo',selector:e,styles:[]}},cond(e = ''){return{type:'cond',name:e,styles:[],arguments:[]}},rule(e = ''){return{type:'rule',property:e,value:[]}}},le={'(':')','[':']','{':'}'},ae={white_space(e){return /[\s\n\t]/.test(e)},open_bracket(e){return le.hasOwnProperty(e)},close_bracket_of(e){var n=le[e];return e=>e==n},number(e){return!isNaN(e)}};function pe(e){var n=0,t=1,r=1;return{curr:(t = 0)=>e[n+t],end:()=>e.length<=n,info:()=>({index:n,col:t,line:r}),next:()=>{var u=e[n++];u=='\n'?(r++, t=0):t++;return u}}}function fe(e,{col:n,line:t}){throw new Error(`(at line ${t}, column ${n}) ${e}`)}function he(e){if(e.trim().length){return ae.number(+e)?+e:e.trim()}else{return e}}function me(e){var[n,t]=[e.curr(),e.curr()],r=ae.close_bracket_of(t);e.next();while(!e.end()){if(r(t=e.curr())){n+=t;break}else ae.open_bracket(t)?(n+=me(e)):(n+=t);e.next()}return n}function de(e,n ={}){var t=ie.comment(),r=e.curr();r!='#'&&e.next();e.next();while(!e.end()){if((r=e.curr())=='*'&&e.curr(1)=='/')break;else t.value+=r;r=e.curr();if(n.inline){if(r=='\n')return t}else{if(r=='*'&&e.curr(1)=='/')break}t.value+=r;e.next()}e.next();e.next();return t}function ye(e){var n='',t;while(!e.end()){if((t=e.curr())==':')break;else /[a-zA-Z\-]/.test(t)?ae.white_space(t)||(n+=t):fe('Syntax error:Bad property name.',e.info());e.next()}return n}function ge(e,n){var t='',r;e.next();while(!e.end()){if((r=e.curr())==n){if(e.curr(-1)!=='\\')break;else t+=r}else t+=r;e.next()}return t}function xe(e){var n=[],t=[],r='',u;while(!e.end()){if(ae.open_bracket(u=e.curr()))r+=me(e);else if(/['"]/.test(u))r+=ge(e,u);else if(u=='@')t.length||(r=r.trimLeft()),r.length&&(t.push(ie.text(r)),r=''),t.push(_e(e));else if(/[,)]/.test(u)){r.length&&(t.length?(r=r.trimRight(),r.length&&t.push(ie.text(r))):t.push(ie.text(he(r))));n.push(t.slice());[t,r]=[[],''];if(u==')')break}else r+=u;e.next()}return n}function _e(e){var n=ie.func(),t='',r;while(!e.end()){if((r=e.curr())==')')break;if(r=='('){e.next();n.name=t;n.arguments=xe(e);break}else t+=r;e.next()}return n}function we(e){var n=ie.text(),t;let r=[];while(!e.end()){if((t=e.curr())=='\n'){e.next();continue}else if(/[;}]/.test(t)){n.value.length&&r.push(n);n=ie.text();break}else t=='@'?(n.value.length&&r.push(n),n=ie.text(),r.push(_e(e))):(!ae.white_space(t)||!ae.white_space(e.curr(-1)))&&(t==':'&&fe('Syntax error:Bad property name.',e.info()),n.value+=t);e.next()}n.value.length&&r.push(n);r.length&&(r[0].value=r[0].value.trimLeft());return r}function be(e){var n='',t;while(!e.end()){if((t=e.curr())=='{')break;else ae.white_space(t)||(n+=t);e.next()}return n}function ve(e){var n={name:'',arguments:[]},t;while(!e.end()){if((t=e.curr())=='(')e.next(),n.arguments=xe(e);else if(/[){]/.test(t))break;else ae.white_space(t)||(n.name+=t);e.next()}return n}function ze(e){var n=ie.psudo(),t;while(!e.end()){if((t=e.curr())=='}')break;if(ae.white_space(t)){e.next();continue}else n.selector?n.styles.push(ke(e)):(n.selector=be(e));e.next()}return n}function ke(e){var n=ie.rule(),t;while(!e.end()){if((t=e.curr())==';')break;else if(!n.property.length)n.property=ye(e);else{n.value=we(e);break}e.next()}return n}function Le(e){var n=ie.cond(),t;while(!e.end()){if((t=e.curr())=='}')break;else if(!n.name.length)Object.assign(n,ve(e));else if(t==':'){var r=ze(e);r.selector&&n.styles.push(r)}else if(t=='@')n.styles.push(Le(e));else if(!ae.white_space(t)){var u=ke(e);u.property&&n.styles.push(u)}e.next()}return n}function Te(e){let n=pe(e),t=[];while(!n.end()){var r=n.curr();if(ae.white_space(r)){n.next();continue}else if(r=='/'&&n.curr(1)=='*')t.push(de(n));else if(r=='#'||r=='/'&&n.curr(1)=='/')t.push(de(n,{inline:!0}));else if(r==':'){var u=ze(n);u.selector&&t.push(u)}else if(r=='@'){var o=Le(n);o.name.length&&t.push(o)}else if(!ae.white_space(r)){var c=ke(n);c.property&&t.push(c)}n.next()}return t}function He(e,n){return se(Te(e),n)}let Me=1,Se=16;function je(e){let[n,t]=(e+'').replace(/\s+/g,'').replace(/[,，xX]+/,'x').split('x').map(Number),r={x:f(n||Me,1,Se),y:f(t||n||Me,1,Se)};return Object.assign({},r,{count:r.x*r.y})}let Ae="\n:host{display:block;visibility:visible;width:1em;height:1em;}.container{position:relative;width:100%;height:100%\n}.container:after{content:'';display:block;clear:both;visibility:hidden\n}.cell{position:relative;float:left;line-height:0;box-sizing:border-box\n}.shape{box-sizing:border-box;line-height:0;position:absolute;width:100%;height:100%;transform-origin:center center;z-index:1;display:flex;align-items:center;justify-content:center\n}";class We extends HTMLElement{constructor(){super();this.doodle=this.attachShadow({mode:'open'})}connectedCallback(){setTimeout(()=>{if(!this.innerHTML.trim()){return!1}let e;try{e=He(this.innerHTML,this.size=je(this.getAttribute('grid')))}catch(e){this.innerHTML='';throw new Error(e)};let{has_transition:n}=e.props;this.doodle.innerHTML=`<style>${Ae}</style><style class="style-container">${this.style_size()}${e.styles.host}</style><style class="style-cells">${n?'':e.styles.cells}</style><div class="container">${this.html_cells()}</div>`;n&&setTimeout(()=>{this.set_style('.style-cells',e.styles.cells)},50)})}style_size(){return`.cell{width:${100/this.size.y+'%'};height:${100/this.size.x+'%'};}`}html_cells(){let e="\n<div class=\"cell\"><div class=\"shape\"></div></div>";return e.repeat(this.size.count)}set_style(e,n){let t=this.shadowRoot.querySelector(e);t&&(t.styleSheet?(t.styleSheet.cssText=n):(t.innerHTML=n))}update(e){if(!e){return!1}this.size||(this.size=je(this.getAttribute('grid')));let n=He(e,this.size);this.set_style('.style-container',this.style_size()+n.styles.host);this.set_style('.style-cells',n.styles.cells);this.innerHTML=e}refresh(){this.update(this.innerHTML)}get grid(){return Object.assign({},this.size)}set grid(e){this.setAttribute('grid',e);this.connectedCallback()}static get observedAttributes(){return['grid']}attributeChangedCallback(e,n,t){e=='grid'&&n&&(n!==t&&(this.grid=t))}}customElements.define('css-doodle',We)}))
\ No newline at end of file
+!function(e,n){typeof exports==='object'&&typeof module!=='undefined'?n():typeof define==='function'&&define.amd?define(n):(n())}(this,(function(){"use strict";var e={even:e=>!!(e%2),odd:e=>!(e%2)};function n(e,n,t){return e=>e==t}function t(e,n){return(t,r)=>e==t&&n==r}function r(n,t,r){return t=>/^(even|odd)$/.test(t)?e[t](n-1):t==n}function u(n,t,r){return n=>/^(even|odd)$/.test(n)?e[n](t-1):n==t}function o(n,t,r){return n=>e.even(r-1)}function c(n,t,r){return n=>e.odd(r-1)}var s=Object.freeze({nth:n,at:t,row:r,col:u,even:o,odd:c});function i(e){if(Array.isArray(e))return e;return Object.keys(e).map(n=>e[n])}function l(e,...n){return n.reduce((e,n)=>e.apply(null,i(n)),e)}function a(e){return(e||[]).join('\n')}function p(e){return Array.isArray(e)?e:[e]}function f(e,n,t){return Math.max(n,Math.min(t,e))}function m(e){return`-webkit-${e}${e}`}let h={};function d(e,n){return function(...t){let r=e+t.join('-');if(h[r])return h[r];return h[r]=n.apply(null,t)}}function y(...e){let n=e.reduce((e,n)=>e.concat(n),[]);return n[Math.floor(Math.random()*n.length)]}function g(e,n,t){let r=0,u=e=>e>0&&e<1?.1:1,o=arguments.length;o==1&&([e,n]=[u(e),e]);o<3&&(t=u(e));let c=[];while(t>0&&e<n||t<0&&e>n){c.push(e);e+=t;if(r++>=1e3)break}return c}function x(e){return function(...n){let t=w(n[0]);if(t){n=n.map(z);return _(e,t).apply(null,n)}return e.apply(null,n)}}function _(e,n){return function(...t){t=t.map(z);let r=e.apply(null,t);n&&(r=r.map(e=>e+n));return r}}function w(e){if(!e)return'';let n=/(%|cm|fr|rem|em|ex|in|mm|pc|pt|px|vh|vw|vmax|vmin|deg|ms|s)$/,t=''.trim.call(e).match(n);return t?t[0]:''}function z(e){let n=w(e);return n?+(e.replace(n,'')):e}let{cos:b,sin:v,sqrt:k,pow:L,PI:T}=Math,H=T/180;function M(e,n){typeof arguments[0]=='function'&&(n=e,e={});n||(n=e=>[b(e),v(e)]);var t=e.split||120,r=e.scale||1,u=H*(e.start||0),o=e.deg?e.deg*H:T/(t/2),c=[];for(var s=0;s<t;++s){var i=u+o*s,[l,a]=n(i);c.push(l*50*r+50+'% '+(a*50*r+50+'%'))}return`polygon(${c.join(',')})`}function S(e,n,t){var r=H*t;return[e*b(r)-n*v(r),n*b(r)+e*v(r)]}function j(){return'circle(49%)'}function A(){return M({split:3,start:-90},e=>[b(e)*1.1,v(e)*1.1+.2])}function W(){return M({split:4})}function C(){return M({split:5,start:54})}function R(){return M({split:6,start:30})}function q(){return M({split:7,start:-90})}function B(){return M({split:8})}function E(){return M({split:5,start:54,deg:144})}function O(){return'polygon(50% 5%, 80% 50%, 50% 95%, 20% 50%)'}function P(){return"polygon(\n 5% 35%, 35% 35%, 35% 5%, 65% 5%,\n 65% 35%, 95% 35%, 95% 65%, 65% 65%,\n 65% 95%, 35% 95%, 35% 65%, 5% 65%\n )"}function D(e = 3){e=f(e,3,5);e==4&&(e=2);return M({split:240},n=>{var t=b(e*n)*b(n),r=b(e*n)*v(n);e==3&&(t-=.2);e==2&&(t/=1.1,r/=1.1);return[t,r]})}function F(e = 3){e=f(e,3,6);var n=1-e;return M({scale:1/e},t=>{var r=n*b(t)+b(n*(t-T)),u=n*v(t)+v(n*(t-T));e==3&&(r=r*1.1-.6,u*=1.1);return[r,u]})}function G(){return F(4)}function I(){return M(e=>{var n=.7*k(2)*b(e),t=L(v(e),2)+1;return[n/t,n*v(e)/t]})}function J(){return M(e=>{var n=.75*L(v(e),3),t=b(1*e)*.7222222222222222-b(2*e)*.2777777777777778-b(3*e)/18-b(4*e)/18;return S(n*1.2,(t+.2)*1.1,180)})}function K(){return M(e=>{var[n,t]=[L(v(e),3),L(b(e),3)];return S((n+t)*b(e)*1.3-.45,(n+t)*v(e)*1.3-.45,-90)})}function N(){return M(e=>S(b(e),L(v(e),2)/(2+v(e))-.5,180))}function Q(){return M(e=>[v(e),(1+v(e))*b(e)/1.4])}function U(){return M(e=>[b(e)-L(v(e),2)/k(2),v(2*e)/2])}function V(){return M({split:240},e=>{var n=3.4*(L(v(e),2)-.5)*b(e);return S(b(e)*n+.75,v(e)*n*1.2,180)})}var X=Object.freeze({circle:j,triangle:A,rhombus:W,pentagon:C,hexgon:R,heptagon:q,octagon:B,star:E,diamond:O,cross:P,clover:D,hypocycloid:F,astroid:G,infinity:I,heart:J,bean:K,bicorn:N,pear:Q,fish:U,whale:V});function Y(e,n,t){return e=>t}function Z(e,n,t){return n=>e}function $(e,n,t){return e=>n}function ee(){return function(...e){return y.apply(null,e)}}function ne(){return ee.apply(null,arguments)}function te(){return function(...e){return y(d('range',x(g)).apply(null,e))}}function re(e,n,t){return d('shape',function(e,...n){if(e){e=e.trim();if(X[e]){return X[e].apply(null,n)}}})}var ue=Object.freeze({index:Y,row:Z,col:$,any:ee,pick:ne,rand:te,shape:re}),oe={['size'](e){var[n,t = n]=e.split(/[,，\/\s]+\s*/);return`width:${n};height:${t};`},['min-size'](e){var[n,t = n]=e.split(/[,，\/\s]+\s*/);return`min-width:${n};min-height:${t};`},['max-size'](e){var[n,t = n]=e.split(/[,，\/\s]+\s*/);return`max-width:${n};max-height:${t};`}};class ce{constructor(e){this.tokens=e;this.rules={};this.props={};this.styles={host:'',cells:''}}add_rule(e,n){var t=this.rules[e];t||(t=this.rules[e]=[]);t.push.apply(t,p(n))}compose_selector(e,n = ''){return`.cell:nth-of-type(${e}) .shape${n}`}compose_argument(e,n){var t=e.map(e=>{if(e.type=='text'){return e.value}else if(e.type=='func'){var t=ue[e.name.substr(1)];if(t){var r=e.arguments.map(e=>{return this.compose_argument(e,n)});return l(t,n,r)}}});return t.length>2?t.join(''):t[0]}compose_value(e,n){return e.reduce((e,t)=>{switch(t.type){case 'text':{e+=t.value;break};case 'func':{var r=ue[t.name.substr(1)];if(r){var u=t.arguments.map(e=>{return this.compose_argument(e,n)});e+=l(r,n,u)}}}return e},'')}compose_rule(e,n){var t=e.property,r=this.compose_value(e.value,n);t=='transition'&&(this.props.has_transition=!0);var u=`${t}:${r};`;t=='clip-path'&&(u=m(u),u+=';overflow:hidden;');oe[t]&&(u=oe[t](r));return u}compose(e,n){(n||this.tokens).forEach((n,t)=>{if(n.skip)return!1;switch(n.type){case 'rule':this.add_rule(this.compose_selector(e.count),this.compose_rule(n,e));break;case 'psudo':{n.selector.startsWith(':doodle')&&(n.selector=n.selector.replace(/^\:+doodle/,':host'));var c=n.selector.startsWith(':host');c&&(n.skip=!0);var i=n.styles.map(n=>this.compose_rule(n,e)),a=c?n.selector:this.compose_selector(e.count,n.selector);this.add_rule(a,i);break};case 'cond':var o=s[n.name.substr(1)];if(o){var r=n.arguments.map(n=>{return this.compose_argument(n,e)}),u=l(o,e,r);u&&this.compose(e,n.styles)};break}})}output(){Object.keys(this.rules).forEach(e=>{var n=e.startsWith(':host');let t=n?'host':'cells';this.styles[t]+=`${e}{${a(this.rules[e])}}`});return{props:this.props,styles:this.styles}}}function se(e,n){var t=new ce(e);for(var r=1,u=0;r<=n.x;++r){for(var o=1;o<=n.y;++o)t.compose({x:r,y:o,count:++u})}return t.output()}let ie={func(e = ''){return{type:'func',name:e,arguments:[]}},argument(){return{type:'argument',value:[]}},text(e = ''){return{type:'text',value:e}},comment(e){return{type:'comment',value:e}},psudo(e = ''){return{type:'psudo',selector:e,styles:[]}},cond(e = ''){return{type:'cond',name:e,styles:[],arguments:[]}},rule(e = ''){return{type:'rule',property:e,value:[]}}},le={'(':')','[':']','{':'}'},ae={white_space(e){return /[\s\n\t]/.test(e)},open_bracket(e){return le.hasOwnProperty(e)},close_bracket_of(e){var n=le[e];return e=>e==n},number(e){return!isNaN(e)}};function pe(e){var n=0,t=1,r=1;return{curr:(t = 0)=>e[n+t],end:()=>e.length<=n,info:()=>({index:n,col:t,line:r}),next:()=>{var u=e[n++];u=='\n'?(r++, t=0):t++;return u}}}function fe(e,{col:n,line:t}){throw new Error(`(at line ${t}, column ${n}) ${e}`)}function me(e){if(e.trim().length){return ae.number(+e)?+e:e.trim()}else{return e}}function he(e){var[n,t]=[e.curr(),e.curr()],r=ae.close_bracket_of(t);e.next();while(!e.end()){if(r(t=e.curr())){n+=t;break}else ae.open_bracket(t)?(n+=he(e)):(n+=t);e.next()}return n}function de(e,n ={}){var t=ie.comment(),r=e.curr();r!='#'&&e.next();e.next();while(!e.end()){if((r=e.curr())=='*'&&e.curr(1)=='/')break;else t.value+=r;r=e.curr();if(n.inline){if(r=='\n')return t}else{if(r=='*'&&e.curr(1)=='/')break}t.value+=r;e.next()}e.next();e.next();return t}function ye(e){var n='',t;while(!e.end()){if((t=e.curr())==':')break;else /[a-zA-Z\-]/.test(t)?ae.white_space(t)||(n+=t):fe('Syntax error:Bad property name.',e.info());e.next()}return n}function ge(e,n){var t='',r;e.next();while(!e.end()){if((r=e.curr())==n){if(e.curr(-1)!=='\\')break;else t+=r}else t+=r;e.next()}return t}function xe(e){var n=[],t=[],r='',u;while(!e.end()){if(ae.open_bracket(u=e.curr()))r+=he(e);else if(/['"]/.test(u))r+=ge(e,u);else if(u=='@')t.length||(r=r.trimLeft()),r.length&&(t.push(ie.text(r)),r=''),t.push(_e(e));else if(/[,)]/.test(u)){r.length&&(t.length?(r=r.trimRight(),r.length&&t.push(ie.text(r))):t.push(ie.text(me(r))));n.push(t.slice());[t,r]=[[],''];if(u==')')break}else r+=u;e.next()}return n}function _e(e){var n=ie.func(),t='',r;while(!e.end()){if((r=e.curr())==')')break;if(r=='('){e.next();n.name=t;n.arguments=xe(e);break}else t+=r;e.next()}return n}function we(e){var n=ie.text(),t;let r=[];while(!e.end()){if((t=e.curr())=='\n'){e.next();continue}else if(/[;}]/.test(t)){n.value.length&&r.push(n);n=ie.text();break}else t=='@'?(n.value.length&&r.push(n),n=ie.text(),r.push(_e(e))):(!ae.white_space(t)||!ae.white_space(e.curr(-1)))&&(t==':'&&fe('Syntax error:Bad property name.',e.info()),n.value+=t);e.next()}n.value.length&&r.push(n);r.length&&(r[0].value=r[0].value.trimLeft());return r}function ze(e){var n='',t;while(!e.end()){if((t=e.curr())=='{')break;else ae.white_space(t)||(n+=t);e.next()}return n}function be(e){var n={name:'',arguments:[]},t;while(!e.end()){if((t=e.curr())=='(')e.next(),n.arguments=xe(e);else if(/[){]/.test(t))break;else ae.white_space(t)||(n.name+=t);e.next()}return n}function ve(e){var n=ie.psudo(),t;while(!e.end()){if((t=e.curr())=='}')break;if(ae.white_space(t)){e.next();continue}else n.selector?n.styles.push(ke(e)):(n.selector=ze(e));e.next()}return n}function ke(e){var n=ie.rule(),t;while(!e.end()){if((t=e.curr())==';')break;else if(!n.property.length)n.property=ye(e);else{n.value=we(e);break}e.next()}return n}function Le(e){var n=ie.cond(),t;while(!e.end()){if((t=e.curr())=='}')break;else if(!n.name.length)Object.assign(n,be(e));else if(t==':'){var r=ve(e);r.selector&&n.styles.push(r)}else if(t=='@')n.styles.push(Le(e));else if(!ae.white_space(t)){var u=ke(e);u.property&&n.styles.push(u)}e.next()}return n}function Te(e){let n=pe(e),t=[];while(!n.end()){var r=n.curr();if(ae.white_space(r)){n.next();continue}else if(r=='/'&&n.curr(1)=='*')t.push(de(n));else if(r=='#'||r=='/'&&n.curr(1)=='/')t.push(de(n,{inline:!0}));else if(r==':'){var u=ve(n);u.selector&&t.push(u)}else if(r=='@'){var o=Le(n);o.name.length&&t.push(o)}else if(!ae.white_space(r)){var c=ke(n);c.property&&t.push(c)}n.next()}return t}function He(e,n){return se(Te(e),n)}let Me=1,Se=16;function je(e){let[n,t]=(e+'').replace(/\s+/g,'').replace(/[,，xX]+/,'x').split('x').map(Number),r={x:f(n||Me,1,Se),y:f(t||n||Me,1,Se)};return Object.assign({},r,{count:r.x*r.y})}let Ae="\n:host{display:block;visibility:visible;width:1em;height:1em;}.container{position:relative;width:100%;height:100%\n}.container:after{content:'';display:block;clear:both;visibility:hidden\n}.cell{position:relative;float:left;line-height:0;box-sizing:border-box\n}.shape{box-sizing:border-box;line-height:0;position:absolute;width:100%;height:100%;transform-origin:center center;z-index:1;display:flex;align-items:center;justify-content:center\n}";class We extends HTMLElement{constructor(){super();this.doodle=this.attachShadow({mode:'open'})}connectedCallback(){setTimeout(()=>{if(!this.innerHTML.trim()){return!1}let e;try{e=He(this.innerHTML,this.size=je(this.getAttribute('grid')))}catch(e){this.innerHTML='';throw new Error(e)};let{has_transition:n}=e.props;this.doodle.innerHTML=`<style>${Ae}</style><style class="style-container">${this.style_size()}${e.styles.host}</style><style class="style-cells">${n?'':e.styles.cells}</style><div class="container">${this.html_cells()}</div>`;n&&setTimeout(()=>{this.set_style('.style-cells',e.styles.cells)},50)})}style_size(){return`.cell{width:${100/this.size.y+'%'};height:${100/this.size.x+'%'};}`}html_cells(){let e="\n<div class=\"cell\"><div class=\"shape\"></div></div>";return e.repeat(this.size.count)}set_style(e,n){let t=this.shadowRoot.querySelector(e);t&&(t.styleSheet?(t.styleSheet.cssText=n):(t.innerHTML=n))}update(e){if(!e){return!1}this.size||(this.size=je(this.getAttribute('grid')));let n=He(e,this.size);this.set_style('.style-container',this.style_size()+n.styles.host);this.set_style('.style-cells',n.styles.cells);this.innerHTML=e}refresh(){this.update(this.innerHTML)}get grid(){return Object.assign({},this.size)}set grid(e){this.setAttribute('grid',e);this.connectedCallback()}static get observedAttributes(){return['grid']}attributeChangedCallback(e,n,t){e=='grid'&&n&&(n!==t&&(this.grid=t))}}customElements.define('css-doodle',We)}))
\ No newline at end of file
diff --git a/src/generator.js b/src/generator.js
index f5b1c8e..dde3d49 100644
--- a/src/generator.js
+++ b/src/generator.js
@@ -1,6 +1,7 @@
 import * as cond from './cond';
 import * as func from './function';
 import * as utils from './utils';
+import shortcuts from './shortcuts';
 
 class Rules {
   constructor(tokens) {
@@ -71,9 +72,11 @@ class Rules {
       // fix clip bug
       rule += ';overflow: hidden;';
     }
-    if (property == 'size') {
-      rule = `width: ${ value }; height: ${ value };`;
+
+    if (shortcuts[property]) {
+      rule = shortcuts[property](value);
     }
+
     return rule;
   }
   compose(coords, tokens) {
diff --git a/src/shortcuts.js b/src/shortcuts.js
new file mode 100644
index 0000000..7f565f8
--- /dev/null
+++ b/src/shortcuts.js
@@ -0,0 +1,21 @@
+const reg_size = /[,，\/\s]+\s*/;
+
+export default {
+
+  ['size'](value) {
+    var [w, h = w] = value.split(reg_size);
+    return `width: ${ w }; height: ${ h };`;
+  },
+
+  ['min-size'](value) {
+    var [w, h = w] = value.split(reg_size);
+    return `min-width: ${ w }; min-height: ${ h };`;
+  },
+
+  ['max-size'](value) {
+    var [w, h = w] = value.split(reg_size);
+    return `max-width: ${ w }; max-height: ${ h };`;
+  }
+
+}
+