Create new
Bindings
Transitions
Animations
Easing
Component composition
Context API
Special elements
Module context
Debugging
Miscellaneous
App.svelte
runes
This component is in runes mode.
To disable runes mode, add the following to the top of your component:
<svelte:options runes={false} />
99
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
›
⌄
⌄
⌄
⌄
⌄
⌄
⌄
⌄
<script>
import { fade } from 'svelte/transition';
import { elasticOut } from 'svelte/easing';
let visible = $state(true);
function spin(node, { duration }) {
return {
duration,
css: (t) => {
const eased = elasticOut(t);
return `
transform: scale(${eased}) rotate(${eased * 1080}deg);
color: hsl(
${~~(t * 360)},
${Math.min(100, 1000 - 1000 * t)}%,
${Math.min(50, 500 - 500 * t)}%
);`;
}
};
}
</script>
<label>
<input type="checkbox" bind:checked={visible} />
visible
</label>
{#if visible}
<div class="centered" in:spin={{ duration: 8000 }} out:fade>
<span>transitions!</span>
</div>
{/if}
<style>
Error compiling component
WebAssembly.instantiateStreaming(): value type opcode @+13
99
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
›
⌄
⌄
⌄
⌄
import 'svelte/internal/disclose-version';
import * as $ from 'svelte/internal/client';
import { fade } from 'svelte/transition';
import { elasticOut } from 'svelte/easing';
var root_1 = $.template(`<div class="centered svelte-30ja2x"><span class="svelte-30ja2x">transitions!</span></div>`);
var root = $.template(`<label><input type="checkbox"> visible</label> <!>`, 1);
export default function App($$anchor, $$props) {
$.push($$props, true);
let visible = $.state(true);
function spin(node, { duration }) {
return {
duration,
css: (t) => {
const eased = elasticOut(t);
return `
transform: scale(${eased}) rotate(${eased * 1080}deg);
color: hsl(
${~~(t * 360)},
${Math.min(100, 1000 - 1000 * t)}%,
${Math.min(50, 500 - 500 * t)}%
);`;
}
};
}
var fragment = root();
var label = $.first_child(fragment);
var input = $.child(label);
$.remove_input_defaults(input);
$.next();
result = svelte.compile(source, {
generate: ,
});99
1
2
3
4
5
6
7
8
9
10
11
12
13
14
›
.centered.svelte-30ja2x {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
span.svelte-30ja2x {
position: absolute;
transform: translate(-50%, -50%);
font-size: 4em;
}
Root {
css: StyleSheet {...}
- type: "StyleSheet"
- start: 662
- end: 865
- attributes: []
children: [...] (2)
Rule {...}
- type: "Rule"
prelude: SelectorList {...}
- type: "SelectorList"
- start: 671
- end: 680
children: [...] (1)
ComplexSelector {...}
- type: "ComplexSelector"
- start: 671
- end: 680
children: [...] (1)
RelativeSelector {...}
- type: "RelativeSelector"
- combinator: null
selectors: [...] (1)
ClassSelector {...}
- type: "ClassSelector"
- name: "centered"
- start: 671
- end: 680
}
]- start: 671
- end: 680
}
]
}
]
}block: Block {...}
- type: "Block"
- start: 681
- end: 768
children: [...] (4)
Declaration {...}
- type: "Declaration"
- start: 685
- end: 703
- property: "position"
- value: "absolute"
} Declaration {...}
- type: "Declaration"
- start: 707
- end: 716
- property: "left"
- value: "50%"
} Declaration {...}
- type: "Declaration"
- start: 720
- end: 728
- property: "top"
- value: "50%"
} Declaration {...}
- type: "Declaration"
- start: 732
- end: 764
- property: "transform"
- value: "translate(-50%, -50%)"
}
]
}- start: 671
- end: 768
} Rule {...}
- type: "Rule"
prelude: SelectorList {...}
- type: "SelectorList"
- start: 771
- end: 775
children: [...] (1)
ComplexSelector {...}
- type: "ComplexSelector"
- start: 771
- end: 775
children: [...] (1)
RelativeSelector {...}
- type: "RelativeSelector"
- combinator: null
selectors: [...] (1)
TypeSelector {...}
- type: "TypeSelector"
- name: "span"
- start: 771
- end: 775
}
]- start: 771
- end: 775
}
]
}
]
}block: Block {...}
- type: "Block"
- start: 776
- end: 856
children: [...] (3)
Declaration {...}
- type: "Declaration"
- start: 780
- end: 798
- property: "position"
- value: "absolute"
} Declaration {...}
- type: "Declaration"
- start: 802
- end: 834
- property: "transform"
- value: "translate(-50%, -50%)"
} Declaration {...}
- type: "Declaration"
- start: 838
- end: 852
- property: "font-size"
- value: "4em"
}
]
}- start: 771
- end: 856
}
]content: {...}
- start: 669
- end: 857
- styles: "\n\t.centered {\n\t\tposition: absolute;\n\t\tleft: 50%;\n\t\ttop: 50%;\n\t\ttransform: translate(-50%, -50%);\n\t}\n\n\tspan {\n\t\tposition: absolute;\n\t\ttransform: translate(-50%, -50%);\n\t\tfont-size: 4em;\n\t}\n"
- comment: null
}
}- js: []
- start: 466
- end: 660
- type: "Root"
fragment: Fragment {...}
- type: "Fragment"
nodes: [...] (5)
Text {...}
- type: "Text"
- start: 464
- end: 466
- raw: "\n\n"
- data: "\n\n"
} RegularElement {...}
- type: "RegularElement"
- start: 466
- end: 541
- name: "label"
- attributes: []
fragment: Fragment {...}
- type: "Fragment"
nodes: [...] (3)
Text {...}
- type: "Text"
- start: 473
- end: 475
- raw: "\n\t"
- data: "\n\t"
} RegularElement {...}
- type: "RegularElement"
- start: 475
- end: 523
- name: "input"
attributes: [...] (2)
Attribute {...}
- type: "Attribute"
- start: 482
- end: 497
- name: "type"
value: [...] (1)
Text {...}
- start: 488
- end: 496
- type: "Text"
- raw: "checkbox"
- data: "checkbox"
}
]
} BindDirective {...}
- start: 498
- end: 520
- type: "BindDirective"
- name: "checked"
expression: Identifier {...}
- type: "Identifier"
- start: 512
- end: 519
loc: {...}
start: {...}
- line: 26
- column: 38
}end: {...}
- line: 26
- column: 45
}
}- name: "visible"
}- modifiers: []
}
]fragment: Fragment {...}
- type: "Fragment"
- nodes: []
}
} Text {...}
- type: "Text"
- start: 523
- end: 533
- raw: " visible"
- data: " visible"
}
]
}
} Text {...}
- type: "Text"
- start: 541
- end: 543
- raw: " "
- data: " "
} IfBlock {...}
- type: "IfBlock"
- elseif: false
- start: 543
- end: 660
test: Identifier {...}
- type: "Identifier"
- start: 548
- end: 555
loc: {...}
start: {...}
- line: 30
- column: 5
}end: {...}
- line: 30
- column: 12
}
}- name: "visible"
}consequent: Fragment {...}
- type: "Fragment"
nodes: [...] (3)
Text {...}
- type: "Text"
- start: 556
- end: 558
- raw: "\n\t"
- data: "\n\t"
} RegularElement {...}
- type: "RegularElement"
- start: 558
- end: 654
- name: "div"
attributes: [...] (3)
Attribute {...}
- type: "Attribute"
- start: 563
- end: 579
- name: "class"
value: [...] (1)
Text {...}
- start: 570
- end: 578
- type: "Text"
- raw: "centered"
- data: "centered svelte-30ja2x"
}
]
} TransitionDirective {...}
- start: 580
- end: 608
- type: "TransitionDirective"
- name: "spin"
expression: ObjectExpression {...}
- type: "ObjectExpression"
- start: 589
- end: 607
loc: {...}
start: {...}
- line: 31
- column: 32
}end: {...}
- line: 31
- column: 50
}
}properties: [...] (1)
Property {...}
- type: "Property"
- start: 591
- end: 605
loc: {...}
start: {...}
- line: 31
- column: 34
}end: {...}
- line: 31
- column: 48
}
}- method: false
- shorthand: false
- computed: false
key: Identifier {...}
- type: "Identifier"
- start: 591
- end: 599
loc: {...}
start: {...}
- line: 31
- column: 34
}end: {...}
- line: 31
- column: 42
}
}- name: "duration"
}value: Literal {...}
- type: "Literal"
- start: 601
- end: 605
loc: {...}
start: {...}
- line: 31
- column: 44
}end: {...}
- line: 31
- column: 48
}
}- value: 8000
- raw: "8000"
}- kind: "init"
}
]
}- modifiers: []
- intro: true
- outro: false
} TransitionDirective {...}
- start: 609
- end: 617
- type: "TransitionDirective"
- name: "fade"
- expression: null
- modifiers: []
- intro: false
- outro: true
}
]fragment: Fragment {...}
- type: "Fragment"
nodes: [...] (3)
Text {...}
- type: "Text"
- start: 618
- end: 621
- raw: "\n\t\t"
- data: "\n\t\t"
} RegularElement {...}
- type: "RegularElement"
- start: 621
- end: 646
- name: "span"
attributes: [...] (1)
Attribute {...}
- type: "Attribute"
- start: -1
- end: -1
- name: "class"
value: [...] (1)
Text {...}
- type: "Text"
- data: "svelte-30ja2x"
- raw: "svelte-30ja2x"
- start: -1
- end: -1
}
]
}
]fragment: Fragment {...}
- type: "Fragment"
nodes: [...] (1)
Text {...}
- type: "Text"
- start: 627
- end: 639
- raw: "transitions!"
- data: "transitions!"
}
]
}
} Text {...}
- type: "Text"
- start: 646
- end: 648
- raw: "\n\t"
- data: "\n\t"
}
]
}
} Text {...}
- type: "Text"
- start: 654
- end: 655
- raw: "\n"
- data: "\n"
}
]
}- alternate: null
} Text {...}
- type: "Text"
- start: 660
- end: 662
- raw: "\n\n"
- data: "\n\n"
}
]
}- options: null
instance: Script {...}
- type: "Script"
- start: 0
- end: 464
- context: "default"
content: Program {...}
- type: "Program"
- start: 8
- end: 455
loc: {...}
start: {...}
- line: 1
- column: 0
}end: {...}
- line: 23
- column: 0
}
}body: [...] (4)
ImportDeclaration {...}
- type: "ImportDeclaration"
- start: 10
- end: 51
loc: {...}
start: {...}
- line: 2
- column: 1
}end: {...}
- line: 2
- column: 42
}
}specifiers: [...] (1)
ImportSpecifier {...}
- type: "ImportSpecifier"
- start: 19
- end: 23
loc: {...}
start: {...}
- line: 2
- column: 10
}end: {...}
- line: 2
- column: 14
}
}imported: Identifier {...}
- type: "Identifier"
- start: 19
- end: 23
loc: {...}
start: {...}
- line: 2
- column: 10
}end: {...}
- line: 2
- column: 14
}
}- name: "fade"
}local: Identifier {...}
- type: "Identifier"
- start: 19
- end: 23
loc: {...}
start: {...}
- line: 2
- column: 10
}end: {...}
- line: 2
- column: 14
}
}- name: "fade"
}
}
]source: Literal {...}
- type: "Literal"
- start: 31
- end: 50
loc: {...}
start: {...}
- line: 2
- column: 22
}end: {...}
- line: 2
- column: 41
}
}- value: "svelte/transition"
- raw: "'svelte/transition'"
}
} ImportDeclaration {...}
- type: "ImportDeclaration"
- start: 53
- end: 96
loc: {...}
start: {...}
- line: 3
- column: 1
}end: {...}
- line: 3
- column: 44
}
}specifiers: [...] (1)
ImportSpecifier {...}
- type: "ImportSpecifier"
- start: 62
- end: 72
loc: {...}
start: {...}
- line: 3
- column: 10
}end: {...}
- line: 3
- column: 20
}
}imported: Identifier {...}
- type: "Identifier"
- start: 62
- end: 72
loc: {...}
start: {...}
- line: 3
- column: 10
}end: {...}
- line: 3
- column: 20
}
}- name: "elasticOut"
}local: Identifier {...}
- type: "Identifier"
- start: 62
- end: 72
loc: {...}
start: {...}
- line: 3
- column: 10
}end: {...}
- line: 3
- column: 20
}
}- name: "elasticOut"
}
}
]source: Literal {...}
- type: "Literal"
- start: 80
- end: 95
loc: {...}
start: {...}
- line: 3
- column: 28
}end: {...}
- line: 3
- column: 43
}
}- value: "svelte/easing"
- raw: "'svelte/easing'"
}
} VariableDeclaration {...}
- type: "VariableDeclaration"
- start: 99
- end: 126
loc: {...}
start: {...}
- line: 5
- column: 1
}end: {...}
- line: 5
- column: 28
}
}declarations: [...] (1)
VariableDeclarator {...}
- type: "VariableDeclarator"
- start: 103
- end: 125
loc: {...}
start: {...}
- line: 5
- column: 5
}end: {...}
- line: 5
- column: 27
}
}id: Identifier {...}
- type: "Identifier"
- start: 103
- end: 110
loc: {...}
start: {...}
- line: 5
- column: 5
}end: {...}
- line: 5
- column: 12
}
}- name: "visible"
}init: CallExpression {...}
- type: "CallExpression"
- start: 113
- end: 125
loc: {...}
start: {...}
- line: 5
- column: 15
}end: {...}
- line: 5
- column: 27
}
}callee: Identifier {...}
- type: "Identifier"
- start: 113
- end: 119
loc: {...}
start: {...}
- line: 5
- column: 15
}end: {...}
- line: 5
- column: 21
}
}- name: "$state"
}arguments: [...] (1)
Literal {...}
- type: "Literal"
- start: 120
- end: 124
loc: {...}
start: {...}
- line: 5
- column: 22
}end: {...}
- line: 5
- column: 26
}
}- value: true
- raw: "true"
}
]- optional: false
}
}
]- kind: "let"
} FunctionDeclaration {...}
- type: "FunctionDeclaration"
- start: 129
- end: 454
loc: {...}
start: {...}
- line: 7
- column: 1
}end: {...}
- line: 22
- column: 2
}
}id: Identifier {...}
- type: "Identifier"
- start: 138
- end: 142
loc: {...}
start: {...}
- line: 7
- column: 10
}end: {...}
- line: 7
- column: 14
}
}- name: "spin"
}- expression: false
- generator: false
- async: false
params: [...] (2)
Identifier {...}
- type: "Identifier"
- start: 143
- end: 147
loc: {...}
start: {...}
- line: 7
- column: 15
}end: {...}
- line: 7
- column: 19
}
}- name: "node"
} ObjectPattern {...}
- type: "ObjectPattern"
- start: 149
- end: 161
loc: {...}
start: {...}
- line: 7
- column: 21
}end: {...}
- line: 7
- column: 33
}
}properties: [...] (1)
Property {...}
- type: "Property"
- start: 151
- end: 159
loc: {...}
start: {...}
- line: 7
- column: 23
}end: {...}
- line: 7
- column: 31
}
}- method: false
- shorthand: true
- computed: false
key: Identifier {...}
- type: "Identifier"
- start: 151
- end: 159
loc: {...}
start: {...}
- line: 7
- column: 23
}end: {...}
- line: 7
- column: 31
}
}- name: "duration"
}- kind: "init"
value: Identifier {...}
- type: "Identifier"
- start: 151
- end: 159
loc: {...}
start: {...}
- line: 7
- column: 23
}end: {...}
- line: 7
- column: 31
}
}- name: "duration"
}
}
]
}
]body: BlockStatement {...}
- type: "BlockStatement"
- start: 163
- end: 454
loc: {...}
start: {...}
- line: 7
- column: 35
}end: {...}
- line: 22
- column: 2
}
}body: [...] (1)
ReturnStatement {...}
- type: "ReturnStatement"
- start: 167
- end: 451
loc: {...}
start: {...}
- line: 8
- column: 2
}end: {...}
- line: 21
- column: 4
}
}argument: ObjectExpression {...}
- type: "ObjectExpression"
- start: 174
- end: 450
loc: {...}
start: {...}
- line: 8
- column: 9
}end: {...}
- line: 21
- column: 3
}
}properties: [...] (2)
Property {...}
- type: "Property"
- start: 179
- end: 187
loc: {...}
start: {...}
- line: 9
- column: 3
}end: {...}
- line: 9
- column: 11
}
}- method: false
- shorthand: true
- computed: false
key: Identifier {...}
- type: "Identifier"
- start: 179
- end: 187
loc: {...}
start: {...}
- line: 9
- column: 3
}end: {...}
- line: 9
- column: 11
}
}- name: "duration"
}- kind: "init"
value: Identifier {...}
- type: "Identifier"
- start: 179
- end: 187
loc: {...}
start: {...}
- line: 9
- column: 3
}end: {...}
- line: 9
- column: 11
}
}- name: "duration"
}
} Property {...}
- type: "Property"
- start: 192
- end: 446
loc: {...}
start: {...}
- line: 10
- column: 3
}end: {...}
- line: 20
- column: 4
}
}- method: false
- shorthand: false
- computed: false
key: Identifier {...}
- type: "Identifier"
- start: 192
- end: 195
loc: {...}
start: {...}
- line: 10
- column: 3
}end: {...}
- line: 10
- column: 6
}
}- name: "css"
}value: ArrowFunctionExpression {...}
- type: "ArrowFunctionExpression"
- start: 197
- end: 446
loc: {...}
start: {...}
- line: 10
- column: 8
}end: {...}
- line: 20
- column: 4
}
}- id: null
- expression: false
- generator: false
- async: false
params: [...] (1)
Identifier {...}
- type: "Identifier"
- start: 198
- end: 199
loc: {...}
start: {...}
- line: 10
- column: 9
}end: {...}
- line: 10
- column: 10
}
}- name: "t"
}
]body: BlockStatement {...}
- type: "BlockStatement"
- start: 204
- end: 446
loc: {...}
start: {...}
- line: 10
- column: 15
}end: {...}
- line: 20
- column: 4
}
}body: [...] (2)
VariableDeclaration {...}
- type: "VariableDeclaration"
- start: 210
- end: 238
loc: {...}
start: {...}
- line: 11
- column: 4
}end: {...}
- line: 11
- column: 32
}
}declarations: [...] (1)
VariableDeclarator {...}
- type: "VariableDeclarator"
- start: 216
- end: 237
loc: {...}
start: {...}
- line: 11
- column: 10
}end: {...}
- line: 11
- column: 31
}
}id: Identifier {...}
- type: "Identifier"
- start: 216
- end: 221
loc: {...}
start: {...}
- line: 11
- column: 10
}end: {...}
- line: 11
- column: 15
}
}- name: "eased"
}init: CallExpression {...}
- type: "CallExpression"
- start: 224
- end: 237
loc: {...}
start: {...}
- line: 11
- column: 18
}end: {...}
- line: 11
- column: 31
}
}callee: Identifier {...}
- type: "Identifier"
- start: 224
- end: 234
loc: {...}
start: {...}
- line: 11
- column: 18
}end: {...}
- line: 11
- column: 28
}
}- name: "elasticOut"
}arguments: [...] (1)
Identifier {...}
- type: "Identifier"
- start: 235
- end: 236
loc: {...}
start: {...}
- line: 11
- column: 29
}end: {...}
- line: 11
- column: 30
}
}- name: "t"
}
]- optional: false
}
}
]- kind: "const"
} ReturnStatement {...}
- type: "ReturnStatement"
- start: 244
- end: 441
loc: {...}
start: {...}
- line: 13
- column: 4
}end: {...}
- line: 19
- column: 9
}
}argument: TemplateLiteral {...}
- type: "TemplateLiteral"
- start: 251
- end: 440
loc: {...}
start: {...}
- line: 13
- column: 11
}end: {...}
- line: 19
- column: 8
}
}expressions: [...] (5)
Identifier {...}
- type: "Identifier"
- start: 277
- end: 282
loc: {...}
start: {...}
- line: 14
- column: 24
}end: {...}
- line: 14
- column: 29
}
}- name: "eased"
} BinaryExpression {...}
- type: "BinaryExpression"
- start: 294
- end: 306
loc: {...}
start: {...}
- line: 14
- column: 41
}end: {...}
- line: 14
- column: 53
}
}left: Identifier {...}
- type: "Identifier"
- start: 294
- end: 299
loc: {...}
start: {...}
- line: 14
- column: 41
}end: {...}
- line: 14
- column: 46
}
}- name: "eased"
}- operator: "*"
right: Literal {...}
- type: "Literal"
- start: 302
- end: 306
loc: {...}
start: {...}
- line: 14
- column: 49
}end: {...}
- line: 14
- column: 53
}
}- value: 1080
- raw: "1080"
}
} UnaryExpression {...}
- type: "UnaryExpression"
- start: 338
- end: 349
loc: {...}
start: {...}
- line: 16
- column: 8
}end: {...}
- line: 16
- column: 19
}
}- operator: "~"
- prefix: true
argument: UnaryExpression {...}
- type: "UnaryExpression"
- start: 339
- end: 349
loc: {...}
start: {...}
- line: 16
- column: 9
}end: {...}
- line: 16
- column: 19
}
}- operator: "~"
- prefix: true
argument: BinaryExpression {...}
- type: "BinaryExpression"
- start: 341
- end: 348
loc: {...}
start: {...}
- line: 16
- column: 11
}end: {...}
- line: 16
- column: 18
}
}left: Identifier {...}
- type: "Identifier"
- start: 341
- end: 342
loc: {...}
start: {...}
- line: 16
- column: 11
}end: {...}
- line: 16
- column: 12
}
}- name: "t"
}- operator: "*"
right: Literal {...}
- type: "Literal"
- start: 345
- end: 348
loc: {...}
start: {...}
- line: 16
- column: 15
}end: {...}
- line: 16
- column: 18
}
}- value: 360
- raw: "360"
}
}
}
} CallExpression {...}
- type: "CallExpression"
- start: 360
- end: 390
loc: {...}
start: {...}
- line: 17
- column: 8
}end: {...}
- line: 17
- column: 38
}
}callee: MemberExpression {...}
- type: "MemberExpression"
- start: 360
- end: 368
loc: {...}
start: {...}
- line: 17
- column: 8
}end: {...}
- line: 17
- column: 16
}
}object: Identifier {...}
- type: "Identifier"
- start: 360
- end: 364
loc: {...}
start: {...}
- line: 17
- column: 8
}end: {...}
- line: 17
- column: 12
}
}- name: "Math"
}property: Identifier {...}
- type: "Identifier"
- start: 365
- end: 368
loc: {...}
start: {...}
- line: 17
- column: 13
}end: {...}
- line: 17
- column: 16
}
}- name: "min"
}- computed: false
- optional: false
}arguments: [...] (2)
Literal {...}
- type: "Literal"
- start: 369
- end: 372
loc: {...}
start: {...}
- line: 17
- column: 17
}end: {...}
- line: 17
- column: 20
}
}- value: 100
- raw: "100"
} BinaryExpression {...}
- type: "BinaryExpression"
- start: 374
- end: 389
loc: {...}
start: {...}
- line: 17
- column: 22
}end: {...}
- line: 17
- column: 37
}
}left: Literal {...}
- type: "Literal"
- start: 374
- end: 378
loc: {...}
start: {...}
- line: 17
- column: 22
}end: {...}
- line: 17
- column: 26
}
}- value: 1000
- raw: "1000"
}- operator: "-"
right: BinaryExpression {...}
- type: "BinaryExpression"
- start: 381
- end: 389
loc: {...}
start: {...}
- line: 17
- column: 29
}end: {...}
- line: 17
- column: 37
}
}left: Literal {...}
- type: "Literal"
- start: 381
- end: 385
loc: {...}
start: {...}
- line: 17
- column: 29
}end: {...}
- line: 17
- column: 33
}
}- value: 1000
- raw: "1000"
}- operator: "*"
right: Identifier {...}
- type: "Identifier"
- start: 388
- end: 389
loc: {...}
start: {...}
- line: 17
- column: 36
}end: {...}
- line: 17
- column: 37
}
}- name: "t"
}
}
}
]- optional: false
} CallExpression {...}
- type: "CallExpression"
- start: 402
- end: 429
loc: {...}
start: {...}
- line: 18
- column: 8
}end: {...}
- line: 18
- column: 35
}
}callee: MemberExpression {...}
- type: "MemberExpression"
- start: 402
- end: 410
loc: {...}
start: {...}
- line: 18
- column: 8
}end: {...}
- line: 18
- column: 16
}
}object: Identifier {...}
- type: "Identifier"
- start: 402
- end: 406
loc: {...}
start: {...}
- line: 18
- column: 8
}end: {...}
- line: 18
- column: 12
}
}- name: "Math"
}property: Identifier {...}
- type: "Identifier"
- start: 407
- end: 410
loc: {...}
start: {...}
- line: 18
- column: 13
}end: {...}
- line: 18
- column: 16
}
}- name: "min"
}- computed: false
- optional: false
}arguments: [...] (2)
Literal {...}
- type: "Literal"
- start: 411
- end: 413
loc: {...}
start: {...}
- line: 18
- column: 17
}end: {...}
- line: 18
- column: 19
}
}- value: 50
- raw: "50"
} BinaryExpression {...}
- type: "BinaryExpression"
- start: 415
- end: 428
loc: {...}
start: {...}
- line: 18
- column: 21
}end: {...}
- line: 18
- column: 34
}
}left: Literal {...}
- type: "Literal"
- start: 415
- end: 418
loc: {...}
start: {...}
- line: 18
- column: 21
}end: {...}
- line: 18
- column: 24
}
}- value: 500
- raw: "500"
}- operator: "-"
right: BinaryExpression {...}
- type: "BinaryExpression"
- start: 421
- end: 428
loc: {...}
start: {...}
- line: 18
- column: 27
}end: {...}
- line: 18
- column: 34
}
}left: Literal {...}
- type: "Literal"
- start: 421
- end: 424
loc: {...}
start: {...}
- line: 18
- column: 27
}end: {...}
- line: 18
- column: 30
}
}- value: 500
- raw: "500"
}- operator: "*"
right: Identifier {...}
- type: "Identifier"
- start: 427
- end: 428
loc: {...}
start: {...}
- line: 18
- column: 33
}end: {...}
- line: 18
- column: 34
}
}- name: "t"
}
}
}
]- optional: false
}
]quasis: [...] (6)
TemplateElement {...}
- type: "TemplateElement"
- start: 252
- end: 275
loc: {...}
start: {...}
- line: 13
- column: 12
}end: {...}
- line: 14
- column: 22
}
}value: {...}
- raw: "\n\t\t\t\t\ttransform: scale("
- cooked: "\n\t\t\t\t\ttransform: scale("
}- tail: false
} TemplateElement {...}
- type: "TemplateElement"
- start: 283
- end: 292
loc: {...}
start: {...}
- line: 14
- column: 30
}end: {...}
- line: 14
- column: 39
}
}value: {...}
- raw: ") rotate("
- cooked: ") rotate("
}- tail: false
} TemplateElement {...}
- type: "TemplateElement"
- start: 307
- end: 336
loc: {...}
start: {...}
- line: 14
- column: 54
}end: {...}
- line: 16
- column: 6
}
}value: {...}
- raw: "deg);\n\t\t\t\t\tcolor: hsl(\n\t\t\t\t\t\t"
- cooked: "deg);\n\t\t\t\t\tcolor: hsl(\n\t\t\t\t\t\t"
}- tail: false
} TemplateElement {...}
- type: "TemplateElement"
- start: 350
- end: 358
loc: {...}
start: {...}
- line: 16
- column: 20
}end: {...}
- line: 17
- column: 6
}
}value: {...}
- raw: ",\n\t\t\t\t\t\t"
- cooked: ",\n\t\t\t\t\t\t"
}- tail: false
} TemplateElement {...}
- type: "TemplateElement"
- start: 391
- end: 400
loc: {...}
start: {...}
- line: 17
- column: 39
}end: {...}
- line: 18
- column: 6
}
}value: {...}
- raw: "%,\n\t\t\t\t\t\t"
- cooked: "%,\n\t\t\t\t\t\t"
}- tail: false
} TemplateElement {...}
- type: "TemplateElement"
- start: 430
- end: 439
loc: {...}
start: {...}
- line: 18
- column: 36
}end: {...}
- line: 19
- column: 7
}
}value: {...}
- raw: "%\n\t\t\t\t\t);"
- cooked: "%\n\t\t\t\t\t);"
}- tail: true
}
]
}
}
]
}
}- kind: "init"
}
]
}
}
]
}
}
]- sourceType: "module"
}- attributes: []
}
}
The AST is not public API and may change at any point in time