diff --git a/README.md b/README.md index d5a8792..c290085 100644 --- a/README.md +++ b/README.md @@ -1,25 +1,45 @@ -Vim CSS Syntax File ------------- +# Vim CSS Syntax File -Installation -------------- +## Adding features -## Manual +The keywords in this plugin should be limited to those that appear in a W3C +document that has reached the level of Candidate Recommendation or higher. Check +[the "current work" page](https://www.w3.org/Style/CSS/current-work) for more +details. -copy `css.vim` file into your `~/.vim/syntax/` directory; +## Working Draft branch -## Using Vundle: +The `wd` branch contains specs that are in Working Draft status. Switch to this +branch for highlighting for things like ["flow-relative" +properties](https://www.w3.org/TR/css-logical-1/) that haven't made it into +Candidate Recommendation yet. -add the following line to your `~/.vimrc` file; +## Installation + +### Manual + +Copy `css.vim` file into your `~/.vim/syntax/` directory. + +### Using Vundle + +Add the following line to your `~/.vimrc` file: ``` -Plugin 'JulesWang/css.vim' +Plugin 'vim-language-dept/css-syntax.vim' ``` -and run `:PluginInstall` in vim. +and run `:PluginInstall` in Vim. + +## More Info + +- https://www.w3.org/Style/2011/CSS-process +- https://www.w3.org/Style/CSS/current-work +- https://www.w3.org/Consortium/Process#candidate-rec +- https://developer.mozilla.org/en-US/docs/Web/CSS + +## Thanks -Thanks ------------- -* ChrisYip, amadeus https://github.com/amadeus/Better-CSS-Syntax-for-Vim -* hail2u https://github.com/hail2u/vim-css3-syntax -* leptrue https://github.com/lepture/vim-css +- JulesWang https://github.com/JulesWang/css.vim +- ChrisYip, amadeus https://github.com/amadeus/Better-CSS-Syntax-for-Vim +- hail2u https://github.com/hail2u/vim-css3-syntax +- leptrue https://github.com/lepture/vim-css diff --git a/syntax/css.vim b/syntax/css.vim index cd61998..2bd152d 100644 --- a/syntax/css.vim +++ b/syntax/css.vim @@ -1,12 +1,13 @@ " Vim syntax file " Language: Cascading Style Sheets " Previous Contributor List: -" Claudio Fleiner (Maintainer) +" Jules Wang +" Claudio Fleiner " Yeti (Add full CSS2, HTML4 support) " Nikolai Weibull (Add CSS2 support) -" URL: https://github.com/JulesWang/css.vim -" Maintainer: Jules Wang -" Last Change: 2019 Jul. 29 +" URL: https://github.com/vim-language-dept/css-syntax.vim +" Maintainer: Jay Sitter +" Last Change: 2024 Nov 12 " quit when a syntax file was already loaded if !exists("main_syntax") @@ -22,6 +23,8 @@ let s:cpo_save = &cpo set cpo&vim syn case ignore +" Add dash to allowed keyword characters. +syn iskeyword @,48-57,_,192-255,- " HTML4 tags syn keyword cssTagName abbr address area a b base @@ -31,7 +34,7 @@ syn keyword cssTagName dfn div dl dt em fieldset form syn keyword cssTagName h1 h2 h3 h4 h5 h6 head hr html img i syn keyword cssTagName iframe input ins isindex kbd label legend li syn keyword cssTagName link map menu meta noscript ol optgroup -syn keyword cssTagName option p param pre q s samp script small +syn keyword cssTagName option p param picture pre q s samp script small syn keyword cssTagName span strong sub sup tbody td syn keyword cssTagName textarea tfoot th thead title tr ul u var syn keyword cssTagName object svg @@ -60,7 +63,7 @@ syn match cssClassName "\.-\=[A-Za-z_][A-Za-z0-9_-]*" contains=cssClassNameDot syn match cssClassNameDot contained '\.' try -syn match cssIdentifier "#[A-Za-zÀ-ÿ_@][A-Za-zÀ-ÿ0-9_@-]*" +syn match cssIdentifier "#[A-Za-zÀ-ÿ_@][A-Za-zÀ-ÿ0-9_@-]*" catch /^.*/ syn match cssIdentifier "#[A-Za-z_@][A-Za-z0-9_@-]*" endtry @@ -113,7 +116,7 @@ syn keyword cssColor contained ActiveBorder ActiveCaption AppWorkspace ButtonFac syn case ignore syn match cssImportant contained "!\s*important\>" -syn match cssCustomProp contained "--[a-zA-Z0-9-_]*" +syn match cssCustomProp contained "\<--[a-zA-Z0-9-_]*\>" syn match cssColor contained "\" syn match cssColor contained "\" @@ -123,11 +126,13 @@ syn match cssColor contained "#\x\{6\}\>" contains=cssUnitDecorators syn match cssColor contained "#\x\{8\}\>" contains=cssUnitDecorators syn region cssURL contained matchgroup=cssFunctionName start="\<\(uri\|url\|local\|format\)\s*(" end=")" contains=cssStringQ,cssStringQQ oneline -syn region cssFunction contained matchgroup=cssFunctionName start="\<\(var\|calc\)\s*(" end=")" contains=cssCustomProp,cssValue.*,cssFunction,cssColor,cssStringQ,cssStringQQ oneline +syn region cssMathGroup contained matchgroup=cssMathParens start="(" end=")" containedin=cssFunction,cssMathGroup contains=cssCustomProp,cssValue.*,cssFunction,cssColor,cssStringQ,cssStringQQ oneline +syn region cssFunction contained matchgroup=cssFunctionName start="\<\(var\|calc\)\s*(" end=")" contains=cssCustomProp,cssValue.*,cssFunction,cssURL,cssColor,cssStringQ,cssStringQQ oneline syn region cssFunction contained matchgroup=cssFunctionName start="\<\(rgb\|clip\|attr\|counter\|rect\|cubic-bezier\|steps\)\s*(" end=")" oneline contains=cssValueInteger,cssValueNumber,cssValueLength,cssFunctionComma syn region cssFunction contained matchgroup=cssFunctionName start="\<\(rgba\|hsl\|hsla\|color-stop\|from\|to\)\s*(" end=")" oneline contains=cssColor,cssValueInteger,cssValueNumber,cssValueLength,cssFunctionComma,cssFunction -syn region cssFunction contained matchgroup=cssFunctionName start="\<\(linear-\|radial-\)\=\gradient\s*(" end=")" oneline contains=cssColor,cssValueInteger,cssValueNumber,cssValueLength,cssFunction,cssGradientAttr,cssFunctionComma +syn region cssFunction contained matchgroup=cssFunctionName start="\<\(linear-\|radial-\|conic-\)\=\gradient\s*(" end=")" oneline contains=cssColor,cssValueInteger,cssValueNumber,cssValueLength,cssFunction,cssGradientAttr,cssFunctionComma syn region cssFunction contained matchgroup=cssFunctionName start="\<\(matrix\(3d\)\=\|scale\(3d\|X\|Y\|Z\)\=\|translate\(3d\|X\|Y\|Z\)\=\|skew\(X\|Y\)\=\|rotate\(3d\|X\|Y\|Z\)\=\|perspective\)\s*(" end=")" oneline contains=cssValueInteger,cssValueNumber,cssValueLength,cssValueAngle,cssFunctionComma +syn region cssFunction contained matchgroup=cssFunctionName start="\<\(blur\|brightness\|contrast\|drop-shadow\|grayscale\|hue-rotate\|invert\|opacity\|saturate\|sepia\)\s*(" end=")" oneline contains=cssValueInteger,cssValueNumber,cssValueLength,cssValueAngle,cssFunctionComma syn keyword cssGradientAttr contained top bottom left right cover center middle ellipse at syn match cssFunctionComma contained "," @@ -155,7 +160,7 @@ syn keyword cssAnimationAttr contained infinite "------------------------------------------------ " CSS Backgrounds and Borders Module Level 3 " http://www.w3.org/TR/css3-background/ -syn match cssBackgroundProp contained "\" +syn match cssBackgroundProp contained "\" " background-attachment attributes syn keyword cssBackgroundAttr contained scroll fixed local @@ -171,6 +176,8 @@ syn keyword cssBackgroundAttr contained cover contain syn match cssBorderProp contained "\" syn match cssBorderProp contained "\" +syn match cssBorderProp contained "\" +syn match cssBorderProp contained "\" syn match cssBorderProp contained "\" syn match cssBorderProp contained "\" syn match cssBorderProp contained "\" @@ -190,6 +197,7 @@ syn keyword cssBorderAttr contained clone slice syn match cssBoxProp contained "\" syn match cssBoxProp contained "\" +syn match cssBoxProp contained "\<\(margin\|padding\)\(-\(inline\|block\)\(-\(start\|end\)\)\)\=\>" syn match cssBoxProp contained "\" syn match cssBoxProp contained "\" syn keyword cssBoxAttr contained visible hidden scroll auto @@ -218,11 +226,11 @@ syn keyword cssFlexibleBoxProp contained order syn match cssFlexibleBoxAttr contained "\<\(row\|column\|wrap\)\(-reverse\)\=\>" syn keyword cssFlexibleBoxAttr contained nowrap stretch baseline center syn match cssFlexibleBoxAttr contained "\" -syn match cssFlexibleBoxAttr contained "\" +syn match cssFlexibleBoxAttr contained "\" " CSS Fonts Module Level 3 " http://www.w3.org/TR/css-fonts-3/ -syn match cssFontProp contained "\" +syn match cssFontProp contained "\" " font attributes syn keyword cssFontAttr contained icon menu caption @@ -232,9 +240,7 @@ syn keyword cssFontAttr contained larger smaller syn match cssFontAttr contained "\<\(x\{1,2\}-\)\=\(large\|small\)\>" syn match cssFontAttr contained "\" " font-family attributes -syn match cssFontAttr contained "\<\(sans-\)\=serif\>" -syn keyword cssFontAttr contained Antiqua Arial Black Book Charcoal Comic Courier Dingbats Gadget Geneva Georgia Grande Helvetica Impact Linotype Lucida MS Monaco Neue New Palatino Roboto Roman Symbol Tahoma Times Trebuchet Verdana Webdings Wingdings York Zapf -syn keyword cssFontAttr contained cursive fantasy monospace +syn keyword cssFontAttr contained sans-serif serif cursive fantasy monospace " font-feature-settings attributes syn keyword cssFontAttr contained on off " font-stretch attributes @@ -245,6 +251,8 @@ syn keyword cssFontAttr contained italic oblique syn keyword cssFontAttr contained weight style " font-weight attributes syn keyword cssFontAttr contained bold bolder lighter +" font-display attributes +syn keyword cssFontAttr contained auto block swap fallback optional " TODO: font-variant-* attributes "------------------------------------------------ @@ -279,8 +287,9 @@ syn match cssGeneratedContentAttr contained "\<\(no-\)\=\(open\|close\)-quote\>" " https://www.w3.org/TR/css-grid-1/ syn match cssGridProp contained "\" syn match cssGridProp contained "\" -syn match cssGridProp contained "\" +syn match cssGridProp contained "\<\(grid-\)\=\(column\|row\)\(-\(start\|end\|gap\)\)\=\>" syn match cssGridProp contained "\" +syn match cssGridProp contained "\" syn match cssGridProp contained "\" syn match cssHyerlinkProp contained "\" @@ -292,6 +301,10 @@ syn match cssListAttr contained "\<\(decimal\(-leading-zero\)\=\|cjk-ideographic syn keyword cssListAttr contained disc circle square hebrew armenian georgian syn keyword cssListAttr contained inside outside +" object-fit https://www.w3.org/TR/css-images-3/#the-object-fit +syn match cssObjectProp contained "\" +syn keyword cssObjectAttr contained fill contain cover scale-down + syn keyword cssPositioningProp contained bottom clear clip display float left syn keyword cssPositioningProp contained position right top visibility syn match cssPositioningProp contained "\" @@ -301,7 +314,7 @@ syn keyword cssPositioningAttr contained left right both syn match cssPositioningAttr contained "\" syn match cssPositioningAttr contained "\" syn match cssPositioningAttr contained "\" -syn keyword cssPositioningAttr contained static relative absolute fixed subgrid +syn keyword cssPositioningAttr contained static relative absolute fixed subgrid sticky syn keyword cssPrintAttr contained landscape portrait crop cross always @@ -388,9 +401,9 @@ syn match cssUIAttr contained '\' syn match cssIEUIAttr contained '\' " Webkit/iOS specific properties -syn match cssUIProp contained '\' +syn match cssUIProp contained '\<\(tap-highlight-color\|user-select\|touch-callout\)\>' " IE specific properties -syn match cssIEUIProp contained '\' +syn match cssIEUIProp contained '\<\(interpolation-mode\|zoom\|filter\)\>' " Webkit/Firebox specific properties/attributes syn keyword cssUIProp contained appearance @@ -416,11 +429,15 @@ syn keyword cssAuralAttr contained male female child code digits continuous syn match cssMobileTextProp contained "\" syn keyword cssMediaProp contained width height orientation scan -syn match cssMediaProp contained /\(\(max\|min\)-\)\=\(\(device\)-\)\=aspect-ratio/ -syn match cssMediaProp contained /\(\(max\|min\)-\)\=device-pixel-ratio/ -syn match cssMediaProp contained /\(\(max\|min\)-\)\=device-\(height\|width\)/ -syn match cssMediaProp contained /\(\(max\|min\)-\)\=\(height\|width\|resolution\|monochrome\|color\(-index\)\=\)/ +syn keyword cssMediaProp contained any-hover any-pointer color-gamut grid hover +syn keyword cssMediaProp contained overflow-block overflow-inline pointer update +syn match cssMediaProp contained /\<\(\(max\|min\)-\)\=\(\(device\)-\)\=aspect-ratio\>/ +syn match cssMediaProp contained /\<\(\(max\|min\)-\)\=device-pixel-ratio\>/ +syn match cssMediaProp contained /\<\(\(max\|min\)-\)\=device-\(height\|width\)\>/ +syn match cssMediaProp contained /\<\(\(max\|min\)-\)\=\(height\|width\|resolution\|monochrome\|color\(-index\)\=\)\>/ syn keyword cssMediaAttr contained portrait landscape progressive interlace +syn keyword cssMediaAttr contained coarse fast fine hover infinite p3 paged +syn keyword cssMediaAttr contained rec2020 scroll slow srgb syn match cssKeyFrameProp contained /\(\d\+\(\.\d\+\)\?%\|\(\\)\)/ nextgroup=cssDefinition syn match cssPageMarginProp /@\(\(top\|left\|right\|bottom\)-\(left\|center\|right\|middle\|bottom\)\)\(-corner\)\=/ contained nextgroup=cssDefinition syn keyword cssPageProp contained content size @@ -438,17 +455,17 @@ syn match cssBraceError "}" syn match cssAttrComma "," " Pseudo class -" http://www.w3.org/TR/css3-selectors/ +" https://www.w3.org/TR/selectors-4/ syn match cssPseudoClass ":[A-Za-z0-9_-]*" contains=cssNoise,cssPseudoClassId,cssUnicodeEscape,cssVendor,cssPseudoClassFn syn keyword cssPseudoClassId contained link visited active hover before after left right -syn keyword cssPseudoClassId contained root empty target enable disabled checked invalid +syn keyword cssPseudoClassId contained root empty target enabled disabled checked invalid syn match cssPseudoClassId contained "\" syn match cssPseudoClassId contained "\<\(first\|last\|only\)-\(of-type\|child\)\>" -syn region cssPseudoClassFn contained matchgroup=cssFunctionName start="\<\(not\|lang\|\(nth\|nth-last\)-\(of-type\|child\)\)(" end=")" contains=cssStringQ,cssStringQQ +syn match cssPseudoClassId contained "\" +syn region cssPseudoClassFn contained matchgroup=cssFunctionName start="\<\(not\|is\|lang\|\(nth\|nth-last\)-\(of-type\|child\)\)(" end=")" contains=cssStringQ,cssStringQQ,cssTagName,cssAttributeSelector,cssClassName,cssIdentifier " ------------------------------------ " Vendor specific properties syn match cssPseudoClassId contained "\" -syn match cssPseudoClassId contained "\" syn match cssPseudoClassId contained "\<\(input-\)\=placeholder\>" " Misc highlight groups @@ -546,6 +563,7 @@ hi def link cssMarqueeProp cssProp hi def link cssMultiColumnProp cssProp hi def link cssPagedMediaProp cssProp hi def link cssPositioningProp cssProp +hi def link cssObjectProp cssProp hi def link cssPrintProp cssProp hi def link cssRubyProp cssProp hi def link cssSpeechProp cssProp @@ -579,6 +597,7 @@ hi def link cssMultiColumnAttr cssAttr hi def link cssPaddingAttr cssAttr hi def link cssPagedMediaAttr cssAttr hi def link cssPositioningAttr cssAttr +hi def link cssObjectAttr cssAttr hi def link cssGradientAttr cssAttr hi def link cssPrintAttr cssAttr hi def link cssRubyAttr cssAttr @@ -647,5 +666,5 @@ endif let &cpo = s:cpo_save unlet s:cpo_save -" vim: ts=8 +" vim: ts=8 diff --git a/test.css b/test.css index dcba24a..3eeb5d4 100644 --- a/test.css +++ b/test.css @@ -293,3 +293,53 @@ and (max-device-width:1024px) padding: var(--pad, 10px 15px 20px); color: var(--foo, #7F583F); } + +#issue6 { + font-family: Roboto, Helvetica, test-serif, testing-sans-serif; + font-family: monospace, cursive, fantasy, serif, sans-serif +} + +#grid { + gap: 20px; + row-gap: 20px; + column-gap: 20px; + + /** + * legacy gap properties -- should still highlight + * https://mapdashdev.wpengine.com/data-explorer/ + */ + grid-row-gap: 20px; + grid-column-gap: 20px; + grid-gap: 20px; +} + +#flow-relative { + border-inline: 20px solid blue; + border-inline-end: 40px solid blue; + border-inline-end-width: 0px; + border-start-start-radius: 20px; + border-end-end-radius: 20px; + border-start-end-radius: 20px; + border-end-start-radius: 20px; + + border-end: 20px; /* property shouldn't be highlighted */ + border-start-radius: 20px; /* property shouldn't be highlighted */ + + margin-block-end: 0px; + padding-block-end: 0px; + margin-inline-end: 0px; + padding-inline-end: 0px; + margin-block-start: 0px; + padding-block-start: 0px; + margin-inline-start: 0px; + padding-inline-start: 0px; + + margin-end: 0px; /* property shouldn't be highlighted */ + padding-end: 0px; /* property shouldn't be highlighted */ +} + +/* Vim issue #15968 */ +#issue-vim-15968 { + background-position-x: 20px; + background-position-y: 20px; +}