I use Emmet everyday. You might too, without even knowing — it's built-in to VS Code!
When you type bdrs, Emmet magically transforms that to border-radius. Etcetera.

It saves you a lot of typing.

But that’s not the only thing, I use Emmet for. I like to name my custom properties with component-name + emmet-abbrevaiation, so the property for border-radius for a component called “hero”, will be --hero-bdrs. It keeps the custom property-names short and concise.

Unforunately, Emmet isn't updated regularly — for instance, none of the logical properties that are now available in all browsers, are available in Emmet.

In fact, there are almost 200 properties missing. Luckily, we can easily extend Emmet.

Data

First, we need some data. Grab Emmet's css.json, and MDN's properties.json.
Place these files locally. We'll use a Promise.all to grab the array of files (we might need more later, so this is a safe way to do it):

Promise.all(
  urls.map((url, index) => fetch(url)
    .then(r => r.json())
    .then(json => {
      const key = urls[index].split('.')[0];
      data[key] = json;
    })
    .catch(error => ({ error, url }))
  )
).then(() => {
  // Stuff here ...
})

Now, we have access to the data as data.emmet and data.properties.
The data in data.properties is our "master data", as this is a list of all CSS properties.
For the Emmet-data, we need to filter out all the "extra stuff" that Emmet provides, and only treat the data which matches a CSS property directly. In other words: we need to filter the data and remove old, rendundant stuff like border-bottom-image and overflow-style:

const emmetMap = new Map();
for (const [key, value] of Object.entries(data.emmet)) {
  const [subkey, subvalue] = value.split(':')
  if (data.properties.hasOwnProperty(subkey)) {
    if (!emmetMap.has(subkey)) emmetMap.set(subkey, key);

  }
  else {
    delete data.emmet[key];
  }
}

Next, we iterate all CSS properties, and check, if it has a matching Emmet-entry. If not, we'll create our own Emmet-abbreviation based on the property-name.

For that, we split the key by -, so padding-inline-end becomes:
['padding', 'inline', 'end']

If the array has a length greater than 0, we'll grab the first letter of each entry, so we'll end up with pie. Yummy, that's a good abbreviation for padding-inline-end!

If the array does not have a length, we'll use the 3 first chars instead:
key.slice(0, 3)

Before we use the new key, we'll have to check if it exists already:

const values = Array.from(emmetMap.values());
if (values.includes(emmetKey)) { ... }

If the key does exist already, we'll output it to the console.
So ... we get 14 keys that exist already:

• ac accent-color
• bdb box-decoration-break
• bd box-direction
• cp clip-path
• fs font-smooth
• fs font-synthesis
• mb margin-block
• mt margin-trim
• mb mask-border
• mr mask-repeat
• mt mask-type
• ml max-lines
• pb padding-block
• ta touch-action

We could write some clever code to generate an alternative Emmet-key, but for such small amount, let's just change them manually, and add them to emmet.json:

"acc": "accent-color",
"bodb": "box-decoration-break",
"bxd": "box-direction",
"clp": "clip-path",
"fsmo": "font-smooth",
"fsy": "font-synthesis",
"mab": "margin-block",
"mat": "margin-trim",
"msb": "mask-border",
"msr": "mask-repeat",
"mty": "mask-type",
"mal": "max-lines",
"pab": "padding-block",
"toa": "touch-action"

Let's run the code again, making sure there are no unknown keys.
Finally, if it's a new Emmet-key, we'll update data.emmet with the new entry:

data.emmet[emmetKey] = key

And in data.properties, we add a new emmet-entry per property:

data.properties[key].emmet = emmetKey

Let's log the data, and see what we've accomplished:

console.log(data.properties)
console.log(data.emmet)

Now, just right-click on the object in Dev Tools, and chose "Copy object". You can also use a console-script to accomplish this. Paste it in your favourite editor (probably VS Code!) and save it.

Extending VS Code

… And speaking of VS Code. Let’s look into how we can extend the Emmet-implementation, so it can use all the new abbreviations, we've created.

Rename the file to snippets.json and add some wrapper objects around the list of properties:

{
  "css": {
    "snippets": {
      "at": "animation-timeline",
      "all": "all",
      "ar": "aspect-ratio",
... etc ...

I had to add some entries to settings.json in VS Code, in order for it to recognize the new Emmet-snippets:

"emmet.triggerExpansionOnTab": true,
"files.associations": {"*css": "css"},
"emmet.useInlineCompletions": true,
"emmet.extensionsPath": [
  "path-to-snippets.json"
]

Now, type pie and hit Tab:

Repo

I’ve added all the code and the new snippets.json in this repo:

https://github.com/madsstoumann/emmet-vscode

The greatest surprise of this project, was learning there are 415 CSS Properties!

Complete Emmet CSS List

And here's the complete, updated list of Emmet abbreviations for CSS properties: