diff --git a/autoload/csscomplete.vim b/autoload/csscomplete.vim index bef53f3..ec4cf8e 100644 --- a/autoload/csscomplete.vim +++ b/autoload/csscomplete.vim @@ -9,6 +9,8 @@ let s:values = split("all additive-symbols 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 block-size border border-block-end border-block-end-color border-block-end-style border-block-end-width border-block-start border-block-start-color border-block-start-style border-block-start-width 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-inline-end border-inline-end-color border-inline-end-style border-inline-end-width border-inline-start border-inline-start-color border-inline-start-style border-inline-start-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 columns column-count column-fill column-gap column-rule column-rule-color column-rule-style column-rule-width column-span column-width content counter-increment counter-reset cue cue-before cue-after cursor direction display empty-cells fallback filter flex flex-basis flex-direction flex-flow flex-grow flex-shrink flex-wrap float font font-family font-feature-settings font-kerning font-language-override font-size font-size-adjust font-stretch font-style font-synthesis font-variant font-variant-alternates font-variant-caps font-variant-east-asian font-variant-ligatures font-variant-numeric font-variant-position font-weight grid grid-area grid-auto-columns grid-auto-flow grid-auto-position grid-auto-rows grid-column grid-column-start grid-column-end grid-row grid-row-start grid-row-end grid-template grid-template-areas grid-template-rows grid-template-columns height hyphens image-rendering image-resolution image-orientation ime-mode inline-size isolation justify-content left letter-spacing line-break line-height list-style list-style-image list-style-position list-style-type margin margin-block-end margin-block-start margin-bottom margin-inline-end margin-inline-start margin-left margin-right margin-top marks mask mask-type max-block-size max-height max-inline-size max-width max-zoom min-block-size min-height min-inline-size min-width min-zoom mix-blend-mode negative object-fit object-position offset-block-end offset-block-start offset-inline-end offset-inline-start opacity optional order orientation orphans outline outline-color outline-offset outline-style outline-width overflow overflow-anchor overflow-wrap overflow-x overflow-y overscroll-behavior overscroll-behavior-x overscroll-behavior-y pad padding padding-block-end padding-block-start padding-bottom padding-inline-end padding-inline-start padding-left padding-right padding-top page-break-after page-break-before page-break-inside pause-before pause-after pause perspective perspective-origin pointer-events position prefix quotes range resize rest rest-before rest-after right ruby-align ruby-merge ruby-position scroll-behavior scroll-snap-coordinate scroll-snap-destination scroll-snap-points-x scroll-snap-points-y scroll-snap-type scroll-snap-type-x scroll-snap-type-y shape-image-threshold shape-margin shape-outside speak speak-as suffix swap symbols system table-layout tab-size text-align text-align-last text-combine-upright text-decoration text-decoration-color text-decoration-line text-decoration-skip text-decoration-skip-ink text-decoration-style text-emphasis text-emphasis-color text-emphasis-position text-emphasis-style text-indent text-orientation text-overflow text-rendering text-shadow text-transform text-underline-position top touch-action transform transform-box transform-origin transform-style transition transition-delay transition-duration transition-property transition-timing-function unicode-bidi unicode-range user-zoom vertical-align visibility voice-balance voice-duration voice-family voice-pitch voice-rate voice-range voice-stress voice-volume white-space widows width will-change word-break word-spacing word-wrap writing-mode z-index zoom") let s:named_colors = split("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") +let s:css_data = eval(join(readfile(expand(":p:h") . '/../dict/css-data.json'))) +let s:css_props = get(s:css_data, "properties") function! csscomplete#CompleteCSS(findstart, base) @@ -97,6 +99,19 @@ function! csscomplete#CompleteCSS(findstart, base) let entered_property = matchstr(line, '.\{-}\zs[a-zA-Z-]*$') + for m in s:css_props + let s:prop_name = get(m, 'name') + let postfix = '' + if strridx(after, ':') < 0 + let postfix = ': ' + endif + if s:prop_name =~? '^'.entered_property + call add(res, {'word': s:prop_name . postfix, 'info': get(m, 'description')}) + elseif s:prop_name =~? entered_property + call add(res2, {'word': s:prop_name . postfix, 'info': get(m, 'description')}) + endif + endfor + for m in s:values let postfix = '' if strridx(after, ':') < 0 diff --git a/dict/css-data.json b/dict/css-data.json new file mode 100644 index 0000000..5f30249 --- /dev/null +++ b/dict/css-data.json @@ -0,0 +1,21120 @@ +{ + "version": 1.1, + "properties": [ + { + "name": "additive-symbols", + "browsers": [ + "FF33" + ], + "syntax": "[ && ]#", + "description": "@counter-style descriptor. Specifies the symbols used by the marker-construction algorithm specified by the system descriptor. Needs to be specified if the counter system is 'additive'.", + "restrictions": [ + "integer", + "string", + "image", + "identifier" + ] + }, + { + "name": "align-content", + "values": [ + { + "name": "center", + "description": "Lines are packed toward the center of the flex container." + }, + { + "name": "flex-end", + "description": "Lines are packed toward the end of the flex container." + }, + { + "name": "flex-start", + "description": "Lines are packed toward the start of the flex container." + }, + { + "name": "space-around", + "description": "Lines are evenly distributed in the flex container, with half-size spaces on either end." + }, + { + "name": "space-between", + "description": "Lines are evenly distributed in the flex container." + }, + { + "name": "stretch", + "description": "Lines stretch to take up the remaining space." + } + ], + "syntax": "normal | | | ? ", + "relevance": 18, + "description": "Aligns a flex container’s lines within the flex container when there is extra space in the cross-axis, similar to how 'justify-content' aligns individual items within the main-axis.", + "restrictions": [ + "enum" + ] + }, + { + "name": "align-items", + "values": [ + { + "name": "baseline", + "description": "If the flex item’s inline axis is the same as the cross axis, this value is identical to 'flex-start'. Otherwise, it participates in baseline alignment." + }, + { + "name": "center", + "description": "The flex item’s margin box is centered in the cross axis within the line." + }, + { + "name": "flex-end", + "description": "The cross-end margin edge of the flex item is placed flush with the cross-end edge of the line." + }, + { + "name": "flex-start", + "description": "The cross-start margin edge of the flex item is placed flush with the cross-start edge of the line." + }, + { + "name": "stretch", + "description": "If the cross size property of the flex item computes to auto, and neither of the cross-axis margins are auto, the flex item is stretched." + } + ], + "syntax": "normal | stretch | | [ ? ]", + "relevance": 61, + "description": "Aligns flex items along the cross axis of the current line of the flex container.", + "restrictions": [ + "enum" + ] + }, + { + "name": "justify-items", + "values": [ + { + "name": "auto" + }, + { + "name": "normal" + }, + { + "name": "end" + }, + { + "name": "start" + }, + { + "name": "flex-end", + "description": "\"Flex items are packed toward the end of the line.\"" + }, + { + "name": "flex-start", + "description": "\"Flex items are packed toward the start of the line.\"" + }, + { + "name": "self-end", + "description": "The item is packed flush to the edge of the alignment container of the end side of the item, in the appropriate axis." + }, + { + "name": "self-start", + "description": "The item is packed flush to the edge of the alignment container of the start side of the item, in the appropriate axis.." + }, + { + "name": "center", + "description": "The items are packed flush to each other toward the center of the of the alignment container." + }, + { + "name": "left" + }, + { + "name": "right" + }, + { + "name": "baseline" + }, + { + "name": "first baseline" + }, + { + "name": "last baseline" + }, + { + "name": "stretch", + "description": "If the cross size property of the flex item computes to auto, and neither of the cross-axis margins are auto, the flex item is stretched." + }, + { + "name": "save" + }, + { + "name": "unsave" + }, + { + "name": "legacy" + } + ], + "syntax": "normal | stretch | | ? [ | left | right ] | legacy | legacy && [ left | right | center ]", + "relevance": 1, + "description": "Defines the default justify-self for all items of the box, giving them the default way of justifying each box along the appropriate axis", + "restrictions": [ + "enum" + ] + }, + { + "name": "justify-self", + "browsers": [ + "E16", + "FF45", + "S10.1", + "C57", + "O44" + ], + "values": [ + { + "name": "auto" + }, + { + "name": "normal" + }, + { + "name": "end" + }, + { + "name": "start" + }, + { + "name": "flex-end", + "description": "\"Flex items are packed toward the end of the line.\"" + }, + { + "name": "flex-start", + "description": "\"Flex items are packed toward the start of the line.\"" + }, + { + "name": "self-end", + "description": "The item is packed flush to the edge of the alignment container of the end side of the item, in the appropriate axis." + }, + { + "name": "self-start", + "description": "The item is packed flush to the edge of the alignment container of the start side of the item, in the appropriate axis.." + }, + { + "name": "center", + "description": "The items are packed flush to each other toward the center of the of the alignment container." + }, + { + "name": "left" + }, + { + "name": "right" + }, + { + "name": "baseline" + }, + { + "name": "first baseline" + }, + { + "name": "last baseline" + }, + { + "name": "stretch", + "description": "If the cross size property of the flex item computes to auto, and neither of the cross-axis margins are auto, the flex item is stretched." + }, + { + "name": "save" + }, + { + "name": "unsave" + } + ], + "syntax": "auto | normal | stretch | | ? [ | left | right ]", + "relevance": 3, + "description": "Defines the way of justifying a box inside its container along the appropriate axis.", + "restrictions": [ + "enum" + ] + }, + { + "name": "align-self", + "values": [ + { + "name": "auto", + "description": "Computes to the value of 'align-items' on the element’s parent, or 'stretch' if the element has no parent. On absolutely positioned elements, it computes to itself." + }, + { + "name": "baseline", + "description": "If the flex item’s inline axis is the same as the cross axis, this value is identical to 'flex-start'. Otherwise, it participates in baseline alignment." + }, + { + "name": "center", + "description": "The flex item’s margin box is centered in the cross axis within the line." + }, + { + "name": "flex-end", + "description": "The cross-end margin edge of the flex item is placed flush with the cross-end edge of the line." + }, + { + "name": "flex-start", + "description": "The cross-start margin edge of the flex item is placed flush with the cross-start edge of the line." + }, + { + "name": "stretch", + "description": "If the cross size property of the flex item computes to auto, and neither of the cross-axis margins are auto, the flex item is stretched." + } + ], + "syntax": "auto | normal | stretch | | ? ", + "relevance": 37, + "description": "Allows the default alignment along the cross axis to be overridden for individual flex items.", + "restrictions": [ + "enum" + ] + }, + { + "name": "all", + "browsers": [ + "E79", + "FF27", + "S9.1", + "C37", + "O24" + ], + "values": [], + "syntax": "initial | inherit | unset | revert", + "relevance": 2, + "references": [ + { + "name": "MDN Reference", + "url": "https://developer.mozilla.org/docs/Web/CSS/all" + } + ], + "description": "Shorthand that resets all properties except 'direction' and 'unicode-bidi'.", + "restrictions": [ + "enum" + ] + }, + { + "name": "alt", + "browsers": [ + "S9" + ], + "values": [], + "references": [ + { + "name": "MDN Reference", + "url": "https://developer.mozilla.org/docs/Web/CSS/alt" + } + ], + "description": "Provides alternative text for assistive technology to replace the generated content of a ::before or ::after element.", + "restrictions": [ + "string", + "enum" + ] + }, + { + "name": "animation", + "values": [ + { + "name": "alternate", + "description": "The animation cycle iterations that are odd counts are played in the normal direction, and the animation cycle iterations that are even counts are played in a reverse direction." + }, + { + "name": "alternate-reverse", + "description": "The animation cycle iterations that are odd counts are played in the reverse direction, and the animation cycle iterations that are even counts are played in a normal direction." + }, + { + "name": "backwards", + "description": "The beginning property value (as defined in the first @keyframes at-rule) is applied before the animation is displayed, during the period defined by 'animation-delay'." + }, + { + "name": "both", + "description": "Both forwards and backwards fill modes are applied." + }, + { + "name": "forwards", + "description": "The final property value (as defined in the last @keyframes at-rule) is maintained after the animation completes." + }, + { + "name": "infinite", + "description": "Causes the animation to repeat forever." + }, + { + "name": "none", + "description": "No animation is performed" + }, + { + "name": "normal", + "description": "Normal playback." + }, + { + "name": "reverse", + "description": "All iterations of the animation are played in the reverse direction from the way they were specified." + } + ], + "syntax": "#", + "relevance": 57, + "references": [ + { + "name": "MDN Reference", + "url": "https://developer.mozilla.org/docs/Web/CSS/animation" + } + ], + "description": "Shorthand property combines six of the animation properties into a single property.", + "restrictions": [ + "time", + "timing-function", + "enum", + "identifier", + "number" + ] + }, + { + "name": "animation-delay", + "syntax": "