Dynamic CSS Variables • Playground • Svelte

App.svelte

let styles = {

'note-bg-color': '#f4ed2a',

'note-color': '#FF5555',

'bg': '#AAAAAA',

};

$: cssVarStyles = Object.entries(styles)

.map(([key, value]) => `--${key}:${value}`)

.join(';');

// Or just this is fine too.

// let noteBgColor = '#f4ed2a';

// let noteColor = '#FF5555';

// $: cssVarStyles = `--note-color:${noteColor};--note-bg-color:${noteBgColor}`;

</script>

<style>

#top {

background-color: var(--bg, lightgray);

height: 100%;

}

.note {

color: var(--note-color, tomato);

background-color: var(--note-bg-color, lightgray);

}

.yellow-theme {

--note-color: black;

--note-bg-color: khaki;

}

.purple-note-text {

--note-color: rebeccapurple;

}

import 'svelte/internal/disclose-version';

import 'svelte/internal/flags/legacy';

import * as $ from 'svelte/internal/client';

var root = $.template(`<div id="top" class="svelte-15prkoc"><h1 class="note svelte-15prkoc" style="font-weight:600">Some text!</h1> <p>But the variables we manually set below can still override the dynamic ones.</p> <div class="yellow-theme svelte-15prkoc"><p class="note svelte-15prkoc">For that yellow notepad look.</p> <p class="note purple-note-text svelte-15prkoc">Or with purple</p></div> <label><input style="padding:0" type="color"> Note Text Color</label> <label><input style="padding:0" type="color"> Note Background Color</label> <label><input style="padding:0" type="color"> Page Background Color</label></div>`);

export default function App($$anchor, $$props) {

$.push($$props, false);

const cssVarStyles = $.mutable_state();

let styles = $.mutable_state({

'note-bg-color': '#f4ed2a',

'note-color': '#FF5555',

'bg': '#AAAAAA'

});

$.legacy_pre_effect(() => ($.get(styles)), () => {

$.set(cssVarStyles, Object.entries($.get(styles)).map(([key, value]) => `--${key}:${value}`).join(';'));

});

$.legacy_pre_effect_reset();

$.init();

var div = root();

var label = $.sibling($.child(div), 6);

var input = $.child(label);

$.remove_input_defaults(input);

$.next();

$.reset(label);

var label_1 = $.sibling(label, 2);

var input_1 = $.child(label_1);

$.remove_input_defaults(input_1);

result = svelte.compile(source, {

generate: "client" "server",

dev: false });

#top.svelte-15prkoc {

background-color: var(--bg, lightgray);

height: 100%;

}

.note.svelte-15prkoc {

color: var(--note-color, tomato);

background-color: var(--note-bg-color, lightgray);

}

.yellow-theme.svelte-15prkoc {

--note-color: black;

--note-bg-color: khaki;

}

.purple-note-text.svelte-15prkoc {

--note-color: rebeccapurple;

}

		
			
				
					 Root {
 css: StyleSheet {...}
 type: "StyleSheet"
start: 398
end: 715
attributes: []
children: [...] (4)
  Rule {...}
 type: "Rule"
prelude: SelectorList {...}
 type: "SelectorList"
start: 407
end: 411
children: [...] (1)
  ComplexSelector {...}
 type: "ComplexSelector"
start: 407
end: 411
children: [...] (1)
  RelativeSelector {...}
 type: "RelativeSelector"
combinator: null
selectors: [...] (1)
  IdSelector {...}
 type: "IdSelector"
name: "top"
start: 407
end: 411
 }
 ]
start: 407
end: 411
 }
 ]
 }
 ]
 }
block: Block {...}
 type: "Block"
start: 412
end: 474
children: [...] (2)
  Declaration {...}
 type: "Declaration"
start: 416
end: 454
property: "background-color"
value: "var(--bg, lightgray)"
 }
 Declaration {...}
 type: "Declaration"
start: 458
end: 470
property: "height"
value: "100%"
 }
 ]
 }
start: 407
end: 474
 }
 Rule {...}
 type: "Rule"
prelude: SelectorList {...}
 type: "SelectorList"
start: 478
end: 483
children: [...] (1)
  ComplexSelector {...}
 type: "ComplexSelector"
start: 478
end: 483
children: [...] (1)
  RelativeSelector {...}
 type: "RelativeSelector"
combinator: null
selectors: [...] (1)
  ClassSelector {...}
 type: "ClassSelector"
name: "note"
start: 478
end: 483
 }
 ]
start: 478
end: 483
 }
 ]
 }
 ]
 }
block: Block {...}
 type: "Block"
start: 484
end: 577
children: [...] (2)
  Declaration {...}
 type: "Declaration"
start: 488
end: 520
property: "color"
value: "var(--note-color, tomato)"
 }
 Declaration {...}
 type: "Declaration"
start: 524
end: 573
property: "background-color"
value: "var(--note-bg-color, lightgray)"
 }
 ]
 }
start: 478
end: 577
 }
 Rule {...}
 type: "Rule"
prelude: SelectorList {...}
 type: "SelectorList"
start: 580
end: 593
children: [...] (1)
  ComplexSelector {...}
 type: "ComplexSelector"
start: 580
end: 593
children: [...] (1)
  RelativeSelector {...}
 type: "RelativeSelector"
combinator: null
selectors: [...] (1)
  ClassSelector {...}
 type: "ClassSelector"
name: "yellow-theme"
start: 580
end: 593
 }
 ]
start: 580
end: 593
 }
 ]
 }
 ]
 }
block: Block {...}
 type: "Block"
start: 594
end: 647
children: [...] (2)
  Declaration {...}
 type: "Declaration"
start: 598
end: 617
property: "--note-color"
value: "black"
 }
 Declaration {...}
 type: "Declaration"
start: 621
end: 643
property: "--note-bg-color"
value: "khaki"
 }
 ]
 }
start: 580
end: 647
 }
 Rule {...}
 type: "Rule"
prelude: SelectorList {...}
 type: "SelectorList"
start: 650
end: 667
children: [...] (1)
  ComplexSelector {...}
 type: "ComplexSelector"
start: 650
end: 667
children: [...] (1)
  RelativeSelector {...}
 type: "RelativeSelector"
combinator: null
selectors: [...] (1)
  ClassSelector {...}
 type: "ClassSelector"
name: "purple-note-text"
start: 650
end: 667
 }
 ]
start: 650
end: 667
 }
 ]
 }
 ]
 }
block: Block {...}
 type: "Block"
start: 668
end: 705
children: [...] (1)
  Declaration {...}
 type: "Declaration"
start: 672
end: 699
property: "--note-color"
value: "rebeccapurple"
 }
 ]
 }
start: 650
end: 705
 }
 ]
content:  {...}
 start: 405
end: 707
styles: "\n\t#top {\n\t\tbackground-color: var(--bg, lightgray);\n\t\theight: 100%;\n\t}\n\t\n\t.note {\n\t\tcolor: var(--note-color, tomato);\n\t\tbackground-color: var(--note-bg-color, lightgray);\n\t}\n\n\t.yellow-theme {\n\t\t--note-color: black;\n\t\t--note-bg-color: khaki;\n\t}\n\n\t.purple-note-text {\n\t\t--note-color: rebeccapurple;\n   } \n"
comment: null
 }
 }
js: []
start: 398
end: 1421
type: "Root"
fragment: Fragment {...}
 type: "Fragment"
nodes: [...] (3)
  Text {...}
 type: "Text"
start: 396
end: 398
raw: "\n\n"
data: "\n\n"
 }
 Text {...}
 type: "Text"
start: 715
end: 717
raw: "\n\n"
data: "\n\n"
 }
 RegularElement {...}
 type: "RegularElement"
start: 717
end: 1421
name: "div"
attributes: [...] (3)
  Attribute {...}
 type: "Attribute"
start: 722
end: 730
name: "id"
value: [...] (1)
  Text {...}
 start: 726
end: 729
type: "Text"
raw: "top"
data: "top"
 }
 ]
 }
 Attribute {...}
 type: "Attribute"
start: 731
end: 753
name: "style"
value: [...] (1)
  ExpressionTag {...}
 type: "ExpressionTag"
start: 738
end: 752
expression: Identifier {...}
 type: "Identifier"
start: 739
end: 751
loc:  {...}
 start:  {...}
 line: 39
column: 22
 }
end:  {...}
 line: 39
column: 34
 }
 }
name: "cssVarStyles"
 }
 }
 ]
 }
 Attribute {...}
 type: "Attribute"
start: -1
end: -1
name: "class"
value: [...] (1)
  Text {...}
 type: "Text"
data: ""
raw: ""
start: -1
end: -1
 }
 ]
 }
 ]
fragment: Fragment {...}
 type: "Fragment"
nodes: [...] (13)
  Text {...}
 type: "Text"
start: 754
end: 756
raw: "\n\t"
data: "\n\t"
 }
 RegularElement {...}
 type: "RegularElement"
start: 756
end: 812
name: "h1"
attributes: [...] (2)
  Attribute {...}
 type: "Attribute"
start: 760
end: 772
name: "class"
value: [...] (1)
  Text {...}
 start: 767
end: 771
type: "Text"
raw: "note"
data: "note"
 }
 ]
 }
 Attribute {...}
 type: "Attribute"
start: 773
end: 796
name: "style"
value: [...] (1)
  Text {...}
 start: 780
end: 795
type: "Text"
raw: "font-weight:600"
data: "font-weight:600"
 }
 ]
 }
 ]
fragment: Fragment {...}
 type: "Fragment"
nodes: [...] (1)
  Text {...}
 type: "Text"
start: 797
end: 807
raw: "Some text!"
data: "Some text!"
 }
 ]
 }
 }
 Text {...}
 type: "Text"
start: 812
end: 815
raw: " "
data: " "
 }
 RegularElement {...}
 type: "RegularElement"
start: 815
end: 903
name: "p"
attributes: []
fragment: Fragment {...}
 type: "Fragment"
nodes: [...] (1)
  Text {...}
 type: "Text"
start: 818
end: 899
raw: "But the variables we manually set below can still override the dynamic ones."
data: "But the variables we manually set below can still override the dynamic ones."
 }
 ]
 }
 }
 Text {...}
 type: "Text"
start: 903
end: 905
raw: " "
data: " "
 }
 RegularElement {...}
 type: "RegularElement"
start: 905
end: 1053
name: "div"
attributes: [...] (1)
  Attribute {...}
 type: "Attribute"
start: 910
end: 930
name: "class"
value: [...] (1)
  Text {...}
 start: 917
end: 929
type: "Text"
raw: "yellow-theme"
data: "yellow-theme"
 }
 ]
 }
 ]
fragment: Fragment {...}
 type: "Fragment"
nodes: [...] (5)
  Text {...}
 type: "Text"
start: 931
end: 937
raw: "\n     "
data: "\n     "
 }
 RegularElement {...}
 type: "RegularElement"
start: 937
end: 986
name: "p"
attributes: [...] (1)
  Attribute {...}
 type: "Attribute"
start: 940
end: 952
name: "class"
value: [...] (1)
  Text {...}
 start: 947
end: 951
type: "Text"
raw: "note"
data: "note"
 }
 ]
 }
 ]
fragment: Fragment {...}
 type: "Fragment"
nodes: [...] (1)
  Text {...}
 type: "Text"
start: 953
end: 982
raw: "For that yellow notepad look."
data: "For that yellow notepad look."
 }
 ]
 }
 }
 Text {...}
 type: "Text"
start: 986
end: 993
raw: " "
data: " "
 }
 RegularElement {...}
 type: "RegularElement"
start: 993
end: 1044
name: "p"
attributes: [...] (1)
  Attribute {...}
 type: "Attribute"
start: 996
end: 1025
name: "class"
value: [...] (1)
  Text {...}
 start: 1003
end: 1024
type: "Text"
raw: "note purple-note-text"
data: "note purple-note-text"
 }
 ]
 }
 ]
fragment: Fragment {...}
 type: "Fragment"
nodes: [...] (1)
  Text {...}
 type: "Text"
start: 1026
end: 1040
raw: "Or with purple"
data: "Or with purple"
 }
 ]
 }
 }
 Text {...}
 type: "Text"
start: 1044
end: 1047
raw: "\n  "
data: "\n  "
 }
 ]
 }
 }
 Text {...}
 type: "Text"
start: 1053
end: 1056
raw: " "
data: " "
 }
 RegularElement {...}
 type: "RegularElement"
start: 1056
end: 1169
name: "label"
attributes: []
fragment: Fragment {...}
 type: "Fragment"
nodes: [...] (3)
  Text {...}
 type: "Text"
start: 1063
end: 1066
raw: "\n\t\t"
data: "\n\t\t"
 }
 RegularElement {...}
 type: "RegularElement"
start: 1066
end: 1140
name: "input"
attributes: [...] (3)
  Attribute {...}
 type: "Attribute"
start: 1073
end: 1090
name: "style"
value: [...] (1)
  Text {...}
 start: 1080
end: 1089
type: "Text"
raw: "padding:0"
data: "padding:0"
 }
 ]
 }
 Attribute {...}
 type: "Attribute"
start: 1091
end: 1103
name: "type"
value: [...] (1)
  Text {...}
 start: 1097
end: 1102
type: "Text"
raw: "color"
data: "color"
 }
 ]
 }
 BindDirective {...}
 start: 1104
end: 1137
type: "BindDirective"
name: "value"
expression: MemberExpression {...}
 type: "MemberExpression"
start: 1116
end: 1136
loc:  {...}
 start:  {...}
 line: 52
column: 52
 }
end:  {...}
 line: 52
column: 72
 }
 }
object: Identifier {...}
 type: "Identifier"
start: 1116
end: 1122
loc:  {...}
 start:  {...}
 line: 52
column: 52
 }
end:  {...}
 line: 52
column: 58
 }
 }
name: "styles"
 }
property: Literal {...}
 type: "Literal"
start: 1123
end: 1135
loc:  {...}
 start:  {...}
 line: 52
column: 59
 }
end:  {...}
 line: 52
column: 71
 }
 }
value: "note-color"
raw: "'note-color'"
 }
computed: true
optional: false
 }
modifiers: []
 }
 ]
fragment: Fragment {...}
 type: "Fragment"
nodes: []
 }
 }
 Text {...}
 type: "Text"
start: 1140
end: 1161
raw: " Note Text Color"
data: " Note Text Color"
 }
 ]
 }
 }
 Text {...}
 type: "Text"
start: 1169
end: 1172
raw: " "
data: " "
 }
 RegularElement {...}
 type: "RegularElement"
start: 1172
end: 1294
name: "label"
attributes: []
fragment: Fragment {...}
 type: "Fragment"
nodes: [...] (3)
  Text {...}
 type: "Text"
start: 1179
end: 1182
raw: "\n\t\t"
data: "\n\t\t"
 }
 RegularElement {...}
 type: "RegularElement"
start: 1182
end: 1259
name: "input"
attributes: [...] (3)
  Attribute {...}
 type: "Attribute"
start: 1189
end: 1206
name: "style"
value: [...] (1)
  Text {...}
 start: 1196
end: 1205
type: "Text"
raw: "padding:0"
data: "padding:0"
 }
 ]
 }
 Attribute {...}
 type: "Attribute"
start: 1207
end: 1219
name: "type"
value: [...] (1)
  Text {...}
 start: 1213
end: 1218
type: "Text"
raw: "color"
data: "color"
 }
 ]
 }
 BindDirective {...}
 start: 1220
end: 1256
type: "BindDirective"
name: "value"
expression: MemberExpression {...}
 type: "MemberExpression"
start: 1232
end: 1255
loc:  {...}
 start:  {...}
 line: 57
column: 52
 }
end:  {...}
 line: 57
column: 75
 }
 }
object: Identifier {...}
 type: "Identifier"
start: 1232
end: 1238
loc:  {...}
 start:  {...}
 line: 57
column: 52
 }
end:  {...}
 line: 57
column: 58
 }
 }
name: "styles"
 }
property: Literal {...}
 type: "Literal"
start: 1239
end: 1254
loc:  {...}
 start:  {...}
 line: 57
column: 59
 }
end:  {...}
 line: 57
column: 74
 }
 }
value: "note-bg-color"
raw: "'note-bg-color'"
 }
computed: true
optional: false
 }
modifiers: []
 }
 ]
fragment: Fragment {...}
 type: "Fragment"
nodes: []
 }
 }
 Text {...}
 type: "Text"
start: 1259
end: 1286
raw: " Note Background Color"
data: " Note Background Color"
 }
 ]
 }
 }
 Text {...}
 type: "Text"
start: 1294
end: 1299
raw: " "
data: " "
 }
 RegularElement {...}
 type: "RegularElement"
start: 1299
end: 1412
name: "label"
attributes: []
fragment: Fragment {...}
 type: "Fragment"
nodes: [...] (3)
  Text {...}
 type: "Text"
start: 1306
end: 1309
raw: "\n\t\t"
data: "\n\t\t"
 }
 RegularElement {...}
 type: "RegularElement"
start: 1309
end: 1375
name: "input"
attributes: [...] (3)
  Attribute {...}
 type: "Attribute"
start: 1316
end: 1333
name: "style"
value: [...] (1)
  Text {...}
 start: 1323
end: 1332
type: "Text"
raw: "padding:0"
data: "padding:0"
 }
 ]
 }
 Attribute {...}
 type: "Attribute"
start: 1334
end: 1346
name: "type"
value: [...] (1)
  Text {...}
 start: 1340
end: 1345
type: "Text"
raw: "color"
data: "color"
 }
 ]
 }
 BindDirective {...}
 start: 1347
end: 1372
type: "BindDirective"
name: "value"
expression: MemberExpression {...}
 type: "MemberExpression"
start: 1359
end: 1371
loc:  {...}
 start:  {...}
 line: 62
column: 52
 }
end:  {...}
 line: 62
column: 64
 }
 }
object: Identifier {...}
 type: "Identifier"
start: 1359
end: 1365
loc:  {...}
 start:  {...}
 line: 62
column: 52
 }
end:  {...}
 line: 62
column: 58
 }
 }
name: "styles"
 }
property: Literal {...}
 type: "Literal"
start: 1366
end: 1370
loc:  {...}
 start:  {...}
 line: 62
column: 59
 }
end:  {...}
 line: 62
column: 63
 }
 }
value: "bg"
raw: "'bg'"
 }
computed: true
optional: false
 }
modifiers: []
 }
 ]
fragment: Fragment {...}
 type: "Fragment"
nodes: []
 }
 }
 Text {...}
 type: "Text"
start: 1375
end: 1404
raw: " Page Background Color"
data: " Page Background Color"
 }
 ]
 }
 }
 Text {...}
 type: "Text"
start: 1412
end: 1415
raw: "\n\t\n"
data: "\n\t\n"
 }
 ]
 }
 }
 ]
 }
options: null
instance: Script {...}
 type: "Script"
start: 0
end: 396
context: "default"
content: Program {...}
 type: "Program"
start: 8
end: 387
loc:  {...}
 start:  {...}
 line: 1
column: 0
 }
end:  {...}
 line: 16
column: 0
 }
 }
body: [...] (2)
  VariableDeclaration {...}
 type: "VariableDeclaration"
start: 10
end: 104
loc:  {...}
 start:  {...}
 line: 2
column: 1
 }
end:  {...}
 line: 6
column: 3
 }
 }
declarations: [...] (1)
  VariableDeclarator {...}
 type: "VariableDeclarator"
start: 14
end: 103
loc:  {...}
 start:  {...}
 line: 2
column: 5
 }
end:  {...}
 line: 6
column: 2
 }
 }
id: Identifier {...}
 type: "Identifier"
start: 14
end: 20
loc:  {...}
 start:  {...}
 line: 2
column: 5
 }
end:  {...}
 line: 2
column: 11
 }
 }
name: "styles"
 }
init: ObjectExpression {...}
 type: "ObjectExpression"
start: 23
end: 103
loc:  {...}
 start:  {...}
 line: 2
column: 14
 }
end:  {...}
 line: 6
column: 2
 }
 }
properties: [...] (3)
  Property {...}
 type: "Property"
start: 27
end: 53
loc:  {...}
 start:  {...}
 line: 3
column: 2
 }
end:  {...}
 line: 3
column: 28
 }
 }
method: false
shorthand: false
computed: false
key: Literal {...}
 type: "Literal"
start: 27
end: 42
loc:  {...}
 start:  {...}
 line: 3
column: 2
 }
end:  {...}
 line: 3
column: 17
 }
 }
value: "note-bg-color"
raw: "'note-bg-color'"
 }
value: Literal {...}
 type: "Literal"
start: 44
end: 53
loc:  {...}
 start:  {...}
 line: 3
column: 19
 }
end:  {...}
 line: 3
column: 28
 }
 }
value: "#f4ed2a"
raw: "'#f4ed2a'"
 }
kind: "init"
 }
 Property {...}
 type: "Property"
start: 57
end: 80
loc:  {...}
 start:  {...}
 line: 4
column: 2
 }
end:  {...}
 line: 4
column: 25
 }
 }
method: false
shorthand: false
computed: false
key: Literal {...}
 type: "Literal"
start: 57
end: 69
loc:  {...}
 start:  {...}
 line: 4
column: 2
 }
end:  {...}
 line: 4
column: 14
 }
 }
value: "note-color"
raw: "'note-color'"
 }
value: Literal {...}
 type: "Literal"
start: 71
end: 80
loc:  {...}
 start:  {...}
 line: 4
column: 16
 }
end:  {...}
 line: 4
column: 25
 }
 }
value: "#FF5555"
raw: "'#FF5555'"
 }
kind: "init"
 }
 Property {...}
 type: "Property"
start: 84
end: 99
loc:  {...}
 start:  {...}
 line: 5
column: 2
 }
end:  {...}
 line: 5
column: 17
 }
 }
method: false
shorthand: false
computed: false
key: Literal {...}
 type: "Literal"
start: 84
end: 88
loc:  {...}
 start:  {...}
 line: 5
column: 2
 }
end:  {...}
 line: 5
column: 6
 }
 }
value: "bg"
raw: "'bg'"
 }
value: Literal {...}
 type: "Literal"
start: 90
end: 99
loc:  {...}
 start:  {...}
 line: 5
column: 8
 }
end:  {...}
 line: 5
column: 17
 }
 }
value: "#AAAAAA"
raw: "'#AAAAAA'"
 }
kind: "init"
 }
 ]
 }
 }
 ]
kind: "let"
 }
 LabeledStatement {...}
 type: "LabeledStatement"
start: 108
end: 208
loc:  {...}
 start:  {...}
 line: 8
column: 1
 }
end:  {...}
 line: 10
column: 13
 }
 }
body: ExpressionStatement {...}
 type: "ExpressionStatement"
start: 111
end: 208
loc:  {...}
 start:  {...}
 line: 8
column: 4
 }
end:  {...}
 line: 10
column: 13
 }
 }
expression: AssignmentExpression {...}
 type: "AssignmentExpression"
start: 111
end: 207
loc:  {...}
 start:  {...}
 line: 8
column: 4
 }
end:  {...}
 line: 10
column: 12
 }
 }
operator: "="
left: Identifier {...}
 type: "Identifier"
start: 111
end: 123
loc:  {...}
 start:  {...}
 line: 8
column: 4
 }
end:  {...}
 line: 8
column: 16
 }
 }
name: "cssVarStyles"
 }
right: CallExpression {...}
 type: "CallExpression"
start: 126
end: 207
loc:  {...}
 start:  {...}
 line: 8
column: 19
 }
end:  {...}
 line: 10
column: 12
 }
 }
callee: MemberExpression {...}
 type: "MemberExpression"
start: 126
end: 202
loc:  {...}
 start:  {...}
 line: 8
column: 19
 }
end:  {...}
 line: 10
column: 7
 }
 }
object: CallExpression {...}
 type: "CallExpression"
start: 126
end: 194
loc:  {...}
 start:  {...}
 line: 8
column: 19
 }
end:  {...}
 line: 9
column: 45
 }
 }
callee: MemberExpression {...}
 type: "MemberExpression"
start: 126
end: 155
loc:  {...}
 start:  {...}
 line: 8
column: 19
 }
end:  {...}
 line: 9
column: 6
 }
 }
object: CallExpression {...}
 type: "CallExpression"
start: 126
end: 148
loc:  {...}
 start:  {...}
 line: 8
column: 19
 }
end:  {...}
 line: 8
column: 41
 }
 }
callee: MemberExpression {...}
 type: "MemberExpression"
start: 126
end: 140
loc:  {...}
 start:  {...}
 line: 8
column: 19
 }
end:  {...}
 line: 8
column: 33
 }
 }
object: Identifier {...}
 type: "Identifier"
start: 126
end: 132
loc:  {...}
 start:  {...}
 line: 8
column: 19
 }
end:  {...}
 line: 8
column: 25
 }
 }
name: "Object"
 }
property: Identifier {...}
 type: "Identifier"
start: 133
end: 140
loc:  {...}
 start:  {...}
 line: 8
column: 26
 }
end:  {...}
 line: 8
column: 33
 }
 }
name: "entries"
 }
computed: false
optional: false
 }
arguments: [...] (1)
  Identifier {...}
 type: "Identifier"
start: 141
end: 147
loc:  {...}
 start:  {...}
 line: 8
column: 34
 }
end:  {...}
 line: 8
column: 40
 }
 }
name: "styles"
 }
 ]
optional: false
 }
property: Identifier {...}
 type: "Identifier"
start: 152
end: 155
loc:  {...}
 start:  {...}
 line: 9
column: 3
 }
end:  {...}
 line: 9
column: 6
 }
 }
name: "map"
 }
computed: false
optional: false
 }
arguments: [...] (1)
  ArrowFunctionExpression {...}
 type: "ArrowFunctionExpression"
start: 156
end: 193
loc:  {...}
 start:  {...}
 line: 9
column: 7
 }
end:  {...}
 line: 9
column: 44
 }
 }
id: null
expression: true
generator: false
async: false
params: [...] (1)
  ArrayPattern {...}
 type: "ArrayPattern"
start: 157
end: 169
loc:  {...}
 start:  {...}
 line: 9
column: 8
 }
end:  {...}
 line: 9
column: 20
 }
 }
elements: [...] (2)
  Identifier {...}
 type: "Identifier"
start: 158
end: 161
loc:  {...}
 start:  {...}
 line: 9
column: 9
 }
end:  {...}
 line: 9
column: 12
 }
 }
name: "key"
 }
 Identifier {...}
 type: "Identifier"
start: 163
end: 168
loc:  {...}
 start:  {...}
 line: 9
column: 14
 }
end:  {...}
 line: 9
column: 19
 }
 }
name: "value"
 }
 ]
 }
 ]
body: TemplateLiteral {...}
 type: "TemplateLiteral"
start: 174
end: 193
loc:  {...}
 start:  {...}
 line: 9
column: 25
 }
end:  {...}
 line: 9
column: 44
 }
 }
expressions: [...] (2)
  Identifier {...}
 type: "Identifier"
start: 179
end: 182
loc:  {...}
 start:  {...}
 line: 9
column: 30
 }
end:  {...}
 line: 9
column: 33
 }
 }
name: "key"
 }
 Identifier {...}
 type: "Identifier"
start: 186
end: 191
loc:  {...}
 start:  {...}
 line: 9
column: 37
 }
end:  {...}
 line: 9
column: 42
 }
 }
name: "value"
 }
 ]
quasis: [...] (3)
  TemplateElement {...}
 type: "TemplateElement"
start: 175
end: 177
loc:  {...}
 start:  {...}
 line: 9
column: 26
 }
end:  {...}
 line: 9
column: 28
 }
 }
value:  {...}
 raw: "--"
cooked: "--"
 }
tail: false
 }
 TemplateElement {...}
 type: "TemplateElement"
start: 183
end: 184
loc:  {...}
 start:  {...}
 line: 9
column: 34
 }
end:  {...}
 line: 9
column: 35
 }
 }
value:  {...}
 raw: ":"
cooked: ":"
 }
tail: false
 }
 TemplateElement {...}
 type: "TemplateElement"
start: 192
end: 192
loc:  {...}
 start:  {...}
 line: 9
column: 43
 }
end:  {...}
 line: 9
column: 43
 }
 }
value:  {...}
 raw: ""
cooked: ""
 }
tail: true
 }
 ]
 }
 }
 ]
optional: false
 }
property: Identifier {...}
 type: "Identifier"
start: 198
end: 202
loc:  {...}
 start:  {...}
 line: 10
column: 3
 }
end:  {...}
 line: 10
column: 7
 }
 }
name: "join"
 }
computed: false
optional: false
 }
arguments: [...] (1)
  Literal {...}
 type: "Literal"
start: 203
end: 206
loc:  {...}
 start:  {...}
 line: 10
column: 8
 }
end:  {...}
 line: 10
column: 11
 }
 }
value: ";"
raw: "';'"
 }
 ]
optional: false
 }
 }
 }
label: Identifier {...}
 type: "Identifier"
start: 108
end: 109
loc:  {...}
 start:  {...}
 line: 8
column: 1
 }
end:  {...}
 line: 8
column: 2
 }
 }
name: "$"
 }
trailingComments: [...] (4)
  Line {...}
 type: "Line"
value: " Or just this is fine too."
start: 212
end: 240
 }
 Line {...}
 type: "Line"
value: " let noteBgColor = '#f4ed2a';"
start: 242
end: 273
 }
 Line {...}
 type: "Line"
value: " let noteColor = '#FF5555';"
start: 275
end: 304
 }
 Line {...}
 type: "Line"
value: " $: cssVarStyles = `--note-color:${noteColor};--note-bg-color:${noteBgColor}`;"
start: 306
end: 386
 }
 ]
 }
 ]
sourceType: "module"
 }
attributes: []
 }
 }

The AST is not public API and may change at any point in time

modern