Skip to content

Commit 245b59d

Browse files
RunDevelopmentRunDevelopment
authored
CSS: Highlight attribute selector (#1671)
This adds highlighting for CSS attributes selectors in CSS Extras
1 parent f8c8add commit 245b59d

File tree

4 files changed

+301
-9
lines changed

4 files changed

+301
-9
lines changed

‎components/prism-css-extras.js

+31-1
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,37 @@ Prism.languages.css.selector = {
55
'pseudo-class': /:[-\w]+(?:\(.*\))?/,
66
'class': /\.[-:.\w]+/,
77
'id': /#[-:.\w]+/,
8-
'attribute': /\[[^\]]+\]/
8+
'attribute': {
9+
pattern: /\[(?:[^[\]"']|("|')(?:\\(?:\r\n|[\s\S])|(?!\1)[^\\\r\n])*\1)*\]/,
10+
greedy: true,
11+
inside: {
12+
'punctuation': /^\[|\]$/,
13+
'case-sensitivity': {
14+
pattern: /(\s)[si]$/i,
15+
lookbehind: true,
16+
alias: 'keyword'
17+
},
18+
'namespace': {
19+
pattern: /^(\s*)[-*\w\xA0-\uFFFF]*\|(?!=)/,
20+
lookbehind: true,
21+
inside: {
22+
'punctuation': /\|$/
23+
}
24+
},
25+
'attribute': {
26+
pattern: /^(\s*)[-\w\xA0-\uFFFF]+/,
27+
lookbehind: true
28+
},
29+
'value': [
30+
/("|')(?:\\(?:\r\n|[\s\S])|(?!\1)[^\\\r\n])*\1/,
31+
{
32+
pattern: /(=\s*)[-\w\xA0-\uFFFF]+(?=\s*$)/,
33+
lookbehind: true
34+
}
35+
],
36+
'operator': /[|~*^$]?=/
37+
}
38+
}
939
}
1040
};
1141

‎components/prism-css-extras.min.js

+1-1
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎tests/languages/css!+css-extras/selector_attribute_feature.test

+269
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,269 @@
1+
[attr] {}
2+
3+
[attr=val] {}
4+
[attr="val"] {}
5+
[attr='val'] {}
6+
[attr|=val] {}
7+
[attr~=val] {}
8+
[attr|=val] {}
9+
[attr^=val] {}
10+
[attr$=val] {}
11+
[attr*=val] {}
12+
13+
[foo|attr][*|attr][|attr] {}
14+
[foo|attr|=val] {}
15+
16+
[attr=val i] {}
17+
[attr="val" S] {}
18+
19+
[ attr ] {}
20+
[ attr = val ] {}
21+
[ attr = val i] {}
22+
23+
[attr="i#m :not(a.class)"] {}
24+
25+
----------------------------------------------------
26+
27+
[
28+
["selector", [
29+
["attribute", [
30+
["punctuation", "["],
31+
["attribute", "attr"],
32+
["punctuation", "]"]
33+
]]
34+
]],
35+
["punctuation", "{"],
36+
["punctuation", "}"],
37+
38+
["selector", [
39+
["attribute", [
40+
["punctuation", "["],
41+
["attribute", "attr"],
42+
["operator", "="],
43+
["value", "val"],
44+
["punctuation", "]"]
45+
]]
46+
]],
47+
["punctuation", "{"],
48+
["punctuation", "}"],
49+
50+
["selector", [
51+
["attribute", [
52+
["punctuation", "["],
53+
["attribute", "attr"],
54+
["operator", "="],
55+
["value", "\"val\""],
56+
["punctuation", "]"]
57+
]]
58+
]],
59+
["punctuation", "{"],
60+
["punctuation", "}"],
61+
62+
["selector", [
63+
["attribute", [
64+
["punctuation", "["],
65+
["attribute", "attr"],
66+
["operator", "="],
67+
["value", "'val'"],
68+
["punctuation", "]"]
69+
]]
70+
]],
71+
["punctuation", "{"],
72+
["punctuation", "}"],
73+
74+
["selector", [
75+
["attribute", [
76+
["punctuation", "["],
77+
["attribute", "attr"],
78+
["operator", "|="],
79+
["value", "val"],
80+
["punctuation", "]"]
81+
]]
82+
]],
83+
["punctuation", "{"],
84+
["punctuation", "}"],
85+
86+
["selector", [
87+
["attribute", [
88+
["punctuation", "["],
89+
["attribute", "attr"],
90+
["operator", "~="],
91+
["value", "val"],
92+
["punctuation", "]"]
93+
]]
94+
]],
95+
["punctuation", "{"],
96+
["punctuation", "}"],
97+
98+
["selector", [
99+
["attribute", [
100+
["punctuation", "["],
101+
["attribute", "attr"],
102+
["operator", "|="],
103+
["value", "val"],
104+
["punctuation", "]"]
105+
]]
106+
]],
107+
["punctuation", "{"],
108+
["punctuation", "}"],
109+
110+
["selector", [
111+
["attribute", [
112+
["punctuation", "["],
113+
["attribute", "attr"],
114+
["operator", "^="],
115+
["value", "val"],
116+
["punctuation", "]"]
117+
]]
118+
]],
119+
["punctuation", "{"],
120+
["punctuation", "}"],
121+
122+
["selector", [
123+
["attribute", [
124+
["punctuation", "["],
125+
["attribute", "attr"],
126+
["operator", "$="],
127+
["value", "val"],
128+
["punctuation", "]"]
129+
]]
130+
]],
131+
["punctuation", "{"],
132+
["punctuation", "}"],
133+
134+
["selector", [
135+
["attribute", [
136+
["punctuation", "["],
137+
["attribute", "attr"],
138+
["operator", "*="],
139+
["value", "val"],
140+
["punctuation", "]"]
141+
]]
142+
]],
143+
["punctuation", "{"],
144+
["punctuation", "}"],
145+
146+
["selector", [
147+
["attribute", [
148+
["punctuation", "["],
149+
["namespace", [
150+
"foo",
151+
["punctuation", "|"]
152+
]],
153+
["attribute", "attr"],
154+
["punctuation", "]"]
155+
]],
156+
["attribute", [
157+
["punctuation", "["],
158+
["namespace", [
159+
"*",
160+
["punctuation", "|"]
161+
]],
162+
["attribute", "attr"],
163+
["punctuation", "]"]
164+
]],
165+
["attribute", [
166+
["punctuation", "["],
167+
["namespace", [
168+
["punctuation", "|"]
169+
]],
170+
["attribute", "attr"],
171+
["punctuation", "]"]
172+
]]
173+
]],
174+
["punctuation", "{"],
175+
["punctuation", "}"],
176+
177+
["selector", [
178+
["attribute", [
179+
["punctuation", "["],
180+
["namespace", [
181+
"foo",
182+
["punctuation", "|"]
183+
]],
184+
["attribute", "attr"],
185+
["operator", "|="],
186+
["value", "val"],
187+
["punctuation", "]"]
188+
]]
189+
]],
190+
["punctuation", "{"],
191+
["punctuation", "}"],
192+
193+
["selector", [
194+
["attribute", [
195+
["punctuation", "["],
196+
["attribute", "attr"],
197+
["operator", "="],
198+
["value", "val"],
199+
["case-sensitivity", "i"],
200+
["punctuation", "]"]
201+
]]
202+
]],
203+
["punctuation", "{"],
204+
["punctuation", "}"],
205+
206+
["selector", [
207+
["attribute", [
208+
["punctuation", "["],
209+
["attribute", "attr"],
210+
["operator", "="],
211+
["value", "\"val\""],
212+
["case-sensitivity", "S"],
213+
["punctuation", "]"]
214+
]]
215+
]],
216+
["punctuation", "{"],
217+
["punctuation", "}"],
218+
219+
["selector", [
220+
["attribute", [
221+
["punctuation", "["],
222+
["attribute", "attr"],
223+
["punctuation", "]"]
224+
]]
225+
]],
226+
["punctuation", "{"],
227+
["punctuation", "}"],
228+
229+
["selector", [
230+
["attribute", [
231+
["punctuation", "["],
232+
["attribute", "attr"],
233+
["operator", "="],
234+
["value", "val"],
235+
["punctuation", "]"]
236+
]]
237+
]],
238+
["punctuation", "{"],
239+
["punctuation", "}"],
240+
241+
["selector", [
242+
["attribute", [
243+
["punctuation", "["],
244+
["attribute", "attr"],
245+
["operator", "="],
246+
["value", "val"],
247+
["case-sensitivity", "i"],
248+
["punctuation", "]"]
249+
]]
250+
]],
251+
["punctuation", "{"],
252+
["punctuation", "}"],
253+
254+
["selector", [
255+
["attribute", [
256+
["punctuation", "["],
257+
["attribute", "attr"],
258+
["operator", "="],
259+
["value", "\"i#m :not(a.class)\""],
260+
["punctuation", "]"]
261+
]]
262+
]],
263+
["punctuation", "{"],
264+
["punctuation", "}"]
265+
]
266+
267+
----------------------------------------------------
268+
269+
Checks for attributes inside selectors.

‎tests/languages/css!+css-extras/selector_feature.test

-7
Original file line numberDiff line numberDiff line change
@@ -9,8 +9,6 @@ foo#bar {
99

1010
#foo > .bar:not(baz):after {
1111

12-
div[foo="bar"] {
13-
1412
----------------------------------------------------
1513

1614
[
@@ -45,11 +43,6 @@ div[foo="bar"] {
4543
["class", ".bar"],
4644
["pseudo-class", ":not(baz)"],
4745
["pseudo-element", ":after"]
48-
]], ["punctuation", "{"],
49-
50-
["selector", [
51-
"div",
52-
["attribute", "[foo=\"bar\"]"]
5346
]], ["punctuation", "{"]
5447
]
5548

0 commit comments

Comments
 (0)