Add some CSS snippets

package/scripts/buildCSSData.mjs

@@ -175,42 +175,109 @@ const colors = [
 ]
 
 const cssValues = new Set(colors)
-
 const excludedProperties = new Set(["font-family", "font-feature-settings", "unicode-range"])
 
-cssValues.add("var")
+const functions = new Set([
+	"calc",
+	"min",
+	"max",
+	"clamp",
+	"round",
+	"mod",
+	"rem",
+	"sin",
+	"cos",
+	"asin",
+	"acos",
+	"atan",
+	"atan2",
+	"pow",
+	"sqrt",
+	"hypot",
+	"log",
+	"exp",
+	"abs",
+	"sign",
+	"rgb",
+	"hsl",
+	"hwb",
+	"lch",
+	"oklch",
+	"lab",
+	"oklab",
+	"color",
+	"color-mix",
+	"linear-gradient",
+	"radial-gradient",
+	"conic-gradient",
+	"repeating-linear-gradient",
+	"repeating-radial-gradient",
+	"repeating-conic-gradient",
+	"image-set",
+	"cross-fade",
+	"paint",
+	"counters",
+	"ellipse",
+	"rect",
+	"xywh",
+	"polygon",
+	"shape",
+	"env",
+	"var",
+	"cubic-bezier",
+	"steps",
+	"view",
+	"anchor",
+	"anchor-size",
+])
+
 cssValues.add("unset")
 cssValues.add("initial")
 cssValues.add("revert")
 cssValues.add("revert-layer")
 cssValues.add("pre")
 cssValues.add("pre-wrap")
 cssValues.add("white-space")
-
-
+cssValues.add("linear")
+cssValues.add("ease")
+cssValues.add("ease-in")
+cssValues.add("ease-in-out")
+cssValues.add("ease-out")
 
 data.properties.forEach(({ name, values }) => {
 	if (excludedProperties.has(name) || name[0] == "-") return
-	values?.forEach(({ name }) => {
-		if (name[0] != "-") cssValues.add(name.replace(/\([^)]*\)/g, ""))
+	values?.forEach(({ name: value }) => {
+		if (value[0] == "-") return
+		const bracketIndex = value.indexOf("(")
+		const isFunction = bracketIndex >= 0
+		const name = isFunction ? value.slice(0, bracketIndex) : value
+
+		if (isFunction && !cssValues.has(name)) functions.add(name)
+		if (!isFunction && functions.has(name)) functions.delete(name)
+		cssValues.add(name)
 	})
 })
 
+functions.forEach(f => cssValues.add(f))
+
 const lines = [
 	"// generated from @vscode/web-custom-data package",
 	"",
 	'import { Completion } from "../types.js"',
 	"",
 	"const toCompletions = (prefix: string, icon: string, values: string): Completion[] => {",
-	'\treturn values.split(",").map(val => ({ label: prefix + val, icon }))',
+	'\treturn values.split(",").map(val => val.includes("(") ?',
+	'\t\t{ label: prefix + val.slice(0, -2), icon: "function", insert: prefix + val, tabStops: [val.length + prefix.length - 1] } :',
+	"\t\t{ label: prefix + val, icon }",
+	"\t)",
 	"}",
 	"",
 ]
 
-let line = 'const cssValues = /* @__PURE__ */ toCompletions("", "keyword", "'
+let line = 'const cssValues = /* @__PURE__ */ toCompletions("", "enum", "'
 
 cssValues.forEach(val => {
-	line += val + ","
+	line += val + (functions.has(val) ? "()" : "") + ","
 })
 
 lines.push(line.slice(0, -1) + '")', "")
@@ -224,28 +291,54 @@ data.atDirectives.forEach(({ name }) => {
 lines.push(line.slice(0, -1) + '")', "")
 
 const pseudos = new Set()
+functions.clear()
+
+data.pseudoClasses.forEach(({ name: value }) => {
+	value = value.slice(1)
+	if (value[0] == "-") return
+	const bracketIndex = value.indexOf("(")
+	const isFunction = bracketIndex >= 0
+	const name = isFunction ? value.slice(0, bracketIndex) : value
 
-data.pseudoClasses.forEach(({ name }) => {
-	if (name[1] != "-") pseudos.add(name.slice(-2) == "()" ? name.slice(1, -2) : name.slice(1))
+	if (isFunction && !pseudos.has(name)) functions.add(name)
+	if (!isFunction && functions.has(name)) functions.delete(name)
+	pseudos.add(name)
 })
 
+functions.add("has")
+functions.add("is")
+functions.add("where")
+functions.add("dir")
+
 line = 'const pseudoClasses = /* @__PURE__ */ toCompletions(":", "function", "'
 pseudos.forEach(pseudo => {
-	line += pseudo + ","
+	line += pseudo + (functions.has(pseudo) ? "()" : "") + ","
 })
 
 lines.push(line.slice(0, -1) + '")', "")
 
 pseudos.clear()
+functions.clear()
 
-data.pseudoElements.forEach(({ name }) => {
-	if (name[2] != "-") pseudos.add(name.slice(-2) == "()" ? name.slice(2, -2) : name.slice(2))
+data.pseudoElements.forEach(({ name: value }) => {
+	value = value.slice(2)
+	if (value[0] == "-") return
+	const bracketIndex = value.indexOf("(")
+	const isFunction = bracketIndex >= 0
+	const name = isFunction ? value.slice(0, bracketIndex) : value
+
+	if (isFunction && !pseudos.has(name)) functions.add(name)
+	if (!isFunction && functions.has(name)) functions.delete(name)
+	pseudos.add(name)
 })
 
+functions.add("part")
+functions.add("slotted")
+
 line = 'const pseudoElements = /* @__PURE__ */ toCompletions("::", "function", "'
 
 pseudos.forEach(pseudo => {
-	line += pseudo + ","
+	line += pseudo + (functions.has(pseudo) ? "()" : "") + ","
 })
 
 lines.push(line.slice(0, -1) + '")', "")

package/src/extensions/autocomplete/css/data.ts

@@ -3,15 +3,18 @@
 import { Completion } from "../types.js"
 
 const toCompletions = (prefix: string, icon: string, values: string): Completion[] => {
-	return values.split(",").map(val => ({ label: prefix + val, icon }))
+	return values.split(",").map(val => val.includes("(") ?
+		{ label: prefix + val.slice(0, -2), icon: "function", insert: prefix + val, tabStops: [val.length + prefix.length - 1] } :
+		{ label: prefix + val, icon }
+	)
 }
 
-const cssValues = /* @__PURE__ */ toCompletions("", "keyword", "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,transparent,turquoise,violet,wheat,white,whitesmoke,yellow,yellowgreen,var,unset,initial,revert,revert-layer,pre,pre-wrap,white-space,center,flex-end,flex-start,space-around,space-between,stretch,start,end,normal,baseline,first baseline,last baseline,space-evenly,safe,unsafe,self-start,self-end,auto,left,right,legacy,save,unsave,alternate,alternate-reverse,backwards,both,forwards,infinite,none,reverse,paused,running,hidden,visible,fixed,local,scroll,multiply,screen,overlay,darken,lighten,color-dodge,color-burn,hard-light,soft-light,difference,exclusion,hue,saturation,color,luminosity,bottom,top,contain,cover,collapse,separate,fill,repeat,round,space,url,clone,slice,inset,border-box,content-box,always,avoid,avoid-column,avoid-page,column,page,rect,evenodd,nonzero,linearRGB,sRGB,balance,all,strict,content,size,layout,style,paint,attr,counter,icon,alias,all-scroll,cell,col-resize,context-menu,copy,crosshair,default,e-resize,ew-resize,grab,grabbing,help,move,ne-resize,nesw-resize,no-drop,not-allowed,n-resize,ns-resize,nw-resize,nwse-resize,pointer,progress,row-resize,se-resize,s-resize,sw-resize,text,vertical-text,wait,w-resize,zoom-in,zoom-out,ltr,rtl,block,contents,flex,flexbox,flow-root,grid,inline,inline-block,inline-flex,inline-flexbox,inline-table,list-item,ruby,ruby-base,ruby-base-container,ruby-text,ruby-text-container,run-in,table,table-caption,table-cell,table-column,table-column-group,table-footer-group,table-header-group,table-row,table-row-group,hide,show,accumulate,new,blur,brightness,contrast,drop-shadow,grayscale,hue-rotate,invert,opacity,saturate,sepia,column-reverse,row,row-reverse,nowrap,wrap,wrap-reverse,inline-end,inline-start,100,200,300,400,500,600,700,800,900,bold,bolder,caption,italic,large,larger,lighter,medium,menu,message-box,oblique,small,small-caps,small-caption,smaller,status-bar,x-large,x-small,xx-large,xx-small,condensed,expanded,extra-condensed,extra-expanded,narrower,semi-condensed,semi-expanded,ultra-condensed,ultra-expanded,wider,weight,annotation,character-variant,historical-forms,ornaments,styleset,stylistic,swash,all-petite-caps,all-small-caps,petite-caps,titling-caps,unicase,full-width,jis04,jis78,jis83,jis90,proportional-width,simplified,traditional,additional-ligatures,common-ligatures,contextual,discretionary-ligatures,historical-ligatures,no-additional-ligatures,no-common-ligatures,no-contextual,no-discretionary-ligatures,no-historical-ligatures,diagonal-fractions,lining-nums,oldstyle-nums,ordinal,proportional-nums,slashed-zero,stacked-fractions,tabular-nums,sub,super,span,min-content,max-content,minmax,dense,subgrid,fit-content,manual,flip,from-image,crisp-edges,optimizeQuality,optimizeSpeed,pixelated,active,disabled,inactive,isolate,loose,anywhere,armenian,circle,decimal,decimal-leading-zero,disc,georgian,inside,lower-alpha,lower-greek,lower-latin,lower-roman,outside,square,symbols,upper-alpha,upper-latin,upper-roman,alpha,luminance,path,current,root,scale-down,break-word,markers,stroke,painted,visibleFill,visiblePainted,visibleStroke,absolute,relative,static,sticky,horizontal,vertical,distribute-letter,distribute-space,line-edge,after,before,smooth,mandatory,proximity,margin-box,crispEdges,geometricPrecision,format,butt,bevel,miter,additive,alphabetic,cyclic,extends,numeric,symbolic,justify,middle,dashed,dotted,double,line-through,overline,solid,underline,wavy,distribute,distribute-all-lines,inter-cluster,inter-ideograph,inter-word,kashida,newspaper,sideways,sideways-right,upright,clip,ellipsis,optimizeLegibility,capitalize,lowercase,uppercase,above,below,cross-slide-x,cross-slide-y,double-tap-zoom,manipulation,pan-x,pan-y,pinch-zoom,matrix,matrix3d,perspective,rotate,rotate3d,rotateX,rotateY,rotateZ,scale,scale3d,scaleX,scaleY,scaleZ,skew,skewX,skewY,translate,translate3d,translateX,translateY,translateZ,flat,preserve-3d,bidi-override,embed,isolate-override,plaintext,text-bottom,text-top,scroll-position,break-all,keep-all,horizontal-tb,sideways-lr,sideways-rl,vertical-lr,vertical-rl,inherit,single,multiple,inline-axis,block-axis,bar,underscore,inline-size,emoji,unicode,in-flow,compact,padding-box,economy,exact,thin,stable,pretty,fill-box,stroke-box,view-box,discard,preserve,preserve-breaks,preserve-spaces,break-spaces,true,false")
+const cssValues = /* @__PURE__ */ toCompletions("", "enum", "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,transparent,turquoise,violet,wheat,white,whitesmoke,yellow,yellowgreen,unset,initial,revert,revert-layer,pre,pre-wrap,white-space,linear,ease,ease-in,ease-in-out,ease-out,center,flex-end,flex-start,space-around,space-between,stretch,start,end,normal,baseline,first baseline,last baseline,space-evenly,safe,unsafe,self-start,self-end,auto,left,right,legacy,save,unsave,alternate,alternate-reverse,backwards,both,forwards,infinite,none,reverse,paused,running,hidden,visible,fixed,local,scroll,multiply,screen,overlay,darken,lighten,color-dodge,color-burn,hard-light,soft-light,difference,exclusion,hue,saturation,color,luminosity,bottom,top,contain,cover,collapse,separate,fill,repeat,round,space,url(),clone,slice,inset,border-box,content-box,always,avoid,avoid-column,avoid-page,column,page,rect(),evenodd,nonzero,linearRGB,sRGB,balance,all,strict,content,size,layout,style,paint,attr(),counter(),icon,alias,all-scroll,cell,col-resize,context-menu,copy,crosshair,default,e-resize,ew-resize,grab,grabbing,help,move,ne-resize,nesw-resize,no-drop,not-allowed,n-resize,ns-resize,nw-resize,nwse-resize,pointer,progress,row-resize,se-resize,s-resize,sw-resize,text,vertical-text,wait,w-resize,zoom-in,zoom-out,ltr,rtl,block,contents,flex,flexbox,flow-root,grid,inline,inline-block,inline-flex,inline-flexbox,inline-table,list-item,ruby,ruby-base,ruby-base-container,ruby-text,ruby-text-container,run-in,table,table-caption,table-cell,table-column,table-column-group,table-footer-group,table-header-group,table-row,table-row-group,hide,show,accumulate,new,blur(),brightness(),contrast(),drop-shadow(),grayscale(),hue-rotate(),invert,opacity(),saturate(),sepia(),column-reverse,row,row-reverse,nowrap,wrap,wrap-reverse,inline-end,inline-start,100,200,300,400,500,600,700,800,900,bold,bolder,caption,italic,large,larger,lighter,medium,menu,message-box,oblique,small,small-caps,small-caption,smaller,status-bar,x-large,x-small,xx-large,xx-small,condensed,expanded,extra-condensed,extra-expanded,narrower,semi-condensed,semi-expanded,ultra-condensed,ultra-expanded,wider,weight,annotation(),character-variant(),historical-forms,ornaments(),styleset(),stylistic(),swash(),all-petite-caps,all-small-caps,petite-caps,titling-caps,unicase,full-width,jis04,jis78,jis83,jis90,proportional-width,simplified,traditional,additional-ligatures,common-ligatures,contextual,discretionary-ligatures,historical-ligatures,no-additional-ligatures,no-common-ligatures,no-contextual,no-discretionary-ligatures,no-historical-ligatures,diagonal-fractions,lining-nums,oldstyle-nums,ordinal,proportional-nums,slashed-zero,stacked-fractions,tabular-nums,sub,super,span,min-content,max-content,minmax(),dense,subgrid,fit-content,manual,flip,from-image,crisp-edges,optimizeQuality,optimizeSpeed,pixelated,active,disabled,inactive,isolate,loose,anywhere,armenian,circle,decimal,decimal-leading-zero,disc,georgian,inside,lower-alpha,lower-greek,lower-latin,lower-roman,outside,square,symbols(),upper-alpha,upper-latin,upper-roman,alpha,luminance,path(),current,root,scale-down,break-word,markers,stroke,painted,visibleFill,visiblePainted,visibleStroke,absolute,relative,static,sticky,horizontal,vertical,distribute-letter,distribute-space,line-edge,after,before,smooth,mandatory,proximity,margin-box,crispEdges,geometricPrecision,format(),butt,bevel,miter,additive,alphabetic,cyclic,extends,numeric,symbolic,justify,middle,dashed,dotted,double,line-through,overline,solid,underline,wavy,distribute,distribute-all-lines,inter-cluster,inter-ideograph,inter-word,kashida,newspaper,sideways,sideways-right,upright,clip,ellipsis,optimizeLegibility,capitalize,lowercase,uppercase,above,below,cross-slide-x,cross-slide-y,double-tap-zoom,manipulation,pan-x,pan-y,pinch-zoom,matrix(),matrix3d(),perspective(),rotate(),rotate3d(),rotateX(),rotateY(),rotateZ(),scale(),scale3d(),scaleX(),scaleY(),scaleZ(),skew(),skewX(),skewY(),translate(),translate3d(),translateX(),translateY(),translateZ(),flat,preserve-3d,bidi-override,embed,isolate-override,plaintext,text-bottom,text-top,scroll-position,break-all,keep-all,horizontal-tb,sideways-lr,sideways-rl,vertical-lr,vertical-rl,inherit,single,multiple,inline-axis,block-axis,bar,underscore,inline-size,emoji,unicode,in-flow,compact,padding-box,economy,exact,thin,stable,pretty,fill-box,stroke-box,view-box,discard,preserve,preserve-breaks,preserve-spaces,break-spaces,true,false,calc(),min(),max(),clamp(),mod(),rem(),sin(),cos(),asin(),acos(),atan(),atan2(),pow(),sqrt(),hypot(),log(),exp(),abs(),sign(),rgb(),hsl(),hwb(),lch(),oklch(),lab(),oklab(),color-mix(),linear-gradient(),radial-gradient(),conic-gradient(),repeating-linear-gradient(),repeating-radial-gradient(),repeating-conic-gradient(),image-set(),cross-fade(),counters(),ellipse(),xywh(),polygon(),shape(),env(),var(),cubic-bezier(),steps(),view(),anchor(),anchor-size()")
 
 const atRules = /* @__PURE__ */ toCompletions("@", "keyword", "charset,counter-style,font-face,font-feature-values,import,keyframes,layer,media,namespace,page,property,supports")
 
-const pseudoClasses = /* @__PURE__ */ toCompletions(":", "method", "active,any-link,checked,corner-present,decrement,default,disabled,double-button,empty,enabled,end,first,first-child,first-of-type,focus,fullscreen,future,horizontal,host,host-context,hover,increment,indeterminate,in-range,invalid,lang,last-child,last-of-type,left,link,matches,no-button,not,nth-child,nth-last-child,nth-last-of-type,nth-of-type,only-child,only-of-type,optional,out-of-range,past,read-only,read-write,required,right,root,scope,single-button,start,target,valid,vertical,visited,window-inactive,current,blank,defined,dir,focus-visible,focus-within,has,is,local-link,paused,placeholder-shown,playing,target-within,user-invalid,user-valid,where,picture-in-picture")
+const pseudoClasses = /* @__PURE__ */ toCompletions(":", "function", "active,any-link,checked,corner-present,decrement,default,disabled,double-button,empty,enabled,end,first,first-child,first-of-type,focus,fullscreen,future,horizontal,host,host-context(),hover,increment,indeterminate,in-range,invalid,lang(),last-child,last-of-type,left,link,matches(),no-button,not(),nth-child(),nth-last-child(),nth-last-of-type(),nth-of-type(),only-child,only-of-type,optional,out-of-range,past,read-only,read-write,required,right,root,scope,single-button,start,target,valid,vertical,visited,window-inactive,current,blank,defined,dir(),focus-visible,focus-within,has(),is(),local-link,paused,placeholder-shown,playing,target-within,user-invalid,user-valid,where(),picture-in-picture")
 
-const pseudoElements = /* @__PURE__ */ toCompletions("::", "method", "after,backdrop,before,content,cue,cue-region,first-letter,first-line,selection,shadow,target-text,grammar-error,marker,part,placeholder,slotted,spelling-error,view-transition,view-transition-group,view-transition-image-pair,view-transition-new,view-transition-old")
+const pseudoElements = /* @__PURE__ */ toCompletions("::", "function", "after,backdrop,before,content,cue,cue-region,first-letter,first-line,selection,shadow,target-text,grammar-error,marker,part(),placeholder,slotted(),spelling-error,view-transition,view-transition-group,view-transition-image-pair,view-transition-new,view-transition-old")
 
 export { cssValues, atRules, pseudoClasses, pseudoElements }

package/src/extensions/autocomplete/css/index.ts

@@ -23,7 +23,12 @@ const getProperties = () => {
 				key = key.replace(/[A-Z]/g, char => "-" + char.toLowerCase())
 				if (!seen.has(key)) {
 					seen.add(key)
-					properties.push({ label: key, icon: "property" })
+					properties.push({
+						label: key,
+						icon: "property",
+						insert: key + ": ;",
+						tabStops: [key.length + 2],
+					})
 				}
 			}
 		}