
syntaxdef css {
    #skip spaces
    /\s+/m :;

    # $1 is either selectors, classes or nested selector + classes
    # $2 are the styles - [keyword:val;]*
    /\s*([^\{]*)\s*\{\s*([^\}]*)\s*}/sm  : {
        selector(${1});
        style(${2});
        region {
            findlinks=true;
        }
    }

    # skip comment
    /\/\*(.*?)\*\//s : {
        region {
            type=comment;

        }
    }

    context selector {
        # list of selector keywords/html tags etc
        /\b(?:a(?:bbr|cronym|ddress|pplet|rea)|b(?:ase(?:font)?|do|ig|lockquote|ody|utton|r)|c(?:aption|enter|ite|o(?:de|lgroup|l))|d(?:el|fn|i[rv]|[dlt])|em|f(?:ieldset|o(?:nt|rm)|rame(?:set)?)|h(?:ead|tml|[123456r])|i(?:frame|mg|n(?:put|s)|sindex)|kbd|l(?:abel|egend|ink|i)|m(?:ap|e(?:nu|ta))|no(?:frames|script)|o(?:bject|pt(?:group|ion)|l)|p(?:aram|re)|s(?:amp|cript|elect|mall|pan|t(?:r(?:ike|ong)|yle)|u[bp])|t(?:able|body|extarea|foot|head|itle|[dhrt])|ul|var|[abipqsu])\b/ : {
            region {
                type=html_tag;
                index=word;
            }
        }

        #element id
        /\s*(\#[\w\-]+)\s*/ : {
            region ${1} {
                type=elem_id;
                index=word;
            }
        }

        # css class
        /\s*(\.[\w\-]+)\s*/ : {
            region ${1} {
                type=class_id;
                index=word;
            }
        }

        # pseudo class todo: use this instead? (?:active|f(?:irst\-child|ocus)|hover|l(?:ang|ink)|visited)
        /\s*\:([\w-]+)\s*/ : {
            region ${1} {
                type=pseudo_class;
                index=word;
            }
        }

        # skip comment
        /\/\*(.*?)\*\//s : {
            region {
                type=comment;

            }
        }
    }

    context style {
        /\b(azimuth|b(?:ackground(?:\-(?:attachment|color|image|position|repeat))?|o(?:rder(?:\-(?:bottom(?:\-(?:color|style|width))?|col(?:lapse|or)|left(?:\-(?:color|style|width))?|right(?:\-(?:color|style|width))?|s(?:pacing|tyle)|top(?:\-(?:color|style|width))?|width))?|ttom))|c(?:aption\-side|l(?:ear|ip)|o(?:lor|ntent|unter\-(?:incremen|rese)t)|u(?:e\-(?:after|before)|rsor|e))|di(?:rection|splay)|e(?:levation|mpty\-cells)|f(?:loat|ont(?:\-(?:family|s(?:ize|t(?:retch|yle))|variant|weight))?)|height|l(?:e(?:ft|tter\-spacing)|i(?:ne\-height|st\-style(?:\-(?:image|position|type))?))|m(?:a(?:rgin(?:\-(?:bottom|left|right|top))?|x\-(?:height|width))|in\-(?:height|width))|o(?:rphans|utline(?:\-(?:color|style|width))?|verflow(?:\-[xy])?)|p(?:a(?:dding(?:\-(?:bottom|left|right|top))?|ge\-break\-(?:after|before|inside)|use(?:\-(?:after|before))?)|itch(?:\-range)?|lay\-during|osition)|quotes|ri(?:chness|ght)|s(?:pe(?:ak(?:\-(?:header|numeral|punctuation))?|ech\-rate)|tress)|t(?:able\-layout|ext\-(?:align|decoration|indent|transform)|op)|unicode\-bidi|v(?:ertical\-align|isibility|o(?:ice\-family|lume))|w(?:hite\-space|id(?:ows|th)|ord\-spacing)|z\-index)/ : {
            # style values
            context {
                
                /\s*:\s*/ :;

                #numbers
                /([0-9]+|[0-9]*\.[0-9]+)(\%|cm|em|in|mm|p[tx])*/ : {
                    region ${2} {
                        type=css_attrib_val;
                    }
                    region ${1} {
                        type=numeric;
                    }
                }
                # color value
                /\#[0-9a-fA-F]+|[0-9a-fA-F]{3,6}/ : {
                    region {
                        type=numeric;
                    }
                }

                #strings
                /"/ : {
                    context {
                        /\\./: ;
                        /$/m : exit;
                        "\"" : exit;
                    }
                    region ${ALL} {
                        type=string;
                    }
                }

                #url
                /\(/ : {
                    context {
                        /\\./: ;
                        /$/m : exit;
                        ")" : exit;
                    }
                    region ${ALL} {
                        type=css_url;
                    }
                }
                # value keywords
                /\b(?:a(?:b(?:ov|solut(?:e\-siz)?)e|l(?:ways|l)|ngle|qua|rmenian|scent|ttr|uto|void)|b(?:a(?:ckground\-(?:attachment|color|image|position|repeat)|seline)|box|e(?:hind|low)|idi\-override|l(?:ack|ink|ock|ue)|o(?:ld(?:er)?|rder\-(?:style|top\-color|width)|t(?:tom|h)))|c(?:ap(?:\-height|italize|tion)|enter(?:\-(?:lef|righ)t|line)?|ircle|lose\-quote|o(?:de|l(?:lapse|or)|n(?:densed|tinuous)|unter)|rosshair|ue\-(?:after|before))|d(?:ashed|e(?:cimal(?:\-leading\-zero)?|f(?:ault|inition\-src)|scent)|i(?:gits|sc))|e(?:\-resize|mbed|x(?:pand|tra\-(?:condens|expand))ed)|f(?:a(?:mily\-name|r\-(?:lef|righ)t|st(?:er)?)|ixed|ont\-(?:family|s(?:ize|t(?:retch|yle))|variant|weight)|requency|uchsia)|g(?:e(?:neric\-(?:family|voice)|orgian)|re(?:en|y))|h(?:elp|i(?:d(?:den|e)|gh(?:er)?))|i(?:con|dentifier|n(?:herit|line(?:\-(?:block|table))?|side|teger|vert)|talic)|justify|l(?:e(?:ft(?:\-side|wards)?|ngth|vel)|i(?:ghter|me|ne\-(?:height|through)|st\-(?:item|style\-(?:image|position|type)))|o(?:ud|wer(?:\-(?:alpha|greek|latin|roman)|case)?|w)|tr)|m(?:a(?:r(?:gin\-width|oon)|thline)|e(?:dium|nu|ssage\-box)|i(?:ddle|x)|ove)|n(?:\-resize|avy|e\-resize|o(?:\-(?:close\-quote|open\-quote|repeat)|ne|rmal|wrap)|umber|w\-resize)|o(?:blique|live|nce|pen\-quote|ut(?:line\-(?:color|style|width)|side)|verline)|p(?:a(?:dding\-width|nose\-)|ercentage|ointer|r(?:e\-(?:line|wrap)|ogress|e)|urple|x)|r(?:e(?:lative(?:\-size)?|peat|d)|ight(?:\-side|wards)?|tl|un\-in)|s(?:\-resize|croll|e(?:\-resize|mi\-(?:condens|expand)ed|parate)|h(?:ape|ow)|il(?:ent|ver)|lo(?:pe|wer|w)|mall\-cap(?:tion|[s])|o(?:ft|lid)|pe(?:cific\-voice|ll\-out)|quare|rc|t(?:at(?:ic|us\-bar)|em[hv]|ring)|u(?:per|b)|w\-resize)|t(?:able(?:\-(?:c(?:aption|ell|olumn(?:\-group)?)|footer\-group|header\-group|row(?:\-group)?))?|e(?:al|xt(?:\-(?:bottom|top))?)|ime|op(?:line)?|ransparent)|u(?:ltra\-(?:condens|expand)ed|n(?:derline|i(?:code\-range|ts\-per\-em))|pper(?:\-(?:alpha|latin|roman)|case)|r[il])|visible|w(?:\-resize|ait|hite|idths)|x\-(?:fast|h(?:eight|igh)|lo(?:ud|w)|s(?:low|oft))|yellow)\b/ : {
                    region {
                        type=css_attrib_val;
                    }
                }

                # skip comment
                /\/\*(.*?)\*\//s : {
                    region {
                        type=comment;

                    }
                }

                # end of one style
                /;/ : exit;
            }

            # style keyword
            region ${1} {
                type=css_attrib_key;
                index=word;
            }
        }

        # skip comment
        /\/\*(.*?)\*\//s : {
            region {
                type=comment;

            }
        }
    }

}

# css attribute key
# azimuth background-attachment background-color background-image background-position background-repeat background background-color border-collapse border-color border-spacing border-style border-top border-right border-bottom border-left border-top-color border-top-color border-right-color border-bottom-color border-left-color border-top-style border-right-style border-bottom-style border-left-style border-top-width border-right-width border-bottom-width border-left-width border-width border border-top-color bottom caption-side clear clip color content counter-increment counter-reset cue-after cue-before cue cue-before cursor direction display elevation empty-cells float font-family font-size font-style font-variant font-weight font font-style height left letter-spacing line-height list-style-image list-style-position list-style-type list-style list-style-type margin-right margin-left margin-top margin-bottom margin max-height max-width min-height min-width orphans outline-color outline-style outline-width outline outline-color overflow overflow-x overflow-y padding-top padding-right padding-bottom padding-left padding page-break-after page-break-before page-break-inside pause-after pause-before pause pitch-range pitch play-during position quotes richness right speak-header speak-numeral speak-punctuation speak speech-rate stress table-layout text-align text-decoration text-indent text-transform top unicode-bidi vertical-align visibility voice-family volume white-space widows width word-spacing z-index font-stretch
#
# css attribute vals
# above absolute absolute-size all always angle aqua armenian ascent attr auto avoid background-attachment background-color background-image background-position background-repeat baseline baseline bbox behind below bidi-override black blink block blue bold bolder border-style border-top-color border-width both bottom cap-height capitalize caption center center-left center-right centerline circle close-quote code collapse color condensed condensed continuous counter crosshair cue-after cue-before dashed decimal decimal-leading-zero default definition-src descent digits disc e-resize embed expanded extra-condensed extra-expanded family-name far-left far-right fast faster fixed font-family font-family font-size font-size font-stretch font-style font-style font-variant font-variant font-weight font-weight frequency fuchsia generic-family generic-voice georgian green grey help hidden hide high higher icon identifier inherit inline inline-block inline-table inside integer invert italic italic justify left left-side leftwards length level lighter lime line-height line-through list-item list-style-image list-style-position list-style-type loud low lower lower-alpha lower-greek lower-latin lower-roman lowercase ltr margin-width maroon mathline medium menu message-box middle mix move n-resize navy ne-resize no-close-quote no-open-quote no-repeat none normal normal nowrap number nw-resize oblique oblique olive once open-quote outline-color outline-style outline-width outside overline padding-width panose- percentage pointer pre pre-line pre-wrap progress purple px red relative relative-size repeat right right-side rightwards rtl run-in s-resize scroll se-resize semi-condensed semi-expanded separate shape show silent silver slope slow slower small-caps small-caps small-caption soft solid specific-voice spell-out square src static status-bar stemh stemv string sub super sw-resize table table-caption table-cell table-column table-column-group table-footer-group table-header-group table-row table-row-group teal text text-bottom text-top time top topline transparent ultra-condensed ultra-expanded underline unicode-range units-per-em upper-alpha upper-latin upper-roman uppercase uri url visible w-resize wait white widths x-fast x-height x-high x-loud x-low x-slow x-soft yellow
#
# html tags
# a abbr acronym address applet area b base basefont bdo big blockquote body br button caption center cite code col colgroup dd del dfn dir div dl dt em fieldset font form frame frameset h1 h2 h3 h4 h5 h6 head hr html i iframe img input ins isindex kbd label legend li link map menu meta noframes noscript object ol optgroup option p param pre q s samp script select small span strike strong style sub sup table tbody td textarea tfoot th thead title tr tt u ul var
