hayaku/hayaku

Fuzzy abbreviations, support for preprocessors (Sass, Less, Stylus) and a lot of other features in easily configurable set of tools for writing CSS faster

hayaku's Issues

Autocomplete of string values

If you write po, expand it to position: |; and after writing r you'd get position: relative;. Just like for the units, but for estrange values.

Неоднозначность background-position

Тут не очевидно что использовать можно и то и другое одновременно
background-position <background-position-x> | <background-position-y>

Есть ли аббревиатуры которые будут разворачиваться в background-position: left top?

Find out of `bgpl,t` like abbreviations can exist

And if so, then rethink the CSS-Dict.txt syntax.

Add some aliases

There are some properties that still can't be guessed by algorithm, there are the tests:

ba (line 17)
  background-attachment
  background

bbc (line 300)
  background-break continuous
  border-bottom-color

bdr: (line 377)
  border-radius
  border-right

bds: (line 359)
  border-spacing
  border-style

bo (line 265)
  background-origin
  border

bos (line 271)
  box-shadow
  border-style

br (line 289)
  border-radius
  border-right

ct (line 461)
  color transparent
  content

pr (line 213)
  position relative
  padding-right

The hyphen in value have less meaning than in property

We have the following test: tht → text-height: text-size;, that we do not pass, we get just text-height.

So, in this case (when there is just one letter in property) it must have greater priority than the same property but without the value.

Случай с числовым значением: "w10."

ввожу
w10.

получаю
width: 10.em;

ожидаю получить
width: 10em; либо width:10.0em;

Добавить inherit в словари

и не забыть закрыть #5.

Auto-values in abbreviations

One of the best features in Hayaku is expanding the abbreviations with the auto detecting units:

ml10 → margin-left: 10px;
p-.5 → padding: .5em;
h2p  → height: 2px;
h2pe → height: 2%;
h2pt → height: 2pt;

If the digit is in the abbreviation, it means that you must change the way you parse the abbreviation a little: you mustn't find the textual value in abbreviation, so in ml10 you must only search for the ml in properties and add 10px to it's value.

• If the value in abbreviations is integer, then it's px.
• If the value in abbreviation is float, then it's em.
• There must be a shortcut to percents, so you could write them more easily than pressing shift+5, so the allias is percents, so you could write just pe and Hayaku must'd guess it right.
• If there is some full unit (or anything unknown), nothing extra would happen.

Extra line after expand

If you have an abbreviation between other rules you could see that there are two extra lines appear after two tabs.

So, after expanding w here and pressing tab:

a: blah;
w|
b: blah;

You'll get now:

a: blah;
width: |;

b: blah;

With complete abbreviations like poa the behavior is ok.

If there can't be some value, than it mustn't be expanded

Like for fst4 is mustn't be expanded to font-style: 4px; etc.

Also, right now the background is expanded always to units rather than to colors, so baC is expanded to background: Cpx;

Cycling through values

When you have some rule like position: relative; pressing ctrl+↑ or ctrl+↓ would cycle through available values of the property the caret is standing on. So, by pressing ctrl+↓ for position the relative would become absolute, then fixed, than static and then again relative, and so on.

This must be added to the general number-switching command, so if you're on a number, it changes up/down, if on a property: the property changes.

Use context to determine if the abbr must be expanded

Right now the knowledge if the abbreviation can be expanded is determined in the command itself. It's not the best way to do it: in Sublime Text there is a rich context syntax, where you could look at the strings before and after the caret and run the action if needed.

The method with context is better because it won't prevent the defaults when our actions mustn't be expanded.

Fot the mapping of the tab key, this is critical, because without such behavior it would be almost impossible to jump between the tabstops.

The fight for the consistence in abbreviations

There are a few places with conflicts in abbreviations, like:

bdr
  border-radius
  border-right
pr
  position: relative
  padding-right

The easiest way os to use the alias for these abbreviations, but I think that we can make an attempt to create an algorithm for this case: the -top/-right/-bottom/-left properties must have more priority than other variants.

However, I don't know if the fixing of this issue would cause other conflicts, so it's a thing to research.

Create Readme.md for Sublime plugin

There must be the description of the plug-in and the installation guide.

#f is expanded to ##F#F#F

For colors there can be a hash and then, again, hex digits (1-3, 6), but latin ones can be lowercase. Right now there is a bug with expanding such abbreviations.

Expanding the CSS3 properties with prefixes

Also, the basic thing that must be in: expanding properties like border-radius to a cascade of prefixed rules:

-webkit-border-radius: |;
   -moz-border-radius: |;
        border-radius: |;

At first it can made without the aligning on the prefixes, but in feature there could be the preferences to setup this.

Добавлять ноль перед точкой в числовом значении

ввожу
t.5

получаю
top: .5em;

ожидаю получить
top: 0.5em;

Bugs in colors in abbreviations

1. Abbreviations like c#0 must be expanded properly, right now they're expanded to color: ##0#0#0;
2. Abbreviations like c333 must be expanded to color: #333;, right now there is nothing expanded.

Command for creating the curly braces

The thing that I use widely in my prototype in TextMate is fast creating the curly braces by pressing CMD+Enter (ctrl+enter).

So, we surely need a similar command in textmate.

It must be applied only when you're on or after selector and only if there is no curly braces for the current selector at the moment.

So, for example, you type

.class|

then press cmd+enter and get

.class {
    |
    }

Of cource there must be a lot of settings for different code styles etc.

Настройка регистра и количества символов для <color>

При раскрытии hex-цвета сейчас всегда буквы становятся заглавными. Сделать настройку при помощи которой можно выбирать какими будут символы.

Bugs in value in abbreviations

1. After expanding abbreviations like w the expand to width: px;| — with the tabstop at the end and not after the colon.
2. For z-index and zoom there mustn't be px as default unit.
3. Abbreviations like w0 must expand to width: 0;, not to width: 0px;.

Auto-colors

in some properties with colors (color, background etc.) there is an autocomplete for hash (#) and multiplication of characters for full color if possible. Also, I started to think about a way to write rgba/hula colors easily, right now it's only for rgba with just a comma after digits.

Examples:

0 → #0|00
FE → #FE|FEFE
255, → rgba(255,|255,255,1)
255,. → rgba(255,255,255,.|5)

Parse and expand the simple values

Now, when the properties can be expanded, the most needed feature is the value expanding.

The first iteration must consist of the textual values, like position: absolute;.

Important notice: Hayaku must parse two types of abbreviations:

1. Zen CSS like: with the : symbols between the value and property — pos:a.
2. More convenient (but harder to parse) syntax: without the colon — poa.

The abbreviations must be fuzzy, so poa, posa, positabso etc. must be expanded to position: absolute;

Adding colors in abbreviations

For all properties that can have colors in values it would be nice to have them set in abbreviations.

I thought about this behavior:

c#FA5EC1 → color: #FA5EC1;
c0 → color: #000;
c#fe → color: #FEFEFE;
cFE → color: #FEFEFE;

For the values with hash it's easy, but for values with A-F chars, I think, it must be done only for chars in uppercase, so they wouldn't conflict with any other abbreviations. lowercase can be acceptable only if the hash symbol is there.

However, it's discussible, maybe there won't be many conflicts with this.

Move swapping values up/down to a branch

While they are not complete and there are no keyboard shortcuts that would be ok, the keyboard shortcuts for the swapping values must be moved to a branch.

Неправильный перевод строки

При нажатии tab в положении position: relative;|}, фигурная скобка остаётся на предыдущей линии, а курсор улетает за пределы скобок.
Это нормальное поведение макроса Sublime text, но в этом случае надо использовать другой макрос или как-то по другому изменять поведение.

The popularity of the properly is not counted in prop+value abbreviations

For example, if you write fst you get font-style, but when you write fstn, you'd get font-stretch: normal;

Companion aliases

One minor improvement can be the following: for many properties there can be “fallbacks” or extras, that need to be expanded along with some properties:

• dib to

  display: -moz-inline-stack;
  display: inline-block;
  

• clip to

  clip: (auto auto auto auto);
  clip: (auto,auto,auto,auto);
  

• etc.

It's not something crucial, but it would nice to have a way to make such things in feature.

value in abbreviations improvement

For z-index and zoom there mustn't be px as default unit.

Auto-units after expand

The feature similar to the abbreviations with units like w10, but that works after the expand of the property-only abbreviation.

You can watch it in action in a Hayaku Bundle teaser

For example, if you're typing width: |;, then right after expand it's filtered through snippet and if you'd type just a digits afterwards you'd get a px after a caret: width: 10|px;, but if you'd add a point in digits, it'd be an em: width: 1.2|em;, and if you'd want any other unit or textual value, just type it and auto-unit dissolve.

Удаление значения

Кстати, вот ещё подумал.
Если написано position: relative|; (или курсор в любом месте слова relative находится), нажимаешь backspace и правило становится position: |;. То есть relative удалается полностью.
Такое часто нужно?

Create a one-page site for the Hayaku's pre-alpha

There must be the basic description of the features that happened to be in the pre-alpha + a teaser for the features that would appear in Hayaku later.

Multiletter aliases don't work

Look at this test, for example, and all other aliases now don't work (ba, bbc, bds, bo, ct etc.).

Aliases don't work in the abbreviations with colon

If there is an abbreviations like f: it won't see the aliases and would expand to float insetad of font like f does.

Create .sublime-settings file with basic settings

For start there is need only for one preference:

• If there would be a space after the colon: position:absolute; vs. position: absolute;.

But in feature all the other ones would go to this file.

Rewrite the Hayaku to use the dictionaries

I've created the new dictionary file in #16, so, it's need to be implemented in the Core.

Abbreviations with 6 hex.digits are faulty expanded

Look, for example, at c323232, right now it's expanded to color: 323232;, must be color: #323232;

# in colors is expanded to ####

Look, fort example, at c# that is expanded to color: ####; :)

Right now it must be expanded to color: #|;.

Another algorithm to select one of the conflicted properties

You must lower the priority of the “find” of an abbreviation if the same abbreviation without the last char is corresponding to the same property and the abbreviation have a gap between those chars.

Imagine the have those properties:

aaaaa
abcdef1
abcdef2
abcdef3

• for abd three variants fit, but there is a gap for them between b and d, so we must look below:
• for ab again all three variants are suitable, so, look below:
• for a noone from those three variants fit, so we go to the previous abbreviation, find the “find” that is first in a list or is more popular, then go to the previous findings and now we have only two of them, from which we get the most popular one.

So, for the abdf in the same way the priorities for the abcdef1 and abcdef2 would be lowered and the abcdef3 would be selected.

Adding default values for property expands

There are a lot of places where the properties can be expanded to snippets with rich default value placeholders.

The ones I want (and use) the most are: w → width: [100%]; and w → width: [100%];.

A lot of other defaults can be got from the Zen CSS snippets, almost all the snippets with + sign can be converted to plusless, but with default set as placeholder.

However, the plus sign must be else recognizable, even more: if there is a plus sign, then it's obvious that you must find only the property in abbreviation, without the values in it.

Find out if the shorter property is better than shorter value

There is this conflict in a test:

teac
  text-align: center
  text-emphasis: accent

in case if teac the text-emphasis: accent have lesser property part, so its interesting: if there a way to change algorithm so it would in such cases take the shorter-prop variant?

Can you run tests for two variants and tell if the one that fixes this test would cause conflicts in others?

Подсказывать названия гарнитур

я ввел следующее
f100

получил
font: 100px;

хочу дописать имя гарнитуры и прочее, так как сразу хаяку не позваляет мне это сделать (хотел f100A -> font: 100px Arial;)

ставлю курсор сюда
font: 100pх|

и хочу набирая Ar Ti Ge Ve получать по табу подсказки для имен гарнитур.

Create source file with all the properties and values

There must be a file/dictionary with all the properties and values that Hayaku must know how to expand.

It must be:

1. Human readable, because it would be revised often.
2. Easy to parsing, because it would be used as a dictionary for Hayaku.

It must be something like the list of Zen CSS snippets or Full property table for CSS2, but without all the unneeded info and with some extra info to ease the implementation to Hayaku.

Inherit values must have lesser priority.

When the inherit values would be implemented it's crucial not to forget to lower their priority, 'cause in almost al cases everything else must win.

Example: ti must be expanded to text-indent: ; and not to top: inherit;

Исключить странные результаты для несуществующих пар {string}{number}

ввожу
q19

получаю
quotes: 19px;

Importance modifier in abbreviation

If can add the ! to the end of abbreviation and get the !important modifier after expand.

Like, poa! → position: absolute !important; or w! → width: | !important.

Replace tests with the actual ones

Right now they are converted from one of the old versions of zen css, so they need to be converted to some more appropriate:

1. Get the ones from the latest zen css, with the colon sign.
2. Get the ones from the yandex live templates.
3. Write some more, the ones that I myself use a lot in text mate already.

Ctrl+Shift+Up/Down

Сочетание Ctrl+Shift+Up/Down лучше поменять на что-то другое.
По-умолчанию это перемещение строки вверх и вниз. А в Хаяку это изменение числового значения.

Add more CSS3 properties to dictionary

Right now the dict is missing transition, transform, animate and some other properties.

The popularity of value is not counted in abbreviations

There are some examples from the tests:

wsn (line 583)
  white-space normal
  white-space nowrap

vab (line 520)
  vertical-align baseline
  vertical-align bottom

lst:d (line 490)
  list-style-type decimal
  list-style-type disc

lstd (line 450)
  list-style-type decimal
  list-style-type disc

d:tc (line 155)
  display table-caption
  display table-cell

dtc (line 76)
  display table-caption
  display table-cell

bsd (line 274)
  border-style dashed
  border-style dotted

So, we must find more examples of the CSS files, from which we could create popularity table of values.