From d75c0bd09250846f5ebf0c97d75b69e38609077a Mon Sep 17 00:00:00 2001
From: yuanchuan <yuanchuan23@gmail.com>
Date: Sun, 28 May 2017 21:58:43 +0800
Subject: [PATCH] compose cond arguments correctly

---
 css-doodle.js              | 7 +++++--
 css-doodle.min.js          | 2 +-
 docs/lib/css-doodle.min.js | 2 +-
 src/generator.js           | 5 ++++-
 4 files changed, 11 insertions(+), 5 deletions(-)

diff --git a/css-doodle.js b/css-doodle.js
index f508074..4ad0f80 100644
--- a/css-doodle.js
+++ b/css-doodle.js
@@ -153,7 +153,7 @@ function circle() {
 }
 
 function siogon(sides) {
-  return polygon(minmax(sides, 3, 24));
+  return polygon(minmax(sides, 3, 12));
 }
 
 function triangle() {
@@ -411,7 +411,10 @@ class Rules {
         case 'cond':
           var fn = cond[token.name.substr(1)];
           if (fn) {
-            var result = apply_args(fn, coords, token.arguments);
+            var args = token.arguments.map(arg => {
+              return this.compose_argument(arg, coords);
+            });
+            var result = apply_args(fn, coords, args);
             if (result) {
               this.compose(coords, token.styles);
             }
diff --git a/css-doodle.min.js b/css-doodle.min.js
index 927def0..2fe8524 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}`}function m(e,n){let t={};return function(...r){let u=e+r.join('-');if(t[u])return t[u];return t[u]=n.apply(null,r)}}function d(...e){let n=e.reduce((e,n)=>e.concat(n),[]);return n[Math.floor(Math.random()*n.length)]}function y(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 g(e){return function(...n){let t=_(n[0]);if(t){n=n.map(w);return x(e,t).apply(null,n)}return e.apply(null,n)}}function x(e,n){return function(...t){t=t.map(w);let r=e.apply(null,t);n&&(r=r.map(e=>e+n));return r}}function _(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 w(e){let n=_(e);return n?+(e.replace(n,'')):e}let b=Math.PI/180,v=function(e,n = 0,t){t=t||Math.PI/(e/2);var r=[];for(var u=0;u<e;++u){var o=n+t*u;r.push(`${Math.cos(o)*50+50}% ${Math.sin(o)*50+50}%`)}return`polygon(${r.join(',')})`};function P(){return'circle(50%)'}function z(e){return v(f(e,3,24))}function I(){return v(3,b*-90)}function k(){return z(4)}function j(){return v(5,b*54)}function L(){return v(6,b*30)}function T(){return v(5,b*54,b*144)}function H(){return'polygon(50% 5%, 80% 50%, 50% 95%, 20% 50%)'}function M(){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 )"}let S=m('hypocycloid',function(e = 3){e=f(e,3,6);var n=120,t=Math.PI/(n/2),r=50,u=r/e,o=[];for(var c=0;c<n;++c){var s=t*c+Math.PI,i=u*(1-e)*Math.cos(s)+u*Math.cos((1-e)*(s-Math.PI)),l=u*(1-e)*Math.sin(s)+u*Math.sin((1-e)*(s-Math.PI));o.push(i+50+'% '+(l+50+'%'))}return`polygon(${o.join(',')})`});function A(){return S(4)}let W=m('clover',function(e = 3){switch(e){case 4:e=2;break;case 5:e=5;break;case 3:e=3;default:{e>5?(e=5):e<3&&(e=3)}}var n=240,t=Math.PI/(n/2),r=[];for(var u=0;u<n;++u){var o=t*u,c=Math.cos(e*o)*Math.cos(o),s=Math.cos(e*o)*Math.sin(o);r.push(c*50+50+'% '+(s*50+50+'%'))}return`polygon(${r.join(',')})`});var C=Object.freeze({circle:P,siogon:z,triangle:I,rhombus:k,pentagon:j,hexgon:L,star:T,diamond:H,cross:M,hypocycloid:S,astroid:A,clover:W});function R(e,n,t){return e=>t}function q(e,n,t){return n=>e}function B(e,n,t){return e=>n}function E(){return function(...e){return d.apply(null,e)}}function O(){return E.apply(null,arguments)}function D(){return function(...e){return d(m('range',g(y)).apply(null,e))}}function F(e,n,t){return function(e,...n){if(e){e=e.trim();if(C[e]){return C[e].apply(null,n)}}}}var G=Object.freeze({index:R,row:q,col:B,any:E,pick:O,rand:D,shape:F});class J{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=G[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=G[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 o=n.selector.startsWith(':host');o&&(n.skip=!0);var c=n.styles.map(n=>this.compose_rule(n,e)),i=o?n.selector:this.compose_selector(e.count,n.selector);this.add_rule(i,c);break};case 'cond':var u=s[n.name.substr(1)];if(u){var r=l(u,e,n.arguments);r&&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 K(e,n){var t=new J(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 N={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:[]}}},Q={'(':')','[':']','{':'}'},U={white_space(e){return /[\s\n\t]/.test(e)},open_bracket(e){return Q.hasOwnProperty(e)},close_bracket_of(e){var n=Q[e];return e=>e==n},number(e){return!isNaN(e)}};function V(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 X(e,{col:n,line:t}){throw new Error(`(at line ${t}, column ${n}) ${e}`)}function Y(e){if(e.trim().length){return U.number(+e)?+e:e.trim()}else{return e}}function Z(e){var[n,t]=[e.curr(),e.curr()],r=U.close_bracket_of(t);e.next();while(!e.end()){if(r(t=e.curr())){n+=t;break}else U.open_bracket(t)?(n+=Z(e)):(n+=t);e.next()}return n}function $(e,n ={}){var t=N.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 ee(e){var n='',t;while(!e.end()){if((t=e.curr())==':')break;else /[a-zA-Z\-]/.test(t)?U.white_space(t)||(n+=t):X('Syntax error:Bad property name.',e.info());e.next()}return n}function ne(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 te(e){var n=[],t=[],r='',u;while(!e.end()){if(U.open_bracket(u=e.curr()))r+=Z(e);else if(/['"]/.test(u))r+=ne(e,u);else if(u=='@')t.length||(r=r.trimLeft()),r.length&&(t.push(N.text(r)),r=''),t.push(re(e));else if(/[,)]/.test(u)){r.length&&(t.length?(r=r.trimRight(),r.length&&t.push(N.text(r))):t.push(N.text(Y(r))));n.push(t.slice());[t,r]=[[],''];if(u==')')break}else r+=u;e.next()}return n}function re(e){var n=N.func(),t='',r;while(!e.end()){if((r=e.curr())==')')break;if(r=='('){e.next();n.name=t;n.arguments=te(e);break}else t+=r;e.next()}return n}function ue(e){var n=N.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=N.text();break}else t=='@'?(n.value.length&&r.push(n),n=N.text(),r.push(re(e))):(!U.white_space(t)||!U.white_space(e.curr(-1)))&&(t==':'&&X('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 oe(e){var n='',t;while(!e.end()){if((t=e.curr())=='{')break;else U.white_space(t)||(n+=t);e.next()}return n}function ce(e){var n={name:'',arguments:[]},t;while(!e.end()){if((t=e.curr())=='(')e.next(),n.arguments=te(e);else if(/[){]/.test(t))break;else U.white_space(t)||(n.name+=t);e.next()}return n}function se(e){var n=N.psudo(),t;while(!e.end()){if((t=e.curr())=='}')break;if(U.white_space(t)){e.next();continue}else n.selector?n.styles.push(ie(e)):(n.selector=oe(e));e.next()}return n}function ie(e){var n=N.rule(),t;while(!e.end()){if((t=e.curr())==';')break;else if(!n.property.length)n.property=ee(e);else{n.value=ue(e);break}e.next()}return n}function le(e){var n=N.cond(),t;while(!e.end()){if((t=e.curr())=='}')break;else if(!n.name.length)Object.assign(n,ce(e));else if(t==':'){var r=se(e);r.selector&&n.styles.push(r)}else if(t=='@')n.styles.push(le(e));else if(!U.white_space(t)){var u=ie(e);u.property&&n.styles.push(u)}e.next()}return n}function ae(e){let n=V(e),t=[];while(!n.end()){var r=n.curr();if(U.white_space(r)){n.next();continue}else if(r=='/'&&n.curr(1)=='*')t.push($(n));else if(r=='#'||r=='/'&&n.curr(1)=='/')t.push($(n,{inline:!0}));else if(r==':'){var u=se(n);u.selector&&t.push(u)}else if(r=='@'){var o=le(n);o.name.length&&t.push(o)}else if(!U.white_space(r)){var c=ie(n);c.property&&t.push(c)}n.next()}return t}function pe(e,n){return K(ae(e),n)}let fe=1,he=16;function me(e){let[n,t]=(e+'').replace(/\s+/g,'').replace(/[,，xX]+/,'x').split('x').map(Number),r={x:f(n||fe,1,he),y:f(t||n||fe,1,he)};return Object.assign({},r,{count:r.x*r.y})}let de="\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 ye extends HTMLElement{constructor(){super();this.doodle=this.attachShadow({mode:'open'})}connectedCallback(){setTimeout(()=>{if(!this.innerHTML.trim()){return!1}let e;try{e=pe(this.innerHTML,this.size=me(this.getAttribute('grid')))}catch(e){this.innerHTML='';throw new Error(e)};let{has_transition:n}=e.props;this.doodle.innerHTML=`<style>${de}</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=me(this.getAttribute('grid')));let n=pe(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',ye)}))
\ 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 h(e){return`-webkit-${e}${e}`}function m(e,n){let t={};return function(...r){let u=e+r.join('-');if(t[u])return t[u];return t[u]=n.apply(null,r)}}function d(...e){let n=e.reduce((e,n)=>e.concat(n),[]);return n[Math.floor(Math.random()*n.length)]}function y(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 g(e){return function(...n){let t=_(n[0]);if(t){n=n.map(w);return x(e,t).apply(null,n)}return e.apply(null,n)}}function x(e,n){return function(...t){t=t.map(w);let r=e.apply(null,t);n&&(r=r.map(e=>e+n));return r}}function _(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 w(e){let n=_(e);return n?+(e.replace(n,'')):e}let b=Math.PI/180,v=function(e,n = 0,t){t=t||Math.PI/(e/2);var r=[];for(var u=0;u<e;++u){var o=n+t*u;r.push(`${Math.cos(o)*50+50}% ${Math.sin(o)*50+50}%`)}return`polygon(${r.join(',')})`};function P(){return'circle(50%)'}function z(e){return v(f(e,3,12))}function I(){return v(3,b*-90)}function k(){return z(4)}function j(){return v(5,b*54)}function L(){return v(6,b*30)}function T(){return v(5,b*54,b*144)}function H(){return'polygon(50% 5%, 80% 50%, 50% 95%, 20% 50%)'}function M(){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 )"}let S=m('hypocycloid',function(e = 3){e=f(e,3,6);var n=120,t=Math.PI/(n/2),r=50,u=r/e,o=[];for(var c=0;c<n;++c){var s=t*c+Math.PI,i=u*(1-e)*Math.cos(s)+u*Math.cos((1-e)*(s-Math.PI)),l=u*(1-e)*Math.sin(s)+u*Math.sin((1-e)*(s-Math.PI));o.push(i+50+'% '+(l+50+'%'))}return`polygon(${o.join(',')})`});function A(){return S(4)}let W=m('clover',function(e = 3){switch(e){case 4:e=2;break;case 5:e=5;break;case 3:e=3;default:{e>5?(e=5):e<3&&(e=3)}}var n=240,t=Math.PI/(n/2),r=[];for(var u=0;u<n;++u){var o=t*u,c=Math.cos(e*o)*Math.cos(o),s=Math.cos(e*o)*Math.sin(o);r.push(c*50+50+'% '+(s*50+50+'%'))}return`polygon(${r.join(',')})`});var C=Object.freeze({circle:P,siogon:z,triangle:I,rhombus:k,pentagon:j,hexgon:L,star:T,diamond:H,cross:M,hypocycloid:S,astroid:A,clover:W});function R(e,n,t){return e=>t}function q(e,n,t){return n=>e}function B(e,n,t){return e=>n}function E(){return function(...e){return d.apply(null,e)}}function O(){return E.apply(null,arguments)}function D(){return function(...e){return d(m('range',g(y)).apply(null,e))}}function F(e,n,t){return function(e,...n){if(e){e=e.trim();if(C[e]){return C[e].apply(null,n)}}}}var G=Object.freeze({index:R,row:q,col:B,any:E,pick:O,rand:D,shape:F});class J{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=G[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=G[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 K(e,n){var t=new J(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 N={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:[]}}},Q={'(':')','[':']','{':'}'},U={white_space(e){return /[\s\n\t]/.test(e)},open_bracket(e){return Q.hasOwnProperty(e)},close_bracket_of(e){var n=Q[e];return e=>e==n},number(e){return!isNaN(e)}};function V(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 X(e,{col:n,line:t}){throw new Error(`(at line ${t}, column ${n}) ${e}`)}function Y(e){if(e.trim().length){return U.number(+e)?+e:e.trim()}else{return e}}function Z(e){var[n,t]=[e.curr(),e.curr()],r=U.close_bracket_of(t);e.next();while(!e.end()){if(r(t=e.curr())){n+=t;break}else U.open_bracket(t)?(n+=Z(e)):(n+=t);e.next()}return n}function $(e,n ={}){var t=N.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 ee(e){var n='',t;while(!e.end()){if((t=e.curr())==':')break;else /[a-zA-Z\-]/.test(t)?U.white_space(t)||(n+=t):X('Syntax error:Bad property name.',e.info());e.next()}return n}function ne(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 te(e){var n=[],t=[],r='',u;while(!e.end()){if(U.open_bracket(u=e.curr()))r+=Z(e);else if(/['"]/.test(u))r+=ne(e,u);else if(u=='@')t.length||(r=r.trimLeft()),r.length&&(t.push(N.text(r)),r=''),t.push(re(e));else if(/[,)]/.test(u)){r.length&&(t.length?(r=r.trimRight(),r.length&&t.push(N.text(r))):t.push(N.text(Y(r))));n.push(t.slice());[t,r]=[[],''];if(u==')')break}else r+=u;e.next()}return n}function re(e){var n=N.func(),t='',r;while(!e.end()){if((r=e.curr())==')')break;if(r=='('){e.next();n.name=t;n.arguments=te(e);break}else t+=r;e.next()}return n}function ue(e){var n=N.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=N.text();break}else t=='@'?(n.value.length&&r.push(n),n=N.text(),r.push(re(e))):(!U.white_space(t)||!U.white_space(e.curr(-1)))&&(t==':'&&X('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 oe(e){var n='',t;while(!e.end()){if((t=e.curr())=='{')break;else U.white_space(t)||(n+=t);e.next()}return n}function ce(e){var n={name:'',arguments:[]},t;while(!e.end()){if((t=e.curr())=='(')e.next(),n.arguments=te(e);else if(/[){]/.test(t))break;else U.white_space(t)||(n.name+=t);e.next()}return n}function se(e){var n=N.psudo(),t;while(!e.end()){if((t=e.curr())=='}')break;if(U.white_space(t)){e.next();continue}else n.selector?n.styles.push(ie(e)):(n.selector=oe(e));e.next()}return n}function ie(e){var n=N.rule(),t;while(!e.end()){if((t=e.curr())==';')break;else if(!n.property.length)n.property=ee(e);else{n.value=ue(e);break}e.next()}return n}function le(e){var n=N.cond(),t;while(!e.end()){if((t=e.curr())=='}')break;else if(!n.name.length)Object.assign(n,ce(e));else if(t==':'){var r=se(e);r.selector&&n.styles.push(r)}else if(t=='@')n.styles.push(le(e));else if(!U.white_space(t)){var u=ie(e);u.property&&n.styles.push(u)}e.next()}return n}function ae(e){let n=V(e),t=[];while(!n.end()){var r=n.curr();if(U.white_space(r)){n.next();continue}else if(r=='/'&&n.curr(1)=='*')t.push($(n));else if(r=='#'||r=='/'&&n.curr(1)=='/')t.push($(n,{inline:!0}));else if(r==':'){var u=se(n);u.selector&&t.push(u)}else if(r=='@'){var o=le(n);o.name.length&&t.push(o)}else if(!U.white_space(r)){var c=ie(n);c.property&&t.push(c)}n.next()}return t}function pe(e,n){return K(ae(e),n)}let fe=1,he=16;function me(e){let[n,t]=(e+'').replace(/\s+/g,'').replace(/[,，xX]+/,'x').split('x').map(Number),r={x:f(n||fe,1,he),y:f(t||n||fe,1,he)};return Object.assign({},r,{count:r.x*r.y})}let de="\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 ye extends HTMLElement{constructor(){super();this.doodle=this.attachShadow({mode:'open'})}connectedCallback(){setTimeout(()=>{if(!this.innerHTML.trim()){return!1}let e;try{e=pe(this.innerHTML,this.size=me(this.getAttribute('grid')))}catch(e){this.innerHTML='';throw new Error(e)};let{has_transition:n}=e.props;this.doodle.innerHTML=`<style>${de}</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=me(this.getAttribute('grid')));let n=pe(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',ye)}))
\ No newline at end of file
diff --git a/docs/lib/css-doodle.min.js b/docs/lib/css-doodle.min.js
index 927def0..2fe8524 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}`}function m(e,n){let t={};return function(...r){let u=e+r.join('-');if(t[u])return t[u];return t[u]=n.apply(null,r)}}function d(...e){let n=e.reduce((e,n)=>e.concat(n),[]);return n[Math.floor(Math.random()*n.length)]}function y(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 g(e){return function(...n){let t=_(n[0]);if(t){n=n.map(w);return x(e,t).apply(null,n)}return e.apply(null,n)}}function x(e,n){return function(...t){t=t.map(w);let r=e.apply(null,t);n&&(r=r.map(e=>e+n));return r}}function _(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 w(e){let n=_(e);return n?+(e.replace(n,'')):e}let b=Math.PI/180,v=function(e,n = 0,t){t=t||Math.PI/(e/2);var r=[];for(var u=0;u<e;++u){var o=n+t*u;r.push(`${Math.cos(o)*50+50}% ${Math.sin(o)*50+50}%`)}return`polygon(${r.join(',')})`};function P(){return'circle(50%)'}function z(e){return v(f(e,3,24))}function I(){return v(3,b*-90)}function k(){return z(4)}function j(){return v(5,b*54)}function L(){return v(6,b*30)}function T(){return v(5,b*54,b*144)}function H(){return'polygon(50% 5%, 80% 50%, 50% 95%, 20% 50%)'}function M(){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 )"}let S=m('hypocycloid',function(e = 3){e=f(e,3,6);var n=120,t=Math.PI/(n/2),r=50,u=r/e,o=[];for(var c=0;c<n;++c){var s=t*c+Math.PI,i=u*(1-e)*Math.cos(s)+u*Math.cos((1-e)*(s-Math.PI)),l=u*(1-e)*Math.sin(s)+u*Math.sin((1-e)*(s-Math.PI));o.push(i+50+'% '+(l+50+'%'))}return`polygon(${o.join(',')})`});function A(){return S(4)}let W=m('clover',function(e = 3){switch(e){case 4:e=2;break;case 5:e=5;break;case 3:e=3;default:{e>5?(e=5):e<3&&(e=3)}}var n=240,t=Math.PI/(n/2),r=[];for(var u=0;u<n;++u){var o=t*u,c=Math.cos(e*o)*Math.cos(o),s=Math.cos(e*o)*Math.sin(o);r.push(c*50+50+'% '+(s*50+50+'%'))}return`polygon(${r.join(',')})`});var C=Object.freeze({circle:P,siogon:z,triangle:I,rhombus:k,pentagon:j,hexgon:L,star:T,diamond:H,cross:M,hypocycloid:S,astroid:A,clover:W});function R(e,n,t){return e=>t}function q(e,n,t){return n=>e}function B(e,n,t){return e=>n}function E(){return function(...e){return d.apply(null,e)}}function O(){return E.apply(null,arguments)}function D(){return function(...e){return d(m('range',g(y)).apply(null,e))}}function F(e,n,t){return function(e,...n){if(e){e=e.trim();if(C[e]){return C[e].apply(null,n)}}}}var G=Object.freeze({index:R,row:q,col:B,any:E,pick:O,rand:D,shape:F});class J{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=G[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=G[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 o=n.selector.startsWith(':host');o&&(n.skip=!0);var c=n.styles.map(n=>this.compose_rule(n,e)),i=o?n.selector:this.compose_selector(e.count,n.selector);this.add_rule(i,c);break};case 'cond':var u=s[n.name.substr(1)];if(u){var r=l(u,e,n.arguments);r&&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 K(e,n){var t=new J(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 N={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:[]}}},Q={'(':')','[':']','{':'}'},U={white_space(e){return /[\s\n\t]/.test(e)},open_bracket(e){return Q.hasOwnProperty(e)},close_bracket_of(e){var n=Q[e];return e=>e==n},number(e){return!isNaN(e)}};function V(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 X(e,{col:n,line:t}){throw new Error(`(at line ${t}, column ${n}) ${e}`)}function Y(e){if(e.trim().length){return U.number(+e)?+e:e.trim()}else{return e}}function Z(e){var[n,t]=[e.curr(),e.curr()],r=U.close_bracket_of(t);e.next();while(!e.end()){if(r(t=e.curr())){n+=t;break}else U.open_bracket(t)?(n+=Z(e)):(n+=t);e.next()}return n}function $(e,n ={}){var t=N.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 ee(e){var n='',t;while(!e.end()){if((t=e.curr())==':')break;else /[a-zA-Z\-]/.test(t)?U.white_space(t)||(n+=t):X('Syntax error:Bad property name.',e.info());e.next()}return n}function ne(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 te(e){var n=[],t=[],r='',u;while(!e.end()){if(U.open_bracket(u=e.curr()))r+=Z(e);else if(/['"]/.test(u))r+=ne(e,u);else if(u=='@')t.length||(r=r.trimLeft()),r.length&&(t.push(N.text(r)),r=''),t.push(re(e));else if(/[,)]/.test(u)){r.length&&(t.length?(r=r.trimRight(),r.length&&t.push(N.text(r))):t.push(N.text(Y(r))));n.push(t.slice());[t,r]=[[],''];if(u==')')break}else r+=u;e.next()}return n}function re(e){var n=N.func(),t='',r;while(!e.end()){if((r=e.curr())==')')break;if(r=='('){e.next();n.name=t;n.arguments=te(e);break}else t+=r;e.next()}return n}function ue(e){var n=N.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=N.text();break}else t=='@'?(n.value.length&&r.push(n),n=N.text(),r.push(re(e))):(!U.white_space(t)||!U.white_space(e.curr(-1)))&&(t==':'&&X('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 oe(e){var n='',t;while(!e.end()){if((t=e.curr())=='{')break;else U.white_space(t)||(n+=t);e.next()}return n}function ce(e){var n={name:'',arguments:[]},t;while(!e.end()){if((t=e.curr())=='(')e.next(),n.arguments=te(e);else if(/[){]/.test(t))break;else U.white_space(t)||(n.name+=t);e.next()}return n}function se(e){var n=N.psudo(),t;while(!e.end()){if((t=e.curr())=='}')break;if(U.white_space(t)){e.next();continue}else n.selector?n.styles.push(ie(e)):(n.selector=oe(e));e.next()}return n}function ie(e){var n=N.rule(),t;while(!e.end()){if((t=e.curr())==';')break;else if(!n.property.length)n.property=ee(e);else{n.value=ue(e);break}e.next()}return n}function le(e){var n=N.cond(),t;while(!e.end()){if((t=e.curr())=='}')break;else if(!n.name.length)Object.assign(n,ce(e));else if(t==':'){var r=se(e);r.selector&&n.styles.push(r)}else if(t=='@')n.styles.push(le(e));else if(!U.white_space(t)){var u=ie(e);u.property&&n.styles.push(u)}e.next()}return n}function ae(e){let n=V(e),t=[];while(!n.end()){var r=n.curr();if(U.white_space(r)){n.next();continue}else if(r=='/'&&n.curr(1)=='*')t.push($(n));else if(r=='#'||r=='/'&&n.curr(1)=='/')t.push($(n,{inline:!0}));else if(r==':'){var u=se(n);u.selector&&t.push(u)}else if(r=='@'){var o=le(n);o.name.length&&t.push(o)}else if(!U.white_space(r)){var c=ie(n);c.property&&t.push(c)}n.next()}return t}function pe(e,n){return K(ae(e),n)}let fe=1,he=16;function me(e){let[n,t]=(e+'').replace(/\s+/g,'').replace(/[,，xX]+/,'x').split('x').map(Number),r={x:f(n||fe,1,he),y:f(t||n||fe,1,he)};return Object.assign({},r,{count:r.x*r.y})}let de="\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 ye extends HTMLElement{constructor(){super();this.doodle=this.attachShadow({mode:'open'})}connectedCallback(){setTimeout(()=>{if(!this.innerHTML.trim()){return!1}let e;try{e=pe(this.innerHTML,this.size=me(this.getAttribute('grid')))}catch(e){this.innerHTML='';throw new Error(e)};let{has_transition:n}=e.props;this.doodle.innerHTML=`<style>${de}</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=me(this.getAttribute('grid')));let n=pe(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',ye)}))
\ 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 h(e){return`-webkit-${e}${e}`}function m(e,n){let t={};return function(...r){let u=e+r.join('-');if(t[u])return t[u];return t[u]=n.apply(null,r)}}function d(...e){let n=e.reduce((e,n)=>e.concat(n),[]);return n[Math.floor(Math.random()*n.length)]}function y(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 g(e){return function(...n){let t=_(n[0]);if(t){n=n.map(w);return x(e,t).apply(null,n)}return e.apply(null,n)}}function x(e,n){return function(...t){t=t.map(w);let r=e.apply(null,t);n&&(r=r.map(e=>e+n));return r}}function _(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 w(e){let n=_(e);return n?+(e.replace(n,'')):e}let b=Math.PI/180,v=function(e,n = 0,t){t=t||Math.PI/(e/2);var r=[];for(var u=0;u<e;++u){var o=n+t*u;r.push(`${Math.cos(o)*50+50}% ${Math.sin(o)*50+50}%`)}return`polygon(${r.join(',')})`};function P(){return'circle(50%)'}function z(e){return v(f(e,3,12))}function I(){return v(3,b*-90)}function k(){return z(4)}function j(){return v(5,b*54)}function L(){return v(6,b*30)}function T(){return v(5,b*54,b*144)}function H(){return'polygon(50% 5%, 80% 50%, 50% 95%, 20% 50%)'}function M(){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 )"}let S=m('hypocycloid',function(e = 3){e=f(e,3,6);var n=120,t=Math.PI/(n/2),r=50,u=r/e,o=[];for(var c=0;c<n;++c){var s=t*c+Math.PI,i=u*(1-e)*Math.cos(s)+u*Math.cos((1-e)*(s-Math.PI)),l=u*(1-e)*Math.sin(s)+u*Math.sin((1-e)*(s-Math.PI));o.push(i+50+'% '+(l+50+'%'))}return`polygon(${o.join(',')})`});function A(){return S(4)}let W=m('clover',function(e = 3){switch(e){case 4:e=2;break;case 5:e=5;break;case 3:e=3;default:{e>5?(e=5):e<3&&(e=3)}}var n=240,t=Math.PI/(n/2),r=[];for(var u=0;u<n;++u){var o=t*u,c=Math.cos(e*o)*Math.cos(o),s=Math.cos(e*o)*Math.sin(o);r.push(c*50+50+'% '+(s*50+50+'%'))}return`polygon(${r.join(',')})`});var C=Object.freeze({circle:P,siogon:z,triangle:I,rhombus:k,pentagon:j,hexgon:L,star:T,diamond:H,cross:M,hypocycloid:S,astroid:A,clover:W});function R(e,n,t){return e=>t}function q(e,n,t){return n=>e}function B(e,n,t){return e=>n}function E(){return function(...e){return d.apply(null,e)}}function O(){return E.apply(null,arguments)}function D(){return function(...e){return d(m('range',g(y)).apply(null,e))}}function F(e,n,t){return function(e,...n){if(e){e=e.trim();if(C[e]){return C[e].apply(null,n)}}}}var G=Object.freeze({index:R,row:q,col:B,any:E,pick:O,rand:D,shape:F});class J{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=G[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=G[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 K(e,n){var t=new J(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 N={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:[]}}},Q={'(':')','[':']','{':'}'},U={white_space(e){return /[\s\n\t]/.test(e)},open_bracket(e){return Q.hasOwnProperty(e)},close_bracket_of(e){var n=Q[e];return e=>e==n},number(e){return!isNaN(e)}};function V(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 X(e,{col:n,line:t}){throw new Error(`(at line ${t}, column ${n}) ${e}`)}function Y(e){if(e.trim().length){return U.number(+e)?+e:e.trim()}else{return e}}function Z(e){var[n,t]=[e.curr(),e.curr()],r=U.close_bracket_of(t);e.next();while(!e.end()){if(r(t=e.curr())){n+=t;break}else U.open_bracket(t)?(n+=Z(e)):(n+=t);e.next()}return n}function $(e,n ={}){var t=N.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 ee(e){var n='',t;while(!e.end()){if((t=e.curr())==':')break;else /[a-zA-Z\-]/.test(t)?U.white_space(t)||(n+=t):X('Syntax error:Bad property name.',e.info());e.next()}return n}function ne(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 te(e){var n=[],t=[],r='',u;while(!e.end()){if(U.open_bracket(u=e.curr()))r+=Z(e);else if(/['"]/.test(u))r+=ne(e,u);else if(u=='@')t.length||(r=r.trimLeft()),r.length&&(t.push(N.text(r)),r=''),t.push(re(e));else if(/[,)]/.test(u)){r.length&&(t.length?(r=r.trimRight(),r.length&&t.push(N.text(r))):t.push(N.text(Y(r))));n.push(t.slice());[t,r]=[[],''];if(u==')')break}else r+=u;e.next()}return n}function re(e){var n=N.func(),t='',r;while(!e.end()){if((r=e.curr())==')')break;if(r=='('){e.next();n.name=t;n.arguments=te(e);break}else t+=r;e.next()}return n}function ue(e){var n=N.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=N.text();break}else t=='@'?(n.value.length&&r.push(n),n=N.text(),r.push(re(e))):(!U.white_space(t)||!U.white_space(e.curr(-1)))&&(t==':'&&X('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 oe(e){var n='',t;while(!e.end()){if((t=e.curr())=='{')break;else U.white_space(t)||(n+=t);e.next()}return n}function ce(e){var n={name:'',arguments:[]},t;while(!e.end()){if((t=e.curr())=='(')e.next(),n.arguments=te(e);else if(/[){]/.test(t))break;else U.white_space(t)||(n.name+=t);e.next()}return n}function se(e){var n=N.psudo(),t;while(!e.end()){if((t=e.curr())=='}')break;if(U.white_space(t)){e.next();continue}else n.selector?n.styles.push(ie(e)):(n.selector=oe(e));e.next()}return n}function ie(e){var n=N.rule(),t;while(!e.end()){if((t=e.curr())==';')break;else if(!n.property.length)n.property=ee(e);else{n.value=ue(e);break}e.next()}return n}function le(e){var n=N.cond(),t;while(!e.end()){if((t=e.curr())=='}')break;else if(!n.name.length)Object.assign(n,ce(e));else if(t==':'){var r=se(e);r.selector&&n.styles.push(r)}else if(t=='@')n.styles.push(le(e));else if(!U.white_space(t)){var u=ie(e);u.property&&n.styles.push(u)}e.next()}return n}function ae(e){let n=V(e),t=[];while(!n.end()){var r=n.curr();if(U.white_space(r)){n.next();continue}else if(r=='/'&&n.curr(1)=='*')t.push($(n));else if(r=='#'||r=='/'&&n.curr(1)=='/')t.push($(n,{inline:!0}));else if(r==':'){var u=se(n);u.selector&&t.push(u)}else if(r=='@'){var o=le(n);o.name.length&&t.push(o)}else if(!U.white_space(r)){var c=ie(n);c.property&&t.push(c)}n.next()}return t}function pe(e,n){return K(ae(e),n)}let fe=1,he=16;function me(e){let[n,t]=(e+'').replace(/\s+/g,'').replace(/[,，xX]+/,'x').split('x').map(Number),r={x:f(n||fe,1,he),y:f(t||n||fe,1,he)};return Object.assign({},r,{count:r.x*r.y})}let de="\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 ye extends HTMLElement{constructor(){super();this.doodle=this.attachShadow({mode:'open'})}connectedCallback(){setTimeout(()=>{if(!this.innerHTML.trim()){return!1}let e;try{e=pe(this.innerHTML,this.size=me(this.getAttribute('grid')))}catch(e){this.innerHTML='';throw new Error(e)};let{has_transition:n}=e.props;this.doodle.innerHTML=`<style>${de}</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=me(this.getAttribute('grid')));let n=pe(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',ye)}))
\ No newline at end of file
diff --git a/src/generator.js b/src/generator.js
index af36e71..f5b1c8e 100644
--- a/src/generator.js
+++ b/src/generator.js
@@ -115,7 +115,10 @@ class Rules {
         case 'cond':
           var fn = cond[token.name.substr(1)];
           if (fn) {
-            var result = utils.apply_args(fn, coords, token.arguments);
+            var args = token.arguments.map(arg => {
+              return this.compose_argument(arg, coords);
+            });
+            var result = utils.apply_args(fn, coords, args);
             if (result) {
               this.compose(coords, token.styles);
             }