css.js 11 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608
  1. const MODES = (hljs) => {
  2. return {
  3. IMPORTANT: {
  4. className: 'meta',
  5. begin: '!important'
  6. },
  7. HEXCOLOR: {
  8. className: 'number',
  9. begin: '#([a-fA-F0-9]{6}|[a-fA-F0-9]{3})'
  10. },
  11. ATTRIBUTE_SELECTOR_MODE: {
  12. className: 'selector-attr',
  13. begin: /\[/,
  14. end: /\]/,
  15. illegal: '$',
  16. contains: [
  17. hljs.APOS_STRING_MODE,
  18. hljs.QUOTE_STRING_MODE
  19. ]
  20. }
  21. };
  22. };
  23. const TAGS = [
  24. 'a',
  25. 'abbr',
  26. 'address',
  27. 'article',
  28. 'aside',
  29. 'audio',
  30. 'b',
  31. 'blockquote',
  32. 'body',
  33. 'button',
  34. 'canvas',
  35. 'caption',
  36. 'cite',
  37. 'code',
  38. 'dd',
  39. 'del',
  40. 'details',
  41. 'dfn',
  42. 'div',
  43. 'dl',
  44. 'dt',
  45. 'em',
  46. 'fieldset',
  47. 'figcaption',
  48. 'figure',
  49. 'footer',
  50. 'form',
  51. 'h1',
  52. 'h2',
  53. 'h3',
  54. 'h4',
  55. 'h5',
  56. 'h6',
  57. 'header',
  58. 'hgroup',
  59. 'html',
  60. 'i',
  61. 'iframe',
  62. 'img',
  63. 'input',
  64. 'ins',
  65. 'kbd',
  66. 'label',
  67. 'legend',
  68. 'li',
  69. 'main',
  70. 'mark',
  71. 'menu',
  72. 'nav',
  73. 'object',
  74. 'ol',
  75. 'p',
  76. 'q',
  77. 'quote',
  78. 'samp',
  79. 'section',
  80. 'span',
  81. 'strong',
  82. 'summary',
  83. 'sup',
  84. 'table',
  85. 'tbody',
  86. 'td',
  87. 'textarea',
  88. 'tfoot',
  89. 'th',
  90. 'thead',
  91. 'time',
  92. 'tr',
  93. 'ul',
  94. 'var',
  95. 'video'
  96. ];
  97. const MEDIA_FEATURES = [
  98. 'any-hover',
  99. 'any-pointer',
  100. 'aspect-ratio',
  101. 'color',
  102. 'color-gamut',
  103. 'color-index',
  104. 'device-aspect-ratio',
  105. 'device-height',
  106. 'device-width',
  107. 'display-mode',
  108. 'forced-colors',
  109. 'grid',
  110. 'height',
  111. 'hover',
  112. 'inverted-colors',
  113. 'monochrome',
  114. 'orientation',
  115. 'overflow-block',
  116. 'overflow-inline',
  117. 'pointer',
  118. 'prefers-color-scheme',
  119. 'prefers-contrast',
  120. 'prefers-reduced-motion',
  121. 'prefers-reduced-transparency',
  122. 'resolution',
  123. 'scan',
  124. 'scripting',
  125. 'update',
  126. 'width',
  127. // TODO: find a better solution?
  128. 'min-width',
  129. 'max-width',
  130. 'min-height',
  131. 'max-height'
  132. ];
  133. // https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes
  134. const PSEUDO_CLASSES = [
  135. 'active',
  136. 'any-link',
  137. 'blank',
  138. 'checked',
  139. 'current',
  140. 'default',
  141. 'defined',
  142. 'dir', // dir()
  143. 'disabled',
  144. 'drop',
  145. 'empty',
  146. 'enabled',
  147. 'first',
  148. 'first-child',
  149. 'first-of-type',
  150. 'fullscreen',
  151. 'future',
  152. 'focus',
  153. 'focus-visible',
  154. 'focus-within',
  155. 'has', // has()
  156. 'host', // host or host()
  157. 'host-context', // host-context()
  158. 'hover',
  159. 'indeterminate',
  160. 'in-range',
  161. 'invalid',
  162. 'is', // is()
  163. 'lang', // lang()
  164. 'last-child',
  165. 'last-of-type',
  166. 'left',
  167. 'link',
  168. 'local-link',
  169. 'not', // not()
  170. 'nth-child', // nth-child()
  171. 'nth-col', // nth-col()
  172. 'nth-last-child', // nth-last-child()
  173. 'nth-last-col', // nth-last-col()
  174. 'nth-last-of-type', //nth-last-of-type()
  175. 'nth-of-type', //nth-of-type()
  176. 'only-child',
  177. 'only-of-type',
  178. 'optional',
  179. 'out-of-range',
  180. 'past',
  181. 'placeholder-shown',
  182. 'read-only',
  183. 'read-write',
  184. 'required',
  185. 'right',
  186. 'root',
  187. 'scope',
  188. 'target',
  189. 'target-within',
  190. 'user-invalid',
  191. 'valid',
  192. 'visited',
  193. 'where' // where()
  194. ];
  195. // https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-elements
  196. const PSEUDO_ELEMENTS = [
  197. 'after',
  198. 'backdrop',
  199. 'before',
  200. 'cue',
  201. 'cue-region',
  202. 'first-letter',
  203. 'first-line',
  204. 'grammar-error',
  205. 'marker',
  206. 'part',
  207. 'placeholder',
  208. 'selection',
  209. 'slotted',
  210. 'spelling-error'
  211. ];
  212. const ATTRIBUTES = [
  213. 'align-content',
  214. 'align-items',
  215. 'align-self',
  216. 'animation',
  217. 'animation-delay',
  218. 'animation-direction',
  219. 'animation-duration',
  220. 'animation-fill-mode',
  221. 'animation-iteration-count',
  222. 'animation-name',
  223. 'animation-play-state',
  224. 'animation-timing-function',
  225. 'auto',
  226. 'backface-visibility',
  227. 'background',
  228. 'background-attachment',
  229. 'background-clip',
  230. 'background-color',
  231. 'background-image',
  232. 'background-origin',
  233. 'background-position',
  234. 'background-repeat',
  235. 'background-size',
  236. 'border',
  237. 'border-bottom',
  238. 'border-bottom-color',
  239. 'border-bottom-left-radius',
  240. 'border-bottom-right-radius',
  241. 'border-bottom-style',
  242. 'border-bottom-width',
  243. 'border-collapse',
  244. 'border-color',
  245. 'border-image',
  246. 'border-image-outset',
  247. 'border-image-repeat',
  248. 'border-image-slice',
  249. 'border-image-source',
  250. 'border-image-width',
  251. 'border-left',
  252. 'border-left-color',
  253. 'border-left-style',
  254. 'border-left-width',
  255. 'border-radius',
  256. 'border-right',
  257. 'border-right-color',
  258. 'border-right-style',
  259. 'border-right-width',
  260. 'border-spacing',
  261. 'border-style',
  262. 'border-top',
  263. 'border-top-color',
  264. 'border-top-left-radius',
  265. 'border-top-right-radius',
  266. 'border-top-style',
  267. 'border-top-width',
  268. 'border-width',
  269. 'bottom',
  270. 'box-decoration-break',
  271. 'box-shadow',
  272. 'box-sizing',
  273. 'break-after',
  274. 'break-before',
  275. 'break-inside',
  276. 'caption-side',
  277. 'clear',
  278. 'clip',
  279. 'clip-path',
  280. 'color',
  281. 'column-count',
  282. 'column-fill',
  283. 'column-gap',
  284. 'column-rule',
  285. 'column-rule-color',
  286. 'column-rule-style',
  287. 'column-rule-width',
  288. 'column-span',
  289. 'column-width',
  290. 'columns',
  291. 'content',
  292. 'counter-increment',
  293. 'counter-reset',
  294. 'cursor',
  295. 'direction',
  296. 'display',
  297. 'empty-cells',
  298. 'filter',
  299. 'flex',
  300. 'flex-basis',
  301. 'flex-direction',
  302. 'flex-flow',
  303. 'flex-grow',
  304. 'flex-shrink',
  305. 'flex-wrap',
  306. 'float',
  307. 'font',
  308. 'font-display',
  309. 'font-family',
  310. 'font-feature-settings',
  311. 'font-kerning',
  312. 'font-language-override',
  313. 'font-size',
  314. 'font-size-adjust',
  315. 'font-smoothing',
  316. 'font-stretch',
  317. 'font-style',
  318. 'font-variant',
  319. 'font-variant-ligatures',
  320. 'font-variation-settings',
  321. 'font-weight',
  322. 'height',
  323. 'hyphens',
  324. 'icon',
  325. 'image-orientation',
  326. 'image-rendering',
  327. 'image-resolution',
  328. 'ime-mode',
  329. 'inherit',
  330. 'initial',
  331. 'justify-content',
  332. 'left',
  333. 'letter-spacing',
  334. 'line-height',
  335. 'list-style',
  336. 'list-style-image',
  337. 'list-style-position',
  338. 'list-style-type',
  339. 'margin',
  340. 'margin-bottom',
  341. 'margin-left',
  342. 'margin-right',
  343. 'margin-top',
  344. 'marks',
  345. 'mask',
  346. 'max-height',
  347. 'max-width',
  348. 'min-height',
  349. 'min-width',
  350. 'nav-down',
  351. 'nav-index',
  352. 'nav-left',
  353. 'nav-right',
  354. 'nav-up',
  355. 'none',
  356. 'normal',
  357. 'object-fit',
  358. 'object-position',
  359. 'opacity',
  360. 'order',
  361. 'orphans',
  362. 'outline',
  363. 'outline-color',
  364. 'outline-offset',
  365. 'outline-style',
  366. 'outline-width',
  367. 'overflow',
  368. 'overflow-wrap',
  369. 'overflow-x',
  370. 'overflow-y',
  371. 'padding',
  372. 'padding-bottom',
  373. 'padding-left',
  374. 'padding-right',
  375. 'padding-top',
  376. 'page-break-after',
  377. 'page-break-before',
  378. 'page-break-inside',
  379. 'perspective',
  380. 'perspective-origin',
  381. 'pointer-events',
  382. 'position',
  383. 'quotes',
  384. 'resize',
  385. 'right',
  386. 'src', // @font-face
  387. 'tab-size',
  388. 'table-layout',
  389. 'text-align',
  390. 'text-align-last',
  391. 'text-decoration',
  392. 'text-decoration-color',
  393. 'text-decoration-line',
  394. 'text-decoration-style',
  395. 'text-indent',
  396. 'text-overflow',
  397. 'text-rendering',
  398. 'text-shadow',
  399. 'text-transform',
  400. 'text-underline-position',
  401. 'top',
  402. 'transform',
  403. 'transform-origin',
  404. 'transform-style',
  405. 'transition',
  406. 'transition-delay',
  407. 'transition-duration',
  408. 'transition-property',
  409. 'transition-timing-function',
  410. 'unicode-bidi',
  411. 'vertical-align',
  412. 'visibility',
  413. 'white-space',
  414. 'widows',
  415. 'width',
  416. 'word-break',
  417. 'word-spacing',
  418. 'word-wrap',
  419. 'z-index'
  420. // reverse makes sure longer attributes `font-weight` are matched fully
  421. // instead of getting false positives on say `font`
  422. ].reverse();
  423. /**
  424. * @param {string} value
  425. * @returns {RegExp}
  426. * */
  427. /**
  428. * @param {RegExp | string } re
  429. * @returns {string}
  430. */
  431. function source(re) {
  432. if (!re) return null;
  433. if (typeof re === "string") return re;
  434. return re.source;
  435. }
  436. /**
  437. * @param {RegExp | string } re
  438. * @returns {string}
  439. */
  440. function lookahead(re) {
  441. return concat('(?=', re, ')');
  442. }
  443. /**
  444. * @param {...(RegExp | string) } args
  445. * @returns {string}
  446. */
  447. function concat(...args) {
  448. const joined = args.map((x) => source(x)).join("");
  449. return joined;
  450. }
  451. /*
  452. Language: CSS
  453. Category: common, css
  454. Website: https://developer.mozilla.org/en-US/docs/Web/CSS
  455. */
  456. /** @type LanguageFn */
  457. function css(hljs) {
  458. const modes = MODES(hljs);
  459. const FUNCTION_DISPATCH = {
  460. className: "built_in",
  461. begin: /[\w-]+(?=\()/
  462. };
  463. const VENDOR_PREFIX = {
  464. begin: /-(webkit|moz|ms|o)-(?=[a-z])/
  465. };
  466. const AT_MODIFIERS = "and or not only";
  467. const AT_PROPERTY_RE = /@-?\w[\w]*(-\w+)*/; // @-webkit-keyframes
  468. const IDENT_RE = '[a-zA-Z-][a-zA-Z0-9_-]*';
  469. const STRINGS = [
  470. hljs.APOS_STRING_MODE,
  471. hljs.QUOTE_STRING_MODE
  472. ];
  473. return {
  474. name: 'CSS',
  475. case_insensitive: true,
  476. illegal: /[=|'\$]/,
  477. keywords: {
  478. keyframePosition: "from to"
  479. },
  480. classNameAliases: {
  481. // for visual continuity with `tag {}` and because we
  482. // don't have a great class for this?
  483. keyframePosition: "selector-tag"
  484. },
  485. contains: [
  486. hljs.C_BLOCK_COMMENT_MODE,
  487. VENDOR_PREFIX,
  488. // to recognize keyframe 40% etc which are outside the scope of our
  489. // attribute value mode
  490. hljs.CSS_NUMBER_MODE,
  491. {
  492. className: 'selector-id',
  493. begin: /#[A-Za-z0-9_-]+/,
  494. relevance: 0
  495. },
  496. {
  497. className: 'selector-class',
  498. begin: '\\.' + IDENT_RE,
  499. relevance: 0
  500. },
  501. modes.ATTRIBUTE_SELECTOR_MODE,
  502. {
  503. className: 'selector-pseudo',
  504. variants: [
  505. {
  506. begin: ':(' + PSEUDO_CLASSES.join('|') + ')'
  507. },
  508. {
  509. begin: '::(' + PSEUDO_ELEMENTS.join('|') + ')'
  510. }
  511. ]
  512. },
  513. // we may actually need this (12/2020)
  514. // { // pseudo-selector params
  515. // begin: /\(/,
  516. // end: /\)/,
  517. // contains: [ hljs.CSS_NUMBER_MODE ]
  518. // },
  519. {
  520. className: 'attribute',
  521. begin: '\\b(' + ATTRIBUTES.join('|') + ')\\b'
  522. },
  523. // attribute values
  524. {
  525. begin: ':',
  526. end: '[;}]',
  527. contains: [
  528. modes.HEXCOLOR,
  529. modes.IMPORTANT,
  530. hljs.CSS_NUMBER_MODE,
  531. ...STRINGS,
  532. // needed to highlight these as strings and to avoid issues with
  533. // illegal characters that might be inside urls that would tigger the
  534. // languages illegal stack
  535. {
  536. begin: /(url|data-uri)\(/,
  537. end: /\)/,
  538. relevance: 0, // from keywords
  539. keywords: {
  540. built_in: "url data-uri"
  541. },
  542. contains: [
  543. {
  544. className: "string",
  545. // any character other than `)` as in `url()` will be the start
  546. // of a string, which ends with `)` (from the parent mode)
  547. begin: /[^)]/,
  548. endsWithParent: true,
  549. excludeEnd: true
  550. }
  551. ]
  552. },
  553. FUNCTION_DISPATCH
  554. ]
  555. },
  556. {
  557. begin: lookahead(/@/),
  558. end: '[{;]',
  559. relevance: 0,
  560. illegal: /:/, // break on Less variables @var: ...
  561. contains: [
  562. {
  563. className: 'keyword',
  564. begin: AT_PROPERTY_RE
  565. },
  566. {
  567. begin: /\s/,
  568. endsWithParent: true,
  569. excludeEnd: true,
  570. relevance: 0,
  571. keywords: {
  572. $pattern: /[a-z-]+/,
  573. keyword: AT_MODIFIERS,
  574. attribute: MEDIA_FEATURES.join(" ")
  575. },
  576. contains: [
  577. {
  578. begin: /[a-z-]+(?=:)/,
  579. className: "attribute"
  580. },
  581. ...STRINGS,
  582. hljs.CSS_NUMBER_MODE
  583. ]
  584. }
  585. ]
  586. },
  587. {
  588. className: 'selector-tag',
  589. begin: '\\b(' + TAGS.join('|') + ')\\b'
  590. }
  591. ]
  592. };
  593. }
  594. module.exports = css;