CLASS zcl_abapgit_syntax_css DEFINITION PUBLIC INHERITING FROM zcl_abapgit_syntax_highlighter CREATE PUBLIC . PUBLIC SECTION. " CSS Standard https://www.w3.org/TR/css-2018/ " CSS Reference https://www.w3schools.com/cssref/default.asp " We used a mixture of above as reference for the keyword list " 1) CSS Properties https://www.w3schools.com/cssref/default.asp " 2) CSS Values & Units https://www.w3schools.com/cssref/css_units.asp " 3) CSS Selectors https://www.w3.org/TR/css-2018/#selectors " 4) CSS Functions https://www.w3schools.com/cssref/css_functions.asp " 5) CSS Colors https://www.w3schools.com/colors/colors_names.asp " 6) CSS Extensions " 7) CSS At-Rules https://www.w3.org/TR/css-2018/#at-rules " 8) HTML Tags CONSTANTS: BEGIN OF c_css, keyword TYPE string VALUE 'keyword', "#EC NOTEXT text TYPE string VALUE 'text', "#EC NOTEXT comment TYPE string VALUE 'comment', "#EC NOTEXT selectors TYPE string VALUE 'selectors', "#EC NOTEXT units TYPE string VALUE 'units', "#EC NOTEXT properties TYPE string VALUE 'properties', "#EC NOTEXT values TYPE string VALUE 'values', "#EC NOTEXT functions TYPE string VALUE 'functions', "#EC NOTEXT colors TYPE string VALUE 'colors', "#EC NOTEXT extensions TYPE string VALUE 'extensions', "#EC NOTEXT at_rules TYPE string VALUE 'at_rules', "#EC NOTEXT html TYPE string VALUE 'html', "#EC NOTEXT END OF c_css . CONSTANTS: BEGIN OF c_token, keyword TYPE c VALUE 'K', "#EC NOTEXT text TYPE c VALUE 'T', "#EC NOTEXT comment TYPE c VALUE 'C', "#EC NOTEXT selectors TYPE c VALUE 'S', "#EC NOTEXT units TYPE c VALUE 'U', "#EC NOTEXT properties TYPE c VALUE 'P', "#EC NOTEXT values TYPE c VALUE 'V', "#EC NOTEXT functions TYPE c VALUE 'F', "#EC NOTEXT colors TYPE c VALUE 'Z', "#EC NOTEXT extensions TYPE c VALUE 'E', "#EC NOTEXT at_rules TYPE c VALUE 'A', "#EC NOTEXT html TYPE c VALUE 'H', "#EC NOTEXT END OF c_token . CONSTANTS: BEGIN OF c_regex, " comments /* ... */ comment TYPE string VALUE '\/\*.*\*\/|\/\*|\*\/', "#EC NOTEXT " single or double quoted strings text TYPE string VALUE '("[^"]*")|(''[^'']*'')', "#EC NOTEXT " in general keywords don't contain numbers (except -ms-scrollbar-3dlight-color) keyword TYPE string VALUE '\b[a-z3@\-]+\b', "#EC NOTEXT " selectors begin with : selectors TYPE string VALUE ':[:a-z]+\b', "#EC NOTEXT " units units TYPE string VALUE '\b[0-9\. ]+(ch|cm|em|ex|in|mm|pc|pt|px|vh|vmax|vmin|vw)\b|\b[0-9\. ]+%', "#EC NOTEXT END OF c_regex . CLASS-METHODS class_constructor . METHODS constructor . PROTECTED SECTION. TYPES: ty_token TYPE c LENGTH 1. TYPES: BEGIN OF ty_keyword, keyword TYPE string, token TYPE ty_token, END OF ty_keyword. CLASS-DATA gt_keywords TYPE HASHED TABLE OF ty_keyword WITH UNIQUE KEY keyword. CLASS-DATA gv_comment TYPE abap_bool. CLASS-METHODS init_keywords. CLASS-METHODS insert_keywords IMPORTING iv_keywords TYPE string iv_token TYPE ty_token. CLASS-METHODS is_keyword IMPORTING iv_chunk TYPE string RETURNING VALUE(rv_yes) TYPE abap_bool. METHODS order_matches REDEFINITION. METHODS parse_line REDEFINITION. PRIVATE SECTION. ENDCLASS. CLASS ZCL_ABAPGIT_SYNTAX_CSS IMPLEMENTATION. METHOD class_constructor. init_keywords( ). ENDMETHOD. METHOD constructor. super->constructor( ). " Initialize instances of regular expression add_rule( iv_regex = c_regex-keyword iv_token = c_token-keyword iv_style = c_css-keyword ). add_rule( iv_regex = c_regex-comment iv_token = c_token-comment iv_style = c_css-comment ). add_rule( iv_regex = c_regex-text iv_token = c_token-text iv_style = c_css-text ). add_rule( iv_regex = c_regex-selectors iv_token = c_token-selectors iv_style = c_css-selectors ). add_rule( iv_regex = c_regex-units iv_token = c_token-units iv_style = c_css-units ). " Styles for keywords add_rule( iv_regex = '' iv_token = c_token-html iv_style = c_css-html ). add_rule( iv_regex = '' iv_token = c_token-properties iv_style = c_css-properties ). add_rule( iv_regex = '' iv_token = c_token-values iv_style = c_css-values ). add_rule( iv_regex = '' iv_token = c_token-functions iv_style = c_css-functions ). add_rule( iv_regex = '' iv_token = c_token-colors iv_style = c_css-colors ). add_rule( iv_regex = '' iv_token = c_token-extensions iv_style = c_css-extensions ). add_rule( iv_regex = '' iv_token = c_token-at_rules iv_style = c_css-at_rules ). ENDMETHOD. METHOD init_keywords. DATA: lv_keywords TYPE string. CLEAR gt_keywords. " 1) CSS Properties lv_keywords = '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|' && 'backface-visibility|background|background-attachment|background-blend-mode|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|box-decoration-break|box-shadow|box-sizing|caption-side|' && 'caret-color|clear|clip|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-family|font-kerning|font-size|font-size-adjust|' && 'font-stretch|font-style|font-variant|font-weight|grid|grid-area|grid-auto-columns|grid-auto-flow|' && 'grid-auto-rows|grid-column|grid-column-end|grid-column-gap|grid-column-start|grid-gap|grid-row|' && 'grid-row-end|grid-row-gap|grid-row-start|grid-template|grid-template-areas|grid-template-columns|' && 'grid-template-rows|hanging-punctuation|height|hyphens|isolation|justify-content|' && 'letter-spacing|line-height|list-style|list-style-image|list-style-position|list-style-type|margin|' && 'margin-bottom|margin-left|margin-right|margin-top|max-height|max-width|media|min-height|min-width|' && 'mix-blend-mode|object-fit|object-position|opacity|order|outline|outline-color|outline-offset|' && 'outline-style|outline-width|overflow|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|scroll-behavior|tab-size|table-layout|' && 'text-align|text-align-last|text-decoration|text-decoration-color|text-decoration-line|' && 'text-decoration-style|text-indent|text-justify|text-overflow|text-rendering|text-shadow|text-transform|' && 'transform|transform-origin|transform-style|transition|transition-delay|transition-duration|' && 'transition-property|transition-timing-function|unicode-bidi|user-select|vertical-align|visibility|' && 'white-space|width|word-break|word-spacing|word-wrap|writing-mode|z-index'. insert_keywords( iv_keywords = lv_keywords iv_token = c_token-properties ). " 2) CSS Values lv_keywords = 'absolute|all|auto|block|bold|border-box|both|bottom|center|counter|cover|dashed|fixed|hidden|important|' && 'inherit|initial|inline-block|italic|left|max-content|middle|min-content|no-repeat|none|normal|pointer|' && 'relative|rem|right|solid|table-cell|text|top|transparent|underline|url'. insert_keywords( iv_keywords = lv_keywords iv_token = c_token-values ). " 3) CSS Selectors lv_keywords = ':active|::after|::before|:checked|:disabled|:empty|:enabled|:first-child|::first-letter|::first-line|' && ':first-of-type|:focus|:hover|:lang|:last-child|:last-of-type|:link|:not|:nth-child|:nth-last-child|' && ':nth-last-of-type|:nth-of-type|:only-child|:only-of-type|:root|:target|:visited'. insert_keywords( iv_keywords = lv_keywords iv_token = c_token-selectors ). " 4) CSS Functions lv_keywords = 'attr|calc|cubic-bezier|hsl|hsla|linear-gradient|radial-gradient|repeating-linear-gradient|' && 'repeating-radial-gradient|rgb|rgba|rotate|scale|translateX|translateY|var'. insert_keywords( iv_keywords = lv_keywords iv_token = c_token-functions ). " 5) CSS Colors lv_keywords = '#|aliceblue|antiquewhite|aqua|aquamarine|azure|beige|bisque|black|blanchedalmond|blue|blueviolet|brown|' && 'burlywood|cadetblue|chartreuse|chocolate|coral|cornflowerblue|cornsilk|crimson|cyan|darkblue|darkcyan|' && 'darkgoldenrod|darkgray|darkgreen|darkgrey|darkkhaki|darkmagenta|darkolivegreen|darkorange|darkorchid|' && 'darkred|darksalmon|darkseagreen|darkslateblue|darkslategray|darkslategrey|darkturquoise|darkviolet|' && 'deeppink|deepskyblue|dimgray|dimgrey|dodgerblue|firebrick|floralwhite|forestgreen|fuchsia|gainsboro|' && 'ghostwhite|gold|goldenrod|gray|green|greenyellow|grey|honeydew|hotpink|indianred|indigo|ivory|khaki|' && 'lavender|lavenderblush|lawngreen|lemonchiffon|lightblue|lightcoral|lightcyan|lightgoldenrodyellow|' && 'lightgray|lightgreen|lightgrey|lightpink|lightsalmon|lightseagreen|lightskyblue|lightslategray|' && 'lightslategrey|lightsteelblue|lightyellow|lime|limegreen|linen|magenta|maroon|mediumaquamarine|' && 'mediumblue|mediumorchid|mediumpurple|mediumseagreen|mediumslateblue|mediumspringgreen|mediumturquoise|' && 'mediumvioletred|midnightblue|mintcream|mistyrose|moccasin|navajowhite|navy|oldlace|olive|olivedrab|' && 'orange|orangered|orchid|palegoldenrod|palegreen|paleturquoise|palevioletred|papayawhip|peachpuff|' && 'peru|pink|plum|powderblue|purple|rebeccapurple|red|rosybrown|royalblue|saddlebrown|salmon|sandybrown|' && 'seagreen|seashell|sienna|silver|skyblue|slateblue|slategray|slategrey|snow|springgreen|steelblue|' && 'tan|teal|thistle|tomato|turquoise|violet|wheat|white|whitesmoke|yellow|yellowgreen'. insert_keywords( iv_keywords = lv_keywords iv_token = c_token-colors ). " 6) CSS Extensions lv_keywords = 'moz|moz-binding|moz-border-bottom-colors|moz-border-left-colors|moz-border-right-colors|' && 'moz-border-top-colors|moz-box-align|moz-box-direction|moz-box-flex|moz-box-ordinal-group|' && 'moz-box-orient|moz-box-pack|moz-box-shadow|moz-context-properties|moz-float-edge|' && 'moz-force-broken-image-icon|moz-image-region|moz-orient|moz-osx-font-smoothing|' && 'moz-outline-radius|moz-outline-radius-bottomleft|moz-outline-radius-bottomright|' && 'moz-outline-radius-topleft|moz-outline-radius-topright|moz-stack-sizing|moz-system-metric|' && 'moz-transform|moz-transform-origin|moz-transition|moz-transition-delay|moz-user-focus|' && 'moz-user-input|moz-user-modify|moz-window-dragging|moz-window-shadow|ms|ms-accelerator|' && 'ms-block-progression|ms-content-zoom-chaining|ms-content-zoom-limit|' && 'ms-content-zoom-limit-max|ms-content-zoom-limit-min|ms-content-zoom-snap|' && 'ms-content-zoom-snap-points|ms-content-zoom-snap-type|ms-content-zooming|ms-filter|' && 'ms-flow-from|ms-flow-into|ms-high-contrast-adjust|ms-hyphenate-limit-chars|' && 'ms-hyphenate-limit-lines|ms-hyphenate-limit-zone|ms-ime-align|ms-overflow-style|' && 'ms-scroll-chaining|ms-scroll-limit|ms-scroll-limit-x-max|ms-scroll-limit-x-min|' && 'ms-scroll-limit-y-max|ms-scroll-limit-y-min|ms-scroll-rails|ms-scroll-snap-points-x|' && 'ms-scroll-snap-points-y|ms-scroll-snap-x|ms-scroll-snap-y|ms-scroll-translation|' && 'ms-scrollbar-3dlight-color|ms-scrollbar-arrow-color|ms-scrollbar-base-color|' && 'ms-scrollbar-darkshadow-color|ms-scrollbar-face-color|ms-scrollbar-highlight-color|' && 'ms-scrollbar-shadow-color|ms-scrollbar-track-color|ms-transform|ms-text-autospace|' && 'ms-touch-select|ms-wrap-flow|ms-wrap-margin|ms-wrap-through|o|o-transform|webkit|' && 'webkit-animation-trigger|webkit-app-region|webkit-appearance|webkit-aspect-ratio|' && 'webkit-backdrop-filter|webkit-background-composite|webkit-border-after|' && 'webkit-border-after-color|webkit-border-after-style|webkit-border-after-width|' && 'webkit-border-before|webkit-border-before-color|webkit-border-before-style|' && 'webkit-border-before-width|webkit-border-end|webkit-border-end-color|' && 'webkit-border-end-style|webkit-border-end-width|webkit-border-fit|' && 'webkit-border-horizontal-spacing|webkit-border-radius|webkit-border-start|' && 'webkit-border-start-color|webkit-border-start-style|webkit-border-start-width|' && 'webkit-border-vertical-spacing|webkit-box-align|webkit-box-direction|webkit-box-flex|' && 'webkit-box-flex-group|webkit-box-lines|webkit-box-ordinal-group|webkit-box-orient|' && 'webkit-box-pack|webkit-box-reflect|webkit-box-shadow|webkit-column-axis|' && 'webkit-column-break-after|webkit-column-break-before|webkit-column-break-inside|' && 'webkit-column-progression|webkit-cursor-visibility|webkit-dashboard-region|' && 'webkit-font-size-delta|webkit-font-smoothing|webkit-highlight|webkit-hyphenate-character|' && 'webkit-hyphenate-limit-after|webkit-hyphenate-limit-before|webkit-hyphenate-limit-lines|' && 'webkit-initial-letter|webkit-line-align|webkit-line-box-contain|webkit-line-clamp|' && 'webkit-line-grid|webkit-line-snap|webkit-locale|webkit-logical-height|' && 'webkit-logical-width|webkit-margin-after|webkit-margin-after-collapse|' && 'webkit-margin-before|webkit-margin-before-collapse|webkit-margin-bottom-collapse|' && 'webkit-margin-collapse|webkit-margin-end|webkit-margin-start|webkit-margin-top-collapse|' && 'webkit-marquee|webkit-marquee-direction|webkit-marquee-increment|' && 'webkit-marquee-repetition|webkit-marquee-speed|webkit-marquee-style|webkit-mask-box-image|' && 'webkit-mask-box-image-outset|webkit-mask-box-image-repeat|webkit-mask-box-image-slice|' && 'webkit-mask-box-image-source|webkit-mask-box-image-width|webkit-mask-repeat-x|' && 'webkit-mask-repeat-y|webkit-mask-source-type|webkit-max-logical-height|' && 'webkit-max-logical-width|webkit-min-logical-height|webkit-min-logical-width|' && 'webkit-nbsp-mode|webkit-padding-after|webkit-padding-before|webkit-padding-end|' && 'webkit-padding-start|webkit-perspective-origin-x|webkit-perspective-origin-y|' && 'webkit-print-color-adjust|webkit-rtl-ordering|webkit-svg-shadow|' && 'webkit-tap-highlight-color|webkit-text-combine|webkit-text-decoration-skip|' && 'webkit-text-decorations-in-effect|webkit-text-fill-color|webkit-text-security|' && 'webkit-text-stroke|webkit-text-stroke-color|webkit-text-stroke-width|webkit-text-zoom|' && 'webkit-transform|webkit-transform-origin|webkit-transform-origin-x|' && 'webkit-transform-origin-y|webkit-transform-origin-z|webkit-transition|' && 'webkit-transition-delay|webkit-user-drag|webkit-user-modify|overflow-clip-box|' && 'overflow-clip-box-block|overflow-clip-box-inline|zoom'. insert_keywords( iv_keywords = lv_keywords iv_token = c_token-extensions ). " 6) CSS At-Rules lv_keywords = '@|charset|counter-style|font-face|import|keyframes'. insert_keywords( iv_keywords = lv_keywords iv_token = c_token-at_rules ). " 7) HTML tage lv_keywords = 'doctyype|a|abbr|acronym|address|applet|area|b|base|basefont|bdo|bgsound|big|blink|blockquote|' && 'body|br|button|caption|center|cite|code|col|colgroup|dd|del|dfn|dir|div|dl|dt|em|embed|fieldset|' && 'font|form|frame|frameset|h1|h2|h3|h4|h5|h6|head|hr|html|i|iframe|ilayer|img|input|ins|isindex|' && 'kbd|keygen|label|layer|legend|li|link|listing|map|menu|meta|multicol|nobr|noembed|noframes|' && 'nolayer|noscript|object|ol|optgroup|option|p|param|plaintext|pre|q|s|samp|script|select|server|' && 'small|sound|spacer|span|strike|strong|style|sub|sup|tbody|textarea|title|tt|u|ul|var|wbr|xmp|' && 'xsl|xml|accesskey|action|align|alink|alt|background|balance|behavior|bgcolor|bgproperties|' && 'border|bordercolor|bordercolordark|bordercolorlight|bottommargin|checked|class|classid|clear|' && 'code|codebase|codetype|color|cols|colspan|compact|content|controls|coords|data|datafld|' && 'dataformatas|datasrc|direction|disabled|dynsrc|enctype|event|face|for|frame|frameborder|' && 'framespacing|height|hidden|href|hspace|http-equiv|id|ismap|lang|language|leftmargin|link|loop|' && 'lowsrc|marginheight|marginwidth|maxlength|mayscript|method|methods|multiple|name|nohref|' && 'noresize|noshade|nowrap|palette|pluginspage|public|readonly|rel|rev|rightmargin|rows|rowspan|' && 'rules|scroll|scrollamount|scrolldelay|scrolling|selected|shape|size|span|src|start|style|' && 'tabindex|target|text|title|topmargin|truespeed|type|url|urn|usemap|valign|value|vlink|volume|' && 'vrml|vspace|width|wrap|apply-templates|attribute|choose|comment|define-template-set|' && 'entity-ref|eval|expr|for-each|if|match|no-entities|node-name|order-by|otherwise|select|' && 'stylesheet|template|test|value-of|version|when|xmlns|xsl|cellpadding|cellspacing|table|td|' && 'tfoot|th|thead|tr'. insert_keywords( iv_keywords = lv_keywords iv_token = c_token-html ). ENDMETHOD. METHOD insert_keywords. DATA: lt_keywords TYPE STANDARD TABLE OF string, ls_keyword TYPE ty_keyword. FIELD-SYMBOLS: TYPE any. SPLIT iv_keywords AT '|' INTO TABLE lt_keywords. LOOP AT lt_keywords ASSIGNING . CLEAR ls_keyword. ls_keyword-keyword = . ls_keyword-token = iv_token. INSERT ls_keyword INTO TABLE gt_keywords. ENDLOOP. ENDMETHOD. METHOD is_keyword. DATA lv_str TYPE string. lv_str = to_lower( iv_chunk ). READ TABLE gt_keywords WITH TABLE KEY keyword = lv_str TRANSPORTING NO FIELDS. rv_yes = boolc( sy-subrc = 0 ). ENDMETHOD. METHOD order_matches. DATA: lv_match TYPE string, lv_line_len TYPE i, lv_cmmt_end TYPE i, lv_prev_end TYPE i, lv_prev_token TYPE c. FIELD-SYMBOLS: TYPE ty_match, TYPE ty_match, TYPE ty_keyword. " Longest matches SORT ct_matches BY offset length DESCENDING. lv_line_len = strlen( iv_line ). " Check if this is part of multi-line comment and mark it accordingly IF gv_comment = abap_true. READ TABLE ct_matches WITH KEY token = c_token-comment TRANSPORTING NO FIELDS. IF sy-subrc <> 0. CLEAR ct_matches. APPEND INITIAL LINE TO ct_matches ASSIGNING . -token = c_token-comment. -offset = 0. -length = lv_line_len. RETURN. ENDIF. ENDIF. LOOP AT ct_matches ASSIGNING . " Delete matches after open text match IF lv_prev_token = c_token-text AND -token <> c_token-text. CLEAR -token. CONTINUE. ENDIF. lv_match = substring( val = iv_line off = -offset len = -length ). CASE -token. WHEN c_token-keyword. " Skip keyword that's part of previous (longer) keyword IF -offset < lv_prev_end. CLEAR -token. CONTINUE. ENDIF. " Map generic keyword to specific CSS token lv_match = to_lower( lv_match ). READ TABLE gt_keywords ASSIGNING WITH TABLE KEY keyword = lv_match. IF sy-subrc = 0. -token = -token. ENDIF. WHEN c_token-comment. IF lv_match = '/*'. DELETE ct_matches WHERE offset > -offset. -length = lv_line_len - -offset. gv_comment = abap_true. ELSEIF lv_match = '*/'. DELETE ct_matches WHERE offset < -offset. -length = -offset + 2. -offset = 0. gv_comment = abap_false. ELSE. lv_cmmt_end = -offset + -length. DELETE ct_matches WHERE offset > -offset AND offset <= lv_cmmt_end. ENDIF. WHEN c_token-text. -text_tag = lv_match. IF lv_prev_token = c_token-text. IF -text_tag = -text_tag. -length = -offset + -length - -offset. CLEAR lv_prev_token. ENDIF. CLEAR -token. CONTINUE. ENDIF. ENDCASE. lv_prev_token = -token. lv_prev_end = -offset + -length. ASSIGN TO . ENDLOOP. DELETE ct_matches WHERE token IS INITIAL. ENDMETHOD. METHOD parse_line. "REDEFINITION DATA lv_index TYPE i. FIELD-SYMBOLS LIKE LINE OF rt_matches. rt_matches = super->parse_line( iv_line ). " Remove non-keywords LOOP AT rt_matches ASSIGNING WHERE token = c_token-keyword. lv_index = sy-tabix. IF abap_false = is_keyword( substring( val = iv_line off = -offset len = -length ) ). CLEAR -token. ENDIF. ENDLOOP. DELETE rt_matches WHERE token IS INITIAL. ENDMETHOD. ENDCLASS.