search

streamich / nano-css

Distilled CSS-in-JS for gourmet developers
The Unlicense
430 stars 24 forks source link

Add Emmet based abbreviations for css atoms #215

Closed phoenisx closed 5 years ago

phoenisx commented 5 years ago

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.

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. :relieved:

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

phoenisx commented 5 years ago

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 commented 5 years ago

@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 commented 5 years ago

:tada: This PR is included in version 3.5.0 :tada:

The release is available on:

Your semantic-release bot :package::rocket:

streamich commented 5 years ago

... 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 commented 5 years ago

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

phoenisx commented 5 years ago

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.