forked from tabatkins/parse-css
-
Notifications
You must be signed in to change notification settings - Fork 1
/
example.html
66 lines (60 loc) · 1.41 KB
/
example.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
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
<!doctype html>
<div><!--
--><textarea id='css'>foo { bar: baz; }</textarea><!--
--><button id="parse" onclick='parseStuff()'>Parse</button><!--
--><textarea id='tokens' readonly placeholder="RESULT OF CSS TOKENIZATION GOES HERE"></textarea><!--
--></div>
<textarea id='tree' readonly placeholder="RESULT OF THE CSS PARSING GOES HERE"></textarea>
<style>
/* reset style */
html,body { height: 100%; margin: 0px; padding: 0px; overflow: hidden; }
* {
-o-box-sizing: border-box;
-ms-box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
/* UI controls */
textarea, button {
vertical-align: middle;
overflow: auto;
border: none;
}
button {
background: orange;
color: white;
}
/* layout */
body > div {
height: 50%;
}
#css, #tokens {
width: 45%;
height: 100%;
}
#parse {
width: 10%;
height: 100%;
}
#tree {
width: 100%;
height: 50%;
background: #fafaf0;
}
</style>
<script src="parse-css.js"></script>
<script>
var debug;
function parseStuff() {
var css = document.querySelector('#css').value;
var tokenlist = tokenize(css);
console.log(tokenlist);
var txt = document.querySelector('#tokens');
txt.value = tokenlist.join(' ');
var sheet = parseAStylesheet(tokenlist);
console.log(sheet);
var tree = document.querySelector('#tree');
tree.value = JSON.stringify(sheet, null, " ");
}
</script>