stylus.js 8.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460
  1. /*
  2. Language: Stylus
  3. Author: Bryant Williams <[email protected]>
  4. Description: Stylus (https://github.com/LearnBoost/stylus/)
  5. Category: css
  6. */
  7. function(hljs) {
  8. var VARIABLE = {
  9. className: 'variable',
  10. begin: '\\$' + hljs.IDENT_RE
  11. };
  12. var HEX_COLOR = {
  13. className: 'number',
  14. begin: '#([a-fA-F0-9]{6}|[a-fA-F0-9]{3})'
  15. };
  16. var AT_KEYWORDS = [
  17. 'charset',
  18. 'css',
  19. 'debug',
  20. 'extend',
  21. 'font-face',
  22. 'for',
  23. 'import',
  24. 'include',
  25. 'media',
  26. 'mixin',
  27. 'page',
  28. 'warn',
  29. 'while'
  30. ];
  31. var PSEUDO_SELECTORS = [
  32. 'after',
  33. 'before',
  34. 'first-letter',
  35. 'first-line',
  36. 'active',
  37. 'first-child',
  38. 'focus',
  39. 'hover',
  40. 'lang',
  41. 'link',
  42. 'visited'
  43. ];
  44. var TAGS = [
  45. 'a',
  46. 'abbr',
  47. 'address',
  48. 'article',
  49. 'aside',
  50. 'audio',
  51. 'b',
  52. 'blockquote',
  53. 'body',
  54. 'button',
  55. 'canvas',
  56. 'caption',
  57. 'cite',
  58. 'code',
  59. 'dd',
  60. 'del',
  61. 'details',
  62. 'dfn',
  63. 'div',
  64. 'dl',
  65. 'dt',
  66. 'em',
  67. 'fieldset',
  68. 'figcaption',
  69. 'figure',
  70. 'footer',
  71. 'form',
  72. 'h1',
  73. 'h2',
  74. 'h3',
  75. 'h4',
  76. 'h5',
  77. 'h6',
  78. 'header',
  79. 'hgroup',
  80. 'html',
  81. 'i',
  82. 'iframe',
  83. 'img',
  84. 'input',
  85. 'ins',
  86. 'kbd',
  87. 'label',
  88. 'legend',
  89. 'li',
  90. 'mark',
  91. 'menu',
  92. 'nav',
  93. 'object',
  94. 'ol',
  95. 'p',
  96. 'q',
  97. 'quote',
  98. 'samp',
  99. 'section',
  100. 'span',
  101. 'strong',
  102. 'summary',
  103. 'sup',
  104. 'table',
  105. 'tbody',
  106. 'td',
  107. 'textarea',
  108. 'tfoot',
  109. 'th',
  110. 'thead',
  111. 'time',
  112. 'tr',
  113. 'ul',
  114. 'var',
  115. 'video'
  116. ];
  117. var TAG_END = '[\\.\\s\\n\\[\\:,]';
  118. var ATTRIBUTES = [
  119. 'align-content',
  120. 'align-items',
  121. 'align-self',
  122. 'animation',
  123. 'animation-delay',
  124. 'animation-direction',
  125. 'animation-duration',
  126. 'animation-fill-mode',
  127. 'animation-iteration-count',
  128. 'animation-name',
  129. 'animation-play-state',
  130. 'animation-timing-function',
  131. 'auto',
  132. 'backface-visibility',
  133. 'background',
  134. 'background-attachment',
  135. 'background-clip',
  136. 'background-color',
  137. 'background-image',
  138. 'background-origin',
  139. 'background-position',
  140. 'background-repeat',
  141. 'background-size',
  142. 'border',
  143. 'border-bottom',
  144. 'border-bottom-color',
  145. 'border-bottom-left-radius',
  146. 'border-bottom-right-radius',
  147. 'border-bottom-style',
  148. 'border-bottom-width',
  149. 'border-collapse',
  150. 'border-color',
  151. 'border-image',
  152. 'border-image-outset',
  153. 'border-image-repeat',
  154. 'border-image-slice',
  155. 'border-image-source',
  156. 'border-image-width',
  157. 'border-left',
  158. 'border-left-color',
  159. 'border-left-style',
  160. 'border-left-width',
  161. 'border-radius',
  162. 'border-right',
  163. 'border-right-color',
  164. 'border-right-style',
  165. 'border-right-width',
  166. 'border-spacing',
  167. 'border-style',
  168. 'border-top',
  169. 'border-top-color',
  170. 'border-top-left-radius',
  171. 'border-top-right-radius',
  172. 'border-top-style',
  173. 'border-top-width',
  174. 'border-width',
  175. 'bottom',
  176. 'box-decoration-break',
  177. 'box-shadow',
  178. 'box-sizing',
  179. 'break-after',
  180. 'break-before',
  181. 'break-inside',
  182. 'caption-side',
  183. 'clear',
  184. 'clip',
  185. 'clip-path',
  186. 'color',
  187. 'column-count',
  188. 'column-fill',
  189. 'column-gap',
  190. 'column-rule',
  191. 'column-rule-color',
  192. 'column-rule-style',
  193. 'column-rule-width',
  194. 'column-span',
  195. 'column-width',
  196. 'columns',
  197. 'content',
  198. 'counter-increment',
  199. 'counter-reset',
  200. 'cursor',
  201. 'direction',
  202. 'display',
  203. 'empty-cells',
  204. 'filter',
  205. 'flex',
  206. 'flex-basis',
  207. 'flex-direction',
  208. 'flex-flow',
  209. 'flex-grow',
  210. 'flex-shrink',
  211. 'flex-wrap',
  212. 'float',
  213. 'font',
  214. 'font-family',
  215. 'font-feature-settings',
  216. 'font-kerning',
  217. 'font-language-override',
  218. 'font-size',
  219. 'font-size-adjust',
  220. 'font-stretch',
  221. 'font-style',
  222. 'font-variant',
  223. 'font-variant-ligatures',
  224. 'font-weight',
  225. 'height',
  226. 'hyphens',
  227. 'icon',
  228. 'image-orientation',
  229. 'image-rendering',
  230. 'image-resolution',
  231. 'ime-mode',
  232. 'inherit',
  233. 'initial',
  234. 'justify-content',
  235. 'left',
  236. 'letter-spacing',
  237. 'line-height',
  238. 'list-style',
  239. 'list-style-image',
  240. 'list-style-position',
  241. 'list-style-type',
  242. 'margin',
  243. 'margin-bottom',
  244. 'margin-left',
  245. 'margin-right',
  246. 'margin-top',
  247. 'marks',
  248. 'mask',
  249. 'max-height',
  250. 'max-width',
  251. 'min-height',
  252. 'min-width',
  253. 'nav-down',
  254. 'nav-index',
  255. 'nav-left',
  256. 'nav-right',
  257. 'nav-up',
  258. 'none',
  259. 'normal',
  260. 'object-fit',
  261. 'object-position',
  262. 'opacity',
  263. 'order',
  264. 'orphans',
  265. 'outline',
  266. 'outline-color',
  267. 'outline-offset',
  268. 'outline-style',
  269. 'outline-width',
  270. 'overflow',
  271. 'overflow-wrap',
  272. 'overflow-x',
  273. 'overflow-y',
  274. 'padding',
  275. 'padding-bottom',
  276. 'padding-left',
  277. 'padding-right',
  278. 'padding-top',
  279. 'page-break-after',
  280. 'page-break-before',
  281. 'page-break-inside',
  282. 'perspective',
  283. 'perspective-origin',
  284. 'pointer-events',
  285. 'position',
  286. 'quotes',
  287. 'resize',
  288. 'right',
  289. 'tab-size',
  290. 'table-layout',
  291. 'text-align',
  292. 'text-align-last',
  293. 'text-decoration',
  294. 'text-decoration-color',
  295. 'text-decoration-line',
  296. 'text-decoration-style',
  297. 'text-indent',
  298. 'text-overflow',
  299. 'text-rendering',
  300. 'text-shadow',
  301. 'text-transform',
  302. 'text-underline-position',
  303. 'top',
  304. 'transform',
  305. 'transform-origin',
  306. 'transform-style',
  307. 'transition',
  308. 'transition-delay',
  309. 'transition-duration',
  310. 'transition-property',
  311. 'transition-timing-function',
  312. 'unicode-bidi',
  313. 'vertical-align',
  314. 'visibility',
  315. 'white-space',
  316. 'widows',
  317. 'width',
  318. 'word-break',
  319. 'word-spacing',
  320. 'word-wrap',
  321. 'z-index'
  322. ];
  323. // illegals
  324. var ILLEGAL = [
  325. '\\?',
  326. '(\\bReturn\\b)', // monkey
  327. '(\\bEnd\\b)', // monkey
  328. '(\\bend\\b)', // vbscript
  329. '(\\bdef\\b)', // gradle
  330. ';', // a whole lot of languages
  331. '#\\s', // markdown
  332. '\\*\\s', // markdown
  333. '===\\s', // markdown
  334. '\\|',
  335. '%', // prolog
  336. ];
  337. return {
  338. aliases: ['styl'],
  339. case_insensitive: false,
  340. keywords: 'if else for in',
  341. illegal: '(' + ILLEGAL.join('|') + ')',
  342. contains: [
  343. // strings
  344. hljs.QUOTE_STRING_MODE,
  345. hljs.APOS_STRING_MODE,
  346. // comments
  347. hljs.C_LINE_COMMENT_MODE,
  348. hljs.C_BLOCK_COMMENT_MODE,
  349. // hex colors
  350. HEX_COLOR,
  351. // class tag
  352. {
  353. begin: '\\.[a-zA-Z][a-zA-Z0-9_-]*' + TAG_END,
  354. returnBegin: true,
  355. contains: [
  356. {className: 'selector-class', begin: '\\.[a-zA-Z][a-zA-Z0-9_-]*'}
  357. ]
  358. },
  359. // id tag
  360. {
  361. begin: '\\#[a-zA-Z][a-zA-Z0-9_-]*' + TAG_END,
  362. returnBegin: true,
  363. contains: [
  364. {className: 'selector-id', begin: '\\#[a-zA-Z][a-zA-Z0-9_-]*'}
  365. ]
  366. },
  367. // tags
  368. {
  369. begin: '\\b(' + TAGS.join('|') + ')' + TAG_END,
  370. returnBegin: true,
  371. contains: [
  372. {className: 'selector-tag', begin: '\\b[a-zA-Z][a-zA-Z0-9_-]*'}
  373. ]
  374. },
  375. // psuedo selectors
  376. {
  377. begin: '&?:?:\\b(' + PSEUDO_SELECTORS.join('|') + ')' + TAG_END
  378. },
  379. // @ keywords
  380. {
  381. begin: '\@(' + AT_KEYWORDS.join('|') + ')\\b'
  382. },
  383. // variables
  384. VARIABLE,
  385. // dimension
  386. hljs.CSS_NUMBER_MODE,
  387. // number
  388. hljs.NUMBER_MODE,
  389. // functions
  390. // - only from beginning of line + whitespace
  391. {
  392. className: 'function',
  393. begin: '^[a-zA-Z][a-zA-Z0-9_\-]*\\(.*\\)',
  394. illegal: '[\\n]',
  395. returnBegin: true,
  396. contains: [
  397. {className: 'title', begin: '\\b[a-zA-Z][a-zA-Z0-9_\-]*'},
  398. {
  399. className: 'params',
  400. begin: /\(/,
  401. end: /\)/,
  402. contains: [
  403. HEX_COLOR,
  404. VARIABLE,
  405. hljs.APOS_STRING_MODE,
  406. hljs.CSS_NUMBER_MODE,
  407. hljs.NUMBER_MODE,
  408. hljs.QUOTE_STRING_MODE
  409. ]
  410. }
  411. ]
  412. },
  413. // attributes
  414. // - only from beginning of line + whitespace
  415. // - must have whitespace after it
  416. {
  417. className: 'attribute',
  418. begin: '\\b(' + ATTRIBUTES.reverse().join('|') + ')\\b',
  419. starts: {
  420. // value container
  421. end: /;|$/,
  422. contains: [
  423. HEX_COLOR,
  424. VARIABLE,
  425. hljs.APOS_STRING_MODE,
  426. hljs.QUOTE_STRING_MODE,
  427. hljs.CSS_NUMBER_MODE,
  428. hljs.NUMBER_MODE,
  429. hljs.C_BLOCK_COMMENT_MODE
  430. ],
  431. illegal: /\./,
  432. relevance: 0
  433. }
  434. }
  435. ]
  436. };
  437. }