123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545 |
- const MODES = (hljs) => {
- return {
- IMPORTANT: {
- className: 'meta',
- begin: '!important'
- },
- HEXCOLOR: {
- className: 'number',
- begin: '#([a-fA-F0-9]{6}|[a-fA-F0-9]{3})'
- },
- ATTRIBUTE_SELECTOR_MODE: {
- className: 'selector-attr',
- begin: /\[/,
- end: /\]/,
- illegal: '$',
- contains: [
- hljs.APOS_STRING_MODE,
- hljs.QUOTE_STRING_MODE
- ]
- }
- };
- };
- const 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',
- 'p',
- 'q',
- 'quote',
- 'samp',
- 'section',
- 'span',
- 'strong',
- 'summary',
- 'sup',
- 'table',
- 'tbody',
- 'td',
- 'textarea',
- 'tfoot',
- 'th',
- 'thead',
- 'time',
- 'tr',
- 'ul',
- 'var',
- 'video'
- ];
- 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'
- ];
- // 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()
- ];
- // 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'
- ];
- const ATTRIBUTES = [
- 'align-content',
- 'align-items',
- 'align-self',
- 'animation',
- 'animation-delay',
- 'animation-direction',
- 'animation-duration',
- 'animation-fill-mode',
- 'animation-iteration-count',
- 'animation-name',
- 'animation-play-state',
- 'animation-timing-function',
- 'auto',
- 'backface-visibility',
- 'background',
- 'background-attachment',
- 'background-clip',
- 'background-color',
- 'background-image',
- 'background-origin',
- 'background-position',
- 'background-repeat',
- 'background-size',
- 'border',
- '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-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-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',
- 'caption-side',
- 'clear',
- 'clip',
- 'clip-path',
- 'color',
- 'column-count',
- 'column-fill',
- 'column-gap',
- 'column-rule',
- 'column-rule-color',
- 'column-rule-style',
- 'column-rule-width',
- 'column-span',
- 'column-width',
- 'columns',
- 'content',
- 'counter-increment',
- 'counter-reset',
- 'cursor',
- 'direction',
- 'display',
- 'empty-cells',
- 'filter',
- 'flex',
- 'flex-basis',
- 'flex-direction',
- 'flex-flow',
- 'flex-grow',
- 'flex-shrink',
- 'flex-wrap',
- 'float',
- '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-variant',
- 'font-variant-ligatures',
- 'font-variation-settings',
- 'font-weight',
- 'height',
- 'hyphens',
- 'icon',
- 'image-orientation',
- 'image-rendering',
- 'image-resolution',
- 'ime-mode',
- 'inherit',
- 'initial',
- 'justify-content',
- 'left',
- 'letter-spacing',
- 'line-height',
- 'list-style',
- 'list-style-image',
- 'list-style-position',
- 'list-style-type',
- 'margin',
- 'margin-bottom',
- 'margin-left',
- 'margin-right',
- 'margin-top',
- 'marks',
- 'mask',
- 'max-height',
- 'max-width',
- 'min-height',
- 'min-width',
- '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-bottom',
- 'padding-left',
- 'padding-right',
- 'padding-top',
- 'page-break-after',
- 'page-break-before',
- 'page-break-inside',
- 'perspective',
- 'perspective-origin',
- 'pointer-events',
- 'position',
- 'quotes',
- 'resize',
- 'right',
- 'src', // @font-face
- 'tab-size',
- 'table-layout',
- 'text-align',
- 'text-align-last',
- 'text-decoration',
- 'text-decoration-color',
- 'text-decoration-line',
- 'text-decoration-style',
- 'text-indent',
- 'text-overflow',
- 'text-rendering',
- 'text-shadow',
- 'text-transform',
- 'text-underline-position',
- 'top',
- 'transform',
- 'transform-origin',
- 'transform-style',
- 'transition',
- 'transition-delay',
- 'transition-duration',
- 'transition-property',
- 'transition-timing-function',
- 'unicode-bidi',
- 'vertical-align',
- 'visibility',
- 'white-space',
- 'widows',
- 'width',
- 'word-break',
- 'word-spacing',
- 'word-wrap',
- 'z-index'
- // reverse makes sure longer attributes `font-weight` are matched fully
- // instead of getting false positives on say `font`
- ].reverse();
- /*
- Language: SCSS
- Description: Scss is an extension of the syntax of CSS.
- Author: Kurt Emch <kurt@kurtemch.com>
- Website: https://sass-lang.com
- Category: common, css
- */
- /** @type LanguageFn */
- function scss(hljs) {
- const modes = MODES(hljs);
- const PSEUDO_ELEMENTS$1 = PSEUDO_ELEMENTS;
- const PSEUDO_CLASSES$1 = PSEUDO_CLASSES;
- const AT_IDENTIFIER = '@[a-z-]+'; // @font-face
- const AT_MODIFIERS = "and or not only";
- const IDENT_RE = '[a-zA-Z-][a-zA-Z0-9_-]*';
- const VARIABLE = {
- className: 'variable',
- begin: '(\\$' + IDENT_RE + ')\\b'
- };
- return {
- name: 'SCSS',
- case_insensitive: true,
- illegal: '[=/|\']',
- contains: [
- hljs.C_LINE_COMMENT_MODE,
- hljs.C_BLOCK_COMMENT_MODE,
- {
- className: 'selector-id',
- begin: '#[A-Za-z0-9_-]+',
- relevance: 0
- },
- {
- className: 'selector-class',
- begin: '\\.[A-Za-z0-9_-]+',
- relevance: 0
- },
- modes.ATTRIBUTE_SELECTOR_MODE,
- {
- className: 'selector-tag',
- begin: '\\b(' + TAGS.join('|') + ')\\b',
- // was there, before, but why?
- relevance: 0
- },
- {
- className: 'selector-pseudo',
- begin: ':(' + PSEUDO_CLASSES$1.join('|') + ')'
- },
- {
- className: 'selector-pseudo',
- begin: '::(' + PSEUDO_ELEMENTS$1.join('|') + ')'
- },
- VARIABLE,
- { // pseudo-selector params
- begin: /\(/,
- end: /\)/,
- contains: [ hljs.CSS_NUMBER_MODE ]
- },
- {
- className: 'attribute',
- begin: '\\b(' + ATTRIBUTES.join('|') + ')\\b'
- },
- {
- begin: '\\b(whitespace|wait|w-resize|visible|vertical-text|vertical-ideographic|uppercase|upper-roman|upper-alpha|underline|transparent|top|thin|thick|text|text-top|text-bottom|tb-rl|table-header-group|table-footer-group|sw-resize|super|strict|static|square|solid|small-caps|separate|se-resize|scroll|s-resize|rtl|row-resize|ridge|right|repeat|repeat-y|repeat-x|relative|progress|pointer|overline|outside|outset|oblique|nowrap|not-allowed|normal|none|nw-resize|no-repeat|no-drop|newspaper|ne-resize|n-resize|move|middle|medium|ltr|lr-tb|lowercase|lower-roman|lower-alpha|loose|list-item|line|line-through|line-edge|lighter|left|keep-all|justify|italic|inter-word|inter-ideograph|inside|inset|inline|inline-block|inherit|inactive|ideograph-space|ideograph-parenthesis|ideograph-numeric|ideograph-alpha|horizontal|hidden|help|hand|groove|fixed|ellipsis|e-resize|double|dotted|distribute|distribute-space|distribute-letter|distribute-all-lines|disc|disabled|default|decimal|dashed|crosshair|collapse|col-resize|circle|char|center|capitalize|break-word|break-all|bottom|both|bolder|bold|block|bidi-override|below|baseline|auto|always|all-scroll|absolute|table|table-cell)\\b'
- },
- {
- begin: ':',
- end: ';',
- contains: [
- VARIABLE,
- modes.HEXCOLOR,
- hljs.CSS_NUMBER_MODE,
- hljs.QUOTE_STRING_MODE,
- hljs.APOS_STRING_MODE,
- modes.IMPORTANT
- ]
- },
- // matching these here allows us to treat them more like regular CSS
- // rules so everything between the {} gets regular rule highlighting,
- // which is what we want for page and font-face
- {
- begin: '@(page|font-face)',
- lexemes: AT_IDENTIFIER,
- keywords: '@page @font-face'
- },
- {
- begin: '@',
- end: '[{;]',
- returnBegin: true,
- keywords: {
- $pattern: /[a-z-]+/,
- keyword: AT_MODIFIERS,
- attribute: MEDIA_FEATURES.join(" ")
- },
- contains: [
- {
- begin: AT_IDENTIFIER,
- className: "keyword"
- },
- {
- begin: /[a-z-]+(?=:)/,
- className: "attribute"
- },
- VARIABLE,
- hljs.QUOTE_STRING_MODE,
- hljs.APOS_STRING_MODE,
- modes.HEXCOLOR,
- hljs.CSS_NUMBER_MODE
- ]
- }
- ]
- };
- }
- module.exports = scss;
|