Much better support for CSS, tested using varied examples from spec

rc/filetype/css.kak

@@ -15,6 +15,7 @@ hook global WinSetOption filetype=css %[
     require-module css
 
     hook window ModeChange pop:insert:.* -group css-trim-indent  css-trim-indent
+    hook window InsertChar \n -group css-insert css-insert-on-new-line
     hook window InsertChar \n -group css-indent css-indent-on-new-line
     hook window InsertChar \} -group css-indent css-indent-on-closing-curly-brace
     set-option buffer extra_word_chars '_' '-'
@@ -32,28 +33,94 @@ provide-module css %[
 
 # Highlighters
 # ‾‾‾‾‾‾‾‾‾‾‾‾
-
 add-highlighter shared/css regions
-add-highlighter shared/css/selector default-region group
+add-highlighter shared/css/code default-region group
-add-highlighter shared/css/declaration region [{] [}]  regions
+add-highlighter shared/css/attr_selector region \[ \] regions
-add-highlighter shared/css/comment    region /[*] [*]/ fill comment
+add-highlighter shared/css/double_string region '"'  (?<!\\)(\\\\)*" fill string
+add-highlighter shared/css/single_string region "'"  (?<!\\)(\\\\)*' fill string
+add-highlighter shared/css/comment    region /\* \*/ fill comment
 
-add-highlighter shared/css/declaration/base default-region group
+evaluate-commands %sh{
-add-highlighter shared/css/declaration/double_string region '"' (?<!\\)(\\\\)*" fill string
+  # html tags
-add-highlighter shared/css/declaration/single_string region "'" "'"             fill string
+  # generated from the URL & <code> below
-add-highlighter shared/css/declaration/comment region /[*] [*]/ fill comment
+  # includes elements that cannot be styled, which is fine.
+  # 
+  # https://developer.mozilla.org/en-US/docs/Web/HTML/Element
+  # <CODE>
+  # // selector might change on site updates
+  # var els; document.querySelectorAll('tr td:first-child a[href^="/en-US/docs/Web/HTML/Element/"]').forEach((el) => {els += el.childNodes[0].innerText + " ";}); console.log(els);
+  # </CODE>
+  html_tags='html body address article aside footer header h1 h2 h3 h4 h5 h6 main nav section blockquote dd div dl dt figcaption figure hr li ol p pre ul a abbr b bdi bdo br cite code data dfn em i kbd mark q rp rt ruby s samp small span strong sub sup time u var wbr area audio img map track video embed iframe object param picture portal source canvas noscript script del ins caption col colgroup table tbody td tfoot th thead tr button datalist fieldset form input label legend meter optgroup option output progress select textarea details dialog menu summary slot template acronym applet basefont bgsound big blink center content dir font frame frameset hgroup image keygen marquee menuitem nobr noembed noframes plaintext rb rtc shadow spacer strike tt xmp'
 
-# https://developer.mozilla.org/en-US/docs/Web/CSS/length
+  # Units
-add-highlighter shared/css/declaration/base/ regex (#[0-9A-Fa-f]+)|((\d*\.)?\d+(ch|cm|em|ex|mm|pc|pt|px|rem|vh|vmax|vmin|vw)) 0:value
+  # ‾‾‾‾‾
+  # generated from the URL & <code> below
+  # includes #rgb, #rrggbb, #rrggbbaa as color values {3,8}
+  # 
+  # https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Values_and_Units
+  # <CODE>
+  # // selector might change on site updates
+  # var units; document.querySelectorAll('tr td:first-child').forEach((el) => {els += el.childNodes[0].innerText + " ";}); console.log(units)
+  # </CODE>
+  units='% cap ch cm deg dpcm dpi dppx em ex grad Hz ic in kHz lh mm ms pc pt px Q rad rem rlh s turn vb vh vi vmax vmin vw x'
 
-add-highlighter shared/css/declaration/base/ regex ([A-Za-z][A-Za-z0-9_-]*)\h*: 1:keyword
+  logical_ops='and not only from to'
-add-highlighter shared/css/declaration/base/ regex :(before|after) 0:attribute
+  keywords='!important auto inherit initial unset none'
-add-highlighter shared/css/declaration/base/ regex !important 0:keyword
+  media_types='all print screen speech'
 
-# element#id element.class
+  # easing_re='linear|ease(-(in-out|in|out))?|step-(start|end)'
-# universal selector
+
-add-highlighter shared/css/selector/ regex         [A-Za-z][A-Za-z0-9_-]* 0:keyword
+  # combinators='+ > ~ ||'
-add-highlighter shared/css/selector/ regex [*]|[#.][A-Za-z][A-Za-z0-9_-]* 0:variable
+  # attribute_op='= ~= |= ^= $= *='
+
+  join() { eval set -- $1; IFS="|"; echo "$*"; }
+
+  # Selectors
+  # ‾‾‾‾‾‾‾‾‾
+  # universal: *, ns|*, *|*, |*
+  # class/id: .class, #id
+  # type: element
+  # attr: [attr=val]
+
+  # order below matters
+  printf %s "
+  # html tag selectors
+  add-highlighter shared/css/code/ regex \b($(join "${html_tags}"))((:[a-z:])|[\h.#]) 1:keyword
+
+  #functional notation
+  add-highlighter shared/css/code/ regex ([a-zA-Z0-9-_]+[a-zA-Z0-9])\( 1:keyword
+
+  # logical operators, and other keywords
+  add-highlighter shared/css/code/ regex (\b($(join "${logical_ops}"))\b|$(join "${keywords}")) 1:keyword 1:+i
+
+  # media types
+  add-highlighter shared/css/code/ regex \b($(join "${media_types}"))\b 1:+i
+
+  # pseudo (after functional notation as they may contain paranthesis)
+  add-highlighter shared/css/code/ regex (:{1,2})([a-z-]+) 2:attribute 2:+a
+
+  # at-rules
+  add-highlighter shared/css/code/ regex @[a-z-]+ 0:function 
+
+  # css property
+  add-highlighter shared/css/code/ regex ([A-Za-z][A-Za-z0-9_-]*)\h*:\h 1:operator 1:+a
+
+  # universal, class, id selectors
+  add-highlighter shared/css/code/ regex (\*|[*]?[.][A-Za-z][A-Za-z0-9_-]+) 1:type
+  add-highlighter shared/css/code/ regex (\*|[*]?[#][A-Za-z][A-Za-z0-9_-]+) 1:type 1:+i
+
+  # hex values
+  add-highlighter shared/css/code/ regex (#[0-9A-Fa-f]{3,8})\b 0:value 0:+a
+  add-highlighter shared/css/code/ regex \b(\d*\.)?\d+($(join "${units}"))?\b 0:value 0:+a
+  "
+}
+
+# Attribute Selectors
+add-highlighter shared/css/attr_selector/base default-region group
+add-highlighter shared/css/attr_selector/base/ regex ([a-zA-Z0-9-]+) 1:attribute
+add-highlighter shared/css/attr_selector/base/ regex \h(i|s) 1:type
+add-highlighter shared/css/attr_selector/double_string region '"'  (?<!\\)(\\\\)*" fill string
+add-highlighter shared/css/attr_selector/single_string region "'"  (?<!\\)(\\\\)*' fill string
 
 # Commands
 # ‾‾‾‾‾‾‾‾
@@ -65,10 +132,20 @@ define-command -hidden css-trim-indent %{
 
 define-command -hidden css-indent-on-new-line %[
     evaluate-commands -draft -itersel %[
-        # preserve previous line indent
+        execute-keys <semicolon>
-        try %[ execute-keys -draft <semicolon> K <a-&> ]
+        try %<
+            # if previous line is part of a comment, do nothing
+            execute-keys -draft <a-?>/\*<ret> <a-K>^\h*[^/*\h]<ret>
+        > catch %<
+            # else if previous line closed a paren (possibly followed by words and a comment),
+            # copy indent of the opening paren line
+            execute-keys -draft k<a-x> 1s(\))(\h+\w+)*\h*(\;\h*)?(?://[^\n]+)?\n\z<ret> m<a-semicolon>J <a-S> 1<a-&>
+        > catch %<
+            # else indent new lines with the same level as the previous one
+            execute-keys -draft K <a-&>
+        >
         # filter previous line
-        try %[ execute-keys -draft k : css-trim-indent <ret> ]
+        try %< execute-keys -draft k <a-x> <a-k>^\h+$<ret> Hd >
         # indent after lines ending with with {
         try %[ execute-keys -draft k <a-x> <a-k> \{$ <ret> j <a-gt> ]
         # deindent closing brace when after cursor
@@ -76,6 +153,44 @@ define-command -hidden css-indent-on-new-line %[
     ]
 ]
 
+define-command -hidden css-insert-on-new-line %[
+    evaluate-commands -draft -itersel %<
+    execute-keys <semicolon>
+    try %[
+        # if the previous line isn't within a comment scope, break
+        execute-keys -draft k<a-x> <a-k>^(\h*/\*|\h+\*(?!/))<ret>
+
+        # find comment opening, validate it was not closed, and check its using star prefixes
+        execute-keys -draft <a-?>/\*<ret><a-H> <a-K>\*/<ret> <a-k>\A\h*/\*([^\n]*\n\h*\*)*[^\n]*\n\h*.\z<ret>
+
+        try %[
+            # if the previous line is opening the comment, insert star preceeded by space
+            execute-keys -draft k<a-x><a-k>^\h*/\*<ret>
+            execute-keys -draft i*<space><esc>
+        ] catch %[
+           try %[
+                # if the next line is a comment line insert a star
+                execute-keys -draft j<a-x><a-k>^\h+\*<ret>
+                execute-keys -draft i*<space><esc>
+            ] catch %[
+                try %[
+                    # if the previous line is an empty comment line, close the comment scope
+                    execute-keys -draft k<a-x><a-k>^\h+\*\h+$<ret> <a-x>1s\*(\h*)<ret>c/<esc>
+                ] catch %[
+                    # if the previous line is a non-empty comment line, add a star
+                    execute-keys -draft i*<space><esc>
+                ]
+            ]
+        ]
+
+        # trim trailing whitespace on the previous line
+        try %[ execute-keys -draft s\h+$<ret> d ]
+        # align the new star with the previous one
+        execute-keys K<a-x>1s^[^*]*(\*)<ret>&
+    ]
+    >
+]
+
 define-command -hidden css-indent-on-closing-curly-brace %[
     evaluate-commands -draft -itersel %[
         # align to opening curly brace when alone on a line