container query • Playground • Svelte

App.svelte

containerClasses.js

import { containerClasses } from "./containerClasses.js";

let name = 'world';

const breakpoints = {

400: ["sm"],

800: ["md"],

1000: ["lg"]

};

</script>

<h1>Hello {name}!</h1>

</div>

<style>

:global(.sm) > h1 {

background-color: #00aa00;

}

:global(.md) > h1 {

background-color: #ffaadd;

}

:global(.lg) > h1 {

background-color: #ff00dd;

}

</style>

import 'svelte/internal/disclose-version';

import 'svelte/internal/flags/legacy';

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

import { containerClasses } from "./containerClasses.js";

var root = $.template(`<div><h1></h1></div>`);

export default function App($$anchor) {

let name = 'world';

const breakpoints = {

400: ["sm"],

800: ["md"],

1000: ["lg"]

};

var div = root();

var h1 = $.child(div);

h1.textContent = `Hello ${name ?? ''}!`;

$.reset(div);

$.action(div, ($$node, $$action_arg) => containerClasses?.($$node, $$action_arg), () => breakpoints);

$.append($$anchor, div);

}

result = svelte.compile(source, {

generate: "client" "server",

dev: false });

/* (unused) :global(.sm) > h1 {

background-color: #00aa00;

}*/

/* (unused) :global(.md) > h1 {

background-color: #ffaadd;

}*/

/* (unused) :global(.lg) > h1 {

background-color: #ff00dd;

}*/

		
			
				
					 Root {
 css: StyleSheet {...}
 type: "StyleSheet"
start: 284
end: 497
attributes: []
children: [...] (3)
  Rule {...}
 type: "Rule"
prelude: SelectorList {...}
 type: "SelectorList"
start: 296
end: 313
children: [...] (1)
  ComplexSelector {...}
 type: "ComplexSelector"
start: 296
end: 313
children: [...] (2)
  RelativeSelector {...}
 type: "RelativeSelector"
combinator: null
selectors: [...] (1)
  PseudoClassSelector {...}
 type: "PseudoClassSelector"
name: "global"
args: SelectorList {...}
 type: "SelectorList"
start: 304
end: 307
children: [...] (1)
  ComplexSelector {...}
 type: "ComplexSelector"
start: 304
end: 307
children: [...] (1)
  RelativeSelector {...}
 type: "RelativeSelector"
combinator: null
selectors: [...] (1)
  ClassSelector {...}
 type: "ClassSelector"
name: "sm"
start: 304
end: 307
 }
 ]
start: 304
end: 307
 }
 ]
 }
 ]
 }
start: 296
end: 308
 }
 ]
start: 296
end: 308
 }
 RelativeSelector {...}
 type: "RelativeSelector"
combinator: Combinator {...}
 type: "Combinator"
name: ">"
start: 309
end: 310
 }
selectors: [...] (1)
  TypeSelector {...}
 type: "TypeSelector"
name: "h1"
start: 311
end: 313
 }
 ]
start: 309
end: 313
 }
 ]
 }
 ]
 }
block: Block {...}
 type: "Block"
start: 314
end: 356
children: [...] (1)
  Declaration {...}
 type: "Declaration"
start: 324
end: 349
property: "background-color"
value: "#00aa00"
 }
 ]
 }
start: 296
end: 356
 }
 Rule {...}
 type: "Rule"
prelude: SelectorList {...}
 type: "SelectorList"
start: 362
end: 379
children: [...] (1)
  ComplexSelector {...}
 type: "ComplexSelector"
start: 362
end: 379
children: [...] (2)
  RelativeSelector {...}
 type: "RelativeSelector"
combinator: null
selectors: [...] (1)
  PseudoClassSelector {...}
 type: "PseudoClassSelector"
name: "global"
args: SelectorList {...}
 type: "SelectorList"
start: 370
end: 373
children: [...] (1)
  ComplexSelector {...}
 type: "ComplexSelector"
start: 370
end: 373
children: [...] (1)
  RelativeSelector {...}
 type: "RelativeSelector"
combinator: null
selectors: [...] (1)
  ClassSelector {...}
 type: "ClassSelector"
name: "md"
start: 370
end: 373
 }
 ]
start: 370
end: 373
 }
 ]
 }
 ]
 }
start: 362
end: 374
 }
 ]
start: 362
end: 374
 }
 RelativeSelector {...}
 type: "RelativeSelector"
combinator: Combinator {...}
 type: "Combinator"
name: ">"
start: 375
end: 376
 }
selectors: [...] (1)
  TypeSelector {...}
 type: "TypeSelector"
name: "h1"
start: 377
end: 379
 }
 ]
start: 375
end: 379
 }
 ]
 }
 ]
 }
block: Block {...}
 type: "Block"
start: 380
end: 422
children: [...] (1)
  Declaration {...}
 type: "Declaration"
start: 390
end: 415
property: "background-color"
value: "#ffaadd"
 }
 ]
 }
start: 362
end: 422
 }
 Rule {...}
 type: "Rule"
prelude: SelectorList {...}
 type: "SelectorList"
start: 428
end: 445
children: [...] (1)
  ComplexSelector {...}
 type: "ComplexSelector"
start: 428
end: 445
children: [...] (2)
  RelativeSelector {...}
 type: "RelativeSelector"
combinator: null
selectors: [...] (1)
  PseudoClassSelector {...}
 type: "PseudoClassSelector"
name: "global"
args: SelectorList {...}
 type: "SelectorList"
start: 436
end: 439
children: [...] (1)
  ComplexSelector {...}
 type: "ComplexSelector"
start: 436
end: 439
children: [...] (1)
  RelativeSelector {...}
 type: "RelativeSelector"
combinator: null
selectors: [...] (1)
  ClassSelector {...}
 type: "ClassSelector"
name: "lg"
start: 436
end: 439
 }
 ]
start: 436
end: 439
 }
 ]
 }
 ]
 }
start: 428
end: 440
 }
 ]
start: 428
end: 440
 }
 RelativeSelector {...}
 type: "RelativeSelector"
combinator: Combinator {...}
 type: "Combinator"
name: ">"
start: 441
end: 442
 }
selectors: [...] (1)
  TypeSelector {...}
 type: "TypeSelector"
name: "h1"
start: 443
end: 445
 }
 ]
start: 441
end: 445
 }
 ]
 }
 ]
 }
block: Block {...}
 type: "Block"
start: 446
end: 488
children: [...] (1)
  Declaration {...}
 type: "Declaration"
start: 456
end: 481
property: "background-color"
value: "#ff00dd"
 }
 ]
 }
start: 428
end: 488
 }
 ]
content:  {...}
 start: 291
end: 489
styles: "\n    :global(.sm) > h1 {\n        background-color: #00aa00;\n    }\n\n    :global(.md) > h1 {\n        background-color: #ffaadd;\n    }\n\n    :global(.lg) > h1 {\n        background-color: #ff00dd;\n    }\n"
comment: null
 }
 }
js: []
start: 204
end: 282
type: "Root"
fragment: Fragment {...}
 type: "Fragment"
nodes: [...] (3)
  Text {...}
 type: "Text"
start: 202
end: 204
raw: "\n\n"
data: "\n\n"
 }
 RegularElement {...}
 type: "RegularElement"
start: 204
end: 282
name: "div"
attributes: [...] (1)
  UseDirective {...}
 start: 209
end: 243
type: "UseDirective"
name: "containerClasses"
expression: Identifier {...}
 type: "Identifier"
start: 231
end: 242
loc:  {...}
 start:  {...}
 line: 13
column: 27
 }
end:  {...}
 line: 13
column: 38
 }
 }
name: "breakpoints"
 }
modifiers: []
 }
 ]
fragment: Fragment {...}
 type: "Fragment"
nodes: [...] (3)
  Text {...}
 type: "Text"
start: 244
end: 249
raw: "\n    "
data: "\n    "
 }
 RegularElement {...}
 type: "RegularElement"
start: 249
end: 271
name: "h1"
attributes: []
fragment: Fragment {...}
 type: "Fragment"
nodes: [...] (3)
  Text {...}
 type: "Text"
start: 253
end: 259
raw: "Hello "
data: "Hello "
 }
 ExpressionTag {...}
 type: "ExpressionTag"
start: 259
end: 265
expression: Identifier {...}
 type: "Identifier"
start: 260
end: 264
loc:  {...}
 start:  {...}
 line: 14
column: 15
 }
end:  {...}
 line: 14
column: 19
 }
 }
name: "name"
 }
 }
 Text {...}
 type: "Text"
start: 265
end: 266
raw: "!"
data: "!"
 }
 ]
 }
 }
 Text {...}
 type: "Text"
start: 271
end: 276
raw: "    \n"
data: "    \n"
 }
 ]
 }
 }
 Text {...}
 type: "Text"
start: 282
end: 284
raw: "\n\n"
data: "\n\n"
 }
 ]
 }
options: null
instance: Script {...}
 type: "Script"
start: 0
end: 202
context: "default"
content: Program {...}
 type: "Program"
start: 8
end: 193
loc:  {...}
 start:  {...}
 line: 1
column: 0
 }
end:  {...}
 line: 11
column: 0
 }
 }
body: [...] (3)
  ImportDeclaration {...}
 type: "ImportDeclaration"
start: 13
end: 70
loc:  {...}
 start:  {...}
 line: 2
column: 4
 }
end:  {...}
 line: 2
column: 61
 }
 }
specifiers: [...] (1)
  ImportSpecifier {...}
 type: "ImportSpecifier"
start: 22
end: 38
loc:  {...}
 start:  {...}
 line: 2
column: 13
 }
end:  {...}
 line: 2
column: 29
 }
 }
imported: Identifier {...}
 type: "Identifier"
start: 22
end: 38
loc:  {...}
 start:  {...}
 line: 2
column: 13
 }
end:  {...}
 line: 2
column: 29
 }
 }
name: "containerClasses"
 }
local: Identifier {...}
 type: "Identifier"
start: 22
end: 38
loc:  {...}
 start:  {...}
 line: 2
column: 13
 }
end:  {...}
 line: 2
column: 29
 }
 }
name: "containerClasses"
 }
 }
 ]
source: Literal {...}
 type: "Literal"
start: 46
end: 69
loc:  {...}
 start:  {...}
 line: 2
column: 37
 }
end:  {...}
 line: 2
column: 60
 }
 }
value: "./containerClasses.js"
raw: "\"./containerClasses.js\""
 }
 }
 VariableDeclaration {...}
 type: "VariableDeclaration"
start: 76
end: 95
loc:  {...}
 start:  {...}
 line: 4
column: 4
 }
end:  {...}
 line: 4
column: 23
 }
 }
declarations: [...] (1)
  VariableDeclarator {...}
 type: "VariableDeclarator"
start: 80
end: 94
loc:  {...}
 start:  {...}
 line: 4
column: 8
 }
end:  {...}
 line: 4
column: 22
 }
 }
id: Identifier {...}
 type: "Identifier"
start: 80
end: 84
loc:  {...}
 start:  {...}
 line: 4
column: 8
 }
end:  {...}
 line: 4
column: 12
 }
 }
name: "name"
 }
init: Literal {...}
 type: "Literal"
start: 87
end: 94
loc:  {...}
 start:  {...}
 line: 4
column: 15
 }
end:  {...}
 line: 4
column: 22
 }
 }
value: "world"
raw: "'world'"
 }
 }
 ]
kind: "let"
 }
 VariableDeclaration {...}
 type: "VariableDeclaration"
start: 101
end: 192
loc:  {...}
 start:  {...}
 line: 6
column: 4
 }
end:  {...}
 line: 10
column: 6
 }
 }
declarations: [...] (1)
  VariableDeclarator {...}
 type: "VariableDeclarator"
start: 107
end: 191
loc:  {...}
 start:  {...}
 line: 6
column: 10
 }
end:  {...}
 line: 10
column: 5
 }
 }
id: Identifier {...}
 type: "Identifier"
start: 107
end: 118
loc:  {...}
 start:  {...}
 line: 6
column: 10
 }
end:  {...}
 line: 6
column: 21
 }
 }
name: "breakpoints"
 }
init: ObjectExpression {...}
 type: "ObjectExpression"
start: 121
end: 191
loc:  {...}
 start:  {...}
 line: 6
column: 24
 }
end:  {...}
 line: 10
column: 5
 }
 }
properties: [...] (3)
  Property {...}
 type: "Property"
start: 131
end: 142
loc:  {...}
 start:  {...}
 line: 7
column: 8
 }
end:  {...}
 line: 7
column: 19
 }
 }
method: false
shorthand: false
computed: false
key: Literal {...}
 type: "Literal"
start: 131
end: 134
loc:  {...}
 start:  {...}
 line: 7
column: 8
 }
end:  {...}
 line: 7
column: 11
 }
 }
value: 400
raw: "400"
 }
value: ArrayExpression {...}
 type: "ArrayExpression"
start: 136
end: 142
loc:  {...}
 start:  {...}
 line: 7
column: 13
 }
end:  {...}
 line: 7
column: 19
 }
 }
elements: [...] (1)
  Literal {...}
 type: "Literal"
start: 137
end: 141
loc:  {...}
 start:  {...}
 line: 7
column: 14
 }
end:  {...}
 line: 7
column: 18
 }
 }
value: "sm"
raw: "\"sm\""
 }
 ]
 }
kind: "init"
 }
 Property {...}
 type: "Property"
start: 152
end: 163
loc:  {...}
 start:  {...}
 line: 8
column: 8
 }
end:  {...}
 line: 8
column: 19
 }
 }
method: false
shorthand: false
computed: false
key: Literal {...}
 type: "Literal"
start: 152
end: 155
loc:  {...}
 start:  {...}
 line: 8
column: 8
 }
end:  {...}
 line: 8
column: 11
 }
 }
value: 800
raw: "800"
 }
value: ArrayExpression {...}
 type: "ArrayExpression"
start: 157
end: 163
loc:  {...}
 start:  {...}
 line: 8
column: 13
 }
end:  {...}
 line: 8
column: 19
 }
 }
elements: [...] (1)
  Literal {...}
 type: "Literal"
start: 158
end: 162
loc:  {...}
 start:  {...}
 line: 8
column: 14
 }
end:  {...}
 line: 8
column: 18
 }
 }
value: "md"
raw: "\"md\""
 }
 ]
 }
kind: "init"
 }
 Property {...}
 type: "Property"
start: 173
end: 185
loc:  {...}
 start:  {...}
 line: 9
column: 8
 }
end:  {...}
 line: 9
column: 20
 }
 }
method: false
shorthand: false
computed: false
key: Literal {...}
 type: "Literal"
start: 173
end: 177
loc:  {...}
 start:  {...}
 line: 9
column: 8
 }
end:  {...}
 line: 9
column: 12
 }
 }
value: 1000
raw: "1000"
 }
value: ArrayExpression {...}
 type: "ArrayExpression"
start: 179
end: 185
loc:  {...}
 start:  {...}
 line: 9
column: 14
 }
end:  {...}
 line: 9
column: 20
 }
 }
elements: [...] (1)
  Literal {...}
 type: "Literal"
start: 180
end: 184
loc:  {...}
 start:  {...}
 line: 9
column: 15
 }
end:  {...}
 line: 9
column: 19
 }
 }
value: "lg"
raw: "\"lg\""
 }
 ]
 }
kind: "init"
 }
 ]
 }
 }
 ]
kind: "const"
 }
 ]
sourceType: "module"
 }
attributes: []
 }
 }

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

modern