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