less.js 19 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955
  1. const MODES = (hljs) => {
  2. return {
  3. IMPORTANT: {
  4. scope: 'meta',
  5. begin: '!important'
  6. },
  7. BLOCK_COMMENT: hljs.C_BLOCK_COMMENT_MODE,
  8. HEXCOLOR: {
  9. scope: 'number',
  10. begin: /#(([0-9a-fA-F]{3,4})|(([0-9a-fA-F]{2}){3,4}))\b/
  11. },
  12. FUNCTION_DISPATCH: {
  13. className: "built_in",
  14. begin: /[\w-]+(?=\()/
  15. },
  16. ATTRIBUTE_SELECTOR_MODE: {
  17. scope: 'selector-attr',
  18. begin: /\[/,
  19. end: /\]/,
  20. illegal: '$',
  21. contains: [
  22. hljs.APOS_STRING_MODE,
  23. hljs.QUOTE_STRING_MODE
  24. ]
  25. },
  26. CSS_NUMBER_MODE: {
  27. scope: 'number',
  28. begin: hljs.NUMBER_RE + '(' +
  29. '%|em|ex|ch|rem' +
  30. '|vw|vh|vmin|vmax' +
  31. '|cm|mm|in|pt|pc|px' +
  32. '|deg|grad|rad|turn' +
  33. '|s|ms' +
  34. '|Hz|kHz' +
  35. '|dpi|dpcm|dppx' +
  36. ')?',
  37. relevance: 0
  38. },
  39. CSS_VARIABLE: {
  40. className: "attr",
  41. begin: /--[A-Za-z_][A-Za-z0-9_-]*/
  42. }
  43. };
  44. };
  45. const HTML_TAGS = [
  46. 'a',
  47. 'abbr',
  48. 'address',
  49. 'article',
  50. 'aside',
  51. 'audio',
  52. 'b',
  53. 'blockquote',
  54. 'body',
  55. 'button',
  56. 'canvas',
  57. 'caption',
  58. 'cite',
  59. 'code',
  60. 'dd',
  61. 'del',
  62. 'details',
  63. 'dfn',
  64. 'div',
  65. 'dl',
  66. 'dt',
  67. 'em',
  68. 'fieldset',
  69. 'figcaption',
  70. 'figure',
  71. 'footer',
  72. 'form',
  73. 'h1',
  74. 'h2',
  75. 'h3',
  76. 'h4',
  77. 'h5',
  78. 'h6',
  79. 'header',
  80. 'hgroup',
  81. 'html',
  82. 'i',
  83. 'iframe',
  84. 'img',
  85. 'input',
  86. 'ins',
  87. 'kbd',
  88. 'label',
  89. 'legend',
  90. 'li',
  91. 'main',
  92. 'mark',
  93. 'menu',
  94. 'nav',
  95. 'object',
  96. 'ol',
  97. 'optgroup',
  98. 'option',
  99. 'p',
  100. 'picture',
  101. 'q',
  102. 'quote',
  103. 'samp',
  104. 'section',
  105. 'select',
  106. 'source',
  107. 'span',
  108. 'strong',
  109. 'summary',
  110. 'sup',
  111. 'table',
  112. 'tbody',
  113. 'td',
  114. 'textarea',
  115. 'tfoot',
  116. 'th',
  117. 'thead',
  118. 'time',
  119. 'tr',
  120. 'ul',
  121. 'var',
  122. 'video'
  123. ];
  124. const SVG_TAGS = [
  125. 'defs',
  126. 'g',
  127. 'marker',
  128. 'mask',
  129. 'pattern',
  130. 'svg',
  131. 'switch',
  132. 'symbol',
  133. 'feBlend',
  134. 'feColorMatrix',
  135. 'feComponentTransfer',
  136. 'feComposite',
  137. 'feConvolveMatrix',
  138. 'feDiffuseLighting',
  139. 'feDisplacementMap',
  140. 'feFlood',
  141. 'feGaussianBlur',
  142. 'feImage',
  143. 'feMerge',
  144. 'feMorphology',
  145. 'feOffset',
  146. 'feSpecularLighting',
  147. 'feTile',
  148. 'feTurbulence',
  149. 'linearGradient',
  150. 'radialGradient',
  151. 'stop',
  152. 'circle',
  153. 'ellipse',
  154. 'image',
  155. 'line',
  156. 'path',
  157. 'polygon',
  158. 'polyline',
  159. 'rect',
  160. 'text',
  161. 'use',
  162. 'textPath',
  163. 'tspan',
  164. 'foreignObject',
  165. 'clipPath'
  166. ];
  167. const TAGS = [
  168. ...HTML_TAGS,
  169. ...SVG_TAGS,
  170. ];
  171. // Sorting, then reversing makes sure longer attributes/elements like
  172. // `font-weight` are matched fully instead of getting false positives on say `font`
  173. const MEDIA_FEATURES = [
  174. 'any-hover',
  175. 'any-pointer',
  176. 'aspect-ratio',
  177. 'color',
  178. 'color-gamut',
  179. 'color-index',
  180. 'device-aspect-ratio',
  181. 'device-height',
  182. 'device-width',
  183. 'display-mode',
  184. 'forced-colors',
  185. 'grid',
  186. 'height',
  187. 'hover',
  188. 'inverted-colors',
  189. 'monochrome',
  190. 'orientation',
  191. 'overflow-block',
  192. 'overflow-inline',
  193. 'pointer',
  194. 'prefers-color-scheme',
  195. 'prefers-contrast',
  196. 'prefers-reduced-motion',
  197. 'prefers-reduced-transparency',
  198. 'resolution',
  199. 'scan',
  200. 'scripting',
  201. 'update',
  202. 'width',
  203. // TODO: find a better solution?
  204. 'min-width',
  205. 'max-width',
  206. 'min-height',
  207. 'max-height'
  208. ].sort().reverse();
  209. // https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes
  210. const PSEUDO_CLASSES = [
  211. 'active',
  212. 'any-link',
  213. 'blank',
  214. 'checked',
  215. 'current',
  216. 'default',
  217. 'defined',
  218. 'dir', // dir()
  219. 'disabled',
  220. 'drop',
  221. 'empty',
  222. 'enabled',
  223. 'first',
  224. 'first-child',
  225. 'first-of-type',
  226. 'fullscreen',
  227. 'future',
  228. 'focus',
  229. 'focus-visible',
  230. 'focus-within',
  231. 'has', // has()
  232. 'host', // host or host()
  233. 'host-context', // host-context()
  234. 'hover',
  235. 'indeterminate',
  236. 'in-range',
  237. 'invalid',
  238. 'is', // is()
  239. 'lang', // lang()
  240. 'last-child',
  241. 'last-of-type',
  242. 'left',
  243. 'link',
  244. 'local-link',
  245. 'not', // not()
  246. 'nth-child', // nth-child()
  247. 'nth-col', // nth-col()
  248. 'nth-last-child', // nth-last-child()
  249. 'nth-last-col', // nth-last-col()
  250. 'nth-last-of-type', //nth-last-of-type()
  251. 'nth-of-type', //nth-of-type()
  252. 'only-child',
  253. 'only-of-type',
  254. 'optional',
  255. 'out-of-range',
  256. 'past',
  257. 'placeholder-shown',
  258. 'read-only',
  259. 'read-write',
  260. 'required',
  261. 'right',
  262. 'root',
  263. 'scope',
  264. 'target',
  265. 'target-within',
  266. 'user-invalid',
  267. 'valid',
  268. 'visited',
  269. 'where' // where()
  270. ].sort().reverse();
  271. // https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-elements
  272. const PSEUDO_ELEMENTS = [
  273. 'after',
  274. 'backdrop',
  275. 'before',
  276. 'cue',
  277. 'cue-region',
  278. 'first-letter',
  279. 'first-line',
  280. 'grammar-error',
  281. 'marker',
  282. 'part',
  283. 'placeholder',
  284. 'selection',
  285. 'slotted',
  286. 'spelling-error'
  287. ].sort().reverse();
  288. const ATTRIBUTES = [
  289. 'accent-color',
  290. 'align-content',
  291. 'align-items',
  292. 'align-self',
  293. 'alignment-baseline',
  294. 'all',
  295. 'animation',
  296. 'animation-delay',
  297. 'animation-direction',
  298. 'animation-duration',
  299. 'animation-fill-mode',
  300. 'animation-iteration-count',
  301. 'animation-name',
  302. 'animation-play-state',
  303. 'animation-timing-function',
  304. 'appearance',
  305. 'backface-visibility',
  306. 'background',
  307. 'background-attachment',
  308. 'background-blend-mode',
  309. 'background-clip',
  310. 'background-color',
  311. 'background-image',
  312. 'background-origin',
  313. 'background-position',
  314. 'background-repeat',
  315. 'background-size',
  316. 'baseline-shift',
  317. 'block-size',
  318. 'border',
  319. 'border-block',
  320. 'border-block-color',
  321. 'border-block-end',
  322. 'border-block-end-color',
  323. 'border-block-end-style',
  324. 'border-block-end-width',
  325. 'border-block-start',
  326. 'border-block-start-color',
  327. 'border-block-start-style',
  328. 'border-block-start-width',
  329. 'border-block-style',
  330. 'border-block-width',
  331. 'border-bottom',
  332. 'border-bottom-color',
  333. 'border-bottom-left-radius',
  334. 'border-bottom-right-radius',
  335. 'border-bottom-style',
  336. 'border-bottom-width',
  337. 'border-collapse',
  338. 'border-color',
  339. 'border-image',
  340. 'border-image-outset',
  341. 'border-image-repeat',
  342. 'border-image-slice',
  343. 'border-image-source',
  344. 'border-image-width',
  345. 'border-inline',
  346. 'border-inline-color',
  347. 'border-inline-end',
  348. 'border-inline-end-color',
  349. 'border-inline-end-style',
  350. 'border-inline-end-width',
  351. 'border-inline-start',
  352. 'border-inline-start-color',
  353. 'border-inline-start-style',
  354. 'border-inline-start-width',
  355. 'border-inline-style',
  356. 'border-inline-width',
  357. 'border-left',
  358. 'border-left-color',
  359. 'border-left-style',
  360. 'border-left-width',
  361. 'border-radius',
  362. 'border-right',
  363. 'border-end-end-radius',
  364. 'border-end-start-radius',
  365. 'border-right-color',
  366. 'border-right-style',
  367. 'border-right-width',
  368. 'border-spacing',
  369. 'border-start-end-radius',
  370. 'border-start-start-radius',
  371. 'border-style',
  372. 'border-top',
  373. 'border-top-color',
  374. 'border-top-left-radius',
  375. 'border-top-right-radius',
  376. 'border-top-style',
  377. 'border-top-width',
  378. 'border-width',
  379. 'bottom',
  380. 'box-decoration-break',
  381. 'box-shadow',
  382. 'box-sizing',
  383. 'break-after',
  384. 'break-before',
  385. 'break-inside',
  386. 'cx',
  387. 'cy',
  388. 'caption-side',
  389. 'caret-color',
  390. 'clear',
  391. 'clip',
  392. 'clip-path',
  393. 'clip-rule',
  394. 'color',
  395. 'color-interpolation',
  396. 'color-interpolation-filters',
  397. 'color-profile',
  398. 'color-rendering',
  399. 'color-scheme',
  400. 'column-count',
  401. 'column-fill',
  402. 'column-gap',
  403. 'column-rule',
  404. 'column-rule-color',
  405. 'column-rule-style',
  406. 'column-rule-width',
  407. 'column-span',
  408. 'column-width',
  409. 'columns',
  410. 'contain',
  411. 'content',
  412. 'content-visibility',
  413. 'counter-increment',
  414. 'counter-reset',
  415. 'cue',
  416. 'cue-after',
  417. 'cue-before',
  418. 'cursor',
  419. 'direction',
  420. 'display',
  421. 'dominant-baseline',
  422. 'empty-cells',
  423. 'enable-background',
  424. 'fill',
  425. 'fill-opacity',
  426. 'fill-rule',
  427. 'filter',
  428. 'flex',
  429. 'flex-basis',
  430. 'flex-direction',
  431. 'flex-flow',
  432. 'flex-grow',
  433. 'flex-shrink',
  434. 'flex-wrap',
  435. 'float',
  436. 'flow',
  437. 'flood-color',
  438. 'flood-opacity',
  439. 'font',
  440. 'font-display',
  441. 'font-family',
  442. 'font-feature-settings',
  443. 'font-kerning',
  444. 'font-language-override',
  445. 'font-size',
  446. 'font-size-adjust',
  447. 'font-smoothing',
  448. 'font-stretch',
  449. 'font-style',
  450. 'font-synthesis',
  451. 'font-variant',
  452. 'font-variant-caps',
  453. 'font-variant-east-asian',
  454. 'font-variant-ligatures',
  455. 'font-variant-numeric',
  456. 'font-variant-position',
  457. 'font-variation-settings',
  458. 'font-weight',
  459. 'gap',
  460. 'glyph-orientation-horizontal',
  461. 'glyph-orientation-vertical',
  462. 'grid',
  463. 'grid-area',
  464. 'grid-auto-columns',
  465. 'grid-auto-flow',
  466. 'grid-auto-rows',
  467. 'grid-column',
  468. 'grid-column-end',
  469. 'grid-column-start',
  470. 'grid-gap',
  471. 'grid-row',
  472. 'grid-row-end',
  473. 'grid-row-start',
  474. 'grid-template',
  475. 'grid-template-areas',
  476. 'grid-template-columns',
  477. 'grid-template-rows',
  478. 'hanging-punctuation',
  479. 'height',
  480. 'hyphens',
  481. 'icon',
  482. 'image-orientation',
  483. 'image-rendering',
  484. 'image-resolution',
  485. 'ime-mode',
  486. 'inline-size',
  487. 'inset',
  488. 'inset-block',
  489. 'inset-block-end',
  490. 'inset-block-start',
  491. 'inset-inline',
  492. 'inset-inline-end',
  493. 'inset-inline-start',
  494. 'isolation',
  495. 'kerning',
  496. 'justify-content',
  497. 'justify-items',
  498. 'justify-self',
  499. 'left',
  500. 'letter-spacing',
  501. 'lighting-color',
  502. 'line-break',
  503. 'line-height',
  504. 'list-style',
  505. 'list-style-image',
  506. 'list-style-position',
  507. 'list-style-type',
  508. 'marker',
  509. 'marker-end',
  510. 'marker-mid',
  511. 'marker-start',
  512. 'mask',
  513. 'margin',
  514. 'margin-block',
  515. 'margin-block-end',
  516. 'margin-block-start',
  517. 'margin-bottom',
  518. 'margin-inline',
  519. 'margin-inline-end',
  520. 'margin-inline-start',
  521. 'margin-left',
  522. 'margin-right',
  523. 'margin-top',
  524. 'marks',
  525. 'mask',
  526. 'mask-border',
  527. 'mask-border-mode',
  528. 'mask-border-outset',
  529. 'mask-border-repeat',
  530. 'mask-border-slice',
  531. 'mask-border-source',
  532. 'mask-border-width',
  533. 'mask-clip',
  534. 'mask-composite',
  535. 'mask-image',
  536. 'mask-mode',
  537. 'mask-origin',
  538. 'mask-position',
  539. 'mask-repeat',
  540. 'mask-size',
  541. 'mask-type',
  542. 'max-block-size',
  543. 'max-height',
  544. 'max-inline-size',
  545. 'max-width',
  546. 'min-block-size',
  547. 'min-height',
  548. 'min-inline-size',
  549. 'min-width',
  550. 'mix-blend-mode',
  551. 'nav-down',
  552. 'nav-index',
  553. 'nav-left',
  554. 'nav-right',
  555. 'nav-up',
  556. 'none',
  557. 'normal',
  558. 'object-fit',
  559. 'object-position',
  560. 'opacity',
  561. 'order',
  562. 'orphans',
  563. 'outline',
  564. 'outline-color',
  565. 'outline-offset',
  566. 'outline-style',
  567. 'outline-width',
  568. 'overflow',
  569. 'overflow-wrap',
  570. 'overflow-x',
  571. 'overflow-y',
  572. 'padding',
  573. 'padding-block',
  574. 'padding-block-end',
  575. 'padding-block-start',
  576. 'padding-bottom',
  577. 'padding-inline',
  578. 'padding-inline-end',
  579. 'padding-inline-start',
  580. 'padding-left',
  581. 'padding-right',
  582. 'padding-top',
  583. 'page-break-after',
  584. 'page-break-before',
  585. 'page-break-inside',
  586. 'pause',
  587. 'pause-after',
  588. 'pause-before',
  589. 'perspective',
  590. 'perspective-origin',
  591. 'pointer-events',
  592. 'position',
  593. 'quotes',
  594. 'r',
  595. 'resize',
  596. 'rest',
  597. 'rest-after',
  598. 'rest-before',
  599. 'right',
  600. 'rotate',
  601. 'row-gap',
  602. 'scale',
  603. 'scroll-margin',
  604. 'scroll-margin-block',
  605. 'scroll-margin-block-end',
  606. 'scroll-margin-block-start',
  607. 'scroll-margin-bottom',
  608. 'scroll-margin-inline',
  609. 'scroll-margin-inline-end',
  610. 'scroll-margin-inline-start',
  611. 'scroll-margin-left',
  612. 'scroll-margin-right',
  613. 'scroll-margin-top',
  614. 'scroll-padding',
  615. 'scroll-padding-block',
  616. 'scroll-padding-block-end',
  617. 'scroll-padding-block-start',
  618. 'scroll-padding-bottom',
  619. 'scroll-padding-inline',
  620. 'scroll-padding-inline-end',
  621. 'scroll-padding-inline-start',
  622. 'scroll-padding-left',
  623. 'scroll-padding-right',
  624. 'scroll-padding-top',
  625. 'scroll-snap-align',
  626. 'scroll-snap-stop',
  627. 'scroll-snap-type',
  628. 'scrollbar-color',
  629. 'scrollbar-gutter',
  630. 'scrollbar-width',
  631. 'shape-image-threshold',
  632. 'shape-margin',
  633. 'shape-outside',
  634. 'shape-rendering',
  635. 'stop-color',
  636. 'stop-opacity',
  637. 'stroke',
  638. 'stroke-dasharray',
  639. 'stroke-dashoffset',
  640. 'stroke-linecap',
  641. 'stroke-linejoin',
  642. 'stroke-miterlimit',
  643. 'stroke-opacity',
  644. 'stroke-width',
  645. 'speak',
  646. 'speak-as',
  647. 'src', // @font-face
  648. 'tab-size',
  649. 'table-layout',
  650. 'text-anchor',
  651. 'text-align',
  652. 'text-align-all',
  653. 'text-align-last',
  654. 'text-combine-upright',
  655. 'text-decoration',
  656. 'text-decoration-color',
  657. 'text-decoration-line',
  658. 'text-decoration-skip-ink',
  659. 'text-decoration-style',
  660. 'text-decoration-thickness',
  661. 'text-emphasis',
  662. 'text-emphasis-color',
  663. 'text-emphasis-position',
  664. 'text-emphasis-style',
  665. 'text-indent',
  666. 'text-justify',
  667. 'text-orientation',
  668. 'text-overflow',
  669. 'text-rendering',
  670. 'text-shadow',
  671. 'text-transform',
  672. 'text-underline-offset',
  673. 'text-underline-position',
  674. 'top',
  675. 'transform',
  676. 'transform-box',
  677. 'transform-origin',
  678. 'transform-style',
  679. 'transition',
  680. 'transition-delay',
  681. 'transition-duration',
  682. 'transition-property',
  683. 'transition-timing-function',
  684. 'translate',
  685. 'unicode-bidi',
  686. 'vector-effect',
  687. 'vertical-align',
  688. 'visibility',
  689. 'voice-balance',
  690. 'voice-duration',
  691. 'voice-family',
  692. 'voice-pitch',
  693. 'voice-range',
  694. 'voice-rate',
  695. 'voice-stress',
  696. 'voice-volume',
  697. 'white-space',
  698. 'widows',
  699. 'width',
  700. 'will-change',
  701. 'word-break',
  702. 'word-spacing',
  703. 'word-wrap',
  704. 'writing-mode',
  705. 'x',
  706. 'y',
  707. 'z-index'
  708. ].sort().reverse();
  709. // some grammars use them all as a single group
  710. const PSEUDO_SELECTORS = PSEUDO_CLASSES.concat(PSEUDO_ELEMENTS).sort().reverse();
  711. /*
  712. Language: Less
  713. Description: It's CSS, with just a little more.
  714. Author: Max Mikhailov <seven.phases.max@gmail.com>
  715. Website: http://lesscss.org
  716. Category: common, css, web
  717. */
  718. /** @type LanguageFn */
  719. function less(hljs) {
  720. const modes = MODES(hljs);
  721. const PSEUDO_SELECTORS$1 = PSEUDO_SELECTORS;
  722. const AT_MODIFIERS = "and or not only";
  723. const IDENT_RE = '[\\w-]+'; // yes, Less identifiers may begin with a digit
  724. const INTERP_IDENT_RE = '(' + IDENT_RE + '|@\\{' + IDENT_RE + '\\})';
  725. /* Generic Modes */
  726. const RULES = []; const VALUE_MODES = []; // forward def. for recursive modes
  727. const STRING_MODE = function(c) {
  728. return {
  729. // Less strings are not multiline (also include '~' for more consistent coloring of "escaped" strings)
  730. className: 'string',
  731. begin: '~?' + c + '.*?' + c
  732. };
  733. };
  734. const IDENT_MODE = function(name, begin, relevance) {
  735. return {
  736. className: name,
  737. begin: begin,
  738. relevance: relevance
  739. };
  740. };
  741. const AT_KEYWORDS = {
  742. $pattern: /[a-z-]+/,
  743. keyword: AT_MODIFIERS,
  744. attribute: MEDIA_FEATURES.join(" ")
  745. };
  746. const PARENS_MODE = {
  747. // used only to properly balance nested parens inside mixin call, def. arg list
  748. begin: '\\(',
  749. end: '\\)',
  750. contains: VALUE_MODES,
  751. keywords: AT_KEYWORDS,
  752. relevance: 0
  753. };
  754. // generic Less highlighter (used almost everywhere except selectors):
  755. VALUE_MODES.push(
  756. hljs.C_LINE_COMMENT_MODE,
  757. hljs.C_BLOCK_COMMENT_MODE,
  758. STRING_MODE("'"),
  759. STRING_MODE('"'),
  760. modes.CSS_NUMBER_MODE, // fixme: it does not include dot for numbers like .5em :(
  761. {
  762. begin: '(url|data-uri)\\(',
  763. starts: {
  764. className: 'string',
  765. end: '[\\)\\n]',
  766. excludeEnd: true
  767. }
  768. },
  769. modes.HEXCOLOR,
  770. PARENS_MODE,
  771. IDENT_MODE('variable', '@@?' + IDENT_RE, 10),
  772. IDENT_MODE('variable', '@\\{' + IDENT_RE + '\\}'),
  773. IDENT_MODE('built_in', '~?`[^`]*?`'), // inline javascript (or whatever host language) *multiline* string
  774. { // @media features (it’s here to not duplicate things in AT_RULE_MODE with extra PARENS_MODE overriding):
  775. className: 'attribute',
  776. begin: IDENT_RE + '\\s*:',
  777. end: ':',
  778. returnBegin: true,
  779. excludeEnd: true
  780. },
  781. modes.IMPORTANT,
  782. { beginKeywords: 'and not' },
  783. modes.FUNCTION_DISPATCH
  784. );
  785. const VALUE_WITH_RULESETS = VALUE_MODES.concat({
  786. begin: /\{/,
  787. end: /\}/,
  788. contains: RULES
  789. });
  790. const MIXIN_GUARD_MODE = {
  791. beginKeywords: 'when',
  792. endsWithParent: true,
  793. contains: [ { beginKeywords: 'and not' } ].concat(VALUE_MODES) // using this form to override VALUE’s 'function' match
  794. };
  795. /* Rule-Level Modes */
  796. const RULE_MODE = {
  797. begin: INTERP_IDENT_RE + '\\s*:',
  798. returnBegin: true,
  799. end: /[;}]/,
  800. relevance: 0,
  801. contains: [
  802. { begin: /-(webkit|moz|ms|o)-/ },
  803. modes.CSS_VARIABLE,
  804. {
  805. className: 'attribute',
  806. begin: '\\b(' + ATTRIBUTES.join('|') + ')\\b',
  807. end: /(?=:)/,
  808. starts: {
  809. endsWithParent: true,
  810. illegal: '[<=$]',
  811. relevance: 0,
  812. contains: VALUE_MODES
  813. }
  814. }
  815. ]
  816. };
  817. const AT_RULE_MODE = {
  818. className: 'keyword',
  819. begin: '@(import|media|charset|font-face|(-[a-z]+-)?keyframes|supports|document|namespace|page|viewport|host)\\b',
  820. starts: {
  821. end: '[;{}]',
  822. keywords: AT_KEYWORDS,
  823. returnEnd: true,
  824. contains: VALUE_MODES,
  825. relevance: 0
  826. }
  827. };
  828. // variable definitions and calls
  829. const VAR_RULE_MODE = {
  830. className: 'variable',
  831. variants: [
  832. // using more strict pattern for higher relevance to increase chances of Less detection.
  833. // this is *the only* Less specific statement used in most of the sources, so...
  834. // (we’ll still often loose to the css-parser unless there's '//' comment,
  835. // simply because 1 variable just can't beat 99 properties :)
  836. {
  837. begin: '@' + IDENT_RE + '\\s*:',
  838. relevance: 15
  839. },
  840. { begin: '@' + IDENT_RE }
  841. ],
  842. starts: {
  843. end: '[;}]',
  844. returnEnd: true,
  845. contains: VALUE_WITH_RULESETS
  846. }
  847. };
  848. const SELECTOR_MODE = {
  849. // first parse unambiguous selectors (i.e. those not starting with tag)
  850. // then fall into the scary lookahead-discriminator variant.
  851. // this mode also handles mixin definitions and calls
  852. variants: [
  853. {
  854. begin: '[\\.#:&\\[>]',
  855. end: '[;{}]' // mixin calls end with ';'
  856. },
  857. {
  858. begin: INTERP_IDENT_RE,
  859. end: /\{/
  860. }
  861. ],
  862. returnBegin: true,
  863. returnEnd: true,
  864. illegal: '[<=\'$"]',
  865. relevance: 0,
  866. contains: [
  867. hljs.C_LINE_COMMENT_MODE,
  868. hljs.C_BLOCK_COMMENT_MODE,
  869. MIXIN_GUARD_MODE,
  870. IDENT_MODE('keyword', 'all\\b'),
  871. IDENT_MODE('variable', '@\\{' + IDENT_RE + '\\}'), // otherwise it’s identified as tag
  872. {
  873. begin: '\\b(' + TAGS.join('|') + ')\\b',
  874. className: 'selector-tag'
  875. },
  876. modes.CSS_NUMBER_MODE,
  877. IDENT_MODE('selector-tag', INTERP_IDENT_RE, 0),
  878. IDENT_MODE('selector-id', '#' + INTERP_IDENT_RE),
  879. IDENT_MODE('selector-class', '\\.' + INTERP_IDENT_RE, 0),
  880. IDENT_MODE('selector-tag', '&', 0),
  881. modes.ATTRIBUTE_SELECTOR_MODE,
  882. {
  883. className: 'selector-pseudo',
  884. begin: ':(' + PSEUDO_CLASSES.join('|') + ')'
  885. },
  886. {
  887. className: 'selector-pseudo',
  888. begin: ':(:)?(' + PSEUDO_ELEMENTS.join('|') + ')'
  889. },
  890. {
  891. begin: /\(/,
  892. end: /\)/,
  893. relevance: 0,
  894. contains: VALUE_WITH_RULESETS
  895. }, // argument list of parametric mixins
  896. { begin: '!important' }, // eat !important after mixin call or it will be colored as tag
  897. modes.FUNCTION_DISPATCH
  898. ]
  899. };
  900. const PSEUDO_SELECTOR_MODE = {
  901. begin: IDENT_RE + ':(:)?' + `(${PSEUDO_SELECTORS$1.join('|')})`,
  902. returnBegin: true,
  903. contains: [ SELECTOR_MODE ]
  904. };
  905. RULES.push(
  906. hljs.C_LINE_COMMENT_MODE,
  907. hljs.C_BLOCK_COMMENT_MODE,
  908. AT_RULE_MODE,
  909. VAR_RULE_MODE,
  910. PSEUDO_SELECTOR_MODE,
  911. RULE_MODE,
  912. SELECTOR_MODE,
  913. MIXIN_GUARD_MODE,
  914. modes.FUNCTION_DISPATCH
  915. );
  916. return {
  917. name: 'Less',
  918. case_insensitive: true,
  919. illegal: '[=>\'/<($"]',
  920. contains: RULES
  921. };
  922. }
  923. export { less as default };