tests/fixtures/todo-app/index.html


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
37
38
39
40
41
42
43
44
45
46
47
48
49

<html lang="en">
  <head>
    <title>Task destroyer</title>
    <meta charset="UTF-8" />
    <style>
      body {
        --cssx-children: form#task-input-form #task-list;
      }

      #task-input-form {
        --cssx-on-submit:
          prevent-default()
          js-eval('console.log("todo: implement add new task")')
        ;

        --cssx-children:
          input#text-input[data-testid="add-task-input"]
          button#create-task-btn[type="submit"][data-testid="add-task-btn"]
        ;
      }

      #text-input {}
      #create-task-btn {
        --cssx-text: Submit;
      }

      #task-list {
        --cssx-children:
          instance(li#task-item, map(
            --text: "hello world",
            --checked: 0
          ))
          instance(li#task-item, map(
            --text: "coolio stuff",
            --checked: 0
          ))
        ;
      }

      [data-instance="task-item"] {
        --text: "default text";
        --checked: 0;

        --cssx-text: var(--text);
      }
    </style>
  </head>
  <body></body>
</html>