121 lines
3.7 KiB
JSON
121 lines
3.7 KiB
JSON
{
|
|
"Predicted geometry": {
|
|
"prefix": "predict",
|
|
"body": ["@predict max-height max-width;"],
|
|
"description": "Transition prerendered geometry"
|
|
},
|
|
"Predicted transitions": {
|
|
"prefix": "predict-full",
|
|
"body": ["@predict left top width height opacity transform;"],
|
|
"description": "Full prediction transition list (pill/ribbon style)"
|
|
},
|
|
"Measure prediction target": {
|
|
"prefix": "measure",
|
|
"body": ["@measure;"],
|
|
"description": "Mark this selector for prerender geometry prefill (inline prediction source)"
|
|
},
|
|
"Measure anchors": {
|
|
"prefix": "measure-anchor",
|
|
"body": ["@measure @${1:anchor}, ${0:.selector};"],
|
|
"description": "Measure elements by relation anchor or class"
|
|
},
|
|
"Responsive rule": {
|
|
"prefix": "responsive",
|
|
"body": ["@responsive ${1:md} {", " ${2}", "}"],
|
|
"description": "Add a responsive STCSS rule"
|
|
},
|
|
"Media rule": {
|
|
"prefix": "media",
|
|
"body": ["@media ${1:(max-width: 48rem)} {", " ${2}", "}"],
|
|
"description": "Add a media query"
|
|
},
|
|
"Each loop": {
|
|
"prefix": "each",
|
|
"body": ["@each $${1:item} in ${2:items} {", " ${0}", "}"],
|
|
"description": "Repeat a block over a value list"
|
|
},
|
|
"For loop": {
|
|
"prefix": "for",
|
|
"body": ["@for $${1:i} from ${2:1} through ${3:5} {", " ${0}", "}"],
|
|
"description": "Count a range"
|
|
},
|
|
"Mixin declaration": {
|
|
"prefix": "mixin",
|
|
"body": ["@mixin ${1:name}($${2:arg}) {", " ${0}", "}"],
|
|
"description": "Declare an STCSS mixin"
|
|
},
|
|
"Include mixin": {
|
|
"prefix": "include",
|
|
"body": ["@include ${1:name}(${2:arg});"],
|
|
"description": "Use an STCSS mixin"
|
|
},
|
|
"Interpolation": {
|
|
"prefix": "interp",
|
|
"body": ["#{$${1:scale} * 2}rem"],
|
|
"description": "Compile-time value interpolation"
|
|
},
|
|
"d-string": {
|
|
"prefix": "d",
|
|
"body": ["d\"${1:calc(#{} )}\""],
|
|
"description": "String with brace expressions evaluated at compile time"
|
|
},
|
|
"$refer geometry": {
|
|
"prefix": "refer",
|
|
"body": ["$refer[${1:left}](@${2:anchor})"],
|
|
"description": "Read pre-computed anchor geometry (left/top/width/height)"
|
|
},
|
|
"$refer interpolated location": {
|
|
"prefix": "refer-between",
|
|
"body": [
|
|
"calc($refer[${1:left}](@${2:anchor}) - $refer[${3:left}](@${4:relative}))"
|
|
],
|
|
"description": "Compute location between two anchors"
|
|
},
|
|
"$relate metrics": {
|
|
"prefix": "relate",
|
|
"body": ["$relate(${1:@anchor})"],
|
|
"description": "Legacy relation value of an anchor"
|
|
},
|
|
"Computed mirror": {
|
|
"prefix": "computed",
|
|
"body": ["@${1:anchor}.computed.${2:backgroundColor}"],
|
|
"description": "Mirror a live computed style of an anchor"
|
|
},
|
|
"Relation state selector": {
|
|
"prefix": "with-state",
|
|
"body": [":with(@${1:anchor}:${2|active,clicked,focus|})"],
|
|
"description": "Anchor state selection (:has under the hood)"
|
|
},
|
|
"When selector": {
|
|
"prefix": "when-state",
|
|
"body": [":when(${1:root} @${2:anchor}:${3|active,clicked,focus|})"],
|
|
"description": "Scoped anchor state selection"
|
|
},
|
|
"Concentric radius": {
|
|
"prefix": "concentric",
|
|
"body": ["border-radius: concentric ${1:0.75rem};"],
|
|
"description": "Concentric nested corner radii"
|
|
},
|
|
"Freeform gradient": {
|
|
"prefix": "freeform-gradient",
|
|
"body": [
|
|
"background-image: freeform-gradient(${1:#7c3aed} ${2:10%} ${3:50%}, ${4:#f00} ${5:70%} ${6:40%});"
|
|
],
|
|
"description": "Spawn layered freeform radial gradients"
|
|
},
|
|
"Concentric block": {
|
|
"prefix": "concentric-block",
|
|
"body": ["@concentric ${1:1rem} {", " ${0}", "}"],
|
|
"description": "Concentric radius at-rule"
|
|
},
|
|
"View transition": {
|
|
"prefix": "view-transition",
|
|
"body": ["@view-transition ${1:name};"],
|
|
"description": "Emit a css view-transition-name"
|
|
},
|
|
"Compile-time values": {
|
|
"prefix": "javascript",
|
|
"body": ["javascript!", " const ${1:space} = ${2:1};", "end"],
|
|
"description": "Add compile-time values"
|
|
}
|
|
}
|