diffdown.com
Diffdown is a real-time collaborative Markdown editor/previewer built on the AT Protocol
diffdown.com
1# Function calls
2
3a {
4 color: rgba(0, 255, 0, 0.5);
5}
6
7==>
8
9StyleSheet(
10 RuleSet(TagSelector(TagName),Block(
11 Declaration(PropertyName,CallExpression(Callee,ArgList(NumberLiteral,NumberLiteral,NumberLiteral,NumberLiteral))))))
12
13# Calls where each argument has multiple values
14
15div {
16 background: repeating-linear-gradient(red, orange 50px);
17 clip-path: polygon(50% 0%, 60% 40%, 100% 50%, 60% 60%, 50% 100%, 40% 60%, 0% 50%, 40% 40%)
18}
19
20==>
21
22StyleSheet(RuleSet(TagSelector(TagName),Block(
23 Declaration(PropertyName,CallExpression(Callee,ArgList(ValueName,ValueName,NumberLiteral(Unit)))),
24 Declaration(PropertyName,CallExpression(Callee,ArgList(
25 NumberLiteral(Unit),NumberLiteral(Unit),NumberLiteral(Unit),NumberLiteral(Unit),
26 NumberLiteral(Unit),NumberLiteral(Unit),NumberLiteral(Unit),NumberLiteral(Unit),
27 NumberLiteral(Unit),NumberLiteral(Unit),NumberLiteral(Unit),NumberLiteral(Unit),
28 NumberLiteral(Unit),NumberLiteral(Unit),NumberLiteral(Unit),NumberLiteral(Unit)))))))
29
30# Color literals
31
32a {
33 b: #fafd04;
34 c: #fafd0401;
35}
36
37==>
38
39StyleSheet(RuleSet(TagSelector(TagName),Block(
40 Declaration(PropertyName,ColorLiteral),
41 Declaration(PropertyName,ColorLiteral))))
42
43# Numbers
44
45a {
46 b: 0.5%;
47 c: 5em;
48 margin: 10E3px;
49 margin: -456.8px;
50 margin: -0.0px;
51}
52
53==>
54
55StyleSheet(RuleSet(TagSelector(TagName),Block(
56 Declaration(PropertyName,NumberLiteral(Unit)),
57 Declaration(PropertyName,NumberLiteral(Unit)),
58 Declaration(PropertyName,NumberLiteral(Unit)),
59 Declaration(PropertyName,NumberLiteral(Unit)),
60 Declaration(PropertyName,NumberLiteral(Unit)))))
61
62# Binary arithmetic operators
63
64a {
65 width: calc(100% - 80px);
66 aspect-ratio: 1/2;
67 font-size: calc(10px + (56 - 10) * ((100vw - 320px) / (1920 - 320)));
68}
69
70==>
71
72StyleSheet(RuleSet(TagSelector(TagName),Block(
73 Declaration(PropertyName,CallExpression(Callee,ArgList(BinaryExpression(NumberLiteral(Unit),BinOp,NumberLiteral(Unit))))),
74 Declaration(PropertyName,BinaryExpression(NumberLiteral,BinOp,NumberLiteral)),
75 Declaration(PropertyName,CallExpression(Callee,ArgList(
76 BinaryExpression(BinaryExpression(NumberLiteral(Unit),BinOp,ParenthesizedValue(
77 BinaryExpression(NumberLiteral,BinOp,NumberLiteral))),BinOp,ParenthesizedValue(
78 BinaryExpression(ParenthesizedValue(BinaryExpression(NumberLiteral(Unit),BinOp,NumberLiteral(Unit))),BinOp,
79 ParenthesizedValue(BinaryExpression(NumberLiteral,BinOp,NumberLiteral)))))))))))
80
81# Strings
82
83a {
84 b: '';
85 c: '\'hi\'';
86}
87
88==>
89
90StyleSheet(RuleSet(TagSelector(TagName),Block(Declaration(PropertyName,StringLiteral),Declaration(PropertyName,StringLiteral))))
91
92# URLs
93
94a {
95 b: url(http://something-else?foo=bar);
96 c: url();
97}
98
99==>
100
101StyleSheet(RuleSet(TagSelector(TagName),Block(
102 Declaration(PropertyName,CallLiteral(CallTag,ParenthesizedContent)),
103 Declaration(PropertyName,CallLiteral(CallTag)))))
104
105# Important declarations
106
107a {
108 b: c !important;
109}
110
111==>
112
113StyleSheet(RuleSet(TagSelector(TagName),Block(Declaration(PropertyName,ValueName,Important))))
114
115# Comments right after numbers
116
117a {
118 shape-outside: circle(20em/*=*/at 50% 50%);
119 shape-outside: inset(1em, 1em, 1em, 1em);
120}
121
122==>
123
124StyleSheet(RuleSet(TagSelector(TagName),Block(
125 Declaration(PropertyName,CallExpression(Callee,ArgList(NumberLiteral(Unit),Comment,ValueName,NumberLiteral(Unit),NumberLiteral(Unit)))),
126 Declaration(PropertyName,CallExpression(Callee,ArgList(NumberLiteral(Unit),NumberLiteral(Unit),NumberLiteral(Unit),NumberLiteral(Unit)))))))
127
128# Unfinished rule
129
130a { foo: 2
131
132==>
133
134StyleSheet(RuleSet(TagSelector(TagName),Block(Declaration(PropertyName,NumberLiteral),⚠)))
135
136# Variable names
137
138foo {
139 --my-variable: white;
140 color: var(--my-variable);
141}
142
143==>
144
145StyleSheet(RuleSet(TagSelector(TagName),Block(
146 Declaration(VariableName,ValueName),
147 Declaration(PropertyName,CallExpression(Callee,ArgList(VariableName))))))
148
149# Trailing comma
150
151div { color: var(--c,) }
152
153==>
154
155StyleSheet(RuleSet(TagSelector(TagName),Block(
156 Declaration(PropertyName,CallExpression(Callee,ArgList(VariableName))))))
157
158# Space before colon
159
160div {
161 color : red;
162 .x :active {
163 color : blue;
164 }
165}
166
167==>
168
169StyleSheet(RuleSet(TagSelector(TagName),Block(
170 Declaration(PropertyName,ValueName),
171 RuleSet(DescendantSelector(ClassSelector(ClassName),PseudoClassSelector(PseudoClassName)),Block(
172 Declaration(PropertyName,ValueName))))))
173
174# Empty value
175
176p {
177 --var-name: ;
178}
179
180==>
181
182StyleSheet(RuleSet(TagSelector(TagName),Block(Declaration(VariableName))))
183
184# Bracketed values
185
186div {
187 --myvar: [ some: value; ]
188}
189
190==>
191
192StyleSheet(RuleSet(TagSelector(TagName),Block(
193 Declaration(VariableName,BracketedValue("[", ValueName, ":", ValueName, ";", "]")))))
194
195# Call to variables
196
197.foo {
198 box-shadow: --shadow(blue);
199}
200
201==>
202
203StyleSheet(RuleSet(ClassSelector(ClassName),Block(
204 Declaration(PropertyName,CallExpression(VariableName,ArgList(ValueName))))))
205