Create new
Bindings
Transitions
Animations
Easing
Component composition
Context API
Special elements
Module context
Debugging
Miscellaneous
App.svelte
ColorSetting.svelte
styleManager.js
runes
This component is not in runes mode.
To enable runes mode, either start using runes in your code, or add the following to the top of your component:
<svelte:options runes />
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 ColorSetting from './ColorSetting.svelte';
</script>
<style>
:root {
background-color: var(--bg, lightgray);
}
.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;
}
</style>
<div>
<h1 class="note" style="font-weight:600">Same as the last example, but applied on the HTML element</h1>
<p>
But the variables we manually set below can still override the dynamic ones.
</p>
<div class="yellow-theme">
<p class="note">For that yellow notepad look.</p>
<p class="note purple-note-text">Or with purple</p>
</div>
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
›
⌄
⌄
⌄
⌄
import 'svelte/internal/disclose-version';
import 'svelte/internal/flags/legacy';
import * as $ from 'svelte/internal/client';
import ColorSetting from './ColorSetting.svelte';
var root = $.template(`<div><h1 class="note svelte-1s8ihik" style="font-weight:600">Same as the last example, but applied on the HTML element</h1> <p>But the variables we manually set below can still override the dynamic ones.</p> <div class="yellow-theme svelte-1s8ihik"><p class="note svelte-1s8ihik">For that yellow notepad look.</p> <p class="note purple-note-text svelte-1s8ihik">Or with purple</p></div></div> <!> <!> <!>`, 1);
export default function App($$anchor) {
var fragment = root();
var node = $.sibling($.first_child(fragment), 2);
ColorSetting(node, {
key: 'note-color',
label: 'Note Text Color',
value: '#FF5555'
});
var node_1 = $.sibling(node, 2);
ColorSetting(node_1, {
key: 'note-bg-color',
label: 'Note BG Color',
value: '#f4ed2a'
});
var node_2 = $.sibling(node_1, 2);
ColorSetting(node_2, {
key: 'bg',
label: 'Page Background',
value: '#BBBBBB'
});
$.append($$anchor, fragment);
}
result = svelte.compile(source, {
generate: ,
});99
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
›
:root {
background-color: var(--bg, lightgray);
}
.note.svelte-1s8ihik {
color: var(--note-color, tomato);
background-color: var(--note-bg-color, lightgray);
}
.yellow-theme.svelte-1s8ihik {
--note-color: black;
--note-bg-color: khaki;
}
.purple-note-text.svelte-1s8ihik {
--note-color: rebeccapurple;
}
Root {
css: StyleSheet {...}
- type: "StyleSheet"
- start: 71
- end: 373
- attributes: []
children: [...] (4)
Rule {...}
- type: "Rule"
prelude: SelectorList {...}
- type: "SelectorList"
- start: 80
- end: 85
children: [...] (1)
ComplexSelector {...}
- type: "ComplexSelector"
- start: 80
- end: 85
children: [...] (1)
RelativeSelector {...}
- type: "RelativeSelector"
- combinator: null
selectors: [...] (1)
PseudoClassSelector {...}
- type: "PseudoClassSelector"
- name: "root"
- args: null
- start: 80
- end: 85
}
]- start: 80
- end: 85
}
]
}
]
}block: Block {...}
- type: "Block"
- start: 86
- end: 132
children: [...] (1)
Declaration {...}
- type: "Declaration"
- start: 90
- end: 128
- property: "background-color"
- value: "var(--bg, lightgray)"
}
]
}- start: 80
- end: 132
} Rule {...}
- type: "Rule"
prelude: SelectorList {...}
- type: "SelectorList"
- start: 136
- end: 141
children: [...] (1)
ComplexSelector {...}
- type: "ComplexSelector"
- start: 136
- end: 141
children: [...] (1)
RelativeSelector {...}
- type: "RelativeSelector"
- combinator: null
selectors: [...] (1)
ClassSelector {...}
- type: "ClassSelector"
- name: "note"
- start: 136
- end: 141
}
]- start: 136
- end: 141
}
]
}
]
}block: Block {...}
- type: "Block"
- start: 142
- end: 235
children: [...] (2)
Declaration {...}
- type: "Declaration"
- start: 146
- end: 178
- property: "color"
- value: "var(--note-color, tomato)"
} Declaration {...}
- type: "Declaration"
- start: 182
- end: 231
- property: "background-color"
- value: "var(--note-bg-color, lightgray)"
}
]
}- start: 136
- end: 235
} Rule {...}
- type: "Rule"
prelude: SelectorList {...}
- type: "SelectorList"
- start: 238
- end: 251
children: [...] (1)
ComplexSelector {...}
- type: "ComplexSelector"
- start: 238
- end: 251
children: [...] (1)
RelativeSelector {...}
- type: "RelativeSelector"
- combinator: null
selectors: [...] (1)
ClassSelector {...}
- type: "ClassSelector"
- name: "yellow-theme"
- start: 238
- end: 251
}
]- start: 238
- end: 251
}
]
}
]
}block: Block {...}
- type: "Block"
- start: 252
- end: 305
children: [...] (2)
Declaration {...}
- type: "Declaration"
- start: 256
- end: 275
- property: "--note-color"
- value: "black"
} Declaration {...}
- type: "Declaration"
- start: 279
- end: 301
- property: "--note-bg-color"
- value: "khaki"
}
]
}- start: 238
- end: 305
} Rule {...}
- type: "Rule"
prelude: SelectorList {...}
- type: "SelectorList"
- start: 308
- end: 325
children: [...] (1)
ComplexSelector {...}
- type: "ComplexSelector"
- start: 308
- end: 325
children: [...] (1)
RelativeSelector {...}
- type: "RelativeSelector"
- combinator: null
selectors: [...] (1)
ClassSelector {...}
- type: "ClassSelector"
- name: "purple-note-text"
- start: 308
- end: 325
}
]- start: 308
- end: 325
}
]
}
]
}block: Block {...}
- type: "Block"
- start: 326
- end: 363
children: [...] (1)
Declaration {...}
- type: "Declaration"
- start: 330
- end: 357
- property: "--note-color"
- value: "rebeccapurple"
}
]
}- start: 308
- end: 363
}
]content: {...}
- start: 78
- end: 365
- styles: "\n\t:root {\n\t\tbackground-color: var(--bg, lightgray);\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: 71
- end: 952
- type: "Root"
fragment: Fragment {...}
- type: "Fragment"
nodes: [...] (9)
Text {...}
- type: "Text"
- start: 69
- end: 71
- raw: "\n\n"
- data: "\n\n"
} Text {...}
- type: "Text"
- start: 373
- end: 375
- raw: "\n\n"
- data: "\n\n"
} RegularElement {...}
- type: "RegularElement"
- start: 375
- end: 736
- name: "div"
- attributes: []
fragment: Fragment {...}
- type: "Fragment"
nodes: [...] (7)
Text {...}
- type: "Text"
- start: 380
- end: 382
- raw: "\n\t"
- data: "\n\t"
} RegularElement {...}
- type: "RegularElement"
- start: 382
- end: 486
- name: "h1"
attributes: [...] (2)
Attribute {...}
- type: "Attribute"
- start: 386
- end: 398
- name: "class"
value: [...] (1)
Text {...}
- start: 393
- end: 397
- type: "Text"
- raw: "note"
- data: "note"
}
]
} Attribute {...}
- type: "Attribute"
- start: 399
- end: 422
- name: "style"
value: [...] (1)
Text {...}
- start: 406
- end: 421
- type: "Text"
- raw: "font-weight:600"
- data: "font-weight:600"
}
]
}
]fragment: Fragment {...}
- type: "Fragment"
nodes: [...] (1)
Text {...}
- type: "Text"
- start: 423
- end: 481
- raw: "Same as the last example, but applied on the HTML element"
- data: "Same as the last example, but applied on the HTML element"
}
]
}
} Text {...}
- type: "Text"
- start: 486
- end: 489
- raw: " "
- data: " "
} RegularElement {...}
- type: "RegularElement"
- start: 489
- end: 577
- name: "p"
- attributes: []
fragment: Fragment {...}
- type: "Fragment"
nodes: [...] (1)
Text {...}
- type: "Text"
- start: 492
- end: 573
- 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: 577
- end: 579
- raw: " "
- data: " "
} RegularElement {...}
- type: "RegularElement"
- start: 579
- end: 728
- name: "div"
attributes: [...] (1)
Attribute {...}
- type: "Attribute"
- start: 584
- end: 604
- name: "class"
value: [...] (1)
Text {...}
- start: 591
- end: 603
- type: "Text"
- raw: "yellow-theme"
- data: "yellow-theme"
}
]
}
]fragment: Fragment {...}
- type: "Fragment"
nodes: [...] (5)
Text {...}
- type: "Text"
- start: 605
- end: 611
- raw: "\n "
- data: "\n "
} RegularElement {...}
- type: "RegularElement"
- start: 611
- end: 660
- name: "p"
attributes: [...] (1)
Attribute {...}
- type: "Attribute"
- start: 614
- end: 626
- name: "class"
value: [...] (1)
Text {...}
- start: 621
- end: 625
- type: "Text"
- raw: "note"
- data: "note"
}
]
}
]fragment: Fragment {...}
- type: "Fragment"
nodes: [...] (1)
Text {...}
- type: "Text"
- start: 627
- end: 656
- raw: "For that yellow notepad look."
- data: "For that yellow notepad look."
}
]
}
} Text {...}
- type: "Text"
- start: 660
- end: 667
- raw: " "
- data: " "
} RegularElement {...}
- type: "RegularElement"
- start: 667
- end: 718
- name: "p"
attributes: [...] (1)
Attribute {...}
- type: "Attribute"
- start: 670
- end: 699
- name: "class"
value: [...] (1)
Text {...}
- start: 677
- end: 698
- type: "Text"
- raw: "note purple-note-text"
- data: "note purple-note-text"
}
]
}
]fragment: Fragment {...}
- type: "Fragment"
nodes: [...] (1)
Text {...}
- type: "Text"
- start: 700
- end: 714
- raw: "Or with purple"
- data: "Or with purple"
}
]
}
} Text {...}
- type: "Text"
- start: 718
- end: 722
- raw: "\n "
- data: "\n "
}
]
}
} Text {...}
- type: "Text"
- start: 728
- end: 730
- raw: "\n\n"
- data: "\n\n"
}
]
}
} Text {...}
- type: "Text"
- start: 736
- end: 738
- raw: " "
- data: " "
} Component {...}
- type: "Component"
- start: 738
- end: 811
- name: "ColorSetting"
attributes: [...] (3)
Attribute {...}
- type: "Attribute"
- start: 752
- end: 768
- name: "key"
value: [...] (1)
Text {...}
- start: 757
- end: 767
- type: "Text"
- raw: "note-color"
- data: "note-color"
}
]
} Attribute {...}
- type: "Attribute"
- start: 769
- end: 792
- name: "label"
value: [...] (1)
Text {...}
- start: 776
- end: 791
- type: "Text"
- raw: "Note Text Color"
- data: "Note Text Color"
}
]
} Attribute {...}
- type: "Attribute"
- start: 793
- end: 808
- name: "value"
value: [...] (1)
Text {...}
- start: 800
- end: 807
- type: "Text"
- raw: "#FF5555"
- data: "#FF5555"
}
]
}
]fragment: Fragment {...}
- type: "Fragment"
- nodes: []
}
} Text {...}
- type: "Text"
- start: 811
- end: 812
- raw: " "
- data: " "
} Component {...}
- type: "Component"
- start: 812
- end: 886
- name: "ColorSetting"
attributes: [...] (3)
Attribute {...}
- type: "Attribute"
- start: 826
- end: 845
- name: "key"
value: [...] (1)
Text {...}
- start: 831
- end: 844
- type: "Text"
- raw: "note-bg-color"
- data: "note-bg-color"
}
]
} Attribute {...}
- type: "Attribute"
- start: 846
- end: 867
- name: "label"
value: [...] (1)
Text {...}
- start: 853
- end: 866
- type: "Text"
- raw: "Note BG Color"
- data: "Note BG Color"
}
]
} Attribute {...}
- type: "Attribute"
- start: 868
- end: 883
- name: "value"
value: [...] (1)
Text {...}
- start: 875
- end: 882
- type: "Text"
- raw: "#f4ed2a"
- data: "#f4ed2a"
}
]
}
]fragment: Fragment {...}
- type: "Fragment"
- nodes: []
}
} Text {...}
- type: "Text"
- start: 886
- end: 887
- raw: " "
- data: " "
} Component {...}
- type: "Component"
- start: 887
- end: 952
- name: "ColorSetting"
attributes: [...] (3)
Attribute {...}
- type: "Attribute"
- start: 901
- end: 909
- name: "key"
value: [...] (1)
Text {...}
- start: 906
- end: 908
- type: "Text"
- raw: "bg"
- data: "bg"
}
]
} Attribute {...}
- type: "Attribute"
- start: 910
- end: 933
- name: "label"
value: [...] (1)
Text {...}
- start: 917
- end: 932
- type: "Text"
- raw: "Page Background"
- data: "Page Background"
}
]
} Attribute {...}
- type: "Attribute"
- start: 934
- end: 949
- name: "value"
value: [...] (1)
Text {...}
- start: 941
- end: 948
- type: "Text"
- raw: "#BBBBBB"
- data: "#BBBBBB"
}
]
}
]fragment: Fragment {...}
- type: "Fragment"
- nodes: []
}
}
]
}- options: null
instance: Script {...}
- type: "Script"
- start: 0
- end: 69
- context: "default"
content: Program {...}
- type: "Program"
- start: 8
- end: 60
loc: {...}
start: {...}
- line: 1
- column: 0
}end: {...}
- line: 3
- column: 0
}
}body: [...] (1)
ImportDeclaration {...}
- type: "ImportDeclaration"
- start: 10
- end: 59
loc: {...}
start: {...}
- line: 2
- column: 1
}end: {...}
- line: 2
- column: 50
}
}specifiers: [...] (1)
ImportDefaultSpecifier {...}
- type: "ImportDefaultSpecifier"
- start: 17
- end: 29
loc: {...}
start: {...}
- line: 2
- column: 8
}end: {...}
- line: 2
- column: 20
}
}local: Identifier {...}
- type: "Identifier"
- start: 17
- end: 29
loc: {...}
start: {...}
- line: 2
- column: 8
}end: {...}
- line: 2
- column: 20
}
}- name: "ColorSetting"
}
}
]source: Literal {...}
- type: "Literal"
- start: 35
- end: 58
loc: {...}
start: {...}
- line: 2
- column: 26
}end: {...}
- line: 2
- column: 49
}
}- value: "./ColorSetting.svelte"
- raw: "'./ColorSetting.svelte'"
}
}
]- sourceType: "module"
}- attributes: []
}
}
The AST is not public API and may change at any point in time