forked from highlightjs/highlight.js
/
scss.js
125 lines (121 loc) · 4.23 KB
/
scss.js
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
/*
Language: SCSS
Description: Scss is an extension of the syntax of CSS.
Author: Kurt Emch <kurt@kurtemch.com>
Website: https://sass-lang.com
Category: common, css, web
*/
import * as css from "./lib/css-shared.js";
/** @type LanguageFn */
export default function(hljs) {
const modes = css.MODES(hljs);
const PSEUDO_ELEMENTS = css.PSEUDO_ELEMENTS;
const PSEUDO_CLASSES = css.PSEUDO_CLASSES;
const AT_IDENTIFIER = '@[a-z-]+'; // @font-face
const AT_MODIFIERS = "and or not only";
const IDENT_RE = '[a-zA-Z-][a-zA-Z0-9_-]*';
const VARIABLE = {
className: 'variable',
begin: '(\\$' + IDENT_RE + ')\\b'
};
return {
name: 'SCSS',
case_insensitive: true,
illegal: '[=/|\']',
contains: [
hljs.C_LINE_COMMENT_MODE,
hljs.C_BLOCK_COMMENT_MODE,
// to recognize keyframe 40% etc which are outside the scope of our
// attribute value mode
modes.CSS_NUMBER_MODE,
{
className: 'selector-id',
begin: '#[A-Za-z0-9_-]+',
relevance: 0
},
{
className: 'selector-class',
begin: '\\.[A-Za-z0-9_-]+',
relevance: 0
},
modes.ATTRIBUTE_SELECTOR_MODE,
{
className: 'selector-tag',
begin: '\\b(' + css.TAGS.join('|') + ')\\b',
// was there, before, but why?
relevance: 0
},
{
className: 'selector-pseudo',
begin: ':(' + PSEUDO_CLASSES.join('|') + ')'
},
{
className: 'selector-pseudo',
begin: ':(:)?(' + PSEUDO_ELEMENTS.join('|') + ')'
},
VARIABLE,
{ // pseudo-selector params
begin: /\(/,
end: /\)/,
contains: [ modes.CSS_NUMBER_MODE ]
},
modes.CSS_VARIABLE,
{
className: 'attribute',
begin: '\\b(' + css.ATTRIBUTES.join('|') + ')\\b'
},
{
begin: '\\b(whitespace|wait|w-resize|visible|vertical-text|vertical-ideographic|uppercase|upper-roman|upper-alpha|underline|transparent|top|thin|thick|text|text-top|text-bottom|tb-rl|table-header-group|table-footer-group|sw-resize|super|strict|static|square|solid|small-caps|separate|se-resize|scroll|s-resize|rtl|row-resize|ridge|right|repeat|repeat-y|repeat-x|relative|progress|pointer|overline|outside|outset|oblique|nowrap|not-allowed|normal|none|nw-resize|no-repeat|no-drop|newspaper|ne-resize|n-resize|move|middle|medium|ltr|lr-tb|lowercase|lower-roman|lower-alpha|loose|list-item|line|line-through|line-edge|lighter|left|keep-all|justify|italic|inter-word|inter-ideograph|inside|inset|inline|inline-block|inherit|inactive|ideograph-space|ideograph-parenthesis|ideograph-numeric|ideograph-alpha|horizontal|hidden|help|hand|groove|fixed|ellipsis|e-resize|double|dotted|distribute|distribute-space|distribute-letter|distribute-all-lines|disc|disabled|default|decimal|dashed|crosshair|collapse|col-resize|circle|char|center|capitalize|break-word|break-all|bottom|both|bolder|bold|block|bidi-override|below|baseline|auto|always|all-scroll|absolute|table|table-cell)\\b'
},
{
begin: /:/,
end: /[;}{]/,
contains: [
modes.BLOCK_COMMENT,
VARIABLE,
modes.HEXCOLOR,
modes.CSS_NUMBER_MODE,
hljs.QUOTE_STRING_MODE,
hljs.APOS_STRING_MODE,
modes.IMPORTANT
]
},
// matching these here allows us to treat them more like regular CSS
// rules so everything between the {} gets regular rule highlighting,
// which is what we want for page and font-face
{
begin: '@(page|font-face)',
keywords: {
$pattern: AT_IDENTIFIER,
keyword: '@page @font-face'
}
},
{
begin: '@',
end: '[{;]',
returnBegin: true,
keywords: {
$pattern: /[a-z-]+/,
keyword: AT_MODIFIERS,
attribute: css.MEDIA_FEATURES.join(" ")
},
contains: [
{
begin: AT_IDENTIFIER,
className: "keyword"
},
{
begin: /[a-z-]+(?=:)/,
className: "attribute"
},
VARIABLE,
hljs.QUOTE_STRING_MODE,
hljs.APOS_STRING_MODE,
modes.HEXCOLOR,
modes.CSS_NUMBER_MODE
]
},
modes.FUNCTION_DISPATCH
]
};
}