Dynamic CSS Variables on Document, Set From Different Components • Playground • Svelte

App.svelte

ColorSetting.svelte

styleManager.js

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>

<p class="note">For that yellow notepad look.</p>

<p class="note purple-note-text">Or with purple</p>

</div>

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: "client" "server",

dev: false });

: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

modern