Add Emmet based abbreviations for css atoms

[phoenisx]

Why to have these specific abbreviations?

Emmet is quite a good tool for auto-completion of CSS properties. most of the editors for desktop/online supports emmet by default. It would be quite user-friendly for developers to use the same emmet abbreviations for atoms as well for productivity, as these abbreviations are already in-use.

Later we can also support emmet based editor plugins for auto-completion for css properties for this repo. Would really help in faster development!!!

Details

Help taken from Emmet Cheatsheet

Though I have tried to add widely used CSS properties, there might be some that got missed.

• @media queries, @keyframes are not covered in this PR.
• Since animation requires @keyframes, so haven't added it as well
• Also, '@' specific css properties are not covered in this PR, like- @font-face

Some unecessary format changes are due to eslint configuration in the REPO.

P.S.: I really like your work and wanted to contribute here. I felt this PR is a requirement for supporting more atoms, as it can help reduce the output size and can help me write less code for my project. 😌

Just a side note, this PR was really a tedius task to work on 😅

[streamich]

Thanks, that's great work!

The only problem I have with it: I don't think we can merge it into the atoms addon. If you would create a new emmet addon I would be happy to merge it.

What do you think about creating an emmet addon?

The atoms addon uses a subset of "atoms" that used to be part of Absurd.js library, that's where they called them "atoms".

The concern I have about merging this into the atoms addon is that that it is a breaking change. For example, I use the atoms addon in a bunch of projects and this change would require to change a lot of CSS rules in those projects, and I cannot think of a good way to do that. Of course, this change could be released as a major, but then still it's bad that projects that use atoms addon would not be able to upgrade.

In general, I really like this, and if we merge this as emmet addon instead, I will myself use the emmet addon in my future projects instead of the atoms addon.

[phoenisx]

Yes sure! You are right, this PR might break a lot of projects. Will rebase the branch and work on this as a separate addon.

[phoenisx]

@streamich There is one issue, that i was thinking. atoms / emmet addons cannot be used simultaneously, as few of the keys are same in both the addons, because of which I wasn't able to extend CssProps interface in common.d.ts for typings. Not sure if that is an issue.

[streamich]

Thanks! Great work.

[streamich]

🎉 This PR is included in version 3.5.0 🎉

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot 📦🚀

[streamich]

... because of which I wasn't able to extend CssProps interface in common.d.ts for typings.

Yeah, I'm not sure what to do about that either. One way is to remove Atoms interface from there and add Emmet. Or create a custom Emmet method for inserting CSS, like

nano.emmet({c: 'red'});

[streamich]

BTW, I think you didn't add your addon to docs.

[phoenisx]

Will update the Docs.

nano.emmet({c: 'red'});

This looks fine, but the abbrs that are not present in the emmet addon yet, have to be typed with full names, which might break the purpose of this addon. Anyways, if that's fine, will make the changes accordingly.