Mercurial

comparison third_party/highlight/es/languages/css.js @ 173:827c6ac504cd hg-web

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