Skip to content

Commit

Permalink
CSS: Highlight attribute selector (#1671)
Browse files Browse the repository at this point in the history 
This adds highlighting for CSS attributes selectors in CSS Extras
  • Loading branch information
@RunDevelopment
RunDevelopment authored Mar 4, 2019
1 parent f8c8add commit 245b59d
Show file tree
Hide file tree
Showing 4 changed files with 301 additions and 9 deletions.
32 changes: 31 additions & 1 deletion components/prism-css-extras.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,37 @@ Prism.languages.css.selector = {
'pseudo-class': /:[-\w]+(?:\(.*\))?/,
'class': /\.[-:.\w]+/,
'id': /#[-:.\w]+/,
'attribute': /\[[^\]]+\]/
'attribute': {
pattern: /\[(?:[^[\]"']|("|')(?:\\(?:\r\n|[\s\S])|(?!\1)[^\\\r\n])*\1)*\]/,
greedy: true,
inside: {
'punctuation': /^\[|\]$/,
'case-sensitivity': {
pattern: /(\s)[si]$/i,
lookbehind: true,
alias: 'keyword'
},
'namespace': {
pattern: /^(\s*)[-*\w\xA0-\uFFFF]*\|(?!=)/,
lookbehind: true,
inside: {
'punctuation': /\|$/
}
},
'attribute': {
pattern: /^(\s*)[-\w\xA0-\uFFFF]+/,
lookbehind: true
},
'value': [
/("|')(?:\\(?:\r\n|[\s\S])|(?!\1)[^\\\r\n])*\1/,
{
pattern: /(=\s*)[-\w\xA0-\uFFFF]+(?=\s*$)/,
lookbehind: true
}
],
'operator': /[|~*^$]?=/
}
}
}
};

Expand Down
2 changes: 1 addition & 1 deletion components/prism-css-extras.min.js
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

269 changes: 269 additions & 0 deletions tests/languages/css!+css-extras/selector_attribute_feature.test
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,269 @@
[attr] {}

[attr=val] {}
[attr="val"] {}
[attr='val'] {}
[attr|=val] {}
[attr~=val] {}
[attr|=val] {}
[attr^=val] {}
[attr$=val] {}
[attr*=val] {}

[foo|attr][*|attr][|attr] {}
[foo|attr|=val] {}

[attr=val i] {}
[attr="val" S] {}

[ attr ] {}
[ attr = val ] {}
[ attr = val i] {}

[attr="i#m :not(a.class)"] {}

----------------------------------------------------

[
["selector", [
["attribute", [
["punctuation", "["],
["attribute", "attr"],
["punctuation", "]"]
]]
]],
["punctuation", "{"],
["punctuation", "}"],

["selector", [
["attribute", [
["punctuation", "["],
["attribute", "attr"],
["operator", "="],
["value", "val"],
["punctuation", "]"]
]]
]],
["punctuation", "{"],
["punctuation", "}"],

["selector", [
["attribute", [
["punctuation", "["],
["attribute", "attr"],
["operator", "="],
["value", "\"val\""],
["punctuation", "]"]
]]
]],
["punctuation", "{"],
["punctuation", "}"],

["selector", [
["attribute", [
["punctuation", "["],
["attribute", "attr"],
["operator", "="],
["value", "'val'"],
["punctuation", "]"]
]]
]],
["punctuation", "{"],
["punctuation", "}"],

["selector", [
["attribute", [
["punctuation", "["],
["attribute", "attr"],
["operator", "|="],
["value", "val"],
["punctuation", "]"]
]]
]],
["punctuation", "{"],
["punctuation", "}"],

["selector", [
["attribute", [
["punctuation", "["],
["attribute", "attr"],
["operator", "~="],
["value", "val"],
["punctuation", "]"]
]]
]],
["punctuation", "{"],
["punctuation", "}"],

["selector", [
["attribute", [
["punctuation", "["],
["attribute", "attr"],
["operator", "|="],
["value", "val"],
["punctuation", "]"]
]]
]],
["punctuation", "{"],
["punctuation", "}"],

["selector", [
["attribute", [
["punctuation", "["],
["attribute", "attr"],
["operator", "^="],
["value", "val"],
["punctuation", "]"]
]]
]],
["punctuation", "{"],
["punctuation", "}"],

["selector", [
["attribute", [
["punctuation", "["],
["attribute", "attr"],
["operator", "$="],
["value", "val"],
["punctuation", "]"]
]]
]],
["punctuation", "{"],
["punctuation", "}"],

["selector", [
["attribute", [
["punctuation", "["],
["attribute", "attr"],
["operator", "*="],
["value", "val"],
["punctuation", "]"]
]]
]],
["punctuation", "{"],
["punctuation", "}"],

["selector", [
["attribute", [
["punctuation", "["],
["namespace", [
"foo",
["punctuation", "|"]
]],
["attribute", "attr"],
["punctuation", "]"]
]],
["attribute", [
["punctuation", "["],
["namespace", [
"*",
["punctuation", "|"]
]],
["attribute", "attr"],
["punctuation", "]"]
]],
["attribute", [
["punctuation", "["],
["namespace", [
["punctuation", "|"]
]],
["attribute", "attr"],
["punctuation", "]"]
]]
]],
["punctuation", "{"],
["punctuation", "}"],

["selector", [
["attribute", [
["punctuation", "["],
["namespace", [
"foo",
["punctuation", "|"]
]],
["attribute", "attr"],
["operator", "|="],
["value", "val"],
["punctuation", "]"]
]]
]],
["punctuation", "{"],
["punctuation", "}"],

["selector", [
["attribute", [
["punctuation", "["],
["attribute", "attr"],
["operator", "="],
["value", "val"],
["case-sensitivity", "i"],
["punctuation", "]"]
]]
]],
["punctuation", "{"],
["punctuation", "}"],

["selector", [
["attribute", [
["punctuation", "["],
["attribute", "attr"],
["operator", "="],
["value", "\"val\""],
["case-sensitivity", "S"],
["punctuation", "]"]
]]
]],
["punctuation", "{"],
["punctuation", "}"],

["selector", [
["attribute", [
["punctuation", "["],
["attribute", "attr"],
["punctuation", "]"]
]]
]],
["punctuation", "{"],
["punctuation", "}"],

["selector", [
["attribute", [
["punctuation", "["],
["attribute", "attr"],
["operator", "="],
["value", "val"],
["punctuation", "]"]
]]
]],
["punctuation", "{"],
["punctuation", "}"],

["selector", [
["attribute", [
["punctuation", "["],
["attribute", "attr"],
["operator", "="],
["value", "val"],
["case-sensitivity", "i"],
["punctuation", "]"]
]]
]],
["punctuation", "{"],
["punctuation", "}"],

["selector", [
["attribute", [
["punctuation", "["],
["attribute", "attr"],
["operator", "="],
["value", "\"i#m :not(a.class)\""],
["punctuation", "]"]
]]
]],
["punctuation", "{"],
["punctuation", "}"]
]

----------------------------------------------------

Checks for attributes inside selectors.
7 changes: 0 additions & 7 deletions tests/languages/css!+css-extras/selector_feature.test
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,8 +9,6 @@ foo#bar {

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

div[foo="bar"] {

----------------------------------------------------

[
Expand Down Expand Up @@ -45,11 +43,6 @@ div[foo="bar"] {
["class", ".bar"],
["pseudo-class", ":not(baz)"],
["pseudo-element", ":after"]
]], ["punctuation", "{"],

["selector", [
"div",
["attribute", "[foo=\"bar\"]"]
]], ["punctuation", "{"]
]

Expand Down

0 comments on commit 245b59d

Please sign in to comment.