compact-stylus

Installation

Just import 'index.styl' in your stylus file.

Example

<-

@import 'compact-stylus'

.without_meaning
  wid 100% max 50
  mar x aut t 5
  pos rel t 1 z 2
  txt siz 16 fnt 'OpenSans' wei 9 ali cen clr black
  tra opa 1 e-in-out 3

->

.without_meaning {
  width: 100%;
  max-width: 50px;
  margin-left: auto;
  margin-right: auto;
  margin-top: 5px;
  position: relative;
  top: 1px;
  z-index: 2;
  font-size: 12px;
  font-family: 'OpenSans';
  font-weight: 900;
  text-align: center;
  color: black;
  transition: opacity 1s ease-in-out 3s;
}

Usage

Let's say we want to say 'background-size: cover;'.
For this we see the dictionary 'lib/js/dictionaries/compact.js'.
We find that 'background-size' is associated with 'size' property in 'background'.
It's not always so straightforward, for example,
'font-size' is 'size' in 'text' or 'order' is 'order' in 'flex'.
We apply the abbreviation rule described below to 'background', 'size' and 'cover'.
And then by combining results we get 'bac siz cvr'.

Let's do it again for 'color: inherited;'.
'color' is 'color' in 'text', so we get 'text', 'color', 'inherited'.
The result is 'txt clr inh'.

The Abbreviation Rule

Implementation is in 'lib/js/init/minify.js'.

If string has length <= 3, then string won't need abbreviation.
If string has the hyphen sign ('-') in it, then split the string by '-' and apply this rule to parts.
If string has only 2 consonants except for a first letter,
then the result will be the first letter and those two consonants,
otherwise it will be first 3 letters.

Examples:
top -> top
size -> siz
font -> fnt
display-block -> dis-blo