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
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
|
<beginfold id='1'>/*</beginfold id='1'>
* SPDX-FileCopyrightText: 2022 Volker Krause <vkrause@kde.org>
* SPDX-License-Identifier: MIT
<endfold id='1'>*/</endfold id='1'>
// samples taken from kosmindoormap MapCSS parser unit tests
@import url("included.mapcss");
// union selector
area[railway=platform],
relation[type=multipolygon][railway=platform]
<beginfold id='2'>{</beginfold id='2'>
color: #ff550022;
fill-color: #80f0e0d0;
<endfold id='2'>}</endfold id='2'>
// chained selector
area[railway=platform] node[sign]
<beginfold id='2'>{</beginfold id='2'>
fill-color: #ff0000;
opacity: 0.5;
<endfold id='2'>}</endfold id='2'>
// condition with colon-separated keys
node[building:part][building:part=elevator]
<beginfold id='2'>{</beginfold id='2'>
opacity: 1;
color: building:color;
<endfold id='2'>}</endfold id='2'>
// text properties
* <beginfold id='2'>{</beginfold id='2'>
text: ref;
text-color: #ff00ff;
<endfold id='2'>}</endfold id='2'>
// line properties
line <beginfold id='2'>{</beginfold id='2'>
dashes: 3,5;
linecap: round;
linejoin: bevel;
casing-width: 1;
casing-color: #444444;
casing-dashes: 1,1;
<endfold id='2'>}</endfold id='2'>
// zoom ranges
node|z12-13 <beginfold id='2'>{</beginfold id='2'><endfold id='2'>}</endfold id='2'>
node|z10 <beginfold id='2'>{</beginfold id='2'><endfold id='2'>}</endfold id='2'>
node|z-10 <beginfold id='2'>{</beginfold id='2'><endfold id='2'>}</endfold id='2'>
node|z10- <beginfold id='2'>{</beginfold id='2'><endfold id='2'>}</endfold id='2'>
node|z12-13[name] <beginfold id='2'>{</beginfold id='2'><endfold id='2'>}</endfold id='2'>
node|z14-[name] <beginfold id='2'>{</beginfold id='2'><endfold id='2'>}</endfold id='2'>
// numeric comparison conditions
* [layer>1],
* [layer<2],
* [layer>=3],
* [layer<=4] <beginfold id='2'>{</beginfold id='2'><endfold id='2'>}</endfold id='2'>
// object types as tag or property values
area[indoor=area] <beginfold id='2'>{</beginfold id='2'>
text-position: line;
width: width;
<endfold id='2'>}</endfold id='2'>
// units
* <beginfold id='2'>{</beginfold id='2'>
font-size: 16pt;
width: 42px;
casing-width: 2m;
<endfold id='2'>}</endfold id='2'>
// negative numbers
* <beginfold id='2'>{</beginfold id='2'>
width: -10.42;
<endfold id='2'>}</endfold id='2'>
// colors
* <beginfold id='2'>{</beginfold id='2'>
text-color: #aabbcc;
fill-color: #80ccbbaa;
casing-color: #123;
shield-color: rgb(1.0, 0.5, 0.25);
shield-casing-color: rgba(0.75, 1.0, 0.25, 0.5);
color: "red";
<endfold id='2'>}</endfold id='2'>
// set tag
node[shop=bakery] <beginfold id='2'>{</beginfold id='2'>
set mx:important;
<endfold id='2'>}</endfold id='2'>
// set tag to a specific value
area[shop=bakery] <beginfold id='2'>{</beginfold id='2'>
set mx:importance = "high";
set mx:importance = 20;
<endfold id='2'>}</endfold id='2'>
// set class
node[shop=bakery],
node[shop=pastry]
<beginfold id='2'>{</beginfold id='2'>
set .importantShops;
<endfold id='2'>}</endfold id='2'>
// class selectors
node.importantShops <beginfold id='2'>{</beginfold id='2'> color: "red"; <endfold id='2'>}</endfold id='2'>
way.importantShops|z20- <beginfold id='2'>{</beginfold id='2'> color: "green"; <endfold id='2'>}</endfold id='2'>
*.importantShops[access=no] <beginfold id='2'>{</beginfold id='2'> color: "blue"; <endfold id='2'>}</endfold id='2'>
// layer selectors (see https://wiki.openstreetmap.org/wiki/MapCSS/0.2/Proposal_layer_selector)
way[highway]::road <beginfold id='2'>{</beginfold id='2'>
width: 8;
color: #ffffff;
casing-width: 2;
casing-color: #a0a0a0;
<endfold id='2'>}</endfold id='2'>
way[railway=tram]::tram <beginfold id='2'>{</beginfold id='2'>
width: 2;
color: #303030;
z-index: 1;
<endfold id='2'>}</endfold id='2'>
// default layer selector
node::default <beginfold id='2'>{</beginfold id='2'>
icon-image: "bla";
<endfold id='2'>}</endfold id='2'>
//quoted values in conditions
line|z16-[highway=service][service="drive-through"] <beginfold id='2'>{</beginfold id='2'>
set .service;
width: 1.5m;
<endfold id='2'>}</endfold id='2'>
// single quote strings
*[service='drive-through'] <beginfold id='2'>{</beginfold id='2'>
text: 'abc\'def"ghi\njkl';
<endfold id='2'>}</endfold id='2'>
|
