Mercurial
diff third_party/highlight/languages/css.js @ 157:2db6253f355d
[ThirdParty] Added highlight library for better readability on blog.
| author | June Park <parkjune1995@gmail.com> |
|---|---|
| date | Tue, 13 Jan 2026 19:18:47 -0800 |
| parents | |
| children |
line wrap: on
line diff
--- /dev/null Thu Jan 01 00:00:00 1970 +0000 +++ b/third_party/highlight/languages/css.js Tue Jan 13 19:18:47 2026 -0800 @@ -0,0 +1,959 @@ +/*! `css` grammar compiled for Highlight.js 11.11.1 */ + (function(){ + var hljsGrammar = (function () { + 'use strict'; + + const MODES = (hljs) => { + return { + IMPORTANT: { + scope: 'meta', + begin: '!important' + }, + BLOCK_COMMENT: hljs.C_BLOCK_COMMENT_MODE, + HEXCOLOR: { + scope: 'number', + begin: /#(([0-9a-fA-F]{3,4})|(([0-9a-fA-F]{2}){3,4}))\b/ + }, + FUNCTION_DISPATCH: { + className: "built_in", + begin: /[\w-]+(?=\()/ + }, + ATTRIBUTE_SELECTOR_MODE: { + scope: 'selector-attr', + begin: /\[/, + end: /\]/, + illegal: '$', + contains: [ + hljs.APOS_STRING_MODE, + hljs.QUOTE_STRING_MODE + ] + }, + CSS_NUMBER_MODE: { + scope: 'number', + begin: hljs.NUMBER_RE + '(' + + '%|em|ex|ch|rem' + + '|vw|vh|vmin|vmax' + + '|cm|mm|in|pt|pc|px' + + '|deg|grad|rad|turn' + + '|s|ms' + + '|Hz|kHz' + + '|dpi|dpcm|dppx' + + ')?', + relevance: 0 + }, + CSS_VARIABLE: { + className: "attr", + begin: /--[A-Za-z_][A-Za-z0-9_-]*/ + } + }; + }; + + const HTML_TAGS = [ + 'a', + 'abbr', + 'address', + 'article', + 'aside', + 'audio', + 'b', + 'blockquote', + 'body', + 'button', + 'canvas', + 'caption', + 'cite', + 'code', + 'dd', + 'del', + 'details', + 'dfn', + 'div', + 'dl', + 'dt', + 'em', + 'fieldset', + 'figcaption', + 'figure', + 'footer', + 'form', + 'h1', + 'h2', + 'h3', + 'h4', + 'h5', + 'h6', + 'header', + 'hgroup', + 'html', + 'i', + 'iframe', + 'img', + 'input', + 'ins', + 'kbd', + 'label', + 'legend', + 'li', + 'main', + 'mark', + 'menu', + 'nav', + 'object', + 'ol', + 'optgroup', + 'option', + 'p', + 'picture', + 'q', + 'quote', + 'samp', + 'section', + 'select', + 'source', + 'span', + 'strong', + 'summary', + 'sup', + 'table', + 'tbody', + 'td', + 'textarea', + 'tfoot', + 'th', + 'thead', + 'time', + 'tr', + 'ul', + 'var', + 'video' + ]; + + const SVG_TAGS = [ + 'defs', + 'g', + 'marker', + 'mask', + 'pattern', + 'svg', + 'switch', + 'symbol', + 'feBlend', + 'feColorMatrix', + 'feComponentTransfer', + 'feComposite', + 'feConvolveMatrix', + 'feDiffuseLighting', + 'feDisplacementMap', + 'feFlood', + 'feGaussianBlur', + 'feImage', + 'feMerge', + 'feMorphology', + 'feOffset', + 'feSpecularLighting', + 'feTile', + 'feTurbulence', + 'linearGradient', + 'radialGradient', + 'stop', + 'circle', + 'ellipse', + 'image', + 'line', + 'path', + 'polygon', + 'polyline', + 'rect', + 'text', + 'use', + 'textPath', + 'tspan', + 'foreignObject', + 'clipPath' + ]; + + const TAGS = [ + ...HTML_TAGS, + ...SVG_TAGS, + ]; + + // Sorting, then reversing makes sure longer attributes/elements like + // `font-weight` are matched fully instead of getting false positives on say `font` + + const MEDIA_FEATURES = [ + 'any-hover', + 'any-pointer', + 'aspect-ratio', + 'color', + 'color-gamut', + 'color-index', + 'device-aspect-ratio', + 'device-height', + 'device-width', + 'display-mode', + 'forced-colors', + 'grid', + 'height', + 'hover', + 'inverted-colors', + 'monochrome', + 'orientation', + 'overflow-block', + 'overflow-inline', + 'pointer', + 'prefers-color-scheme', + 'prefers-contrast', + 'prefers-reduced-motion', + 'prefers-reduced-transparency', + 'resolution', + 'scan', + 'scripting', + 'update', + 'width', + // TODO: find a better solution? + 'min-width', + 'max-width', + 'min-height', + 'max-height' + ].sort().reverse(); + + // https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes + const PSEUDO_CLASSES = [ + 'active', + 'any-link', + 'blank', + 'checked', + 'current', + 'default', + 'defined', + 'dir', // dir() + 'disabled', + 'drop', + 'empty', + 'enabled', + 'first', + 'first-child', + 'first-of-type', + 'fullscreen', + 'future', + 'focus', + 'focus-visible', + 'focus-within', + 'has', // has() + 'host', // host or host() + 'host-context', // host-context() + 'hover', + 'indeterminate', + 'in-range', + 'invalid', + 'is', // is() + 'lang', // lang() + 'last-child', + 'last-of-type', + 'left', + 'link', + 'local-link', + 'not', // not() + 'nth-child', // nth-child() + 'nth-col', // nth-col() + 'nth-last-child', // nth-last-child() + 'nth-last-col', // nth-last-col() + 'nth-last-of-type', //nth-last-of-type() + 'nth-of-type', //nth-of-type() + 'only-child', + 'only-of-type', + 'optional', + 'out-of-range', + 'past', + 'placeholder-shown', + 'read-only', + 'read-write', + 'required', + 'right', + 'root', + 'scope', + 'target', + 'target-within', + 'user-invalid', + 'valid', + 'visited', + 'where' // where() + ].sort().reverse(); + + // https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-elements + const PSEUDO_ELEMENTS = [ + 'after', + 'backdrop', + 'before', + 'cue', + 'cue-region', + 'first-letter', + 'first-line', + 'grammar-error', + 'marker', + 'part', + 'placeholder', + 'selection', + 'slotted', + 'spelling-error' + ].sort().reverse(); + + const ATTRIBUTES = [ + 'accent-color', + 'align-content', + 'align-items', + 'align-self', + 'alignment-baseline', + 'all', + 'anchor-name', + 'animation', + 'animation-composition', + 'animation-delay', + 'animation-direction', + 'animation-duration', + 'animation-fill-mode', + 'animation-iteration-count', + 'animation-name', + 'animation-play-state', + 'animation-range', + 'animation-range-end', + 'animation-range-start', + 'animation-timeline', + 'animation-timing-function', + 'appearance', + 'aspect-ratio', + 'backdrop-filter', + 'backface-visibility', + 'background', + 'background-attachment', + 'background-blend-mode', + 'background-clip', + 'background-color', + 'background-image', + 'background-origin', + 'background-position', + 'background-position-x', + 'background-position-y', + 'background-repeat', + 'background-size', + 'baseline-shift', + 'block-size', + 'border', + 'border-block', + 'border-block-color', + 'border-block-end', + 'border-block-end-color', + 'border-block-end-style', + 'border-block-end-width', + 'border-block-start', + 'border-block-start-color', + 'border-block-start-style', + 'border-block-start-width', + 'border-block-style', + 'border-block-width', + 'border-bottom', + 'border-bottom-color', + 'border-bottom-left-radius', + 'border-bottom-right-radius', + 'border-bottom-style', + 'border-bottom-width', + 'border-collapse', + 'border-color', + 'border-end-end-radius', + 'border-end-start-radius', + 'border-image', + 'border-image-outset', + 'border-image-repeat', + 'border-image-slice', + 'border-image-source', + 'border-image-width', + 'border-inline', + 'border-inline-color', + 'border-inline-end', + 'border-inline-end-color', + 'border-inline-end-style', + 'border-inline-end-width', + 'border-inline-start', + 'border-inline-start-color', + 'border-inline-start-style', + 'border-inline-start-width', + 'border-inline-style', + 'border-inline-width', + 'border-left', + 'border-left-color', + 'border-left-style', + 'border-left-width', + 'border-radius', + 'border-right', + 'border-right-color', + 'border-right-style', + 'border-right-width', + 'border-spacing', + 'border-start-end-radius', + 'border-start-start-radius', + 'border-style', + 'border-top', + 'border-top-color', + 'border-top-left-radius', + 'border-top-right-radius', + 'border-top-style', + 'border-top-width', + 'border-width', + 'bottom', + 'box-align', + 'box-decoration-break', + 'box-direction', + 'box-flex', + 'box-flex-group', + 'box-lines', + 'box-ordinal-group', + 'box-orient', + 'box-pack', + 'box-shadow', + 'box-sizing', + 'break-after', + 'break-before', + 'break-inside', + 'caption-side', + 'caret-color', + 'clear', + 'clip', + 'clip-path', + 'clip-rule', + 'color', + 'color-interpolation', + 'color-interpolation-filters', + 'color-profile', + 'color-rendering', + 'color-scheme', + 'column-count', + 'column-fill', + 'column-gap', + 'column-rule', + 'column-rule-color', + 'column-rule-style', + 'column-rule-width', + 'column-span', + 'column-width', + 'columns', + 'contain', + 'contain-intrinsic-block-size', + 'contain-intrinsic-height', + 'contain-intrinsic-inline-size', + 'contain-intrinsic-size', + 'contain-intrinsic-width', + 'container', + 'container-name', + 'container-type', + 'content', + 'content-visibility', + 'counter-increment', + 'counter-reset', + 'counter-set', + 'cue', + 'cue-after', + 'cue-before', + 'cursor', + 'cx', + 'cy', + 'direction', + 'display', + 'dominant-baseline', + 'empty-cells', + 'enable-background', + 'field-sizing', + 'fill', + 'fill-opacity', + 'fill-rule', + 'filter', + 'flex', + 'flex-basis', + 'flex-direction', + 'flex-flow', + 'flex-grow', + 'flex-shrink', + 'flex-wrap', + 'float', + 'flood-color', + 'flood-opacity', + 'flow', + 'font', + 'font-display', + 'font-family', + 'font-feature-settings', + 'font-kerning', + 'font-language-override', + 'font-optical-sizing', + 'font-palette', + 'font-size', + 'font-size-adjust', + 'font-smooth', + 'font-smoothing', + 'font-stretch', + 'font-style', + 'font-synthesis', + 'font-synthesis-position', + 'font-synthesis-small-caps', + 'font-synthesis-style', + 'font-synthesis-weight', + 'font-variant', + 'font-variant-alternates', + 'font-variant-caps', + 'font-variant-east-asian', + 'font-variant-emoji', + 'font-variant-ligatures', + 'font-variant-numeric', + 'font-variant-position', + 'font-variation-settings', + 'font-weight', + 'forced-color-adjust', + 'gap', + 'glyph-orientation-horizontal', + 'glyph-orientation-vertical', + 'grid', + 'grid-area', + 'grid-auto-columns', + 'grid-auto-flow', + 'grid-auto-rows', + 'grid-column', + 'grid-column-end', + 'grid-column-start', + 'grid-gap', + 'grid-row', + 'grid-row-end', + 'grid-row-start', + 'grid-template', + 'grid-template-areas', + 'grid-template-columns', + 'grid-template-rows', + 'hanging-punctuation', + 'height', + 'hyphenate-character', + 'hyphenate-limit-chars', + 'hyphens', + 'icon', + 'image-orientation', + 'image-rendering', + 'image-resolution', + 'ime-mode', + 'initial-letter', + 'initial-letter-align', + 'inline-size', + 'inset', + 'inset-area', + 'inset-block', + 'inset-block-end', + 'inset-block-start', + 'inset-inline', + 'inset-inline-end', + 'inset-inline-start', + 'isolation', + 'justify-content', + 'justify-items', + 'justify-self', + 'kerning', + 'left', + 'letter-spacing', + 'lighting-color', + 'line-break', + 'line-height', + 'line-height-step', + 'list-style', + 'list-style-image', + 'list-style-position', + 'list-style-type', + 'margin', + 'margin-block', + 'margin-block-end', + 'margin-block-start', + 'margin-bottom', + 'margin-inline', + 'margin-inline-end', + 'margin-inline-start', + 'margin-left', + 'margin-right', + 'margin-top', + 'margin-trim', + 'marker', + 'marker-end', + 'marker-mid', + 'marker-start', + 'marks', + 'mask', + 'mask-border', + 'mask-border-mode', + 'mask-border-outset', + 'mask-border-repeat', + 'mask-border-slice', + 'mask-border-source', + 'mask-border-width', + 'mask-clip', + 'mask-composite', + 'mask-image', + 'mask-mode', + 'mask-origin', + 'mask-position', + 'mask-repeat', + 'mask-size', + 'mask-type', + 'masonry-auto-flow', + 'math-depth', + 'math-shift', + 'math-style', + 'max-block-size', + 'max-height', + 'max-inline-size', + 'max-width', + 'min-block-size', + 'min-height', + 'min-inline-size', + 'min-width', + 'mix-blend-mode', + 'nav-down', + 'nav-index', + 'nav-left', + 'nav-right', + 'nav-up', + 'none', + 'normal', + 'object-fit', + 'object-position', + 'offset', + 'offset-anchor', + 'offset-distance', + 'offset-path', + 'offset-position', + 'offset-rotate', + 'opacity', + 'order', + 'orphans', + 'outline', + 'outline-color', + 'outline-offset', + 'outline-style', + 'outline-width', + 'overflow', + 'overflow-anchor', + 'overflow-block', + 'overflow-clip-margin', + 'overflow-inline', + 'overflow-wrap', + 'overflow-x', + 'overflow-y', + 'overlay', + 'overscroll-behavior', + 'overscroll-behavior-block', + 'overscroll-behavior-inline', + 'overscroll-behavior-x', + 'overscroll-behavior-y', + 'padding', + 'padding-block', + 'padding-block-end', + 'padding-block-start', + 'padding-bottom', + 'padding-inline', + 'padding-inline-end', + 'padding-inline-start', + 'padding-left', + 'padding-right', + 'padding-top', + 'page', + 'page-break-after', + 'page-break-before', + 'page-break-inside', + 'paint-order', + 'pause', + 'pause-after', + 'pause-before', + 'perspective', + 'perspective-origin', + 'place-content', + 'place-items', + 'place-self', + 'pointer-events', + 'position', + 'position-anchor', + 'position-visibility', + 'print-color-adjust', + 'quotes', + 'r', + 'resize', + 'rest', + 'rest-after', + 'rest-before', + 'right', + 'rotate', + 'row-gap', + 'ruby-align', + 'ruby-position', + 'scale', + 'scroll-behavior', + 'scroll-margin', + 'scroll-margin-block', + 'scroll-margin-block-end', + 'scroll-margin-block-start', + 'scroll-margin-bottom', + 'scroll-margin-inline', + 'scroll-margin-inline-end', + 'scroll-margin-inline-start', + 'scroll-margin-left', + 'scroll-margin-right', + 'scroll-margin-top', + 'scroll-padding', + 'scroll-padding-block', + 'scroll-padding-block-end', + 'scroll-padding-block-start', + 'scroll-padding-bottom', + 'scroll-padding-inline', + 'scroll-padding-inline-end', + 'scroll-padding-inline-start', + 'scroll-padding-left', + 'scroll-padding-right', + 'scroll-padding-top', + 'scroll-snap-align', + 'scroll-snap-stop', + 'scroll-snap-type', + 'scroll-timeline', + 'scroll-timeline-axis', + 'scroll-timeline-name', + 'scrollbar-color', + 'scrollbar-gutter', + 'scrollbar-width', + 'shape-image-threshold', + 'shape-margin', + 'shape-outside', + 'shape-rendering', + 'speak', + 'speak-as', + 'src', // @font-face + 'stop-color', + 'stop-opacity', + 'stroke', + 'stroke-dasharray', + 'stroke-dashoffset', + 'stroke-linecap', + 'stroke-linejoin', + 'stroke-miterlimit', + 'stroke-opacity', + 'stroke-width', + 'tab-size', + 'table-layout', + 'text-align', + 'text-align-all', + 'text-align-last', + 'text-anchor', + 'text-combine-upright', + 'text-decoration', + 'text-decoration-color', + 'text-decoration-line', + 'text-decoration-skip', + 'text-decoration-skip-ink', + 'text-decoration-style', + 'text-decoration-thickness', + 'text-emphasis', + 'text-emphasis-color', + 'text-emphasis-position', + 'text-emphasis-style', + 'text-indent', + 'text-justify', + 'text-orientation', + 'text-overflow', + 'text-rendering', + 'text-shadow', + 'text-size-adjust', + 'text-transform', + 'text-underline-offset', + 'text-underline-position', + 'text-wrap', + 'text-wrap-mode', + 'text-wrap-style', + 'timeline-scope', + 'top', + 'touch-action', + 'transform', + 'transform-box', + 'transform-origin', + 'transform-style', + 'transition', + 'transition-behavior', + 'transition-delay', + 'transition-duration', + 'transition-property', + 'transition-timing-function', + 'translate', + 'unicode-bidi', + 'user-modify', + 'user-select', + 'vector-effect', + 'vertical-align', + 'view-timeline', + 'view-timeline-axis', + 'view-timeline-inset', + 'view-timeline-name', + 'view-transition-name', + 'visibility', + 'voice-balance', + 'voice-duration', + 'voice-family', + 'voice-pitch', + 'voice-range', + 'voice-rate', + 'voice-stress', + 'voice-volume', + 'white-space', + 'white-space-collapse', + 'widows', + 'width', + 'will-change', + 'word-break', + 'word-spacing', + 'word-wrap', + 'writing-mode', + 'x', + 'y', + 'z-index', + 'zoom' + ].sort().reverse(); + + /* + Language: CSS + Category: common, css, web + Website: https://developer.mozilla.org/en-US/docs/Web/CSS + */ + + + /** @type LanguageFn */ + function css(hljs) { + const regex = hljs.regex; + const modes = MODES(hljs); + const VENDOR_PREFIX = { begin: /-(webkit|moz|ms|o)-(?=[a-z])/ }; + const AT_MODIFIERS = "and or not only"; + const AT_PROPERTY_RE = /@-?\w[\w]*(-\w+)*/; // @-webkit-keyframes + const IDENT_RE = '[a-zA-Z-][a-zA-Z0-9_-]*'; + const STRINGS = [ + hljs.APOS_STRING_MODE, + hljs.QUOTE_STRING_MODE + ]; + + return { + name: 'CSS', + case_insensitive: true, + illegal: /[=|'\$]/, + keywords: { keyframePosition: "from to" }, + classNameAliases: { + // for visual continuity with `tag {}` and because we + // don't have a great class for this? + keyframePosition: "selector-tag" }, + contains: [ + modes.BLOCK_COMMENT, + VENDOR_PREFIX, + // to recognize keyframe 40% etc which are outside the scope of our + // attribute value mode + modes.CSS_NUMBER_MODE, + { + className: 'selector-id', + begin: /#[A-Za-z0-9_-]+/, + relevance: 0 + }, + { + className: 'selector-class', + begin: '\\.' + IDENT_RE, + relevance: 0 + }, + modes.ATTRIBUTE_SELECTOR_MODE, + { + className: 'selector-pseudo', + variants: [ + { begin: ':(' + PSEUDO_CLASSES.join('|') + ')' }, + { begin: ':(:)?(' + PSEUDO_ELEMENTS.join('|') + ')' } + ] + }, + // we may actually need this (12/2020) + // { // pseudo-selector params + // begin: /\(/, + // end: /\)/, + // contains: [ hljs.CSS_NUMBER_MODE ] + // }, + modes.CSS_VARIABLE, + { + className: 'attribute', + begin: '\\b(' + ATTRIBUTES.join('|') + ')\\b' + }, + // attribute values + { + begin: /:/, + end: /[;}{]/, + contains: [ + modes.BLOCK_COMMENT, + modes.HEXCOLOR, + modes.IMPORTANT, + modes.CSS_NUMBER_MODE, + ...STRINGS, + // needed to highlight these as strings and to avoid issues with + // illegal characters that might be inside urls that would tigger the + // languages illegal stack + { + begin: /(url|data-uri)\(/, + end: /\)/, + relevance: 0, // from keywords + keywords: { built_in: "url data-uri" }, + contains: [ + ...STRINGS, + { + className: "string", + // any character other than `)` as in `url()` will be the start + // of a string, which ends with `)` (from the parent mode) + begin: /[^)]/, + endsWithParent: true, + excludeEnd: true + } + ] + }, + modes.FUNCTION_DISPATCH + ] + }, + { + begin: regex.lookahead(/@/), + end: '[{;]', + relevance: 0, + illegal: /:/, // break on Less variables @var: ... + contains: [ + { + className: 'keyword', + begin: AT_PROPERTY_RE + }, + { + begin: /\s/, + endsWithParent: true, + excludeEnd: true, + relevance: 0, + keywords: { + $pattern: /[a-z-]+/, + keyword: AT_MODIFIERS, + attribute: MEDIA_FEATURES.join(" ") + }, + contains: [ + { + begin: /[a-z-]+(?=:)/, + className: "attribute" + }, + ...STRINGS, + modes.CSS_NUMBER_MODE + ] + } + ] + }, + { + className: 'selector-tag', + begin: '\\b(' + TAGS.join('|') + ')\\b' + } + ] + }; + } + + return css; + +})(); + + hljs.registerLanguage('css', hljsGrammar); + })(); \ No newline at end of file