Skip to content

Commit 2c10ef8

Browse files
author
那里好脏不可以
authored
Stylus: New tokens and other improvements. (#2368)
This adds `color`, `unit`, and `entity` tokens. The `number` and `operator` patterns were also improved.
1 parent ce0fa22 commit 2c10ef8

8 files changed

+45
-16
lines changed

components/prism-stylus.js

+26-2
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,14 @@
11
(function (Prism) {
2+
var unit = {
3+
pattern: /(\d)(?:%|[a-z]+)/,
4+
lookbehind: true
5+
};
6+
// 123 -123 .123 -.123 12.3 -12.3
7+
var number = {
8+
pattern: /(^|[^\w.-])-?\d*\.?\d+/,
9+
lookbehind: true
10+
};
11+
212
var inside = {
313
'comment': {
414
pattern: /(^|[^\\])(?:\/\*[\s\S]*?\*\/|\/\/.*)/,
@@ -20,13 +30,27 @@
2030
lookbehind: true
2131
},
2232
'hexcode': /#[\da-f]{3,6}/i,
23-
'number': /\b\d+(?:\.\d+)?%?/,
33+
'color': [
34+
/\b(?:AliceBlue|AntiqueWhite|Aqua|Aquamarine|Azure|Beige|Bisque|Black|BlanchedAlmond|Blue|BlueViolet|Brown|BurlyWood|CadetBlue|Chartreuse|Chocolate|Coral|CornflowerBlue|Cornsilk|Crimson|Cyan|DarkBlue|DarkCyan|DarkGoldenRod|DarkGr[ae]y|DarkGreen|DarkKhaki|DarkMagenta|DarkOliveGreen|DarkOrange|DarkOrchid|DarkRed|DarkSalmon|DarkSeaGreen|DarkSlateBlue|DarkSlateGr[ae]y|DarkTurquoise|DarkViolet|DeepPink|DeepSkyBlue|DimGr[ae]y|DodgerBlue|FireBrick|FloralWhite|ForestGreen|Fuchsia|Gainsboro|GhostWhite|Gold|GoldenRod|Gr[ae]y|Green|GreenYellow|HoneyDew|HotPink|IndianRed|Indigo|Ivory|Khaki|Lavender|LavenderBlush|LawnGreen|LemonChiffon|LightBlue|LightCoral|LightCyan|LightGoldenRodYellow|LightGr[ae]y|LightGreen|LightPink|LightSalmon|LightSeaGreen|LightSkyBlue|LightSlateGr[ae]y|LightSteelBlue|LightYellow|Lime|LimeGreen|Linen|Magenta|Maroon|MediumAquaMarine|MediumBlue|MediumOrchid|MediumPurple|MediumSeaGreen|MediumSlateBlue|MediumSpringGreen|MediumTurquoise|MediumVioletRed|MidnightBlue|MintCream|MistyRose|Moccasin|NavajoWhite|Navy|OldLace|Olive|OliveDrab|Orange|OrangeRed|Orchid|PaleGoldenRod|PaleGreen|PaleTurquoise|PaleVioletRed|PapayaWhip|PeachPuff|Peru|Pink|Plum|PowderBlue|Purple|Red|RosyBrown|RoyalBlue|SaddleBrown|Salmon|SandyBrown|SeaGreen|SeaShell|Sienna|Silver|SkyBlue|SlateBlue|SlateGr[ae]y|Snow|SpringGreen|SteelBlue|Tan|Teal|Thistle|Tomato|Transparent|Turquoise|Violet|Wheat|White|WhiteSmoke|Yellow|YellowGreen)\b/i,
35+
{
36+
pattern: /\b(?:rgb|hsl)\(\s*\d{1,3}\s*,\s*\d{1,3}%?\s*,\s*\d{1,3}%?\s*\)\B|\b(?:rgb|hsl)a\(\s*\d{1,3}\s*,\s*\d{1,3}%?\s*,\s*\d{1,3}%?\s*,\s*(?:0|0?\.\d+|1)\s*\)\B/i,
37+
inside: {
38+
'unit': unit,
39+
'number': number,
40+
'function': /[\w-]+(?=\()/,
41+
'punctuation': /[(),]/
42+
}
43+
}
44+
],
45+
'entity': /\\[\da-f]{1,8}/i,
46+
'unit': unit,
2447
'boolean': /\b(?:true|false)\b/,
2548
'operator': [
2649
// We want non-word chars around "-" because it is
2750
// accepted in property names.
28-
/~|[+!\/%<>?=]=?|[-:]=|\*[*=]?|\.+|&&|\|\||\B-\B|\b(?:and|in|is(?: a| defined| not|nt)?|not|or)\b/
51+
/~|[+!\/%<>?=]=?|[-:]=|\*[*=]?|\.{2,3}|&&|\|\||\B-\B|\b(?:and|in|is(?: a| defined| not|nt)?|not|or)\b/
2952
],
53+
'number': number,
3054
'punctuation': /[{}()\[\];:,]/
3155
};
3256

components/prism-stylus.min.js

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

tests/languages/stylus+pug/stylus_inclusion.test

+1-1
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@
1010
["variable", "font-size"],
1111
["operator", "="],
1212
["number", "14"],
13-
"px"
13+
["unit", "px"]
1414
]]
1515
]]
1616
]

tests/languages/stylus/func_feature.test

+1-1
Original file line numberDiff line numberDiff line change
@@ -33,7 +33,7 @@ form input[type=button]
3333
["function", "border-radius"],
3434
["punctuation", "("],
3535
["number", "5"],
36-
"px",
36+
["unit", "px"],
3737
["punctuation", ")"]
3838
]],
3939
["property-declaration", [

tests/languages/stylus/important_feature.test

+1-1
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ color: red !important
77
["property-declaration", [
88
["property", ["color"]],
99
["punctuation", ":"],
10-
" red ",
10+
["color", "red"],
1111
["important", "!important"]
1212
]],
1313
["atrule-declaration", [

tests/languages/stylus/number_feature.test

+4-2
Original file line numberDiff line numberDiff line change
@@ -18,12 +18,14 @@ bar = 1.5%
1818
["property-declaration", [
1919
["property", ["width"]],
2020
["punctuation", ":"],
21-
["number", "23%"]
21+
["number", "23"],
22+
["unit", "%"]
2223
]],
2324
["variable-declaration", [
2425
["variable", "bar"],
2526
["operator", "="],
26-
["number", "1.5%"]
27+
["number", "1.5"],
28+
["unit", "%"]
2729
]]
2830
]
2931

tests/languages/stylus/property-declaration_feature.test

+6-3
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ div
22
width 40px
33
color: red
44
background: blue;
5+
animation-name test1, animation4
56

67
div {
78
background-{foo}: bar;
@@ -21,14 +22,16 @@ comment
2122
[
2223
["selector", ["div"]],
2324
["property-declaration", [
24-
["property", ["width"]], ["number", "40"], "px"
25+
["property", ["width"]], ["number", "40"], ["unit", "px"]
2526
]],
2627
["property-declaration", [
27-
["property", ["color"]], ["punctuation", ":"], " red"
28+
["property", ["color"]], ["punctuation", ":"], ["color", "red"]
2829
]],
2930
["property-declaration", [
30-
["property", ["background"]], ["punctuation", ":"], " blue", ["punctuation", ";"]
31+
["property", ["background"]], ["punctuation", ":"], ["color", "blue"], ["punctuation", ";"]
3132
]],
33+
["property-declaration", [
34+
["property", ["animation-name"]], " test1", ["punctuation", ","], " animation4"]],
3235
["selector", ["div ", ["punctuation", "{"]]],
3336
["property-declaration", [
3437
["property", [

tests/languages/stylus/selector_feature.test

+5-5
Original file line numberDiff line numberDiff line change
@@ -22,15 +22,15 @@ color red
2222

2323
[
2424
["selector", ["div\r\nspan[foo=bar]"]],
25-
["property-declaration", [["property", ["color"]], " red"]],
25+
["property-declaration", [["property", ["color"]], ["color", "red"]]],
2626
["selector", ["div input", ["punctuation", ","], "\r\ninput:nth-child(2n)"]],
27-
["property-declaration", [["property", ["color"]], " red"]],
27+
["property-declaration", [["property", ["color"]], ["color", "red"]]],
2828
["selector", ["#foo"]],
2929
["selector", [".bar::before"]],
30-
["property-declaration", [["property", ["color"]], " red"]],
30+
["property-declaration", [["property", ["color"]], ["color", "red"]]],
3131
["selector", ["#foo"]],
3232
["selector", [".bar ", ["punctuation", "{"]]],
33-
["property-declaration", [["property", ["color"]], " red"]],
33+
["property-declaration", [["property", ["color"]], ["color", "red"]]],
3434
["punctuation", "}"],
3535
["selector", [
3636
["interpolation", [
@@ -41,7 +41,7 @@ color red
4141
]],
4242
":hover"
4343
]],
44-
["property-declaration", [["property", ["color"]], " red"]]
44+
["property-declaration", [["property", ["color"]], ["color", "red"]]]
4545
]
4646

4747
----------------------------------------------------

0 commit comments

Comments
 (0)