-
Notifications
You must be signed in to change notification settings - Fork 6
/
object-styles-to-template-literal.html
2 lines (2 loc) · 71 KB
/
object-styles-to-template-literal.html
1
2
<!DOCTYPE html><html><head><meta charSet="utf-8"/><style>.📦dspl_flex{display:-webkit-box;display:-moz-box;display:-ms-flexbox;display:-webkit-flex;display:flex}.📦algn-itms_center{align-items:center;-webkit-box-align:center}.📦flx-drct_row{flex-direction:row;-webkit-box-orient:horizontal;-webkit-box-direction:normal}.📦h_48px{height:48px}.📦bg-clr_fff{background-color:#fff}.📦pr_3prcnt{padding-right:3%}.📦pl_4prcnt{padding-left:4%}.📦box-szg_border-box{box-sizing:border-box}.📦flx_1{flex:1}.📦fnt-fam_b77syt{font-family:"SF UI Text", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"}.📦mt_0px{margin-top:0px}.📦fnt-sze_14px{font-size:14px}.📦f-wght_500{font-weight:500}.📦ln-ht_40px{line-height:40px}.📦ltr-spc_-0-05px{letter-spacing:-0.05px}.📦btrr_3px{border-top-right-radius:3px}.📦bbrr_3px{border-bottom-right-radius:3px}.📦btlr_3px{border-top-left-radius:3px}.📦bblr_3px{border-bottom-left-radius:3px}.📦pt_0px{padding-top:0px}.📦pb_0px{padding-bottom:0px}.📦pr_20px{padding-right:20px}.📦pl_20px{padding-left:20px}.📦ml_0px{margin-left:0px}.📦mr_0px{margin-right:0px}.📦mb_0px{margin-bottom:0px}.📦h_40px{height:40px}.📦pst_relative{position:relative}.📦dspl_inline-flex{display:-webkit-inline-box;display:-moz-inline-box;display:-ms-inline-flexbox;display:-webkit-inline-flex;display:inline-flex}.📦flx-wrap_nowrap{flex-wrap:nowrap;-webkit-box-lines:nowrap}.📦pb_8px{padding-bottom:8px}.📦pl_8px{padding-left:8px}.📦pr_8px{padding-right:8px}.📦pt_8px{padding-top:8px}.📦txt-algn_center{text-align:center}.📦crsr_pointer{cursor:pointer}.📦w_16px{width:16px}.📦h_16px{height:16px}.📦ovflw-x_hidden{overflow-x:hidden}.📦ovflw-y_hidden{overflow-y:hidden}.📦h_500px{height:500px}.📦b-rgt_1px-solid-E4E7EB{border-right:1px solid #E4E7EB}.📦flx-drct_column{flex-direction:column;-webkit-box-orient:vertical;-webkit-box-direction:normal}.📦b-btm_1px-solid-E4E7EB{border-bottom:1px solid #E4E7EB}.📦pl_10px{padding-left:10px}.📦pr_10px{padding-right:10px}.📦z-idx_2{z-index:2}.📦flx-srnk_0{flex-shrink:0}.📦fnt-sze_16px{font-size:16px}.📦ln-ht_20px{line-height:20px}.📦color_234361{color:#234361}.📦fnt-sze_12px{font-size:12px}.📦ln-ht_28px{line-height:28px}.📦ltr-spc_0{letter-spacing:0}.📦pr_14px{padding-right:14px}.📦pl_14px{padding-left:14px}.📦mr_10px{margin-right:10px}.📦h_28px{height:28px}.📦ml_-3px{margin-left:-3px}.📦mr_8px{margin-right:8px}.📦w_12px{width:12px}.📦h_12px{height:12px}.📦pr_0px{padding-right:0px}.📦pl_0px{padding-left:0px}.📦w_28px{width:28px}.📦just-cnt_center{justify-content:center;-webkit-box-pack:center}
@-webkit-keyframes loading_ng405l{0%{transform:rotate(0);-webkit-transform:rotate(0);}100%{transform:rotate(360deg);-webkit-transform:rotate(360deg);}}@-moz-keyframes loading_ng405l{0%{transform:rotate(0);-webkit-transform:rotate(0);}100%{transform:rotate(360deg);-webkit-transform:rotate(360deg);}}@-o-keyframes loading_ng405l{0%{transform:rotate(0);-webkit-transform:rotate(0);}100%{transform:rotate(360deg);-webkit-transform:rotate(360deg);}}@keyframes loading_ng405l{0%{transform:rotate(0);-webkit-transform:rotate(0);}100%{transform:rotate(360deg);-webkit-transform:rotate(360deg);}}@-webkit-keyframes loading-circle_fv6wzy{0%{stroke-dashoffset:600;}100%{stroke-dashoffset:0;}}@-moz-keyframes loading-circle_fv6wzy{0%{stroke-dashoffset:600;}100%{stroke-dashoffset:0;}}@-o-keyframes loading-circle_fv6wzy{0%{stroke-dashoffset:600;}100%{stroke-dashoffset:0;}}@keyframes loading-circle_fv6wzy{0%{stroke-dashoffset:600;}100%{stroke-dashoffset:0;}}.css-11r1ktn,[data-css-11r1ktn]{animation:loading_ng405l 2s linear infinite;-webkit-animation:loading_ng405l 2s linear infinite;}@-webkit-keyframes openAnimation_158oy86{from{opacity:0;transform:translateY(-120%);-webkit-transform:translateY(-120%);}to{transform:translateY(0);-webkit-transform:translateY(0);}}@-moz-keyframes openAnimation_158oy86{from{opacity:0;transform:translateY(-120%);-webkit-transform:translateY(-120%);}to{transform:translateY(0);-webkit-transform:translateY(0);}}@-o-keyframes openAnimation_158oy86{from{opacity:0;transform:translateY(-120%);-webkit-transform:translateY(-120%);}to{transform:translateY(0);-webkit-transform:translateY(0);}}@keyframes openAnimation_158oy86{from{opacity:0;transform:translateY(-120%);-webkit-transform:translateY(-120%);}to{transform:translateY(0);-webkit-transform:translateY(0);}}@-webkit-keyframes closeAnimation_1olw4g9{from{transform:scale(1);opacity:1;-webkit-transform:scale(1);}to{transform:scale(0.9);opacity:0;-webkit-transform:scale(0.9);}}@-moz-keyframes closeAnimation_1olw4g9{from{transform:scale(1);opacity:1;-webkit-transform:scale(1);}to{transform:scale(0.9);opacity:0;-webkit-transform:scale(0.9);}}@-o-keyframes closeAnimation_1olw4g9{from{transform:scale(1);opacity:1;-webkit-transform:scale(1);}to{transform:scale(0.9);opacity:0;-webkit-transform:scale(0.9);}}@keyframes closeAnimation_1olw4g9{from{transform:scale(1);opacity:1;-webkit-transform:scale(1);}to{transform:scale(0.9);opacity:0;-webkit-transform:scale(0.9);}}.css-1yiw7zu,[data-css-1yiw7zu]{display:-webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex;flex-direction:column;align-items:center;height:0;transition:all 240ms cubic-bezier(0.0, 0.0, 0.2, 1);-webkit-box-orient:vertical;-webkit-box-direction:normal;-webkit-flex-direction:column;-webkit-box-align:center;-webkit-align-items:center;-webkit-transition:all 240ms cubic-bezier(0.0, 0.0, 0.2, 1);-moz-transition:all 240ms cubic-bezier(0.0, 0.0, 0.2, 1);}.css-1yiw7zu[data-state="entering"],[data-css-1yiw7zu][data-state="entering"], .css-1yiw7zu[data-state="entered"], [data-css-1yiw7zu][data-state="entered"]{animation:openAnimation_158oy86 240ms cubic-bezier(0.175, 0.885, 0.320, 1.175) both;-webkit-animation:openAnimation_158oy86 240ms cubic-bezier(0.175, 0.885, 0.320, 1.175) both;}.css-1yiw7zu[data-state="exiting"],[data-css-1yiw7zu][data-state="exiting"]{animation:closeAnimation_1olw4g9 120ms cubic-bezier(0.4, 0.0, 1, 1) both;-webkit-animation:closeAnimation_1olw4g9 120ms cubic-bezier(0.4, 0.0, 1, 1) both;}.css-1sugtjn,[data-css-1sugtjn]{max-width:560px;margin:0 auto;top:0;left:0;right:0;position:fixed;z-index:30;pointer-events:none;}.css-q4k7k7,[data-css-q4k7k7]{border:none;background-color:transparent;-webkit-appearance:none;-moz-appearance:none;-webkit-font-smoothing:antialiased;}.css-q4k7k7:focus,[data-css-q4k7k7]:focus{outline:none;}.css-q4k7k7::placeholder,[data-css-q4k7k7]::placeholder{color:rgba(67, 90, 111, 0.7);}.css-1ktdej1,[data-css-1ktdej1]{top:0;position:absolute;display:-webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex;align-items:center;justify-content:center;line-height:1;-webkit-box-align:center;-webkit-align-items:center;-webkit-box-pack:center;-webkit-justify-content:center;}@-webkit-keyframes openAnimation_u4xxlz{from{transform:translateY(100%);-webkit-transform:translateY(100%);}to{transform:translateY(0);-webkit-transform:translateY(0);}}@-moz-keyframes openAnimation_u4xxlz{from{transform:translateY(100%);-webkit-transform:translateY(100%);}to{transform:translateY(0);-webkit-transform:translateY(0);}}@-o-keyframes openAnimation_u4xxlz{from{transform:translateY(100%);-webkit-transform:translateY(100%);}to{transform:translateY(0);-webkit-transform:translateY(0);}}@keyframes openAnimation_u4xxlz{from{transform:translateY(100%);-webkit-transform:translateY(100%);}to{transform:translateY(0);-webkit-transform:translateY(0);}}@-webkit-keyframes fadeInAnimation_1ont4t{from{opacity:0;}to{opacity:1;}}@-moz-keyframes fadeInAnimation_1ont4t{from{opacity:0;}to{opacity:1;}}@-o-keyframes fadeInAnimation_1ont4t{from{opacity:0;}to{opacity:1;}}@keyframes fadeInAnimation_1ont4t{from{opacity:0;}to{opacity:1;}}@-webkit-keyframes fadeOutAnimation_1q9hkiq{from{opacity:1;}to{opacity:0;}}@-moz-keyframes fadeOutAnimation_1q9hkiq{from{opacity:1;}to{opacity:0;}}@-o-keyframes fadeOutAnimation_1q9hkiq{from{opacity:1;}to{opacity:0;}}@keyframes fadeOutAnimation_1q9hkiq{from{opacity:1;}to{opacity:0;}}@-webkit-keyframes openAnimation_1cql8cr{from{transform:scale(0.8);opacity:0;-webkit-transform:scale(0.8);}to{transform:scale(1);opacity:1;-webkit-transform:scale(1);}}@-moz-keyframes openAnimation_1cql8cr{from{transform:scale(0.8);opacity:0;-webkit-transform:scale(0.8);}to{transform:scale(1);opacity:1;-webkit-transform:scale(1);}}@-o-keyframes openAnimation_1cql8cr{from{transform:scale(0.8);opacity:0;-webkit-transform:scale(0.8);}to{transform:scale(1);opacity:1;-webkit-transform:scale(1);}}@keyframes openAnimation_1cql8cr{from{transform:scale(0.8);opacity:0;-webkit-transform:scale(0.8);}to{transform:scale(1);opacity:1;-webkit-transform:scale(1);}}@-webkit-keyframes closeAnimation_1y9xgi8{from{transform:scale(1);opacity:1;-webkit-transform:scale(1);}to{transform:scale(0.8);opacity:0;-webkit-transform:scale(0.8);}}@-moz-keyframes closeAnimation_1y9xgi8{from{transform:scale(1);opacity:1;-webkit-transform:scale(1);}to{transform:scale(0.8);opacity:0;-webkit-transform:scale(0.8);}}@-o-keyframes closeAnimation_1y9xgi8{from{transform:scale(1);opacity:1;-webkit-transform:scale(1);}to{transform:scale(0.8);opacity:0;-webkit-transform:scale(0.8);}}@keyframes closeAnimation_1y9xgi8{from{transform:scale(1);opacity:1;-webkit-transform:scale(1);}to{transform:scale(0.8);opacity:0;-webkit-transform:scale(0.8);}}.css-17kak1e,[data-css-17kak1e]{display:-webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex;flex:1;align-items:center;justify-content:center;position:relative;-webkit-flex:1;-webkit-box-align:center;-webkit-align-items:center;-webkit-box-pack:center;-webkit-justify-content:center;}.css-3grw6g,[data-css-3grw6g]{position:relative;display:-webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex;flex:1;cursor:pointer;margin-left:-1px;-webkit-flex:1;}.css-3grw6g:first-child .css-17kak1e,[data-css-3grw6g]:first-child .css-17kak1e{border-top-left-radius:3px;border-bottom-left-radius:3px;}.css-3grw6g:last-child .css-17kak1e,[data-css-3grw6g]:last-child .css-17kak1e{border-top-right-radius:3px;border-bottom-right-radius:3px;}.css-87b09r,[data-css-87b09r]{overflow:hidden;position:absolute;height:1px;width:1px;padding:0;margin:-1px;border:0;clip:rect(0 0 0 0);}@-webkit-keyframes rotate360InAnimation_e4x7vx{from{transform:translateX(100%) rotate(0deg);-webkit-transform:translateX(100%) rotate(0deg);}to{transform:translateX(-100%) rotate(-360deg);-webkit-transform:translateX(-100%) rotate(-360deg);}}@-moz-keyframes rotate360InAnimation_e4x7vx{from{transform:translateX(100%) rotate(0deg);-webkit-transform:translateX(100%) rotate(0deg);}to{transform:translateX(-100%) rotate(-360deg);-webkit-transform:translateX(-100%) rotate(-360deg);}}@-o-keyframes rotate360InAnimation_e4x7vx{from{transform:translateX(100%) rotate(0deg);-webkit-transform:translateX(100%) rotate(0deg);}to{transform:translateX(-100%) rotate(-360deg);-webkit-transform:translateX(-100%) rotate(-360deg);}}@keyframes rotate360InAnimation_e4x7vx{from{transform:translateX(100%) rotate(0deg);-webkit-transform:translateX(100%) rotate(0deg);}to{transform:translateX(-100%) rotate(-360deg);-webkit-transform:translateX(-100%) rotate(-360deg);}}@-webkit-keyframes rotate360OutAnimation_1swhwyo{from{transform:translateX(-100%) rotate(0deg);-webkit-transform:translateX(-100%) rotate(0deg);}to{transform:translateX(100%) rotate(360deg);-webkit-transform:translateX(100%) rotate(360deg);}}@-moz-keyframes rotate360OutAnimation_1swhwyo{from{transform:translateX(-100%) rotate(0deg);-webkit-transform:translateX(-100%) rotate(0deg);}to{transform:translateX(100%) rotate(360deg);-webkit-transform:translateX(100%) rotate(360deg);}}@-o-keyframes rotate360OutAnimation_1swhwyo{from{transform:translateX(-100%) rotate(0deg);-webkit-transform:translateX(-100%) rotate(0deg);}to{transform:translateX(100%) rotate(360deg);-webkit-transform:translateX(100%) rotate(360deg);}}@keyframes rotate360OutAnimation_1swhwyo{from{transform:translateX(-100%) rotate(0deg);-webkit-transform:translateX(-100%) rotate(0deg);}to{transform:translateX(100%) rotate(360deg);-webkit-transform:translateX(100%) rotate(360deg);}}@-webkit-keyframes leftRotate360InAnimation_1uxpfmf{from{transform:translateX(-100%) rotate(0deg);-webkit-transform:translateX(-100%) rotate(0deg);}to{transform:translateX(100%), rotate(360deg);-webkit-transform:translateX(100%), rotate(360deg);}}@-moz-keyframes leftRotate360InAnimation_1uxpfmf{from{transform:translateX(-100%) rotate(0deg);-webkit-transform:translateX(-100%) rotate(0deg);}to{transform:translateX(100%), rotate(360deg);-webkit-transform:translateX(100%), rotate(360deg);}}@-o-keyframes leftRotate360InAnimation_1uxpfmf{from{transform:translateX(-100%) rotate(0deg);-webkit-transform:translateX(-100%) rotate(0deg);}to{transform:translateX(100%), rotate(360deg);-webkit-transform:translateX(100%), rotate(360deg);}}@keyframes leftRotate360InAnimation_1uxpfmf{from{transform:translateX(-100%) rotate(0deg);-webkit-transform:translateX(-100%) rotate(0deg);}to{transform:translateX(100%), rotate(360deg);-webkit-transform:translateX(100%), rotate(360deg);}}@-webkit-keyframes leftRotate360OutAnimation_znl0n0{from{transform:translateX(100%) rotate(0deg);-webkit-transform:translateX(100%) rotate(0deg);}to{transform:translateX(-100%), rotate(360deg);-webkit-transform:translateX(-100%), rotate(360deg);}}@-moz-keyframes leftRotate360OutAnimation_znl0n0{from{transform:translateX(100%) rotate(0deg);-webkit-transform:translateX(100%) rotate(0deg);}to{transform:translateX(-100%), rotate(360deg);-webkit-transform:translateX(-100%), rotate(360deg);}}@-o-keyframes leftRotate360OutAnimation_znl0n0{from{transform:translateX(100%) rotate(0deg);-webkit-transform:translateX(100%) rotate(0deg);}to{transform:translateX(-100%), rotate(360deg);-webkit-transform:translateX(-100%), rotate(360deg);}}@keyframes leftRotate360OutAnimation_znl0n0{from{transform:translateX(100%) rotate(0deg);-webkit-transform:translateX(100%) rotate(0deg);}to{transform:translateX(-100%), rotate(360deg);-webkit-transform:translateX(-100%), rotate(360deg);}}@-webkit-keyframes topRotate360InAnimation_1iarriy{from{transform:translateY(-200%) rotate(0deg);-webkit-transform:translateY(-200%) rotate(0deg);}to{transform:translateY(0%), rotate(360deg);-webkit-transform:translateY(0%), rotate(360deg);}}@-moz-keyframes topRotate360InAnimation_1iarriy{from{transform:translateY(-200%) rotate(0deg);-webkit-transform:translateY(-200%) rotate(0deg);}to{transform:translateY(0%), rotate(360deg);-webkit-transform:translateY(0%), rotate(360deg);}}@-o-keyframes topRotate360InAnimation_1iarriy{from{transform:translateY(-200%) rotate(0deg);-webkit-transform:translateY(-200%) rotate(0deg);}to{transform:translateY(0%), rotate(360deg);-webkit-transform:translateY(0%), rotate(360deg);}}@keyframes topRotate360InAnimation_1iarriy{from{transform:translateY(-200%) rotate(0deg);-webkit-transform:translateY(-200%) rotate(0deg);}to{transform:translateY(0%), rotate(360deg);-webkit-transform:translateY(0%), rotate(360deg);}}@-webkit-keyframes topRotate360OutAnimation_w5ju0m{from{transform:translateY(0%) rotate(0deg);-webkit-transform:translateY(0%) rotate(0deg);}to{transform:translateY(-200%), rotate(360deg);-webkit-transform:translateY(-200%), rotate(360deg);}}@-moz-keyframes topRotate360OutAnimation_w5ju0m{from{transform:translateY(0%) rotate(0deg);-webkit-transform:translateY(0%) rotate(0deg);}to{transform:translateY(-200%), rotate(360deg);-webkit-transform:translateY(-200%), rotate(360deg);}}@-o-keyframes topRotate360OutAnimation_w5ju0m{from{transform:translateY(0%) rotate(0deg);-webkit-transform:translateY(0%) rotate(0deg);}to{transform:translateY(-200%), rotate(360deg);-webkit-transform:translateY(-200%), rotate(360deg);}}@keyframes topRotate360OutAnimation_w5ju0m{from{transform:translateY(0%) rotate(0deg);-webkit-transform:translateY(0%) rotate(0deg);}to{transform:translateY(-200%), rotate(360deg);-webkit-transform:translateY(-200%), rotate(360deg);}}@-webkit-keyframes bottomRotate360InAnimation_1k0qqcf{from{transform:translateY(200%) rotate(0deg);-webkit-transform:translateY(200%) rotate(0deg);}to{transform:translateY(0%), rotate(360deg);-webkit-transform:translateY(0%), rotate(360deg);}}@-moz-keyframes bottomRotate360InAnimation_1k0qqcf{from{transform:translateY(200%) rotate(0deg);-webkit-transform:translateY(200%) rotate(0deg);}to{transform:translateY(0%), rotate(360deg);-webkit-transform:translateY(0%), rotate(360deg);}}@-o-keyframes bottomRotate360InAnimation_1k0qqcf{from{transform:translateY(200%) rotate(0deg);-webkit-transform:translateY(200%) rotate(0deg);}to{transform:translateY(0%), rotate(360deg);-webkit-transform:translateY(0%), rotate(360deg);}}@keyframes bottomRotate360InAnimation_1k0qqcf{from{transform:translateY(200%) rotate(0deg);-webkit-transform:translateY(200%) rotate(0deg);}to{transform:translateY(0%), rotate(360deg);-webkit-transform:translateY(0%), rotate(360deg);}}@-webkit-keyframes bottomRotate360OutAnimation_1m9tq8h{from{transform:translateY(0%) rotate(0deg);-webkit-transform:translateY(0%) rotate(0deg);}to{transform:translateY(200%), rotate(360deg);-webkit-transform:translateY(200%), rotate(360deg);}}@-moz-keyframes bottomRotate360OutAnimation_1m9tq8h{from{transform:translateY(0%) rotate(0deg);-webkit-transform:translateY(0%) rotate(0deg);}to{transform:translateY(200%), rotate(360deg);-webkit-transform:translateY(200%), rotate(360deg);}}@-o-keyframes bottomRotate360OutAnimation_1m9tq8h{from{transform:translateY(0%) rotate(0deg);-webkit-transform:translateY(0%) rotate(0deg);}to{transform:translateY(200%), rotate(360deg);-webkit-transform:translateY(200%), rotate(360deg);}}@keyframes bottomRotate360OutAnimation_1m9tq8h{from{transform:translateY(0%) rotate(0deg);-webkit-transform:translateY(0%) rotate(0deg);}to{transform:translateY(200%), rotate(360deg);-webkit-transform:translateY(200%), rotate(360deg);}}@-webkit-keyframes anchoredLeftSlideInAnimation_1hg44x7{from{transform:translateX(-100%);-webkit-transform:translateX(-100%);}to{transform:translateX(0);-webkit-transform:translateX(0);}}@-moz-keyframes anchoredLeftSlideInAnimation_1hg44x7{from{transform:translateX(-100%);-webkit-transform:translateX(-100%);}to{transform:translateX(0);-webkit-transform:translateX(0);}}@-o-keyframes anchoredLeftSlideInAnimation_1hg44x7{from{transform:translateX(-100%);-webkit-transform:translateX(-100%);}to{transform:translateX(0);-webkit-transform:translateX(0);}}@keyframes anchoredLeftSlideInAnimation_1hg44x7{from{transform:translateX(-100%);-webkit-transform:translateX(-100%);}to{transform:translateX(0);-webkit-transform:translateX(0);}}@-webkit-keyframes anchoredLeftSlideOutAnimation_rnri27{from{transform:translateX(0);-webkit-transform:translateX(0);}to{transform:translateX(-100%);-webkit-transform:translateX(-100%);}}@-moz-keyframes anchoredLeftSlideOutAnimation_rnri27{from{transform:translateX(0);-webkit-transform:translateX(0);}to{transform:translateX(-100%);-webkit-transform:translateX(-100%);}}@-o-keyframes anchoredLeftSlideOutAnimation_rnri27{from{transform:translateX(0);-webkit-transform:translateX(0);}to{transform:translateX(-100%);-webkit-transform:translateX(-100%);}}@keyframes anchoredLeftSlideOutAnimation_rnri27{from{transform:translateX(0);-webkit-transform:translateX(0);}to{transform:translateX(-100%);-webkit-transform:translateX(-100%);}}@-webkit-keyframes anchoredRightSlideInAnimation_1y6fmrc{from{transform:translateX(100%);-webkit-transform:translateX(100%);}to{transform:translateX(0);-webkit-transform:translateX(0);}}@-moz-keyframes anchoredRightSlideInAnimation_1y6fmrc{from{transform:translateX(100%);-webkit-transform:translateX(100%);}to{transform:translateX(0);-webkit-transform:translateX(0);}}@-o-keyframes anchoredRightSlideInAnimation_1y6fmrc{from{transform:translateX(100%);-webkit-transform:translateX(100%);}to{transform:translateX(0);-webkit-transform:translateX(0);}}@keyframes anchoredRightSlideInAnimation_1y6fmrc{from{transform:translateX(100%);-webkit-transform:translateX(100%);}to{transform:translateX(0);-webkit-transform:translateX(0);}}@-webkit-keyframes anchoredRightSlideOutAnimation_8h6vp3{from{transform:translateX(0);-webkit-transform:translateX(0);}to{transform:translateX(100%);-webkit-transform:translateX(100%);}}@-moz-keyframes anchoredRightSlideOutAnimation_8h6vp3{from{transform:translateX(0);-webkit-transform:translateX(0);}to{transform:translateX(100%);-webkit-transform:translateX(100%);}}@-o-keyframes anchoredRightSlideOutAnimation_8h6vp3{from{transform:translateX(0);-webkit-transform:translateX(0);}to{transform:translateX(100%);-webkit-transform:translateX(100%);}}@keyframes anchoredRightSlideOutAnimation_8h6vp3{from{transform:translateX(0);-webkit-transform:translateX(0);}to{transform:translateX(100%);-webkit-transform:translateX(100%);}}@-webkit-keyframes anchoredTopSlideInAnimation_8z9rxa{from{transform:translateY(-100%);-webkit-transform:translateY(-100%);}to{transform:translateY(0);-webkit-transform:translateY(0);}}@-moz-keyframes anchoredTopSlideInAnimation_8z9rxa{from{transform:translateY(-100%);-webkit-transform:translateY(-100%);}to{transform:translateY(0);-webkit-transform:translateY(0);}}@-o-keyframes anchoredTopSlideInAnimation_8z9rxa{from{transform:translateY(-100%);-webkit-transform:translateY(-100%);}to{transform:translateY(0);-webkit-transform:translateY(0);}}@keyframes anchoredTopSlideInAnimation_8z9rxa{from{transform:translateY(-100%);-webkit-transform:translateY(-100%);}to{transform:translateY(0);-webkit-transform:translateY(0);}}@-webkit-keyframes anchoredTopSlideOutAnimation_ns0rt0{from{transform:translateY(0);-webkit-transform:translateY(0);}to{transform:translateY(-100%);-webkit-transform:translateY(-100%);}}@-moz-keyframes anchoredTopSlideOutAnimation_ns0rt0{from{transform:translateY(0);-webkit-transform:translateY(0);}to{transform:translateY(-100%);-webkit-transform:translateY(-100%);}}@-o-keyframes anchoredTopSlideOutAnimation_ns0rt0{from{transform:translateY(0);-webkit-transform:translateY(0);}to{transform:translateY(-100%);-webkit-transform:translateY(-100%);}}@keyframes anchoredTopSlideOutAnimation_ns0rt0{from{transform:translateY(0);-webkit-transform:translateY(0);}to{transform:translateY(-100%);-webkit-transform:translateY(-100%);}}@-webkit-keyframes anchoredBottomSlideInAnimation_1axypox{from{transform:translateY(100%);-webkit-transform:translateY(100%);}to{transform:translateY(0);-webkit-transform:translateY(0);}}@-moz-keyframes anchoredBottomSlideInAnimation_1axypox{from{transform:translateY(100%);-webkit-transform:translateY(100%);}to{transform:translateY(0);-webkit-transform:translateY(0);}}@-o-keyframes anchoredBottomSlideInAnimation_1axypox{from{transform:translateY(100%);-webkit-transform:translateY(100%);}to{transform:translateY(0);-webkit-transform:translateY(0);}}@keyframes anchoredBottomSlideInAnimation_1axypox{from{transform:translateY(100%);-webkit-transform:translateY(100%);}to{transform:translateY(0);-webkit-transform:translateY(0);}}@-webkit-keyframes anchoredBottomSlideOutAnimation_1fdetvy{from{transform:translateY(0);-webkit-transform:translateY(0);}to{transform:translateY(100%);-webkit-transform:translateY(100%);}}@-moz-keyframes anchoredBottomSlideOutAnimation_1fdetvy{from{transform:translateY(0);-webkit-transform:translateY(0);}to{transform:translateY(100%);-webkit-transform:translateY(100%);}}@-o-keyframes anchoredBottomSlideOutAnimation_1fdetvy{from{transform:translateY(0);-webkit-transform:translateY(0);}to{transform:translateY(100%);-webkit-transform:translateY(100%);}}@keyframes anchoredBottomSlideOutAnimation_1fdetvy{from{transform:translateY(0);-webkit-transform:translateY(0);}to{transform:translateY(100%);-webkit-transform:translateY(100%);}}.css-13qcn8a,[data-css-13qcn8a]{background-color:#fff;border-radius:9999px;}.css-17bhmw6,[data-css-17bhmw6]{transition:all 500ms cubic-bezier(0.175, 0.885, 0.320, 1.175);opacity:0;display:-webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex;position:absolute;align-items:center;justify-content:center;padding-left:4px;-webkit-transition:all 500ms cubic-bezier(0.175, 0.885, 0.320, 1.175);-moz-transition:all 500ms cubic-bezier(0.175, 0.885, 0.320, 1.175);-webkit-box-align:center;-webkit-align-items:center;-webkit-box-pack:center;-webkit-justify-content:center;}.css-17bhmw6[data-checked="true"],[data-css-17bhmw6][data-checked="true"]{opacity:1;transform:scale(1);-webkit-transform:scale(1);}.css-17bhmw6> svg,[data-css-17bhmw6]> svg{transition:all 500ms cubic-bezier(0.175, 0.885, 0.320, 1.175);transform:scale(0);-webkit-transition:all 500ms cubic-bezier(0.175, 0.885, 0.320, 1.175);-moz-transition:all 500ms cubic-bezier(0.175, 0.885, 0.320, 1.175);-webkit-transform:scale(0);}.css-17bhmw6[data-checked="true"] > svg,[data-css-17bhmw6][data-checked="true"] > svg{transform:scale(1);-webkit-transform:scale(1);}.css-1rprxtl,[data-css-1rprxtl]{transition:-webkit-transform 200ms ease-in-out,transform 200ms ease-in-out;transform:translateX(0%);-webkit-transition:-webkit-transform 200ms ease-in-out,transform 200ms ease-in-out;-moz-transition:transform 200ms ease-in-out;-webkit-transform:translateX(0%);}.css-1rprxtl[data-checked="true"],[data-css-1rprxtl][data-checked="true"]{transform:translateX(50%);-webkit-transform:translateX(50%);}.css-1fz368,[data-css-1fz368]{box-shadow:0 2px 2px 0 rgba(0,0,0,.1), 0 1px 0 0 rgba(0,0,0,.1);}.css-1ii3p2c,[data-css-1ii3p2c]{-webkit-font-smoothing:antialiased;-webkit-appearance:none;-moz-appearance:none;vertical-align:middle;text-decoration:none;border:none;outline:none;cursor:pointer;color:#1070ca;background-color:transparent;}.css-1ii3p2c::-moz-focus-inner ,[data-css-1ii3p2c]::-moz-focus-inner {border:0;}.css-1ii3p2c[disabled],[data-css-1ii3p2c][disabled],.css-1ii3p2c [data-disabled],[data-css-1ii3p2c] [data-disabled]{cursor:not-allowed;opacity:0.8;background-image:none;background-color:rgba(67, 90, 111, 0.06);box-shadow:none;color:rgba(67, 90, 111, 0.7);pointer-events:none;}.css-1ii3p2c:not([disabled]):not([data-disabled]):hover,[data-css-1ii3p2c]:not([disabled]):not([data-disabled]):hover{background-color:rgba(67, 90, 111, 0.06);}.css-1ii3p2c:not([disabled]):not([data-disabled]):focus,[data-css-1ii3p2c]:not([disabled]):not([data-disabled]):focus{z-index:2;box-shadow:0 0 0 3px rgba(16, 112, 202, 0.3);}.css-1ii3p2c:not([disabled]):not([data-disabled]):active,[data-css-1ii3p2c]:not([disabled]):not([data-disabled]):active, .css-1ii3p2c:not([disabled]):not([data-disabled])[aria-expanded="true"], [data-css-1ii3p2c]:not([disabled]):not([data-disabled])[aria-expanded="true"], .css-1ii3p2c:not([disabled]):not([data-disabled])[data-active], [data-css-1ii3p2c]:not([disabled]):not([data-disabled])[data-active]{background-image:none;background-color:rgba(16, 112, 202, 0.09);}.css-69cngj,[data-css-69cngj]{-webkit-font-smoothing:antialiased;-webkit-appearance:none;-moz-appearance:none;vertical-align:middle;text-decoration:none;border:none;outline:none;cursor:pointer;color:#425A70;background-color:white;background-image:-webkit-linear-gradient(to bottom, #FFFFFF, #F4F5F7); background-image: -moz-linear-gradient(to bottom, #FFFFFF, #F4F5F7); background-image: linear-gradient(to bottom, #FFFFFF, #F4F5F7);box-shadow:inset 0 0 0 1px rgba(67, 90, 111, 0.14), inset 0 -1px 1px 0 rgba(67, 90, 111, 0.06);}.css-69cngj::-moz-focus-inner ,[data-css-69cngj]::-moz-focus-inner {border:0;}.css-69cngj[disabled],[data-css-69cngj][disabled],.css-69cngj [data-disabled],[data-css-69cngj] [data-disabled]{cursor:not-allowed;opacity:0.8;background-image:none;background-color:rgba(67, 90, 111, 0.06);box-shadow:none;color:rgba(67, 90, 111, 0.7);pointer-events:none;}.css-69cngj:not([disabled]):not([data-disabled]):hover,[data-css-69cngj]:not([disabled]):not([data-disabled]):hover{background-image:-webkit-linear-gradient(to bottom, #FAFBFB, #EAECEE); background-image: -moz-linear-gradient(to bottom, #FAFBFB, #EAECEE); background-image: linear-gradient(to bottom, #FAFBFB, #EAECEE);}.css-69cngj:not([disabled]):not([data-disabled]):focus,[data-css-69cngj]:not([disabled]):not([data-disabled]):focus{z-index:2;box-shadow:0 0 0 3px rgba(16, 112, 202, 0.14), inset 0 0 0 1px rgba(67, 90, 111, 0.3), inset 0 -1px 1px 0 rgba(67, 90, 111, 0.14);}.css-69cngj:not([disabled]):not([data-disabled]):active,[data-css-69cngj]:not([disabled]):not([data-disabled]):active, .css-69cngj:not([disabled]):not([data-disabled])[aria-expanded="true"], [data-css-69cngj]:not([disabled]):not([data-disabled])[aria-expanded="true"], .css-69cngj:not([disabled]):not([data-disabled])[data-active], [data-css-69cngj]:not([disabled]):not([data-disabled])[data-active]{background-image:none;background-color:rgba(16, 112, 202, 0.09);box-shadow:inset 0 0 0 1px rgba(67, 90, 111, 0.14), inset 0 1px 1px 0 rgba(67, 90, 111, 0.06);}.css-69cngj:not([disabled]):not([data-disabled]):focus:active,[data-css-69cngj]:not([disabled]):not([data-disabled]):focus:active, .css-69cngj:not([disabled]):not([data-disabled])[aria-expanded="true"]:focus, [data-css-69cngj]:not([disabled]):not([data-disabled])[aria-expanded="true"]:focus, .css-69cngj:not([disabled]):not([data-disabled])[data-active]:focus, [data-css-69cngj]:not([disabled]):not([data-disabled])[data-active]:focus{box-shadow:0 0 0 3px rgba(16, 112, 202, 0.14), inset 0 0 0 1px rgba(67, 90, 111, 0.3), inset 0 1px 1px 0 rgba(67, 90, 111, 0.06);}.css-graydb,[data-css-graydb]{border:1px solid #E4E7EB;}.css-5pze3j,[data-css-5pze3j]{-webkit-font-smoothing:antialiased;-webkit-appearance:none;-moz-appearance:none;vertical-align:middle;text-decoration:none;border:none;outline:none;cursor:pointer;color:#bf0e08;background-color:white;background-image:-webkit-linear-gradient(to bottom, #FFFFFF, #F4F5F7); background-image: -moz-linear-gradient(to bottom, #FFFFFF, #F4F5F7); background-image: linear-gradient(to bottom, #FFFFFF, #F4F5F7);box-shadow:inset 0 0 0 1px rgba(67, 90, 111, 0.14), inset 0 -1px 1px 0 rgba(67, 90, 111, 0.06);}.css-5pze3j::-moz-focus-inner ,[data-css-5pze3j]::-moz-focus-inner {border:0;}.css-5pze3j[disabled],[data-css-5pze3j][disabled],.css-5pze3j [data-disabled],[data-css-5pze3j] [data-disabled]{cursor:not-allowed;opacity:0.8;background-image:none;background-color:rgba(67, 90, 111, 0.06);box-shadow:none;color:rgba(67, 90, 111, 0.7);pointer-events:none;}.css-5pze3j:not([disabled]):not([data-disabled]):hover,[data-css-5pze3j]:not([disabled]):not([data-disabled]):hover{background-image:-webkit-linear-gradient(to bottom, #FAFBFB, #EAECEE); background-image: -moz-linear-gradient(to bottom, #FAFBFB, #EAECEE); background-image: linear-gradient(to bottom, #FAFBFB, #EAECEE);}.css-5pze3j:not([disabled]):not([data-disabled]):focus,[data-css-5pze3j]:not([disabled]):not([data-disabled]):focus{z-index:2;box-shadow:0 0 0 3px rgba(16, 112, 202, 0.14), inset 0 0 0 1px rgba(67, 90, 111, 0.3), inset 0 -1px 1px 0 rgba(67, 90, 111, 0.14);}.css-5pze3j:not([disabled]):not([data-disabled]):active,[data-css-5pze3j]:not([disabled]):not([data-disabled]):active, .css-5pze3j:not([disabled]):not([data-disabled])[aria-expanded="true"], [data-css-5pze3j]:not([disabled]):not([data-disabled])[aria-expanded="true"], .css-5pze3j:not([disabled]):not([data-disabled])[data-active], [data-css-5pze3j]:not([disabled]):not([data-disabled])[data-active]{background-image:none;background-color:rgba(16, 112, 202, 0.09);box-shadow:inset 0 0 0 1px rgba(67, 90, 111, 0.14), inset 0 1px 1px 0 rgba(67, 90, 111, 0.06);}.css-5pze3j:not([disabled]):not([data-disabled]):focus:active,[data-css-5pze3j]:not([disabled]):not([data-disabled]):focus:active, .css-5pze3j:not([disabled]):not([data-disabled])[aria-expanded="true"]:focus, [data-css-5pze3j]:not([disabled]):not([data-disabled])[aria-expanded="true"]:focus, .css-5pze3j:not([disabled]):not([data-disabled])[data-active]:focus, [data-css-5pze3j]:not([disabled]):not([data-disabled])[data-active]:focus{box-shadow:0 0 0 3px rgba(16, 112, 202, 0.14), inset 0 0 0 1px rgba(67, 90, 111, 0.3), inset 0 1px 1px 0 rgba(67, 90, 111, 0.06);}.css-nwvixr,[data-css-nwvixr]{-webkit-font-smoothing:antialiased;-webkit-appearance:none;-moz-appearance:none;vertical-align:middle;text-decoration:none;border:none;outline:none;cursor:pointer;color:white;background-color:white;background-image:-webkit-linear-gradient(to bottom, #0788DE, #116AB8); background-image: -moz-linear-gradient(to bottom, #0788DE, #116AB8); background-image: linear-gradient(to bottom, #0788DE, #116AB8);box-shadow:inset 0 0 0 1px rgba(67, 90, 111, 0.3), inset 0 -1px 1px 0 rgba(67, 90, 111, 0.06);}.css-nwvixr::-moz-focus-inner ,[data-css-nwvixr]::-moz-focus-inner {border:0;}.css-nwvixr[disabled],[data-css-nwvixr][disabled],.css-nwvixr [data-disabled],[data-css-nwvixr] [data-disabled]{cursor:not-allowed;opacity:0.8;background-image:none;background-color:rgba(67, 90, 111, 0.06);box-shadow:none;color:rgba(67, 90, 111, 0.7);pointer-events:none;}.css-nwvixr:not([disabled]):not([data-disabled]):hover,[data-css-nwvixr]:not([disabled]):not([data-disabled]):hover{background-image:-webkit-linear-gradient(to bottom, #0679c5, #0f5da1); background-image: -moz-linear-gradient(to bottom, #0679c5, #0f5da1); background-image: linear-gradient(to bottom, #0679c5, #0f5da1);}.css-nwvixr:not([disabled]):not([data-disabled]):focus,[data-css-nwvixr]:not([disabled]):not([data-disabled]):focus{z-index:2;box-shadow:0 0 0 3px rgba(7, 136, 222, 0.4), inset 0 0 0 1px rgba(67, 90, 111, 0.14), inset 0 -1px 1px 0 rgba(67, 90, 111, 0.3);}.css-nwvixr:not([disabled]):not([data-disabled]):active,[data-css-nwvixr]:not([disabled]):not([data-disabled]):active, .css-nwvixr:not([disabled]):not([data-disabled])[aria-expanded="true"], [data-css-nwvixr]:not([disabled]):not([data-disabled])[aria-expanded="true"], .css-nwvixr:not([disabled]):not([data-disabled])[data-active], [data-css-nwvixr]:not([disabled]):not([data-disabled])[data-active]{background-image:-webkit-linear-gradient(to bottom, #0f5da1, #0f5da1); background-image: -moz-linear-gradient(to bottom, #0f5da1, #0f5da1); background-image: linear-gradient(to bottom, #0f5da1, #0f5da1);box-shadow:inset 0 0 0 1px rgba(67, 90, 111, 0.14), inset 0 1px 1px 0 rgba(67, 90, 111, 0.06);}.css-nwvixr:not([disabled]):not([data-disabled]):focus:active,[data-css-nwvixr]:not([disabled]):not([data-disabled]):focus:active, .css-nwvixr:not([disabled]):not([data-disabled])[aria-expanded="true"]:focus, [data-css-nwvixr]:not([disabled]):not([data-disabled])[aria-expanded="true"]:focus, .css-nwvixr:not([disabled]):not([data-disabled])[data-active]:focus, [data-css-nwvixr]:not([disabled]):not([data-disabled])[data-active]:focus{box-shadow:0 0 0 3px rgba(7, 136, 222, 0.4), inset 0 0 0 1px rgba(67, 90, 111, 0.14), inset 0 1px 1px 0 rgba(67, 90, 111, 0.06);}.css-11bc0q4,[data-css-11bc0q4]{cursor:pointer;outline:none;}.css-11bc0q4:hover,[data-css-11bc0q4]:hover{background-color:rgba(67, 90, 111, 0.06);}.css-11bc0q4:focus,[data-css-11bc0q4]:focus{box-shadow:0 0 0 2px rgba(16, 112, 202, 0.3);}.css-11bc0q4[aria-current="page"],[data-css-11bc0q4][aria-current="page"], .css-11bc0q4[aria-selected="true"], [data-css-11bc0q4][aria-selected="true"], .css-11bc0q4:active, [data-css-11bc0q4]:active{background-color:rgba(16, 112, 202, 0.09);color:#1070ca;}.css-11bc0q4[aria-current="page"],[data-css-11bc0q4][aria-current="page"], .css-11bc0q4[aria-selected="true"], [data-css-11bc0q4][aria-selected="true"]{cursor:default;}.css-11bc0q4[aria-disabled="true"],[data-css-11bc0q4][aria-disabled="true"]{cursor:not-allowed;opacity:0.8;background-image:none;background-color:rgba(67, 90, 111, 0.06);box-shadow:none;color:rgba(67, 90, 111, 0.7);pointer-events:none;}</style><meta charSet="utf-8"/><title>CSS Converter to template literal - W3cubTools</title><link href="/favicon.ico" rel="icon"/><link rel="apple-touch-icon" sizes="180x180" href="/static/apple-touch-icon.png"/><link rel="icon" type="image/png" sizes="32x32" href="/static/favicon-32x32.png"/><link rel="icon" type="image/png" sizes="16x16" href="/static/favicon-16x16.png"/><link rel="manifest" href="/static/site.webmanifest"/><meta name="title" content="CSS Converter to template literal - W3cubTools"/><meta name="description" content="Online convert CSS Converter to template literal, automatically faster"/><meta name="viewport" content="width=1024"/><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/><meta name="author" content="W3cubTools"/><meta name="renderer" content="webkit"/><meta property="og:type" content="website"/><meta property="og:url" content="https://tools.w3cub.com/object-styles-to-template-literal"/><meta property="og:title" content="CSS Converter to template literal - W3cubTools"/><meta property="og:description" content="Online convert CSS Converter to template literal, automatically faster"/><meta property="og:image" content="https://tools.w3cub.com/static/logo.png"/><meta property="twitter:card" content="summary_large_image"/><meta property="twitter:url" content="https://tools.w3cub.com/object-styles-to-template-literal"/><meta property="twitter:title" content="CSS Converter to template literal - W3cubTools"/><meta property="twitter:description" content="Online convert CSS Converter to template literal, automatically faster"/><meta property="twitter:image" content="https://tools.w3cub.com/static/logo.png"/><meta name="next-head-count" content="23"/><link rel="preload" href="/_next/static/css/b23a05247ee73e0d9c81.css" as="style"/><link rel="stylesheet" href="/_next/static/css/b23a05247ee73e0d9c81.css" data-n-g=""/><noscript data-n-css=""></noscript><link rel="preload" href="/_next/static/chunks/webpack-e161e44ae9d7e4043ed5.js" as="script"/><link rel="preload" href="/_next/static/chunks/framework.561e21cae7779653de17.js" as="script"/><link rel="preload" href="/_next/static/chunks/8d5b18ede59725225000dbf7e27b39107b7913eb.cc2180a1e775c15c0e9e.js" as="script"/><link rel="preload" href="/_next/static/chunks/635e6c3b1004afc11bca5be78741ad406e90e8fc.7060fc47edf9b0a10156.js" as="script"/><link rel="preload" href="/_next/static/chunks/main-5a9cee3e3075b96017ff.js" as="script"/><link rel="preload" href="/_next/static/chunks/2425fc26ee48eb1c64880850c9fec6ad2da225cc.8b8122692915a383848a.js" as="script"/><link rel="preload" href="/_next/static/chunks/14fb29e9ff5db95b2b3f700d51a014b5997d8151.697ac749b041d177065d.js" as="script"/><link rel="preload" href="/_next/static/chunks/b997803a8fcfddc8da8281a272288852e8288a41.2365631d24259d06bb13.js" as="script"/><link rel="preload" href="/_next/static/chunks/ccc36971d28cfbc0201c803f2ee79f8b0ec37dfb.9025de32854d3bbeadbe.js" as="script"/><link rel="preload" href="/_next/static/chunks/d9b52c5efa52474b09332b0459baa5304d92f4a4.0f0f40827d4b8f80658b.js" as="script"/><link rel="preload" href="/_next/static/chunks/28fa760338d1d094a1ea7ca028cd70bd527cac6d.412f441d63e0e92def12.js" as="script"/><link rel="preload" href="/_next/static/chunks/eba17146dfb0f30e95d8ebd32b6a7859981fcacd.e94bfbd02c3294a42330.js" as="script"/><link rel="preload" href="/_next/static/chunks/pages/_app-0aedcf63a99a17bf5e6a.js" as="script"/><link rel="preload" href="/_next/static/chunks/31995085438ab929256f4b5c516d40ef2f3b3890.948fb6a0ceea13d5509e.js" as="script"/><link rel="preload" href="/_next/static/chunks/e7925a585f6e536694774e56a6fb3a933c75d2cb.6e397d07087478815e94.js" as="script"/><link rel="preload" href="/_next/static/chunks/267414c164282f624412015ba174f0cbdc28c2cd.4a7ad8ba7a2c26a6dbf2.js" as="script"/><link rel="preload" href="/_next/static/chunks/6c42bd54539fe7f11d7e225bea66cc2505d2b0e1.0e8d2b7a1ec3ea6876dc.js" as="script"/><link rel="preload" href="/_next/static/chunks/53df0dcd8ecec883fded9ccbbe9a0fe00456a8b0.8ea98622fdbb6a6cbbfb.js" as="script"/><link rel="preload" href="/_next/static/chunks/a98a60669a6582c8895dddaf592fa6fb2763201c.6e31324f7004a23106b8.js" as="script"/><link rel="preload" href="/_next/static/chunks/f97b019e2200954e3a86069d0b7e7ccfc3148846.d1046970294ef8e3dc54.js" as="script"/><link rel="preload" href="/_next/static/chunks/2002b0499208f75d92550743c6dd75e8675e7f81.8ce0198933b5e2097bdf.js" as="script"/><link rel="preload" href="/_next/static/chunks/2c311bf31ffc44983630ec9a97ae256189382b43.a4ef29981187f8f94a72.js" as="script"/><link rel="preload" href="/_next/static/chunks/98495547e7c274267852eb057a0ef58fa004318c.1bab55ece5626d2d5904.js" as="script"/><link rel="preload" href="/_next/static/chunks/06db23e1f3b1f7ca2085c0a9c41c4423dfc1854e.b48d0c9be33873fc5388.js" as="script"/><link rel="preload" href="/_next/static/chunks/pages/object-styles-to-template-literal-ce7295f551f871a714d4.js" as="script"/></head><body><div id="__next"><header class="hidden-print css-1fz368 📦dspl_flex 📦algn-itms_center 📦flx-drct_row 📦h_48px 📦bg-clr_fff 📦pr_3prcnt 📦pl_4prcnt 📦box-szg_border-box"><div class="logo-transform css-nil 📦flx_1 📦dspl_flex 📦pr_3prcnt 📦box-szg_border-box"><a href="/"><svg width="149" height="19" viewBox="0 0 149 19" xmlns="http://www.w3.org/2000/svg" id="icon-logo"><path fill="#000" d="M14.624 15.68L11.731 4.95l-2.93 10.73c-.228.814-.409 1.398-.543 1.752a2.322 2.322 0 0 1-.702.952c-.334.28-.777.421-1.33.421-.448 0-.816-.083-1.105-.25a1.921 1.921 0 0 1-.702-.708 4.449 4.449 0 0 1-.44-1.087c-.113-.419-.215-.807-.305-1.165L.696 3.546c-.18-.7-.269-1.233-.269-1.599 0-.464.163-.854.489-1.172C1.24.458 1.644.3 2.124.3c.66 0 1.103.212 1.33.635.228.423.428 1.038.599 1.843l2.343 10.45 2.625-9.778c.195-.749.37-1.319.525-1.71.155-.39.407-.728.757-1.012.35-.285.826-.428 1.428-.428.61 0 1.084.149 1.422.446.338.297.572.62.702.97s.305.928.525 1.734l2.649 9.778 2.344-10.45c.113-.545.221-.972.323-1.281.102-.31.277-.586.525-.83.248-.245.608-.367 1.08-.367.472 0 .873.157 1.203.47.33.314.494.706.494 1.178 0 .334-.09.867-.269 1.6l-2.978 12.048c-.203.814-.372 1.41-.507 1.788-.134.378-.362.71-.683.995-.322.285-.775.427-1.361.427-.554 0-.997-.138-1.33-.415-.335-.277-.566-.588-.697-.934-.13-.346-.313-.938-.549-1.776zm15.674-7.983c.749 0 1.393-.22 1.935-.66.54-.439.811-1.07.811-1.891a2.26 2.26 0 0 0-.647-1.618c-.43-.452-1.013-.677-1.745-.677-.497 0-.905.069-1.227.207a1.974 1.974 0 0 0-.763.55c-.187.227-.364.52-.53.878-.168.358-.32.696-.459 1.014-.081.17-.228.305-.44.402a1.73 1.73 0 0 1-.732.147c-.325 0-.624-.132-.897-.397-.272-.264-.409-.616-.409-1.056 0-.423.128-.869.385-1.336.256-.468.63-.914 1.123-1.337.492-.423 1.105-.763 1.837-1.02.732-.256 1.55-.384 2.454-.384.789 0 1.51.108 2.16.324a5.047 5.047 0 0 1 1.697.933c.48.407.842.88 1.087 1.416a4.14 4.14 0 0 1 .366 1.734c0 .814-.177 1.511-.531 2.093-.354.582-.86 1.15-1.52 1.703a6.73 6.73 0 0 1 1.605 1.172c.436.44.763.926.983 1.459.22.533.33 1.109.33 1.727 0 .74-.15 1.457-.446 2.149a5.48 5.48 0 0 1-1.312 1.849 6.257 6.257 0 0 1-2.057 1.27c-.794.305-1.67.457-2.63.457-.977 0-1.852-.175-2.625-.525-.774-.35-1.41-.787-1.91-1.312-.501-.525-.88-1.068-1.136-1.63-.256-.561-.385-1.025-.385-1.391 0-.472.153-.853.458-1.142.305-.288.686-.433 1.142-.433.227 0 .447.067.659.201.211.135.35.295.415.483.423 1.13.877 1.971 1.36 2.52.485.55 1.167.824 2.046.824a3.074 3.074 0 0 0 2.618-1.477c.305-.488.458-1.054.458-1.696 0-.953-.26-1.7-.782-2.24-.52-.542-1.245-.812-2.172-.812a8.86 8.86 0 0 0-.757.049 9.311 9.311 0 0 1-.66.048c-.447 0-.793-.111-1.037-.335-.244-.224-.366-.535-.366-.934 0-.39.146-.706.44-.946.292-.24.728-.36 1.305-.36h.5zm21.68 6.982c0 .415-.125.859-.373 1.33-.248.473-.626.922-1.135 1.35-.509.427-1.15.77-1.923 1.031-.773.26-1.644.39-2.612.39-2.059 0-3.666-.6-4.822-1.8-1.155-1.2-1.733-2.81-1.733-4.828 0-1.367.264-2.575.793-3.625a5.696 5.696 0 0 1 2.295-2.435c1.001-.574 2.198-.861 3.59-.861.862 0 1.653.126 2.373.378.72.253 1.331.578 1.831.977s.883.824 1.148 1.276c.264.451.397.872.397 1.263 0 .399-.149.736-.446 1.013a1.528 1.528 0 0 1-1.08.415c-.277 0-.507-.071-.69-.213-.183-.143-.389-.373-.616-.69-.407-.619-.833-1.082-1.276-1.392-.444-.309-1.007-.464-1.69-.464-.985 0-1.779.385-2.381 1.154-.602.769-.903 1.82-.903 3.156 0 .626.077 1.202.232 1.727.154.525.378.972.67 1.343.294.37.648.65 1.063.842.415.191.87.287 1.367.287.667 0 1.24-.155 1.715-.464.476-.31.897-.781 1.264-1.416.203-.374.423-.667.659-.88.236-.21.525-.316.867-.316.406 0 .744.154 1.013.463.268.31.403.64.403.99zm11.56 2.246v-.427a7.436 7.436 0 0 1-1.258 1.27c-.44.341-.92.596-1.44.763-.521.166-1.115.25-1.782.25-.806 0-1.528-.167-2.167-.5a3.655 3.655 0 0 1-1.483-1.38c-.415-.708-.623-1.725-.623-3.052V7.245c0-.667.15-1.166.452-1.495.3-.33.7-.495 1.196-.495.505 0 .912.167 1.22.5.31.335.465.83.465 1.49v5.335c0 .773.065 1.422.195 1.947.13.525.364.935.702 1.233.338.297.795.445 1.373.445.562 0 1.09-.167 1.587-.5a2.922 2.922 0 0 0 1.087-1.307c.187-.472.28-1.505.28-3.1V7.245c0-.66.155-1.155.464-1.49.31-.333.712-.5 1.209-.5.496 0 .895.165 1.196.495.301.33.452.828.452 1.495v9.656c0 .635-.145 1.11-.434 1.428-.289.317-.661.476-1.117.476-.455 0-.832-.165-1.129-.494-.297-.33-.445-.792-.445-1.386zm9.521-14.721v5.09c.627-.651 1.266-1.15 1.917-1.495.65-.346 1.456-.52 2.417-.52 1.106 0 2.077.263 2.911.788.834.525 1.481 1.286 1.94 2.283.46.997.69 2.179.69 3.546 0 1.01-.128 1.935-.384 2.777-.256.842-.629 1.573-1.117 2.191a5.046 5.046 0 0 1-1.776 1.435 5.199 5.199 0 0 1-2.301.506c-.513 0-.995-.06-1.447-.183a4.242 4.242 0 0 1-1.153-.482 5.222 5.222 0 0 1-.812-.617 13.883 13.883 0 0 1-.885-.952v.33c0 .627-.15 1.1-.452 1.422-.3.321-.683.482-1.147.482-.472 0-.848-.16-1.13-.482-.28-.321-.42-.795-.42-1.422V2.35c0-.676.136-1.187.409-1.533C70.59.472 70.972.3 71.46.3c.513 0 .907.165 1.184.495.277.33.415.8.415 1.41zm.159 9.9c0 1.326.303 2.345.91 3.057.605.712 1.401 1.068 2.386 1.068.838 0 1.56-.364 2.166-1.092.607-.728.91-1.772.91-3.131 0-.88-.126-1.636-.379-2.27-.252-.635-.61-1.126-1.074-1.472-.464-.345-1.005-.518-1.623-.518-.635 0-1.2.173-1.697.518-.497.346-.887.847-1.172 1.502-.285.655-.427 1.434-.427 2.338zM97.46 3.595h-3.955v13c0 .75-.167 1.305-.5 1.667-.334.362-.766.543-1.295.543-.537 0-.974-.183-1.312-.55-.338-.365-.506-.919-.506-1.66v-13h-3.956c-.618 0-1.078-.136-1.379-.409-.301-.272-.452-.632-.452-1.08 0-.464.157-.83.47-1.099.314-.268.767-.403 1.362-.403H97.46c.627 0 1.092.139 1.398.416.305.276.457.638.457 1.086 0 .448-.154.808-.463 1.08-.31.273-.774.41-1.392.41zm16.247 8.435c0 .993-.154 1.909-.463 2.747a6.065 6.065 0 0 1-1.343 2.16 5.929 5.929 0 0 1-2.1 1.386c-.814.321-1.73.482-2.746.482-1.01 0-1.917-.163-2.723-.488a6.045 6.045 0 0 1-2.093-1.398 6.043 6.043 0 0 1-1.343-2.148c-.305-.826-.458-1.74-.458-2.74 0-1.01.155-1.934.464-2.772a6.03 6.03 0 0 1 1.33-2.148 5.865 5.865 0 0 1 2.1-1.373c.822-.322 1.73-.483 2.723-.483 1.009 0 1.924.163 2.746.489.822.325 1.526.789 2.112 1.391a6.015 6.015 0 0 1 1.337 2.149c.305.83.457 1.745.457 2.746zm-3.344 0c0-1.359-.3-2.417-.897-3.174-.599-.756-1.402-1.135-2.411-1.135-.651 0-1.225.17-1.722.507-.496.338-.878.836-1.147 1.495-.269.66-.403 1.428-.403 2.307 0 .871.132 1.632.397 2.283.264.651.643 1.15 1.135 1.495.493.346 1.072.52 1.74.52 1.009 0 1.812-.381 2.41-1.142.599-.761.898-1.813.898-3.156zm18.445 0c0 .993-.155 1.909-.464 2.747a6.065 6.065 0 0 1-1.343 2.16 5.929 5.929 0 0 1-2.1 1.386c-.813.321-1.729.482-2.746.482-1.01 0-1.917-.163-2.722-.488a6.045 6.045 0 0 1-2.094-1.398 6.043 6.043 0 0 1-1.343-2.148c-.305-.826-.457-1.74-.457-2.74 0-1.01.154-1.934.463-2.772a6.03 6.03 0 0 1 1.331-2.148 5.865 5.865 0 0 1 2.1-1.373c.822-.322 1.729-.483 2.722-.483 1.009 0 1.924.163 2.746.489.822.325 1.526.789 2.112 1.391a6.015 6.015 0 0 1 1.337 2.149c.305.83.458 1.745.458 2.746zm-3.345 0c0-1.359-.3-2.417-.897-3.174-.598-.756-1.402-1.135-2.411-1.135-.651 0-1.225.17-1.721.507-.497.338-.88.836-1.148 1.495-.268.66-.403 1.428-.403 2.307 0 .871.133 1.632.397 2.283s.643 1.15 1.135 1.495c.493.346 1.072.52 1.74.52 1.009 0 1.813-.381 2.41-1.142.599-.761.898-1.813.898-3.156zm5.97 4.749V2.326c0-.668.148-1.172.445-1.514.297-.342.697-.513 1.202-.513s.912.17 1.22.507c.31.338.465.844.465 1.52v14.453c0 .675-.157 1.182-.47 1.52-.314.337-.719.506-1.215.506-.488 0-.885-.175-1.19-.525-.305-.35-.458-.85-.458-1.501zm17.504-2.332c0 .92-.224 1.707-.671 2.362-.448.655-1.11 1.152-1.984 1.49-.875.337-1.939.506-3.192.506-1.196 0-2.222-.183-3.076-.55-.855-.365-1.486-.823-1.892-1.372-.407-.55-.61-1.101-.61-1.654 0-.367.13-.68.39-.94.26-.26.59-.391.989-.391.35 0 .618.085.805.256.187.171.366.411.537.72.342.595.751 1.038 1.227 1.331.476.293 1.125.44 1.947.44.668 0 1.215-.149 1.642-.446.427-.297.64-.637.64-1.02 0-.585-.22-1.012-.664-1.281-.444-.269-1.174-.525-2.192-.77-1.147-.284-2.08-.583-2.801-.896-.72-.314-1.296-.727-1.727-1.24-.432-.512-.647-1.143-.647-1.891 0-.668.2-1.298.598-1.893.399-.594.987-1.068 1.764-1.422.777-.354 1.715-.53 2.813-.53.863 0 1.638.089 2.326.268.688.179 1.261.419 1.721.72.46.301.81.635 1.05 1.001.24.366.36.724.36 1.074 0 .383-.128.696-.385.94-.256.244-.62.366-1.092.366-.342 0-.633-.097-.873-.292-.24-.196-.515-.489-.824-.88a3.012 3.012 0 0 0-.89-.78c-.343-.196-.807-.294-1.393-.294-.602 0-1.102.129-1.501.385-.399.256-.598.576-.598.958 0 .35.146.637.44.86.292.225.687.41 1.183.556.497.147 1.18.326 2.051.537 1.034.253 1.878.554 2.533.904s1.152.763 1.49 1.239c.337.476.506 1.019.506 1.63z"></path></svg></a></div><div class="css-nil 📦box-szg_border-box"><a href="https://docs.w3cub.com/" target="_blank"><button class="css-1ii3p2c 📦fnt-fam_b77syt 📦mt_0px 📦fnt-sze_14px 📦f-wght_500 📦ln-ht_40px 📦ltr-spc_-0-05px 📦btrr_3px 📦bbrr_3px 📦btlr_3px 📦bblr_3px 📦pt_0px 📦pb_0px 📦pr_20px 📦pl_20px 📦ml_0px 📦mr_0px 📦mb_0px 📦h_40px 📦pst_relative 📦dspl_inline-flex 📦algn-itms_center 📦flx-wrap_nowrap 📦box-szg_border-box">W3cubDocs</button></a></div></header><div class="share-widget hidden-print "><div class=" social-share"><a class="icon-facebook social-share-icon"></a><a class="icon-twitter social-share-icon"></a><a class="icon-weibo social-share-icon"></a><a class="icon-line social-share-icon"></a><a class="icon-gmail social-share-icon"></a><a class="icon-digg social-share-icon"></a><a class="icon-reddit social-share-icon"></a><a class="icon-linkedin social-share-icon"></a><a class="icon-douban social-share-icon"></a><a class="icon-qzone social-share-icon"></a></div><div class="css-nil 📦pb_8px 📦pl_8px 📦pr_8px 📦pt_8px 📦txt-algn_center 📦crsr_pointer 📦box-szg_border-box"><svg data-icon="more" style="fill:#7B8B9A" viewBox="0 0 16 16" class="📦w_16px 📦h_16px 📦box-szg_border-box"><path d="M2 6.03a2 2 0 100 4 2 2 0 100-4zM14 6.03a2 2 0 100 4 2 2 0 100-4zM8 6.03a2 2 0 100 4 2 2 0 100-4z" fill-rule="evenodd"></path></svg></div></div><div class="mainlayout css-nil 📦box-szg_border-box"><div class="css-graydb 📦dspl_flex 📦flx-drct_row 📦ovflw-x_hidden 📦ovflw-y_hidden 📦flx_1 📦h_500px 📦box-szg_border-box"><div class="css-nil 📦b-rgt_1px-solid-E4E7EB 📦dspl_flex 📦flx_1 📦flx-drct_column 📦ovflw-x_hidden 📦ovflw-y_hidden 📦box-szg_border-box"><div class="css-nil 📦dspl_flex 📦flx_1 📦flx-drct_column 📦ovflw-x_hidden 📦ovflw-y_hidden 📦box-szg_border-box"><div class="css-nil 📦b-btm_1px-solid-E4E7EB 📦dspl_flex 📦h_40px 📦pl_10px 📦pr_10px 📦algn-itms_center 📦z-idx_2 📦flx-srnk_0 📦box-szg_border-box"><div class="css-nil 📦flx_1 📦box-szg_border-box"><h2 class="📦mt_0px 📦mb_0px 📦fnt-sze_16px 📦f-wght_500 📦ln-ht_20px 📦ltr-spc_-0-05px 📦fnt-fam_b77syt 📦color_234361 📦box-szg_border-box">Object Styles</h2></div><button class="css-69cngj 📦fnt-fam_b77syt 📦mt_0px 📦fnt-sze_12px 📦f-wght_500 📦ln-ht_28px 📦ltr-spc_0 📦btrr_3px 📦bbrr_3px 📦btlr_3px 📦bblr_3px 📦pt_0px 📦pb_0px 📦pr_14px 📦pl_14px 📦ml_0px 📦mr_10px 📦mb_0px 📦h_28px 📦pst_relative 📦dspl_inline-flex 📦algn-itms_center 📦flx-wrap_nowrap 📦box-szg_border-box"><svg data-icon="cog" style="fill:currentColor" viewBox="0 0 16 16" class="📦ml_-3px 📦mr_8px 📦w_12px 📦h_12px 📦box-szg_border-box"><path d="M15.19 6.39h-1.85c-.11-.37-.27-.71-.45-1.04l1.36-1.36c.31-.31.31-.82 0-1.13l-1.13-1.13a.803.803 0 00-1.13 0l-1.36 1.36c-.33-.17-.67-.33-1.04-.44V.79c0-.44-.36-.8-.8-.8h-1.6c-.44 0-.8.36-.8.8v1.86c-.39.12-.75.28-1.1.47l-1.3-1.3c-.3-.3-.79-.3-1.09 0L1.82 2.91c-.3.3-.3.79 0 1.09l1.3 1.3c-.2.34-.36.7-.48 1.09H.79c-.44 0-.8.36-.8.8v1.6c0 .44.36.8.8.8h1.85c.11.37.27.71.45 1.04l-1.36 1.36c-.31.31-.31.82 0 1.13l1.13 1.13c.31.31.82.31 1.13 0l1.36-1.36c.33.18.67.33 1.04.44v1.86c0 .44.36.8.8.8h1.6c.44 0 .8-.36.8-.8v-1.86c.39-.12.75-.28 1.1-.47l1.3 1.3c.3.3.79.3 1.09 0l1.09-1.09c.3-.3.3-.79 0-1.09l-1.3-1.3c.19-.35.36-.71.48-1.1h1.85c.44 0 .8-.36.8-.8v-1.6a.816.816 0 00-.81-.79zm-7.2 4.6c-1.66 0-3-1.34-3-3s1.34-3 3-3 3 1.34 3 3-1.34 3-3 3z" fill-rule="evenodd"></path></svg>Settings</button><button class="css-69cngj 📦fnt-fam_b77syt 📦mt_0px 📦fnt-sze_12px 📦f-wght_500 📦ln-ht_28px 📦ltr-spc_0 📦btrr_3px 📦bbrr_3px 📦btlr_3px 📦bblr_3px 📦pt_0px 📦pb_0px 📦pr_0px 📦pl_0px 📦ml_0px 📦mr_10px 📦mb_0px 📦h_28px 📦pst_relative 📦dspl_flex 📦algn-itms_center 📦flx-wrap_nowrap 📦w_28px 📦just-cnt_center 📦box-szg_border-box" role="button" aria-haspopup="true" aria-describedby="evergreen-tooltip-16"><svg data-icon="upload" style="fill:#66788A" viewBox="0 0 16 16" class="📦w_12px 📦h_12px 📦box-szg_border-box"><path d="M8 0C3.58 0 0 3.58 0 8s3.58 8 8 8 8-3.58 8-8-3.58-8-8-8zm3 8c-.28 0-.53-.11-.71-.29L9 6.41V12c0 .55-.45 1-1 1s-1-.45-1-1V6.41l-1.29 1.3a1.003 1.003 0 01-1.42-1.42l3-3C7.47 3.11 7.72 3 8 3s.53.11.71.29l3 3A1.003 1.003 0 0111 8z" fill-rule="evenodd"></path></svg></button><button class="css-5pze3j 📦fnt-fam_b77syt 📦mt_0px 📦fnt-sze_12px 📦f-wght_500 📦ln-ht_28px 📦ltr-spc_0 📦btrr_3px 📦bbrr_3px 📦btlr_3px 📦bblr_3px 📦pt_0px 📦pb_0px 📦pr_0px 📦pl_0px 📦ml_0px 📦mr_10px 📦mb_0px 📦h_28px 📦pst_relative 📦dspl_flex 📦algn-itms_center 📦flx-wrap_nowrap 📦w_28px 📦just-cnt_center 📦box-szg_border-box" aria-describedby="evergreen-tooltip-17"><svg data-icon="trash" style="fill:currentColor" viewBox="0 0 16 16" class="📦w_12px 📦h_12px 📦box-szg_border-box"><path d="M14.49 3.99h-13c-.28 0-.5.22-.5.5s.22.5.5.5h.5v10c0 .55.45 1 1 1h10c.55 0 1-.45 1-1v-10h.5c.28 0 .5-.22.5-.5s-.22-.5-.5-.5zm-8.5 9c0 .55-.45 1-1 1s-1-.45-1-1v-6c0-.55.45-1 1-1s1 .45 1 1v6zm3 0c0 .55-.45 1-1 1s-1-.45-1-1v-6c0-.55.45-1 1-1s1 .45 1 1v6zm3 0c0 .55-.45 1-1 1s-1-.45-1-1v-6c0-.55.45-1 1-1s1 .45 1 1v6zm2-12h-4c0-.55-.45-1-1-1h-2c-.55 0-1 .45-1 1h-4c-.55 0-1 .45-1 1v1h14v-1c0-.55-.45-1-1-1z" fill-rule="evenodd"></path></svg></button></div><div style="display:flex;flex-direction:column;flex:1;overflow:hidden" tabindex="0"></div></div></div><div class="css-nil 📦dspl_flex 📦flx_1 📦pst_relative 📦box-szg_border-box"><div class="css-nil 📦dspl_flex 📦flx_1 📦flx-drct_column 📦ovflw-x_hidden 📦ovflw-y_hidden 📦box-szg_border-box"><div class="css-nil 📦b-btm_1px-solid-E4E7EB 📦dspl_flex 📦h_40px 📦pl_10px 📦pr_10px 📦algn-itms_center 📦z-idx_2 📦flx-srnk_0 📦box-szg_border-box"><div class="css-nil 📦flx_1 📦box-szg_border-box"><h2 class="📦mt_0px 📦mb_0px 📦fnt-sze_16px 📦f-wght_500 📦ln-ht_20px 📦ltr-spc_-0-05px 📦fnt-fam_b77syt 📦color_234361 📦box-szg_border-box">Template Literal</h2></div><a href="https://github.com/satya164/babel-plugin-object-styles-to-template" style="display:inline-flex" target="_blank"><svg xmlns="http://www.w3.org/2000/svg" id="npm" x="0px" y="0px" enable-background="new 0 0 780 250" viewBox="0 0 780 250" xml:space="preserve" height="20" style="margin-right:10px"><style>.st0{fill:#C12127;}</style><path d="M240 250h100v-50h100V0H240v250zM340 50h50v100h-50V50zM480 0v200h100V50h50v150h50V50h50v150h50V0H480zM0 200h100V50h50v150h50V0H0v200z" class="st0"></path></svg></a><button class="css-nwvixr 📦fnt-fam_b77syt 📦mt_0px 📦fnt-sze_12px 📦f-wght_500 📦ln-ht_28px 📦ltr-spc_0 📦btrr_3px 📦bbrr_3px 📦btlr_3px 📦bblr_3px 📦pt_0px 📦pb_0px 📦pr_14px 📦pl_14px 📦ml_0px 📦mr_10px 📦mb_0px 📦h_28px 📦pst_relative 📦dspl_inline-flex 📦algn-itms_center 📦flx-wrap_nowrap 📦box-szg_border-box"><svg data-icon="duplicate" style="fill:currentColor" viewBox="0 0 16 16" class="📦ml_-3px 📦mr_8px 📦w_12px 📦h_12px 📦box-szg_border-box"><path d="M15 0H5c-.55 0-1 .45-1 1v2h2V2h8v7h-1v2h2c.55 0 1-.45 1-1V1c0-.55-.45-1-1-1zm-4 4H1c-.55 0-1 .45-1 1v10c0 .55.45 1 1 1h10c.55 0 1-.45 1-1V5c0-.55-.45-1-1-1zm-1 10H2V6h8v8z" fill-rule="evenodd"></path></svg>Copy</button></div><div style="display:flex;flex-direction:column;flex:1;overflow:hidden"></div></div></div></div><div class="clearfix"></div></div><div class="sitemap hidden-print"><ul class="clearfix "><li><span>Math<!-- -->:</span></li><li><a href="/math-calc" class="item">Math Worksheets<!-- --> </a></li><li><a href="/calculator" class="item">Calculator<!-- --> </a></li></ul><ul class="clearfix "><li><span>Game<!-- -->:</span></li><li><a href="/g2048" class="item">2048 Game<!-- --> </a></li><li><a href="/gomoku" class="item">Gomoku Game<!-- --> </a></li></ul><ul class="clearfix "><li><span>Video<!-- -->:</span></li><li><a href="https://weibomiaopai.com/" class="item">Video Download<!-- --> </a></li><li><a href="https://www.savefrom.net/" class="item">Youtube Downloader<!-- --> </a></li></ul><ul class="clearfix "><li><span>Chart<!-- -->:</span></li><li><a href="/web-color" class="item">Web Colors<!-- --> </a></li><li><a href="/open-color" class="item">Open Color<!-- --> </a></li><li><a href="/gradient-color" class="item">Gradient Colors<!-- --> </a></li><li><a href="/html-entities" class="item">HTML Entities<!-- --> </a></li><li><a href="/mime-list" class="item">MIME Types<!-- --> </a></li></ul><ul class="clearfix "><li><span>Word<!-- -->:</span></li><li><a href="/write-chinese" class="item">Chinese Stroke<!-- --> </a></li><li><a href="/chinese-to-pinyin" class="item">Chinese to Pinyin<!-- --> </a></li><li><a href="/japanese-syllabary" class="item">Japanese 五十音図<!-- --> </a></li></ul><ul class="clearfix "><li><span>Random<!-- -->:</span></li><li><a href="/random-hex" class="item">Random Hex<!-- --> </a></li><li><a href="/random-mac" class="item">Random Mac<!-- --> </a></li><li><a href="/shuffle-twitter" class="item">Shuffle Twitter<!-- --> </a></li></ul><ul class="clearfix "><li><span>Hash<!-- -->:</span></li><li><a href="/base64" class="item">Base64 code<!-- --> </a></li><li><a href="/md5-encode" class="item">MD5 encode<!-- --> </a></li><li><a href="/sha-encode" class="item">SHA encode<!-- --> </a></li></ul><ul class="clearfix "><li><span>Encode<!-- -->:</span></li><li><a href="/js-deobfuscate" class="item">Deobfuscate<!-- --> </a></li><li><a href="/urlencode" class="item">Url Encode<!-- --> </a></li><li><a href="/html-escape-unescape" class="item">Html Escape Unescape<!-- --> </a></li><li><a href="/xml-escape-unescape" class="item">Xml Escape Unescape<!-- --> </a></li><li><a href="/json-escape-unescape" class="item">Json Escape Unescape<!-- --> </a></li><li><a href="/js-escape-unescape" class="item">JavaScript Escape Unescape<!-- --> </a></li><li><a href="/java-escape-unescape" class="item">Java Escape Unescape<!-- --> </a></li><li><a href="/csharp-escape-unescape" class="item">C# Escape Unescape<!-- --> </a></li><li><a href="/csv-escape-unescape" class="item">Csv Escape Unescape<!-- --> </a></li><li><a href="/sql-escape-unescape" class="item">Sql Escape Unescape<!-- --> </a></li><li><a href="/unicode-to-ascii" class="item">Unicode to Ascii<!-- --> </a></li></ul><ul class="clearfix "><li><span>Images<!-- -->:</span></li><li><a href="/image-to-base64" class="item">Image to Base64<!-- --> </a></li><li><a href="/base64-to-image" class="item">Base64 to Image<!-- --> </a></li><li><a href="/image-converter" class="item">Image converter<!-- --> </a></li><li><a href="/image-to-text" class="item">Image to Ascii Art<!-- --> </a></li><li><a href="/long-weibo" class="item">Long Weibo<!-- --> </a></li></ul><ul class="clearfix "><li><span>Tools<!-- -->:</span></li><li><a href="/meta-tag-generator" class="item">Meta Tag Generator<!-- --> </a></li><li><a href="/curl-builder" class="item">Curl builder<!-- --> </a></li><li><a href="/cron-gen" class="item">Cron Generator<!-- --> </a></li><li><a href="/favicon-converter" class="item">Favicon Converter<!-- --> </a></li><li><a href="/zip-online" class="item">Zip Compressor<!-- --> </a></li><li><a href="/unzip-online" class="item">UnZip Files<!-- --> </a></li><li><a href="/vue-to-react" class="item">Vue to React<!-- --> </a></li><li><a href="/react-to-vue" class="item">React to Vue<!-- --> </a></li></ul><ul class="clearfix "><li><span>Fortune<!-- -->:</span></li><li><a href="/huangli" class="item">Programmer Calenar<!-- --> </a></li><li><a href="/qiuqian" class="item">Programmer Divination<!-- --> </a></li></ul><ul class="clearfix "><li><span>SVG<!-- -->:</span></li><li><a href="/svg-to-jsx" class="item">to JSX<!-- --> </a></li><li><a href="/svg-to-react-native" class="item">to React Native<!-- --> </a></li></ul><ul class="clearfix "><li><span>HTML<!-- -->:</span></li><li><a href="/html-to-jsx" class="item">to JSX<!-- --> </a></li><li><a href="/html-to-pug" class="item">to Pug<!-- --> </a></li></ul><ul class="clearfix "><li><span>JSON<!-- -->:</span></li><li><a href="/json-to-proptypes" class="item">to React PropTypes<!-- --> </a></li><li><a href="/json-to-flow" class="item">to Flow<!-- --> </a></li><li><a href="/json-to-graphql" class="item">to GraphQL<!-- --> </a></li><li><a href="/json-to-typescript" class="item">to TypeScript<!-- --> </a></li><li><a href="/json-to-mobx-state-tree" class="item">to MobX-State-Tree Model<!-- --> </a></li><li><a href="/json-to-sarcastic" class="item">to Sarcastic<!-- --> </a></li><li><a href="/json-to-io-ts" class="item">to io-ts<!-- --> </a></li><li><a href="/json-to-rust-serde" class="item">to Rust Serde<!-- --> </a></li><li><a href="/json-to-mongoose" class="item">to Mongoose Schema<!-- --> </a></li><li><a href="/json-to-big-query" class="item">to Big Query Schema<!-- --> </a></li><li><a href="/json-to-mysql" class="item">to MySQL<!-- --> </a></li><li><a href="/json-to-scala-case-class" class="item">to Scala Case Class<!-- --> </a></li><li><a href="/json-to-go" class="item">to Go Struct<!-- --> </a></li><li><a href="/json-to-go-bson" class="item">to Go Bson<!-- --> </a></li><li><a href="/json-to-yaml" class="item">to YAML<!-- --> </a></li><li><a href="/json-to-jsdoc" class="item">to JSDoc<!-- --> </a></li><li><a href="/json-to-kotlin" class="item">to Kotlin<!-- --> </a></li><li><a href="/json-to-json-schema" class="item">to JSON Schema<!-- --> </a></li></ul><ul class="clearfix "><li><span>JSON Schema<!-- -->:</span></li><li><a href="/json-schema-to-typescript" class="item">to TypeScript<!-- --> </a></li><li><a href="/json-schema-to-openapi-schema" class="item">to OpenAPI Schema<!-- --> </a></li><li><a href="json-schema-to-protobuf" class="item">to Protobuf<!-- --> </a></li></ul><ul class="clearfix "><li><span>CSS Converter<!-- -->:</span></li><li><a href="/css-to-js" class="item">to JS Objects<!-- --> </a></li><li><a href="/object-styles-to-template-literal" class="item">to template literal<!-- --> </a></li></ul><ul class="clearfix "><li><span>JavaScript<!-- -->:</span></li><li><a href="/js-object-to-json" class="item">to JSON<!-- --> </a></li></ul><ul class="clearfix "><li><span>GraphQL<!-- -->:</span></li><li><a href="/graphql-to-typescript" class="item">to TypeScript<!-- --> </a></li><li><a href="/graphql-to-flow" class="item">to Flow<!-- --> </a></li><li><a href="/graphql-to-java" class="item">to JAVA<!-- --> </a></li><li><a href="/graphql-to-resolvers-signature" class="item">to Resolvers Signature<!-- --> </a></li><li><a href="/graphql-to-introspection-json" class="item">to Introspection JSON<!-- --> </a></li><li><a href="/graphql-to-schema-ast" class="item">to Schema AST<!-- --> </a></li><li><a href="/graphql-to-fragment-matcher" class="item">to Fragment Matcher<!-- --> </a></li><li><a href="/graphql-to-components" class="item">to Components<!-- --> </a></li><li><a href="/graphql-to-typescript-mongodb" class="item">to TypeScript MongoDB<!-- --> </a></li></ul><ul class="clearfix "><li><span>JSON-LD<!-- -->:</span></li><li><a href="/jsonld-to-nquads" class="item">to N-Quads<!-- --> </a></li><li><a href="/jsonld-to-expanded" class="item">to Expanded<!-- --> </a></li><li><a href="/jsonld-to-compacted" class="item">to Compacted<!-- --> </a></li><li><a href="/jsonld-to-flattened" class="item">to Flattened<!-- --> </a></li><li><a href="/jsonld-to-framed" class="item">to Framed<!-- --> </a></li><li><a href="/jsonld-to-normalized" class="item">to Normalized<!-- --> </a></li></ul><ul class="clearfix "><li><span>TypeScript<!-- -->:</span></li><li><a href="/typescript-to-flow" class="item">to Flow<!-- --> </a></li><li><a href="/typescript-to-typescript-declaration" class="item">to TypeScript Declaration<!-- --> </a></li><li><a href="/typescript-to-json-schema" class="item">to JSON Schema<!-- --> </a></li></ul><ul class="clearfix "><li><span>Flow<!-- -->:</span></li><li><a href="/flow-to-typescript" class="item">to TypeScript<!-- --> </a></li><li><a href="/flow-to-typescript-declaration" class="item">to TypeScript Declaration<!-- --> </a></li></ul><ul class="clearfix "><li><span>Others<!-- -->:</span></li><li><a href="/xml-to-json" class="item">XML to JSON<!-- --> </a></li><li><a href="/yaml-to-json" class="item">YAML to JSON<!-- --> </a></li><li><a href="/markdown-to-html" class="item">Markdown to HTML<!-- --> </a></li></ul></div><footer class="footer hidden-print"><div class="footer-logo"><svg width="149" height="19"><use xlink:href="#icon-logo"></use></svg></div><div class="wrap"><div class="nav"><a href="/privacy-policy">Privacy Policy</a><a href="https://github.com/w3cub/w3cubtools-md/issues" target="_blank" class="mr-5">Issues</a><a href="https://github.com/w3cub/w3cubtools-md" class="" target="_blank">Improve descriptions</a><a href="/about#donate" class="">Donate</a><a href="/about" class="">About</a></div></div><div class="copy">Copyright © <!-- -->2021<!-- --> W3cub All Rights Reserved.</div></footer></div><script type="application/json" id="evergreen-hydrate">{"uiBoxCache":[["displayflex","📦dspl_flex"],["alignItemscenter","📦algn-itms_center"],["flexDirectionrow","📦flx-drct_row"],["height48","📦h_48px"],["backgroundColor#fff","📦bg-clr_fff"],["paddingRight3%","📦pr_3prcnt"],["paddingLeft4%","📦pl_4prcnt"],["boxSizingborder-box","📦box-szg_border-box"],["flex1","📦flx_1"],["fontFamily\"SF UI Text\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\"","📦fnt-fam_b77syt"],["marginTop0","📦mt_0px"],["fontSize14px","📦fnt-sze_14px"],["fontWeight500","📦f-wght_500"],["lineHeight40px","📦ln-ht_40px"],["letterSpacing-0.05px","📦ltr-spc_-0-05px"],["borderTopRightRadius3","📦btrr_3px"],["borderBottomRightRadius3","📦bbrr_3px"],["borderTopLeftRadius3","📦btlr_3px"],["borderBottomLeftRadius3","📦bblr_3px"],["paddingTop0","📦pt_0px"],["paddingBottom0","📦pb_0px"],["paddingRight20","📦pr_20px"],["paddingLeft20","📦pl_20px"],["marginLeft0","📦ml_0px"],["marginRight0","📦mr_0px"],["marginBottom0","📦mb_0px"],["height40","📦h_40px"],["positionrelative","📦pst_relative"],["displayinline-flex","📦dspl_inline-flex"],["flexWrapnowrap","📦flx-wrap_nowrap"],["paddingBottom8","📦pb_8px"],["paddingLeft8","📦pl_8px"],["paddingRight8","📦pr_8px"],["paddingTop8","📦pt_8px"],["textAligncenter","📦txt-algn_center"],["cursorpointer","📦crsr_pointer"],["width16","📦w_16px"],["height16","📦h_16px"],["overflowXhidden","📦ovflw-x_hidden"],["overflowYhidden","📦ovflw-y_hidden"],["height500px","📦h_500px"],["borderRight1px solid #E4E7EB","📦b-rgt_1px-solid-E4E7EB"],["flexDirectioncolumn","📦flx-drct_column"],["borderBottom1px solid #E4E7EB","📦b-btm_1px-solid-E4E7EB"],["paddingLeft10","📦pl_10px"],["paddingRight10","📦pr_10px"],["zIndex2","📦z-idx_2"],["flexShrink0","📦flx-srnk_0"],["fontSize16px","📦fnt-sze_16px"],["lineHeight20px","📦ln-ht_20px"],["color#234361","📦color_234361"],["fontSize12px","📦fnt-sze_12px"],["lineHeight28px","📦ln-ht_28px"],["letterSpacing0","📦ltr-spc_0"],["paddingRight14","📦pr_14px"],["paddingLeft14","📦pl_14px"],["marginRight10","📦mr_10px"],["height28","📦h_28px"],["marginLeft-3","📦ml_-3px"],["marginRight8","📦mr_8px"],["width12","📦w_12px"],["height12","📦h_12px"],["paddingRight0","📦pr_0px"],["paddingLeft0","📦pl_0px"],["width28","📦w_28px"],["justifyContentcenter","📦just-cnt_center"]],"glamorIds":["ng405l","fv6wzy","11r1ktn","158oy86","1olw4g9","1yiw7zu","1sugtjn","q4k7k7","1ktdej1","u4xxlz","1ont4t","1q9hkiq","1cql8cr","1y9xgi8","17kak1e","3grw6g","87b09r","e4x7vx","1swhwyo","1uxpfmf","znl0n0","1iarriy","w5ju0m","1k0qqcf","1m9tq8h","1hg44x7","rnri27","1y6fmrc","8h6vp3","8z9rxa","ns0rt0","1axypox","1fdetvy","13qcn8a","17bhmw6","1rprxtl","1fz368","1ii3p2c","69cngj","graydb","5pze3j","nwvixr","11bc0q4"]}</script><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{}},"page":"/object-styles-to-template-literal","query":{},"buildId":"8JcJM5o9XxvkLa0mkNahL","nextExport":true,"isFallback":false,"appGip":true}</script><script nomodule="" src="/_next/static/chunks/polyfills-b55145b313ae3dbb6403.js"></script><script src="/_next/static/chunks/webpack-e161e44ae9d7e4043ed5.js" async=""></script><script src="/_next/static/chunks/framework.561e21cae7779653de17.js" async=""></script><script src="/_next/static/chunks/8d5b18ede59725225000dbf7e27b39107b7913eb.cc2180a1e775c15c0e9e.js" async=""></script><script src="/_next/static/chunks/635e6c3b1004afc11bca5be78741ad406e90e8fc.7060fc47edf9b0a10156.js" async=""></script><script src="/_next/static/chunks/main-5a9cee3e3075b96017ff.js" async=""></script><script src="/_next/static/chunks/2425fc26ee48eb1c64880850c9fec6ad2da225cc.8b8122692915a383848a.js" async=""></script><script src="/_next/static/chunks/14fb29e9ff5db95b2b3f700d51a014b5997d8151.697ac749b041d177065d.js" async=""></script><script src="/_next/static/chunks/b997803a8fcfddc8da8281a272288852e8288a41.2365631d24259d06bb13.js" async=""></script><script src="/_next/static/chunks/ccc36971d28cfbc0201c803f2ee79f8b0ec37dfb.9025de32854d3bbeadbe.js" async=""></script><script src="/_next/static/chunks/d9b52c5efa52474b09332b0459baa5304d92f4a4.0f0f40827d4b8f80658b.js" async=""></script><script src="/_next/static/chunks/28fa760338d1d094a1ea7ca028cd70bd527cac6d.412f441d63e0e92def12.js" async=""></script><script src="/_next/static/chunks/eba17146dfb0f30e95d8ebd32b6a7859981fcacd.e94bfbd02c3294a42330.js" async=""></script><script src="/_next/static/chunks/pages/_app-0aedcf63a99a17bf5e6a.js" async=""></script><script src="/_next/static/chunks/31995085438ab929256f4b5c516d40ef2f3b3890.948fb6a0ceea13d5509e.js" async=""></script><script src="/_next/static/chunks/e7925a585f6e536694774e56a6fb3a933c75d2cb.6e397d07087478815e94.js" async=""></script><script src="/_next/static/chunks/267414c164282f624412015ba174f0cbdc28c2cd.4a7ad8ba7a2c26a6dbf2.js" async=""></script><script src="/_next/static/chunks/6c42bd54539fe7f11d7e225bea66cc2505d2b0e1.0e8d2b7a1ec3ea6876dc.js" async=""></script><script src="/_next/static/chunks/53df0dcd8ecec883fded9ccbbe9a0fe00456a8b0.8ea98622fdbb6a6cbbfb.js" async=""></script><script src="/_next/static/chunks/a98a60669a6582c8895dddaf592fa6fb2763201c.6e31324f7004a23106b8.js" async=""></script><script src="/_next/static/chunks/f97b019e2200954e3a86069d0b7e7ccfc3148846.d1046970294ef8e3dc54.js" async=""></script><script src="/_next/static/chunks/2002b0499208f75d92550743c6dd75e8675e7f81.8ce0198933b5e2097bdf.js" async=""></script><script src="/_next/static/chunks/2c311bf31ffc44983630ec9a97ae256189382b43.a4ef29981187f8f94a72.js" async=""></script><script src="/_next/static/chunks/98495547e7c274267852eb057a0ef58fa004318c.1bab55ece5626d2d5904.js" async=""></script><script src="/_next/static/chunks/06db23e1f3b1f7ca2085c0a9c41c4423dfc1854e.b48d0c9be33873fc5388.js" async=""></script><script src="/_next/static/chunks/pages/object-styles-to-template-literal-ce7295f551f871a714d4.js" async=""></script><script src="/_next/static/8JcJM5o9XxvkLa0mkNahL/_buildManifest.js" async=""></script><script src="/_next/static/8JcJM5o9XxvkLa0mkNahL/_ssgManifest.js" async=""></script></body></html>