123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854 |
- 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',
- 'animation',
- 'animation-delay',
- 'animation-direction',
- 'animation-duration',
- 'animation-fill-mode',
- 'animation-iteration-count',
- 'animation-name',
- 'animation-play-state',
- 'animation-timing-function',
- 'appearance',
- 'backface-visibility',
- 'background',
- 'background-attachment',
- 'background-blend-mode',
- 'background-clip',
- 'background-color',
- 'background-image',
- 'background-origin',
- 'background-position',
- '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-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-end-end-radius',
- 'border-end-start-radius',
- '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-decoration-break',
- 'box-shadow',
- 'box-sizing',
- 'break-after',
- 'break-before',
- 'break-inside',
- 'cx',
- 'cy',
- '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',
- 'content',
- 'content-visibility',
- 'counter-increment',
- 'counter-reset',
- 'cue',
- 'cue-after',
- 'cue-before',
- 'cursor',
- 'direction',
- 'display',
- 'dominant-baseline',
- 'empty-cells',
- 'enable-background',
- 'fill',
- 'fill-opacity',
- 'fill-rule',
- 'filter',
- 'flex',
- 'flex-basis',
- 'flex-direction',
- 'flex-flow',
- 'flex-grow',
- 'flex-shrink',
- 'flex-wrap',
- 'float',
- 'flow',
- 'flood-color',
- 'flood-opacity',
- 'font',
- 'font-display',
- 'font-family',
- 'font-feature-settings',
- 'font-kerning',
- 'font-language-override',
- 'font-size',
- 'font-size-adjust',
- 'font-smoothing',
- 'font-stretch',
- 'font-style',
- 'font-synthesis',
- 'font-variant',
- 'font-variant-caps',
- 'font-variant-east-asian',
- 'font-variant-ligatures',
- 'font-variant-numeric',
- 'font-variant-position',
- 'font-variation-settings',
- 'font-weight',
- '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',
- 'hyphens',
- 'icon',
- 'image-orientation',
- 'image-rendering',
- 'image-resolution',
- 'ime-mode',
- 'inline-size',
- 'inset',
- 'inset-block',
- 'inset-block-end',
- 'inset-block-start',
- 'inset-inline',
- 'inset-inline-end',
- 'inset-inline-start',
- 'isolation',
- 'kerning',
- 'justify-content',
- 'justify-items',
- 'justify-self',
- 'left',
- 'letter-spacing',
- 'lighting-color',
- 'line-break',
- 'line-height',
- 'list-style',
- 'list-style-image',
- 'list-style-position',
- 'list-style-type',
- 'marker',
- 'marker-end',
- 'marker-mid',
- 'marker-start',
- 'mask',
- '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',
- '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',
- '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',
- 'opacity',
- 'order',
- 'orphans',
- 'outline',
- 'outline-color',
- 'outline-offset',
- 'outline-style',
- 'outline-width',
- 'overflow',
- 'overflow-wrap',
- 'overflow-x',
- 'overflow-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-break-after',
- 'page-break-before',
- 'page-break-inside',
- 'pause',
- 'pause-after',
- 'pause-before',
- 'perspective',
- 'perspective-origin',
- 'pointer-events',
- 'position',
- 'quotes',
- 'r',
- 'resize',
- 'rest',
- 'rest-after',
- 'rest-before',
- 'right',
- 'rotate',
- 'row-gap',
- 'scale',
- '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',
- 'scrollbar-color',
- 'scrollbar-gutter',
- 'scrollbar-width',
- 'shape-image-threshold',
- 'shape-margin',
- 'shape-outside',
- 'shape-rendering',
- 'stop-color',
- 'stop-opacity',
- 'stroke',
- 'stroke-dasharray',
- 'stroke-dashoffset',
- 'stroke-linecap',
- 'stroke-linejoin',
- 'stroke-miterlimit',
- 'stroke-opacity',
- 'stroke-width',
- 'speak',
- 'speak-as',
- 'src', // @font-face
- 'tab-size',
- 'table-layout',
- 'text-anchor',
- 'text-align',
- 'text-align-all',
- 'text-align-last',
- 'text-combine-upright',
- 'text-decoration',
- 'text-decoration-color',
- 'text-decoration-line',
- '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-transform',
- 'text-underline-offset',
- 'text-underline-position',
- 'top',
- 'transform',
- 'transform-box',
- 'transform-origin',
- 'transform-style',
- 'transition',
- 'transition-delay',
- 'transition-duration',
- 'transition-property',
- 'transition-timing-function',
- 'translate',
- 'unicode-bidi',
- 'vector-effect',
- 'vertical-align',
- 'visibility',
- 'voice-balance',
- 'voice-duration',
- 'voice-family',
- 'voice-pitch',
- 'voice-range',
- 'voice-rate',
- 'voice-stress',
- 'voice-volume',
- 'white-space',
- 'widows',
- 'width',
- 'will-change',
- 'word-break',
- 'word-spacing',
- 'word-wrap',
- 'writing-mode',
- 'x',
- 'y',
- 'z-index'
- ].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'
- }
- ]
- };
- }
- export { css as default };
|