Skip to main content
Create new
Introduction
Reactivity
Props
Logic
Events
Bindings
Lifecycle
Stores
Motion
Transitions
Animations
Easing
SVG
Actions
Classes
Component composition
Context API
Special elements
Module context
Debugging
7GUIs
Miscellaneous
App.svelte
<script>
let festive = $state(false);
</script>

<div class={['flex', { festive }]}>
<div>
{#each 'MERRY' as letter}
<span>{letter}</span>
{/each}
</div>

<div>
{#each 'CHRISTMAS!' as letter}
<span>{letter}</span>
{/each}
</div>
</div>

{#if !festive}
<div class="controls">
<button onclick={() => festive = !festive}>
Activate Christmas mode
</button>
</div>
{/if}

<style>
.flex {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
line-height: 1;

Error compiling component

WebAssembly.instantiateStreaming(): value type opcode @+13
import "svelte/internal/disclose-version";
import * as $ from "svelte/internal/client";

var root_1 = $.template(`<span class="svelte-i8gjzs"> </span>`);
var root_2 = $.template(`<span class="svelte-i8gjzs"> </span>`);
var on_click = (_, festive) => $.set(festive, !$.get(festive));
var root_3 = $.template(`<div class="controls svelte-i8gjzs"><button class="svelte-i8gjzs">Activate Christmas mode</button></div>`);
var root = $.template(`<div><div class="svelte-i8gjzs"></div> <div class="svelte-i8gjzs"></div></div> <!>`, 1);

export default function App($$anchor) {
let festive = $.state(false);
var fragment = root();
var div = $.first_child(fragment);
var div_1 = $.child(div);

$.each(div_1, 20, () => 'MERRY', $.index, ($$anchor, letter) => {
var span = root_1();
var text = $.child(span, true);

$.reset(span);
$.template_effect(() => $.set_text(text, letter));
$.append($$anchor, span);
});

$.reset(div_1);

var div_2 = $.sibling(div_1, 2);

$.each(div_2, 20, () => 'CHRISTMAS!', $.index, ($$anchor, letter) => {
var span_1 = root_2();
var text_1 = $.child(span_1, true);

$.reset(span_1);
$.template_effect(() => $.set_text(text_1, letter));
$.append($$anchor, span_1);
});
result = svelte.compile(source, {
generate: ,
});

.flex.svelte-i8gjzs {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
line-height: 1;

span:where(.svelte-i8gjzs) {
font-family: Impact;
font-size: 15vmin;
color: white;
-webkit-text-stroke: 3px black;
}

&.festive span:where(.svelte-i8gjzs) {
animation: 1.5s linear svelte-i8gjzs-christmas infinite;

&:nth-child(3n+1) {
animation-delay: -0.5s;
}

&:nth-child(3n+2) {
animation-delay: -1s;
}
}
}

.controls.svelte-i8gjzs {
position: fixed;
display: flex;
top: 0;
left: 0;
width: 100%;
		
			
				
  • Root {
    • css: StyleSheet {...}
      • type: "StyleSheet"
      • start: 395
      • end: 1387
      • attributes: []
      • children: [...] (3)
        • Rule {...}
          • type: "Rule"
          • prelude: SelectorList {...}
            • type: "SelectorList"
            • start: 404
            • end: 409
            • children: [...] (1)
              • ComplexSelector {...}
                • type: "ComplexSelector"
                • start: 404
                • end: 409
                • children: [...] (1)
                  • RelativeSelector {...}
                    • type: "RelativeSelector"
                    • combinator: null
                    • selectors: [...] (1)
                      • ClassSelector {...}
                        • type: "ClassSelector"
                        • name: "flex"
                        • start: 404
                        • end: 409
                        }
                      ]
                    • start: 404
                    • end: 409
                    }
                  ]
                }
              ]
            }
          • block: Block {...}
            • type: "Block"
            • start: 410
            • end: 850
            • children: [...] (9)
              • Declaration {...}
                • type: "Declaration"
                • start: 414
                • end: 427
                • property: "display"
                • value: "flex"
                }
              • Declaration {...}
                • type: "Declaration"
                • start: 431
                • end: 453
                • property: "flex-direction"
                • value: "column"
                }
              • Declaration {...}
                • type: "Declaration"
                • start: 457
                • end: 476
                • property: "align-items"
                • value: "center"
                }
              • Declaration {...}
                • type: "Declaration"
                • start: 480
                • end: 503
                • property: "justify-content"
                • value: "center"
                }
              • Declaration {...}
                • type: "Declaration"
                • start: 507
                • end: 518
                • property: "width"
                • value: "100%"
                }
              • Declaration {...}
                • type: "Declaration"
                • start: 522
                • end: 534
                • property: "height"
                • value: "100%"
                }
              • Declaration {...}
                • type: "Declaration"
                • start: 538
                • end: 552
                • property: "line-height"
                • value: "1"
                }
              • Rule {...}
                • type: "Rule"
                • prelude: SelectorList {...}
                  • type: "SelectorList"
                  • start: 557
                  • end: 561
                  • children: [...] (1)
                    • ComplexSelector {...}
                      • type: "ComplexSelector"
                      • start: 557
                      • end: 561
                      • children: [...] (1)
                        • RelativeSelector {...}
                          • type: "RelativeSelector"
                          • combinator: null
                          • selectors: [...] (1)
                            • TypeSelector {...}
                              • type: "TypeSelector"
                              • name: "span"
                              • start: 557
                              • end: 561
                              }
                            ]
                          • start: 557
                          • end: 561
                          }
                        ]
                      }
                    ]
                  }
                • block: Block {...}
                  • type: "Block"
                  • start: 562
                  • end: 665
                  • children: [...] (4)
                    • Declaration {...}
                      • type: "Declaration"
                      • start: 567
                      • end: 586
                      • property: "font-family"
                      • value: "Impact"
                      }
                    • Declaration {...}
                      • type: "Declaration"
                      • start: 591
                      • end: 608
                      • property: "font-size"
                      • value: "15vmin"
                      }
                    • Declaration {...}
                      • type: "Declaration"
                      • start: 613
                      • end: 625
                      • property: "color"
                      • value: "white"
                      }
                    • Declaration {...}
                      • type: "Declaration"
                      • start: 630
                      • end: 660
                      • property: "-webkit-text-stroke"
                      • value: "3px black"
                      }
                    ]
                  }
                • start: 557
                • end: 665
                }
              • Rule {...}
                • type: "Rule"
                • prelude: SelectorList {...}
                  • type: "SelectorList"
                  • start: 669
                  • end: 683
                  • children: [...] (1)
                    • ComplexSelector {...}
                      • type: "ComplexSelector"
                      • start: 669
                      • end: 683
                      • children: [...] (2)
                        • RelativeSelector {...}
                          • type: "RelativeSelector"
                          • combinator: null
                          • selectors: [...] (2)
                            • NestingSelector {...}
                              • type: "NestingSelector"
                              • name: "&"
                              • start: 669
                              • end: 670
                              }
                            • ClassSelector {...}
                              • type: "ClassSelector"
                              • name: "festive"
                              • start: 670
                              • end: 678
                              }
                            ]
                          • start: 669
                          • end: 678
                          }
                        • RelativeSelector {...}
                          • type: "RelativeSelector"
                          • combinator: Combinator {...}
                            • type: "Combinator"
                            • name: " "
                            • start: 678
                            • end: 679
                            }
                          • selectors: [...] (1)
                            • TypeSelector {...}
                              • type: "TypeSelector"
                              • name: "span"
                              • start: 679
                              • end: 683
                              }
                            ]
                          • start: 678
                          • end: 683
                          }
                        ]
                      }
                    ]
                  }
                • block: Block {...}
                  • type: "Block"
                  • start: 684
                  • end: 847
                  • children: [...] (3)
                    • Declaration {...}
                      • type: "Declaration"
                      • start: 689
                      • end: 730
                      • property: "animation"
                      • value: "1.5s linear christmas infinite"
                      }
                    • Rule {...}
                      • type: "Rule"
                      • prelude: SelectorList {...}
                        • type: "SelectorList"
                        • start: 736
                        • end: 753
                        • children: [...] (1)
                          • ComplexSelector {...}
                            • type: "ComplexSelector"
                            • start: 736
                            • end: 753
                            • children: [...] (1)
                              • RelativeSelector {...}
                                • type: "RelativeSelector"
                                • combinator: null
                                • selectors: [...] (2)
                                  • NestingSelector {...}
                                    • type: "NestingSelector"
                                    • name: "&"
                                    • start: 736
                                    • end: 737
                                    }
                                  • PseudoClassSelector {...}
                                    • type: "PseudoClassSelector"
                                    • name: "nth-child"
                                    • args: SelectorList {...}
                                      • type: "SelectorList"
                                      • start: 748
                                      • end: 752
                                      • children: [...] (1)
                                        • ComplexSelector {...}
                                          • type: "ComplexSelector"
                                          • start: 748
                                          • end: 752
                                          • children: [...] (1)
                                            • RelativeSelector {...}
                                              • type: "RelativeSelector"
                                              • combinator: null
                                              • selectors: [...] (1)
                                                • Nth {...}
                                                  • type: "Nth"
                                                  • value: "3n+1"
                                                  • start: 748
                                                  • end: 752
                                                  }
                                                ]
                                              • start: 748
                                              • end: 752
                                              }
                                            ]
                                          }
                                        ]
                                      }
                                    • start: 737
                                    • end: 753
                                    }
                                  ]
                                • start: 736
                                • end: 753
                                }
                              ]
                            }
                          ]
                        }
                      • block: Block {...}
                        • type: "Block"
                        • start: 754
                        • end: 788
                        • children: [...] (1)
                          • Declaration {...}
                            • type: "Declaration"
                            • start: 760
                            • end: 782
                            • property: "animation-delay"
                            • value: "-0.5s"
                            }
                          ]
                        }
                      • start: 736
                      • end: 788
                      }
                    • Rule {...}
                      • type: "Rule"
                      • prelude: SelectorList {...}
                        • type: "SelectorList"
                        • start: 793
                        • end: 810
                        • children: [...] (1)
                          • ComplexSelector {...}
                            • type: "ComplexSelector"
                            • start: 793
                            • end: 810
                            • children: [...] (1)
                              • RelativeSelector {...}
                                • type: "RelativeSelector"
                                • combinator: null
                                • selectors: [...] (2)
                                  • NestingSelector {...}
                                    • type: "NestingSelector"
                                    • name: "&"
                                    • start: 793
                                    • end: 794
                                    }
                                  • PseudoClassSelector {...}
                                    • type: "PseudoClassSelector"
                                    • name: "nth-child"
                                    • args: SelectorList {...}
                                      • type: "SelectorList"
                                      • start: 805
                                      • end: 809
                                      • children: [...] (1)
                                        • ComplexSelector {...}
                                          • type: "ComplexSelector"
                                          • start: 805
                                          • end: 809
                                          • children: [...] (1)
                                            • RelativeSelector {...}
                                              • type: "RelativeSelector"
                                              • combinator: null
                                              • selectors: [...] (1)
                                                • Nth {...}
                                                  • type: "Nth"
                                                  • value: "3n+2"
                                                  • start: 805
                                                  • end: 809
                                                  }
                                                ]
                                              • start: 805
                                              • end: 809
                                              }
                                            ]
                                          }
                                        ]
                                      }
                                    • start: 794
                                    • end: 810
                                    }
                                  ]
                                • start: 793
                                • end: 810
                                }
                              ]
                            }
                          ]
                        }
                      • block: Block {...}
                        • type: "Block"
                        • start: 811
                        • end: 843
                        • children: [...] (1)
                          • Declaration {...}
                            • type: "Declaration"
                            • start: 817
                            • end: 837
                            • property: "animation-delay"
                            • value: "-1s"
                            }
                          ]
                        }
                      • start: 793
                      • end: 843
                      }
                    ]
                  }
                • start: 669
                • end: 847
                }
              ]
            }
          • start: 404
          • end: 850
          }
        • Rule {...}
          • type: "Rule"
          • prelude: SelectorList {...}
            • type: "SelectorList"
            • start: 853
            • end: 862
            • children: [...] (1)
              • ComplexSelector {...}
                • type: "ComplexSelector"
                • start: 853
                • end: 862
                • children: [...] (1)
                  • RelativeSelector {...}
                    • type: "RelativeSelector"
                    • combinator: null
                    • selectors: [...] (1)
                      • ClassSelector {...}
                        • type: "ClassSelector"
                        • name: "controls"
                        • start: 853
                        • end: 862
                        }
                      ]
                    • start: 853
                    • end: 862
                    }
                  ]
                }
              ]
            }
          • block: Block {...}
            • type: "Block"
            • start: 863
            • end: 1127
            • children: [...] (8)
              • Declaration {...}
                • type: "Declaration"
                • start: 867
                • end: 882
                • property: "position"
                • value: "fixed"
                }
              • Declaration {...}
                • type: "Declaration"
                • start: 886
                • end: 899
                • property: "display"
                • value: "flex"
                }
              • Declaration {...}
                • type: "Declaration"
                • start: 903
                • end: 909
                • property: "top"
                • value: "0"
                }
              • Declaration {...}
                • type: "Declaration"
                • start: 913
                • end: 920
                • property: "left"
                • value: "0"
                }
              • Declaration {...}
                • type: "Declaration"
                • start: 924
                • end: 935
                • property: "width"
                • value: "100%"
                }
              • Declaration {...}
                • type: "Declaration"
                • start: 939
                • end: 951
                • property: "padding"
                • value: "1em"
                }
              • Declaration {...}
                • type: "Declaration"
                • start: 955
                • end: 978
                • property: "justify-content"
                • value: "center"
                }
              • Rule {...}
                • type: "Rule"
                • prelude: SelectorList {...}
                  • type: "SelectorList"
                  • start: 983
                  • end: 989
                  • children: [...] (1)
                    • ComplexSelector {...}
                      • type: "ComplexSelector"
                      • start: 983
                      • end: 989
                      • children: [...] (1)
                        • RelativeSelector {...}
                          • type: "RelativeSelector"
                          • combinator: null
                          • selectors: [...] (1)
                            • TypeSelector {...}
                              • type: "TypeSelector"
                              • name: "button"
                              • start: 983
                              • end: 989
                              }
                            ]
                          • start: 983
                          • end: 989
                          }
                        ]
                      }
                    ]
                  }
                • block: Block {...}
                  • type: "Block"
                  • start: 990
                  • end: 1124
                  • children: [...] (6)
                    • Declaration {...}
                      • type: "Declaration"
                      • start: 995
                      • end: 1009
                      • property: "font-size"
                      • value: "2em"
                      }
                    • Declaration {...}
                      • type: "Declaration"
                      • start: 1014
                      • end: 1028
                      • property: "padding"
                      • value: "0.5em"
                      }
                    • Declaration {...}
                      • type: "Declaration"
                      • start: 1033
                      • end: 1062
                      • property: "background"
                      • value: "hsl(0, 100%, 40%)"
                      }
                    • Declaration {...}
                      • type: "Declaration"
                      • start: 1067
                      • end: 1079
                      • property: "color"
                      • value: "white"
                      }
                    • Declaration {...}
                      • type: "Declaration"
                      • start: 1084
                      • end: 1096
                      • property: "border"
                      • value: "none"
                      }
                    • Declaration {...}
                      • type: "Declaration"
                      • start: 1101
                      • end: 1119
                      • property: "border-radius"
                      • value: "4px"
                      }
                    ]
                  }
                • start: 983
                • end: 1124
                }
              ]
            }
          • start: 853
          • end: 1127
          }
        • Atrule {...}
          • type: "Atrule"
          • start: 1130
          • end: 1378
          • name: "keyframes"
          • prelude: "christmas"
          • block: Block {...}
            • type: "Block"
            • start: 1151
            • end: 1378
            • children: [...] (7)
              • Rule {...}
                • type: "Rule"
                • prelude: SelectorList {...}
                  • type: "SelectorList"
                  • start: 1155
                  • end: 1157
                  • children: [...] (1)
                    • ComplexSelector {...}
                      • type: "ComplexSelector"
                      • start: 1155
                      • end: 1157
                      • children: [...] (1)
                        • RelativeSelector {...}
                          • type: "RelativeSelector"
                          • combinator: null
                          • selectors: [...] (1)
                            • Percentage {...}
                              • type: "Percentage"
                              • value: "0%"
                              • start: 1155
                              • end: 1157
                              }
                            ]
                          • start: 1155
                          • end: 1157
                          }
                        ]
                      }
                    ]
                  }
                • block: Block {...}
                  • type: "Block"
                  • start: 1158
                  • end: 1178
                  • children: [...] (1)
                    • Declaration {...}
                      • type: "Declaration"
                      • start: 1163
                      • end: 1173
                      • property: "color"
                      • value: "red"
                      }
                    ]
                  }
                • start: 1155
                • end: 1178
                }
              • Rule {...}
                • type: "Rule"
                • prelude: SelectorList {...}
                  • type: "SelectorList"
                  • start: 1182
                  • end: 1189
                  • children: [...] (1)
                    • ComplexSelector {...}
                      • type: "ComplexSelector"
                      • start: 1182
                      • end: 1189
                      • children: [...] (1)
                        • RelativeSelector {...}
                          • type: "RelativeSelector"
                          • combinator: null
                          • selectors: [...] (1)
                            • Percentage {...}
                              • type: "Percentage"
                              • value: "33.332%"
                              • start: 1182
                              • end: 1189
                              }
                            ]
                          • start: 1182
                          • end: 1189
                          }
                        ]
                      }
                    ]
                  }
                • block: Block {...}
                  • type: "Block"
                  • start: 1190
                  • end: 1210
                  • children: [...] (1)
                    • Declaration {...}
                      • type: "Declaration"
                      • start: 1195
                      • end: 1205
                      • property: "color"
                      • value: "red"
                      }
                    ]
                  }
                • start: 1182
                • end: 1210
                }
              • Rule {...}
                • type: "Rule"
                • prelude: SelectorList {...}
                  • type: "SelectorList"
                  • start: 1214
                  • end: 1221
                  • children: [...] (1)
                    • ComplexSelector {...}
                      • type: "ComplexSelector"
                      • start: 1214
                      • end: 1221
                      • children: [...] (1)
                        • RelativeSelector {...}
                          • type: "RelativeSelector"
                          • combinator: null
                          • selectors: [...] (1)
                            • Percentage {...}
                              • type: "Percentage"
                              • value: "33.333%"
                              • start: 1214
                              • end: 1221
                              }
                            ]
                          • start: 1214
                          • end: 1221
                          }
                        ]
                      }
                    ]
                  }
                • block: Block {...}
                  • type: "Block"
                  • start: 1222
                  • end: 1244
                  • children: [...] (1)
                    • Declaration {...}
                      • type: "Declaration"
                      • start: 1227
                      • end: 1239
                      • property: "color"
                      • value: "green"
                      }
                    ]
                  }
                • start: 1214
                • end: 1244
                }
              • Rule {...}
                • type: "Rule"
                • prelude: SelectorList {...}
                  • type: "SelectorList"
                  • start: 1248
                  • end: 1255
                  • children: [...] (1)
                    • ComplexSelector {...}
                      • type: "ComplexSelector"
                      • start: 1248
                      • end: 1255
                      • children: [...] (1)
                        • RelativeSelector {...}
                          • type: "RelativeSelector"
                          • combinator: null
                          • selectors: [...] (1)
                            • Percentage {...}
                              • type: "Percentage"
                              • value: "66.666%"
                              • start: 1248
                              • end: 1255
                              }
                            ]
                          • start: 1248
                          • end: 1255
                          }
                        ]
                      }
                    ]
                  }
                • block: Block {...}
                  • type: "Block"
                  • start: 1256
                  • end: 1278
                  • children: [...] (1)
                    • Declaration {...}
                      • type: "Declaration"
                      • start: 1261
                      • end: 1273
                      • property: "color"
                      • value: "green"
                      }
                    ]
                  }
                • start: 1248
                • end: 1278
                }
              • Rule {...}
                • type: "Rule"
                • prelude: SelectorList {...}
                  • type: "SelectorList"
                  • start: 1282
                  • end: 1289
                  • children: [...] (1)
                    • ComplexSelector {...}
                      • type: "ComplexSelector"
                      • start: 1282
                      • end: 1289
                      • children: [...] (1)
                        • RelativeSelector {...}
                          • type: "RelativeSelector"
                          • combinator: null
                          • selectors: [...] (1)
                            • Percentage {...}
                              • type: "Percentage"
                              • value: "66.667%"
                              • start: 1282
                              • end: 1289
                              }
                            ]
                          • start: 1282
                          • end: 1289
                          }
                        ]
                      }
                    ]
                  }
                • block: Block {...}
                  • type: "Block"
                  • start: 1290
                  • end: 1312
                  • children: [...] (1)
                    • Declaration {...}
                      • type: "Declaration"
                      • start: 1295
                      • end: 1307
                      • property: "color"
                      • value: "white"
                      }
                    ]
                  }
                • start: 1282
                • end: 1312
                }
              • Rule {...}
                • type: "Rule"
                • prelude: SelectorList {...}
                  • type: "SelectorList"
                  • start: 1316
                  • end: 1323
                  • children: [...] (1)
                    • ComplexSelector {...}
                      • type: "ComplexSelector"
                      • start: 1316
                      • end: 1323
                      • children: [...] (1)
                        • RelativeSelector {...}
                          • type: "RelativeSelector"
                          • combinator: null
                          • selectors: [...] (1)
                            • Percentage {...}
                              • type: "Percentage"
                              • value: "99.999%"
                              • start: 1316
                              • end: 1323
                              }
                            ]
                          • start: 1316
                          • end: 1323
                          }
                        ]
                      }
                    ]
                  }
                • block: Block {...}
                  • type: "Block"
                  • start: 1324
                  • end: 1346
                  • children: [...] (1)
                    • Declaration {...}
                      • type: "Declaration"
                      • start: 1329
                      • end: 1341
                      • property: "color"
                      • value: "white"
                      }
                    ]
                  }
                • start: 1316
                • end: 1346
                }
              • Rule {...}
                • type: "Rule"
                • prelude: SelectorList {...}
                  • type: "SelectorList"
                  • start: 1350
                  • end: 1354
                  • children: [...] (1)
                    • ComplexSelector {...}
                      • type: "ComplexSelector"
                      • start: 1350
                      • end: 1354
                      • children: [...] (1)
                        • RelativeSelector {...}
                          • type: "RelativeSelector"
                          • combinator: null
                          • selectors: [...] (1)
                            • Percentage {...}
                              • type: "Percentage"
                              • value: "100%"
                              • start: 1350
                              • end: 1354
                              }
                            ]
                          • start: 1350
                          • end: 1354
                          }
                        ]
                      }
                    ]
                  }
                • block: Block {...}
                  • type: "Block"
                  • start: 1355
                  • end: 1375
                  • children: [...] (1)
                    • Declaration {...}
                      • type: "Declaration"
                      • start: 1360
                      • end: 1370
                      • property: "color"
                      • value: "red"
                      }
                    ]
                  }
                • start: 1350
                • end: 1375
                }
              ]
            }
          }
        ]
      • content: {...}
        • start: 402
        • end: 1379
        • styles: "\n\t.flex {\n\t\tdisplay: flex;\n\t\tflex-direction: column;\n\t\talign-items: center;\n\t\tjustify-content: center;\n\t\twidth: 100%;\n\t\theight: 100%;\n\t\tline-height: 1;\n\n\t\tspan {\n\t\t\tfont-family: Impact;\n\t\t\tfont-size: 15vmin;\n\t\t\tcolor: white;\n\t\t\t-webkit-text-stroke: 3px black;\n\t\t}\n\n\t\t&.festive span {\n\t\t\tanimation: 1.5s linear christmas infinite;\n\n\t\t\t&:nth-child(3n+1) {\n\t\t\t\tanimation-delay: -0.5s;\n\t\t\t}\n\n\t\t\t&:nth-child(3n+2) {\n\t\t\t\tanimation-delay: -1s;\n\t\t\t}\n\t\t}\n\t}\n\n\t.controls {\n\t\tposition: fixed;\n\t\tdisplay: flex;\n\t\ttop: 0;\n\t\tleft: 0;\n\t\twidth: 100%;\n\t\tpadding: 1em;\n\t\tjustify-content: center;\n\n\t\tbutton {\n\t\t\tfont-size: 2em;\n\t\t\tpadding: 0.5em;\n\t\t\tbackground: hsl(0, 100%, 40%);\n\t\t\tcolor: white;\n\t\t\tborder: none;\n\t\t\tborder-radius: 4px;\n\t\t}\n\t}\n\n\t@keyframes christmas {\n\t\t0% {\n\t\t\tcolor: red;\n\t\t}\n\n\t\t33.332% {\n\t\t\tcolor: red;\n\t\t}\n\n\t\t33.333% {\n\t\t\tcolor: green;\n\t\t}\n\n\t\t66.666% {\n\t\t\tcolor: green;\n\t\t}\n\n\t\t66.667% {\n\t\t\tcolor: white;\n\t\t}\n\n\t\t99.999% {\n\t\t\tcolor: white;\n\t\t}\n\n\t\t100% {\n\t\t\tcolor: red;\n\t\t}\n\t}\n"
        • comment: null
        }
      }
    • js: []
    • start: 50
    • end: 393
    • type: "Root"
    • fragment: Fragment {...}
      • type: "Fragment"
      • nodes: [...] (5)
        • Text {...}
          • type: "Text"
          • start: 48
          • end: 50
          • raw: "\n\n"
          • data: "\n\n"
          }
        • RegularElement {...}
          • type: "RegularElement"
          • start: 50
          • end: 254
          • name: "div"
          • attributes: [...] (1)
            • Attribute {...}
              • type: "Attribute"
              • start: 55
              • end: 84
              • name: "class"
              • value: ExpressionTag {...}
                • type: "ExpressionTag"
                • start: 61
                • end: 84
                • expression: ArrayExpression {...}
                  • type: "ArrayExpression"
                  • start: 62
                  • end: 83
                  • loc: {...}
                    • start: {...}
                      • line: 5
                      • column: 12
                      }
                    • end: {...}
                      • line: 5
                      • column: 33
                      }
                    }
                  • elements: [...] (2)
                    • Literal {...}
                      • type: "Literal"
                      • start: 63
                      • end: 69
                      • loc: {...}
                        • start: {...}
                          • line: 5
                          • column: 13
                          }
                        • end: {...}
                          • line: 5
                          • column: 19
                          }
                        }
                      • value: "flex"
                      • raw: "'flex'"
                      }
                    • ObjectExpression {...}
                      • type: "ObjectExpression"
                      • start: 71
                      • end: 82
                      • loc: {...}
                        • start: {...}
                          • line: 5
                          • column: 21
                          }
                        • end: {...}
                          • line: 5
                          • column: 32
                          }
                        }
                      • properties: [...] (1)
                        • Property {...}
                          • type: "Property"
                          • start: 73
                          • end: 80
                          • loc: {...}
                            • start: {...}
                              • line: 5
                              • column: 23
                              }
                            • end: {...}
                              • line: 5
                              • column: 30
                              }
                            }
                          • method: false
                          • shorthand: true
                          • computed: false
                          • key: Identifier {...}
                            • type: "Identifier"
                            • start: 73
                            • end: 80
                            • loc: {...}
                              • start: {...}
                                • line: 5
                                • column: 23
                                }
                              • end: {...}
                                • line: 5
                                • column: 30
                                }
                              }
                            • name: "festive"
                            }
                          • kind: "init"
                          • value: Identifier {...}
                            • type: "Identifier"
                            • start: 73
                            • end: 80
                            • loc: {...}
                              • start: {...}
                                • line: 5
                                • column: 23
                                }
                              • end: {...}
                                • line: 5
                                • column: 30
                                }
                              }
                            • name: "festive"
                            }
                          }
                        ]
                      }
                    ]
                  }
                }
              }
            ]
          • fragment: Fragment {...}
            • type: "Fragment"
            • nodes: [...] (5)
              • Text {...}
                • type: "Text"
                • start: 85
                • end: 87
                • raw: "\n\t"
                • data: "\n\t"
                }
              • RegularElement {...}
                • type: "RegularElement"
                • start: 87
                • end: 163
                • name: "div"
                • attributes: [...] (1)
                  • Attribute {...}
                    • type: "Attribute"
                    • start: -1
                    • end: -1
                    • name: "class"
                    • value: [...] (1)
                      • Text {...}
                        • type: "Text"
                        • data: "svelte-i8gjzs"
                        • raw: "svelte-i8gjzs"
                        • start: -1
                        • end: -1
                        }
                      ]
                    }
                  ]
                • fragment: Fragment {...}
                  • type: "Fragment"
                  • nodes: [...] (3)
                    • Text {...}
                      • type: "Text"
                      • start: 92
                      • end: 95
                      • raw: "\n\t\t"
                      • data: "\n\t\t"
                      }
                    • EachBlock {...}
                      • type: "EachBlock"
                      • start: 95
                      • end: 155
                      • expression: Literal {...}
                        • type: "Literal"
                        • start: 102
                        • end: 109
                        • loc: {...}
                          • start: {...}
                            • line: 7
                            • column: 9
                            }
                          • end: {...}
                            • line: 7
                            • column: 16
                            }
                          }
                        • value: "MERRY"
                        • raw: "'MERRY'"
                        }
                      • body: Fragment {...}
                        • type: "Fragment"
                        • nodes: [...] (3)
                          • Text {...}
                            • type: "Text"
                            • start: 120
                            • end: 124
                            • raw: "\n\t\t\t"
                            • data: "\n\t\t\t"
                            }
                          • RegularElement {...}
                            • type: "RegularElement"
                            • start: 124
                            • end: 145
                            • name: "span"
                            • attributes: [...] (1)
                              • Attribute {...}
                                • type: "Attribute"
                                • start: -1
                                • end: -1
                                • name: "class"
                                • value: [...] (1)
                                  • Text {...}
                                    • type: "Text"
                                    • data: "svelte-i8gjzs"
                                    • raw: "svelte-i8gjzs"
                                    • start: -1
                                    • end: -1
                                    }
                                  ]
                                }
                              ]
                            • fragment: Fragment {...}
                              • type: "Fragment"
                              • nodes: [...] (1)
                                • ExpressionTag {...}
                                  • type: "ExpressionTag"
                                  • start: 130
                                  • end: 138
                                  • expression: Identifier {...}
                                    • type: "Identifier"
                                    • start: 131
                                    • end: 137
                                    • loc: {...}
                                      • start: {...}
                                        • line: 8
                                        • column: 10
                                        }
                                      • end: {...}
                                        • line: 8
                                        • column: 16
                                        }
                                      }
                                    • name: "letter"
                                    }
                                  }
                                ]
                              }
                            }
                          • Text {...}
                            • type: "Text"
                            • start: 145
                            • end: 148
                            • raw: "\n\t\t"
                            • data: "\n\t\t"
                            }
                          ]
                        }
                      • context: Identifier {...}
                        • type: "Identifier"
                        • name: "letter"
                        • start: 113
                        • loc: {...}
                          • start: {...}
                            • line: 7
                            • column: 20
                            • character: 113
                            }
                          • end: {...}
                            • line: 7
                            • column: 26
                            • character: 119
                            }
                          }
                        • end: 119
                        • typeAnnotation: undefined
                        }
                      • index: undefined
                      • key: undefined
                      }
                    • Text {...}
                      • type: "Text"
                      • start: 155
                      • end: 157
                      • raw: "\n\t"
                      • data: "\n\t"
                      }
                    ]
                  }
                }
              • Text {...}
                • type: "Text"
                • start: 163
                • end: 166
                • raw: " "
                • data: " "
                }
              • RegularElement {...}
                • type: "RegularElement"
                • start: 166
                • end: 247
                • name: "div"
                • attributes: [...] (1)
                  • Attribute {...}
                    • type: "Attribute"
                    • start: -1
                    • end: -1
                    • name: "class"
                    • value: [...] (1)
                      • Text {...}
                        • type: "Text"
                        • data: "svelte-i8gjzs"
                        • raw: "svelte-i8gjzs"
                        • start: -1
                        • end: -1
                        }
                      ]
                    }
                  ]
                • fragment: Fragment {...}
                  • type: "Fragment"
                  • nodes: [...] (3)
                    • Text {...}
                      • type: "Text"
                      • start: 171
                      • end: 174
                      • raw: "\n\t\t"
                      • data: "\n\t\t"
                      }
                    • EachBlock {...}
                      • type: "EachBlock"
                      • start: 174
                      • end: 239
                      • expression: Literal {...}
                        • type: "Literal"
                        • start: 181
                        • end: 193
                        • loc: {...}
                          • start: {...}
                            • line: 13
                            • column: 9
                            }
                          • end: {...}
                            • line: 13
                            • column: 21
                            }
                          }
                        • value: "CHRISTMAS!"
                        • raw: "'CHRISTMAS!'"
                        }
                      • body: Fragment {...}
                        • type: "Fragment"
                        • nodes: [...] (3)
                          • Text {...}
                            • type: "Text"
                            • start: 204
                            • end: 208
                            • raw: "\n\t\t\t"
                            • data: "\n\t\t\t"
                            }
                          • RegularElement {...}
                            • type: "RegularElement"
                            • start: 208
                            • end: 229
                            • name: "span"
                            • attributes: [...] (1)
                              • Attribute {...}
                                • type: "Attribute"
                                • start: -1
                                • end: -1
                                • name: "class"
                                • value: [...] (1)
                                  • Text {...}
                                    • type: "Text"
                                    • data: "svelte-i8gjzs"
                                    • raw: "svelte-i8gjzs"
                                    • start: -1
                                    • end: -1
                                    }
                                  ]
                                }
                              ]
                            • fragment: Fragment {...}
                              • type: "Fragment"
                              • nodes: [...] (1)
                                • ExpressionTag {...}
                                  • type: "ExpressionTag"
                                  • start: 214
                                  • end: 222
                                  • expression: Identifier {...}
                                    • type: "Identifier"
                                    • start: 215
                                    • end: 221
                                    • loc: {...}
                                      • start: {...}
                                        • line: 14
                                        • column: 10
                                        }
                                      • end: {...}
                                        • line: 14
                                        • column: 16
                                        }
                                      }
                                    • name: "letter"
                                    }
                                  }
                                ]
                              }
                            }
                          • Text {...}
                            • type: "Text"
                            • start: 229
                            • end: 232
                            • raw: "\n\t\t"
                            • data: "\n\t\t"
                            }
                          ]
                        }
                      • context: Identifier {...}
                        • type: "Identifier"
                        • name: "letter"
                        • start: 197
                        • loc: {...}
                          • start: {...}
                            • line: 13
                            • column: 25
                            • character: 197
                            }
                          • end: {...}
                            • line: 13
                            • column: 31
                            • character: 203
                            }
                          }
                        • end: 203
                        • typeAnnotation: undefined
                        }
                      • index: undefined
                      • key: undefined
                      }
                    • Text {...}
                      • type: "Text"
                      • start: 239
                      • end: 241
                      • raw: "\n\t"
                      • data: "\n\t"
                      }
                    ]
                  }
                }
              • Text {...}
                • type: "Text"
                • start: 247
                • end: 248
                • raw: "\n"
                • data: "\n"
                }
              ]
            }
          }
        • Text {...}
          • type: "Text"
          • start: 254
          • end: 256
          • raw: " "
          • data: " "
          }
        • IfBlock {...}
          • type: "IfBlock"
          • elseif: false
          • start: 256
          • end: 393
          • test: UnaryExpression {...}
            • type: "UnaryExpression"
            • start: 261
            • end: 269
            • loc: {...}
              • start: {...}
                • line: 19
                • column: 5
                }
              • end: {...}
                • line: 19
                • column: 13
                }
              }
            • operator: "!"
            • prefix: true
            • argument: Identifier {...}
              • type: "Identifier"
              • start: 262
              • end: 269
              • loc: {...}
                • start: {...}
                  • line: 19
                  • column: 6
                  }
                • end: {...}
                  • line: 19
                  • column: 13
                  }
                }
              • name: "festive"
              }
            }
          • consequent: Fragment {...}
            • type: "Fragment"
            • nodes: [...] (3)
              • Text {...}
                • type: "Text"
                • start: 270
                • end: 272
                • raw: "\n\t"
                • data: "\n\t"
                }
              • RegularElement {...}
                • type: "RegularElement"
                • start: 272
                • end: 387
                • name: "div"
                • attributes: [...] (1)
                  • Attribute {...}
                    • type: "Attribute"
                    • start: 277
                    • end: 293
                    • name: "class"
                    • value: [...] (1)
                      • Text {...}
                        • start: 284
                        • end: 292
                        • type: "Text"
                        • raw: "controls"
                        • data: "controls svelte-i8gjzs"
                        }
                      ]
                    }
                  ]
                • fragment: Fragment {...}
                  • type: "Fragment"
                  • nodes: [...] (3)
                    • Text {...}
                      • type: "Text"
                      • start: 294
                      • end: 297
                      • raw: "\n\t\t"
                      • data: "\n\t\t"
                      }
                    • RegularElement {...}
                      • type: "RegularElement"
                      • start: 297
                      • end: 379
                      • name: "button"
                      • attributes: [...] (2)
                        • Attribute {...}
                          • type: "Attribute"
                          • start: 305
                          • end: 339
                          • name: "onclick"
                          • value: ExpressionTag {...}
                            • type: "ExpressionTag"
                            • start: 313
                            • end: 339
                            • expression: ArrowFunctionExpression {...}
                              • type: "ArrowFunctionExpression"
                              • start: 314
                              • end: 338
                              • loc: {...}
                                • start: {...}
                                  • line: 21
                                  • column: 19
                                  }
                                • end: {...}
                                  • line: 21
                                  • column: 43
                                  }
                                }
                              • id: null
                              • expression: true
                              • generator: false
                              • async: false
                              • params: []
                              • body: AssignmentExpression {...}
                                • type: "AssignmentExpression"
                                • start: 320
                                • end: 338
                                • loc: {...}
                                  • start: {...}
                                    • line: 21
                                    • column: 25
                                    }
                                  • end: {...}
                                    • line: 21
                                    • column: 43
                                    }
                                  }
                                • operator: "="
                                • left: Identifier {...}
                                  • type: "Identifier"
                                  • start: 320
                                  • end: 327
                                  • loc: {...}
                                    • start: {...}
                                      • line: 21
                                      • column: 25
                                      }
                                    • end: {...}
                                      • line: 21
                                      • column: 32
                                      }
                                    }
                                  • name: "festive"
                                  }
                                • right: UnaryExpression {...}
                                  • type: "UnaryExpression"
                                  • start: 330
                                  • end: 338
                                  • loc: {...}
                                    • start: {...}
                                      • line: 21
                                      • column: 35
                                      }
                                    • end: {...}
                                      • line: 21
                                      • column: 43
                                      }
                                    }
                                  • operator: "!"
                                  • prefix: true
                                  • argument: Identifier {...}
                                    • type: "Identifier"
                                    • start: 331
                                    • end: 338
                                    • loc: {...}
                                      • start: {...}
                                        • line: 21
                                        • column: 36
                                        }
                                      • end: {...}
                                        • line: 21
                                        • column: 43
                                        }
                                      }
                                    • name: "festive"
                                    }
                                  }
                                }
                              }
                            }
                          }
                        • Attribute {...}
                          • type: "Attribute"
                          • start: -1
                          • end: -1
                          • name: "class"
                          • value: [...] (1)
                            • Text {...}
                              • type: "Text"
                              • data: "svelte-i8gjzs"
                              • raw: "svelte-i8gjzs"
                              • start: -1
                              • end: -1
                              }
                            ]
                          }
                        ]
                      • fragment: Fragment {...}
                        • type: "Fragment"
                        • nodes: [...] (1)
                          • Text {...}
                            • type: "Text"
                            • start: 340
                            • end: 370
                            • raw: "Activate Christmas mode"
                            • data: "Activate Christmas mode"
                            }
                          ]
                        }
                      }
                    • Text {...}
                      • type: "Text"
                      • start: 379
                      • end: 381
                      • raw: "\n\t"
                      • data: "\n\t"
                      }
                    ]
                  }
                }
              • Text {...}
                • type: "Text"
                • start: 387
                • end: 388
                • raw: "\n"
                • data: "\n"
                }
              ]
            }
          • alternate: null
          }
        • Text {...}
          • type: "Text"
          • start: 393
          • end: 395
          • raw: "\n\n"
          • data: "\n\n"
          }
        ]
      }
    • options: null
    • instance: Script {...}
      • type: "Script"
      • start: 0
      • end: 48
      • context: "default"
      • content: Program {...}
        • type: "Program"
        • start: 8
        • end: 39
        • loc: {...}
          • start: {...}
            • line: 1
            • column: 0
            }
          • end: {...}
            • line: 3
            • column: 0
            }
          }
        • body: [...] (1)
          • VariableDeclaration {...}
            • type: "VariableDeclaration"
            • start: 10
            • end: 38
            • loc: {...}
              • start: {...}
                • line: 2
                • column: 1
                }
              • end: {...}
                • line: 2
                • column: 29
                }
              }
            • declarations: [...] (1)
              • VariableDeclarator {...}
                • type: "VariableDeclarator"
                • start: 14
                • end: 37
                • loc: {...}
                  • start: {...}
                    • line: 2
                    • column: 5
                    }
                  • end: {...}
                    • line: 2
                    • column: 28
                    }
                  }
                • id: Identifier {...}
                  • type: "Identifier"
                  • start: 14
                  • end: 21
                  • loc: {...}
                    • start: {...}
                      • line: 2
                      • column: 5
                      }
                    • end: {...}
                      • line: 2
                      • column: 12
                      }
                    }
                  • name: "festive"
                  }
                • init: CallExpression {...}
                  • type: "CallExpression"
                  • start: 24
                  • end: 37
                  • loc: {...}
                    • start: {...}
                      • line: 2
                      • column: 15
                      }
                    • end: {...}
                      • line: 2
                      • column: 28
                      }
                    }
                  • callee: Identifier {...}
                    • type: "Identifier"
                    • start: 24
                    • end: 30
                    • loc: {...}
                      • start: {...}
                        • line: 2
                        • column: 15
                        }
                      • end: {...}
                        • line: 2
                        • column: 21
                        }
                      }
                    • name: "$state"
                    }
                  • arguments: [...] (1)
                    • Literal {...}
                      • type: "Literal"
                      • start: 31
                      • end: 36
                      • loc: {...}
                        • start: {...}
                          • line: 2
                          • column: 22
                          }
                        • end: {...}
                          • line: 2
                          • column: 27
                          }
                        }
                      • value: false
                      • raw: "false"
                      }
                    ]
                  • optional: false
                  }
                }
              ]
            • kind: "let"
            }
          ]
        • sourceType: "module"
        }
      • attributes: []
      }
    }
The AST is not public API and may change at any point in time