├── .gitignore
├── .travis.yml
├── test
    ├── double_tab_test.vader
    ├── misc_test.vader
    ├── space_test.vader
    ├── tab_test.vader
    ├── prevent_expansion_test.vader
    ├── enter_test.vader
    ├── mid_enter_test.vader
    ├── semicolon_test.vader
    ├── fallback_test.vader
    ├── expansion_test.vader
    └── stylus_test.vader
├── LICENSE.md
├── Makefile
├── README.md
├── plugin
    └── hyperstyle.vim
├── python
    ├── indexer.py
    ├── reference.py
    ├── hyperstyle.py
    ├── test.py
    └── definitions.py
├── autoload
    └── hyperstyle.vim
├── HISTORY.md
├── doc
    └── hyperstyle.txt
└── REFERENCE.md


/.gitignore:
--------------------------------------------------------------------------------
1 | *.pyc
2 | vendor
3 | doc/hyperstyle.txt.new
4 | doc/tags
5 | 


--------------------------------------------------------------------------------
/.travis.yml:
--------------------------------------------------------------------------------
1 | language: "python"
2 | python: [ "2.7" ]
3 | script: make test
4 | 


--------------------------------------------------------------------------------
/test/double_tab_test.vader:
--------------------------------------------------------------------------------
1 | Given css:
2 | Do (pressing tab twice):
3 |   a  dis\<Tab>bl\<Tab>
4 | Expect (expands both the property and the value);
5 |   display: block;
6 | 


--------------------------------------------------------------------------------
/test/misc_test.vader:
--------------------------------------------------------------------------------
1 | Given css:
2 | Do (m:a; dib;<Enter>):
3 |   a  m:a; dib;
4 | Expect (multiple statements don't stack on the same line);
5 |   margin: auto; dib;
6 | 


--------------------------------------------------------------------------------
/test/space_test.vader:
--------------------------------------------------------------------------------
 1 | # Given css:
 2 | #     display: block;
 3 | # 
 4 | # Execute:
 5 | #   set sts=2 sw=2 ex
 6 | # 
 7 | # Do:
 8 | #   A cur\<Space>pointer
 9 | # 
10 | # Expect (expands after ;):
11 | #   display: block; cursor: pointer
12 | 


--------------------------------------------------------------------------------
/test/tab_test.vader:
--------------------------------------------------------------------------------
 1 | Given css (with a property shorthand);
 2 |   di
 3 | Do (pressing tab):
 4 |   A\<Tab>_
 5 | Expect (expands the property);
 6 |   display: _
 7 | 
 8 | Given css (with a statement shorthand);
 9 |   m0a
10 | Do (pressing tab):
11 |   A\<Tab>_
12 | Expect (expands the statement);
13 |   margin: 0 auto;_
14 | 
15 | 


--------------------------------------------------------------------------------
/test/prevent_expansion_test.vader:
--------------------------------------------------------------------------------
 1 | Given css (with a :before selector);
 2 |   p:before
 3 | Do (pressing enter):
 4 |   A\<Enter>_
 5 | Expect (doesn't expand :before);
 6 |   p:before
 7 |   _
 8 | 
 9 | Given css (with a brace);
10 |   cursor:w{
11 | Execute:
12 |   set sts=2 sw=2 ex
13 | Do (pressing enter):
14 |   A\<Enter>_
15 | Expect (doesn't expand open braces);
16 |   cursor:w{
17 |     _
18 | 


--------------------------------------------------------------------------------
/test/enter_test.vader:
--------------------------------------------------------------------------------
 1 | Given css (with a statement shorthand);
 2 |   dib
 3 | Do (pressing enter):
 4 |   A\<Enter>_
 5 | Expect (expands the statement);
 6 |   display: inline-block;
 7 |   _
 8 | 
 9 | Given css (db inside a block):
10 |   a {
11 |     db
12 |   }
13 | Do (pressing enter):
14 |   jA\<Enter>_
15 | Expect (expands the statement):
16 |   a {
17 |     display: block;
18 |     _
19 |   }
20 | 


--------------------------------------------------------------------------------
/test/mid_enter_test.vader:
--------------------------------------------------------------------------------
 1 | # In the line:
 2 | #   display: block;| color: blue;
 3 | # In v0.5.0, you used to not be able to press <Enter> to break them apart.
 4 | 
 5 | Given css;
 6 |   display: block;color: blue;
 7 | 
 8 | Execute:
 9 |   set sts=2 sw=2 ex
10 | 
11 | Do:
12 |   0f;a\<Enter>
13 | 
14 | Expect (keeps enter working in the middle of a line);
15 |   display: block;
16 |   color: blue;
17 | 


--------------------------------------------------------------------------------
/test/semicolon_test.vader:
--------------------------------------------------------------------------------
 1 | Given css:
 2 | Execute:
 3 |   set sw=2 sts=2 ex
 4 | Do:
 5 |   a  margin: 0 auto\<Enter>_
 6 | Expect (automatic semicolon insertion);
 7 |   margin: 0 auto;
 8 |   _
 9 | 
10 | Do:
11 |   a  background: linear-gradient(\<Del>\<Enter>_
12 | # Do `del` here to account for auto-pairs, just in case
13 | Expect (supress automatic semicolon insertion):
14 |     background: linear-gradient(
15 |     _
16 | 
17 | 


--------------------------------------------------------------------------------
/test/fallback_test.vader:
--------------------------------------------------------------------------------
 1 | Given css (nothing in particular);
 2 |   123
 3 | Do (pressing enter):
 4 |   A\<Enter>_
 5 | Expect (safely lets enter through);
 6 |   123
 7 |   _
 8 | 
 9 | Given css (nothing in particular);
10 |   123
11 | Do (pressing enter):
12 |   A\<Space>_
13 | Expect (safely lets space through);
14 |   123 _
15 | 
16 | Given css (nothing in particular);
17 |   xxxxxx
18 | Execute:
19 |   set sts=2 sw=2 ex
20 | Do (pressing tab):
21 |   A\<Tab>_
22 | Expect (safely lets tab through);
23 |   xxxxxx  _
24 | 


--------------------------------------------------------------------------------
/test/expansion_test.vader:
--------------------------------------------------------------------------------
 1 | Given css (di);
 2 |   di
 3 | Do (pressing :):
 4 |   A:_
 5 | Expect (expands the property);
 6 |   display:_
 7 | 
 8 | Given css;
 9 |   margin: a
10 | Do (pressing ;):
11 |   A;
12 | Expect (expands the value);
13 |   margin: auto;
14 | 
15 | Given css;
16 |   margin:auto
17 | Do (pressing ;):
18 |   A;
19 | Expect (inserts a space after : in the property);
20 |   margin: auto;
21 | 
22 | Given css;
23 |   dib
24 | Do (pressing ;):
25 |   A;
26 | Expect (expands a full statement);
27 |   display: inline-block;
28 | 
29 | Given css;
30 |   brad4
31 | Do (pressing ;):
32 |   A;
33 | Expect (expands numeric values);
34 |   border-radius: 4px;
35 | 


--------------------------------------------------------------------------------
/test/stylus_test.vader:
--------------------------------------------------------------------------------
 1 | # Tests indented syntaxes and stuff.
 2 | 
 3 | Given sass:
 4 |   .div
 5 |     _
 6 | Do (dib;<Enter>):
 7 |   Gxadib\<Enter>_
 8 | Expect sass (display: inline-block):
 9 |   .div
10 |     display: inline-block
11 |     _
12 | 
13 | Given stylus:
14 | Execute:
15 |   set sw=2 sts=2 ex
16 | Do:
17 |   adiv\<Enter>  di\<Tab>_
18 | Expect stylus (stylus: expands properties via tab);
19 | div
20 |   display: _
21 | 
22 | Given stylus:
23 | Do:
24 |   adiv\<Enter>  moa\<Tab>_
25 | Expect (stylus: expands statements via tab);
26 | div
27 |   margin: 0 auto_
28 | 
29 | Given stylus:
30 | Do:
31 |   amoa\<Tab>_
32 | Expect (don't expand tabs when there's no indentation):
33 |   moa _
34 | 


--------------------------------------------------------------------------------
/LICENSE.md:
--------------------------------------------------------------------------------
 1 | The MIT License (MIT)
 2 | 
 3 | Copyright (c) 2015 Rico Sta. Cruz
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/Makefile:
--------------------------------------------------------------------------------
 1 | vim := vim
 2 | plugins = ${HOME}/.vim/plugged
 3 | redirect := >/dev/null
 4 | 
 5 | test: test-python test-vim
 6 | 
 7 | test-python: python/test.py
 8 | 	@if which python  >/dev/null; then python  --version; python  $<; fi
 9 | 	@if which python3 >/dev/null; then python3 --version; python3 $<; fi
10 | 
11 | autotest:
12 | 	find plugin test python | entr make test
13 | 
14 | # Automated vim testing via vader.vim
15 | test-vim: vendor/vimrc
16 | 	@env HOME=$(shell pwd)/vendor ${vim} -Nu $< +"Vader! test/*"
17 | 
18 | vim: vendor/vimrc
19 | 	@env HOME=$(shell pwd)/vendor ${vim} -Nu $< _test.css
20 | 
21 | vendor/vimrc: vendor/vader.vim vendor/auto-pairs
22 | 	@mkdir -p ./vendor
23 | 	@echo "filetype off" > $@
24 | 	@echo "set rtp+=vendor/vader.vim" >> $@
25 | 	@echo "if has('\$$test_autopairs') | set rtp+=vendor/auto-pairs | endif" >> $@
26 | 	@echo "set rtp+=." >> $@
27 | 	@echo "filetype plugin indent on" >> $@
28 | 	@echo "syntax enable" >> $@
29 | 
30 | vendor/vader.vim:
31 | 	@mkdir -p ./vendor
32 | 	@git clone https://github.com/junegunn/vader.vim.git ./vendor/vader.vim
33 | 
34 | vendor/auto-pairs:
35 | 	@mkdir -p ./vendor
36 | 	@git clone https://github.com/jiangmiao/auto-pairs.git ./vendor/auto-pairs
37 | 
38 | doc: REFERENCE.md doc/hyperstyle.txt
39 | 
40 | REFERENCE.md: python/definitions.py
41 | 	python python/reference.py --md > $@
42 | 
43 | doc/hyperstyle.txt: python/definitions.py
44 | 	python python/reference.py --vim > $@
45 | 
46 | .PHONY: test vendor/vimrc doc
47 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # vim-hyperstyle
 2 | 
 3 | Type faster by shorthand that will auto-expand as you type. Supports less, sass, scss, stylus, and plain CSS.
 4 | 
 5 | ![](https://raw.githubusercontent.com/rstacruz/vim-hyperstyle/gh-pages/screencast.gif?2)
 6 | 
 7 | [![Status](https://travis-ci.org/rstacruz/vim-hyperstyle.svg?branch=master)](https://travis-ci.org/rstacruz/vim-hyperstyle)
 8 | 
 9 | <br>
10 | 
11 | ## Expansions
12 | 
13 | Expansions intelligently happen as you type. Unlike [emmet], there are no hotkeys required—expansion will happen as you type whenever they make sense.
14 | 
15 | * Properties will be auto-completed:<br>`m:` → `margin:`
16 | 
17 | * You can put numeric next to property shortcuts:<br>`z1⏎` → `z-index: 1;`
18 | 
19 | * Values will be auto-completed:<br>`float:l` → `float: left`
20 | 
21 | * Default units will be added:<br>`border-radius: 4⏎` → `border-radius: 4px;`
22 | 
23 | * Shortcuts for common statements are available:<br>`fl⏎` → `float: left;`
24 | 
25 | * Semicolons are inserted automatically so you can write CSS in one go:<br>`dib` `⏎` `m0a` `⏎`
26 | 
27 | * Semicolons are omitted for `.styl` and `.sass`
28 | 
29 | * ...and lots more goodies
30 | 
31 | <br>
32 | 
33 | ## Examples
34 | 
35 | | Shortcut     | Expansion              |
36 | | ---          | ---                    |
37 | | `dib`        | display: inline-block; |
38 | | `m0`         | margin: 0;             |
39 | | `m0a`        | margin: 0 auto;        |
40 | | `m-15`       | margin: -15px;         |
41 | | `m:auto`     | margin: auto;          |
42 | | `fle 1 auto` | flex: 1 auto;          |
43 | | `float left` | float: left;           |
44 | 
45 | **[View full reference →](REFERENCE.md)**
46 | 
47 | <br>
48 | 
49 | ## Installation
50 | 
51 | Using [vim-plug]:
52 | 
53 | ```vim
54 | Plug 'rstacruz/vim-hyperstyle'
55 | ```
56 | 
57 | Python support is required. For Neovim:
58 | 
59 |     :help nvim-python
60 | 
61 | For OSX/Homebrew: ([info](http://ricostacruz.com/til/use-macvim-with-lua.html))
62 | 
63 | ```
64 | brew install macvim --with-cscope --with-lua --override-system-vim \
65 |   --with-luajit --with-python3 --with-python
66 | ```
67 | 
68 | <br>
69 | 
70 | ## Options
71 | * To generate statements with no colons in Stylus, set `let g:hyperstyle_use_colon=0`.
72 | 
73 | ## Caveats
74 | 
75 | * Stylus is assumed to be in indented syntax (no braces).
76 | 
77 | <br>
78 | 
79 | ## Thanks
80 | 
81 | **vim-hyperstyle** © 2015+, Rico Sta. Cruz. Released under the [MIT] License.<br>
82 | Authored and maintained by Rico Sta. Cruz with help from contributors ([list][contributors]).
83 | 
84 | > [ricostacruz.com](http://ricostacruz.com) &nbsp;&middot;&nbsp;
85 | > GitHub [@rstacruz](https://github.com/rstacruz) &nbsp;&middot;&nbsp;
86 | > Twitter [@rstacruz](https://twitter.com/rstacruz)
87 | 
88 | [MIT]: http://mit-license.org/
89 | [contributors]: http://github.com/rstacruz/vim-hyperstyle/contributors
90 | [vim-plug]: https://github.com/junegunn/vim-plug
91 | [emmet]: http://emmet.io/
92 | 


--------------------------------------------------------------------------------
/plugin/hyperstyle.vim:
--------------------------------------------------------------------------------
 1 | " Typing `<Plug>(hyperstyle-tab)` will trigger Hyperstyle.
 2 | " These will be mapped to actual keystrokes later on.
 3 | inoremap <silent>  <SID>(hyperstyle-cr) <C-R>=hyperstyle#expand_cr()<CR>
 4 | imap     <silent> <script> <Plug>(hyperstyle-cr) <SID>(hyperstyle-cr)
 5 | inoremap <silent>  <SID>(hyperstyle-tab) <C-R>=hyperstyle#expand_tab()<CR>
 6 | imap     <silent> <script> <Plug>(hyperstyle-tab) <SID>(hyperstyle-tab)
 7 | inoremap <silent>  <SID>(hyperstyle-space) <C-R>=hyperstyle#expand_space()<CR>
 8 | imap     <silent> <script> <Plug>(hyperstyle-space) <SID>(hyperstyle-space)
 9 | inoremap <silent>  <SID>(hyperstyle-colon) <C-R>=hyperstyle#expand_colon()<CR>
10 | imap     <silent> <script> <Plug>(hyperstyle-colon) <SID>(hyperstyle-colon)
11 | inoremap <silent>  <SID>(hyperstyle-semi) <C-R>=hyperstyle#expand_semicolon()<CR>
12 | imap     <silent> <script> <Plug>(hyperstyle-semi) <SID>(hyperstyle-semi)
13 | 
14 | " Enables Hyperstyle for the current buffer.
15 | " If `semi` is 1, semicolons will be added.
16 | function! s:enable(semi)
17 |   let b:hyperstyle = 1
18 |   let b:hyperstyle_semi = a:semi
19 | 
20 |   " Prevent double-mappings
21 |   if maparg("<Tab>","i") =~ 'hyperstyle#' | return | endif
22 | 
23 |   call s:map_key("<CR>", "hyperstyle-cr")
24 |   call s:map_key("<Space>", "hyperstyle-space")
25 |   call s:map_key("<Tab>", "hyperstyle-tab")
26 |   call s:map_key(":", "hyperstyle-colon")
27 |   call s:map_key(";", "hyperstyle-semi")
28 | endfunction
29 | 
30 | function! s:map_key(key, binding)
31 |   let oldmap = maparg(a:key, 'i')
32 | 
33 |   if oldmap =~# "<Plug>(".a:binding.")"
34 |     " already mapped. maybe the user was playing with `set ft`
35 |   elseif oldmap != ""
36 |     exe "imap <silent> ".a:key." ".oldmap."<Plug>(".a:binding.")"
37 |   else
38 |     exe "imap <silent> <buffer> ".a:key." ".a:key."<Plug>(".a:binding.")"
39 |   endif
40 | endfunction
41 | 
42 | augroup hyperstyle
43 |   au!
44 |   au FileType css call <SID>enable(';')
45 |   au FileType scss call <SID>enable(';')
46 |   au FileType less call <SID>enable(';')
47 |   au FileType sass call <SID>enable('')
48 |   au FileType stylus call <SID>enable('')
49 | augroup END
50 | 
51 | " Hacky fix to make things work with auto-pairs.
52 | " This will take away the bindings from auto-pairs.
53 | " Yes this is a terrible thing to do.
54 | if globpath(&rtp, 'plugin/auto-pairs.vim') != ''
55 |   function s:rescue_bindings()
56 |     if exists('b:hyperstyle_ap_fix') | return | endif
57 |     if ! exists('b:hyperstyle') | return | endif
58 | 
59 |     let oldmap = maparg("<space>", "i")
60 |     if ! (oldmap =~ 'AutoPairsSpace') | return | endif
61 |     if (oldmap =~ '(hyperstyle-space)') | return | endif
62 | 
63 |     let b:hyperstyle_ap_fix = 1
64 |     exe 'iunmap <buffer> <Space>'
65 |     exe 'imap <silent> <buffer> <Space> <Space><Plug>(hyperstyle-space)'
66 |     exe 'iunmap <buffer> <CR>'
67 |     exe 'imap <silent> <buffer> <CR> <CR><Plug>(hyperstyle-cr)'
68 |   endfunction
69 |   au InsertEnter * :call s:rescue_bindings()
70 | endif
71 | 


--------------------------------------------------------------------------------
/python/indexer.py:
--------------------------------------------------------------------------------
  1 | import sys
  2 | if sys.version_info < (3,):
  3 |     range = xrange
  4 | 
  5 | class Indexer:
  6 |     """Indexes CSS property and statement definitions.
  7 | 
  8 |     >>> idx = Indexer()
  9 |     >>> idx.index(definitions)
 10 | 
 11 |     >>> idx.properties.get("pad")
 12 |     {
 13 |       "property": "padding",
 14 |       "values": ["auto"],
 15 |       "unit": "px"
 16 |     })
 17 | 
 18 |     >>> idx.full_properties.get("padding")
 19 |     # same as above
 20 | 
 21 |     >>> idx.statements.get("m0a")
 22 |     {
 23 |       "property": "margin",
 24 |       "value": "auto"
 25 |     }
 26 |     """
 27 |     def __init__(self):
 28 |         self.properties = {} # indexed by shorthand ("bg")
 29 |         self.statements = {} # indexed by shorthand ("m0a")
 30 |         self.full_properties = {} # indexed by long property name ("margin")
 31 |         self.full_statements = {} # indexed by long property name ("margin: auto")
 32 | 
 33 |     def index(self, defs):
 34 |         """Adds definitions to the index.
 35 | 
 36 |         >>> idx.index({ "properties": [...], "definitions": [...] })
 37 |         """
 38 | 
 39 |         self.index_full_props(defs)
 40 |         self.index_aliases(defs)
 41 | 
 42 |     def index_full_props(self, defs):
 43 |         for (prop, aliases, unit, values) in defs["properties"]:
 44 |             options = {}
 45 |             options["property"] = prop
 46 |             options["aliases"] = aliases[:]
 47 |             options["unit"] = unit
 48 |             options["values"] = values
 49 |             update_aliases(options)
 50 |             self.full_properties[prop] = options
 51 | 
 52 |         for (prop, value, aliases) in defs["statements"]:
 53 |             options = {}
 54 |             options["property"] = prop
 55 |             options["value"] = value
 56 |             options["aliases"] = aliases
 57 |             key = "%s: %s" % (options["property"], options["value"])
 58 |             self.full_statements[key] = options
 59 | 
 60 |     def index_aliases(self, defs):
 61 |         for (prop, _, __, ___) in defs["properties"]:
 62 |             options = self.full_properties[prop]
 63 |             index_item(self.properties, options)
 64 | 
 65 |         for (prop, value, __) in defs["statements"]:
 66 |             key = "%s: %s" % (prop, value)
 67 |             options = self.full_statements[key]
 68 |             index_item(self.statements, options)
 69 | 
 70 |         self.remove_tags()
 71 | 
 72 |     def remove_tags(self):
 73 |         """Workaround to stop tags from being expanded. This will allow you to type
 74 |         `li:before` without `li:` being expanded to `line-height:`.
 75 |         
 76 |         This is also important for indented syntaxes, where you might commonly
 77 |         type `p` on its own line (in contrast to `p {`).
 78 |         """
 79 |         tags = ['a', 'p', 'br', 'b', 'i', 'li', 'ul', 'div', 'em', 'sup', \
 80 |                 'big', 'small', 'sub']
 81 |         for tag in tags:
 82 |             self.statements[tag] = None
 83 |             self.properties[tag] = None
 84 | 
 85 | def fuzzify(str):
 86 |     """Returns a generator with fuzzy matches for a given string.
 87 | 
 88 |     >>> for s in fuzzify("border"):
 89 |     >>>     print s
 90 |     "b", "bo", "bor", "bord", "borde"
 91 |     """
 92 |     if str:
 93 |         for i in range(1, len(str)+1):
 94 |             yield str[0:i]
 95 | 
 96 | def update_aliases(options):
 97 |     """Updates options['aliases'] with property defaults
 98 |     """
 99 |     prop = options.get('property')
100 | 
101 |     # If the property has dashes, add non-dashed versions
102 |     if '-' in prop:
103 |         options["aliases"].append(prop.replace('-', ''))
104 | 
105 |     # Insert the property itself
106 |     options["aliases"].append(prop)
107 | 
108 | def index_item(properties, options):
109 |     """Takes aliases and puts them into the properties index"""
110 |     for alias in options["aliases"]:
111 |         for key in fuzzify(alias):
112 |             if not key in properties:
113 |                 properties[key] = options
114 | 


--------------------------------------------------------------------------------
/python/reference.py:
--------------------------------------------------------------------------------
  1 | # -*- coding: utf-8 -*-
  2 | # This code sucks, really, don't even look at it
  3 | 
  4 | import re
  5 | from definitions import definitions
  6 | from indexer import Indexer
  7 | import sys
  8 | 
  9 | # Indexing
 10 | index = Indexer()
 11 | index.index(definitions)
 12 | 
 13 | tags = [
 14 |     'a', 'p', 'br', 'b', 'i', 'li', 'ul', 'div', 'em', 'sup', 'big', 'small',
 15 |     'sub'
 16 | ]
 17 | 
 18 | def print_reference():
 19 |     if "--vim" in sys.argv:
 20 |         print(VimPrinter().to_s())
 21 |     else:
 22 |         print(MarkdownPrinter().to_s())
 23 | 
 24 | class VimPrinter:
 25 |     def to_s(self):
 26 |         self.lines = []
 27 |         self.top()
 28 |         self.headline("Properties")
 29 |         self.table(references["properties"])
 30 |         self.headline("Statements")
 31 |         self.table(references["statements"])
 32 |         self.foot()
 33 |         return "\n".join(self.lines)
 34 |     def l(self, line):
 35 |         self.lines.append(line)
 36 |     def top(self):
 37 |         self.l("*hyperstyle*  Style much faster")
 38 |         self.l("")
 39 |     def foot(self):
 40 |         self.l("vim:tw=78:ts=8:ft=help:norl:")
 41 |     def headline(self, headline):
 42 |         self.l("=" * 80)
 43 |         self.l("%-40s%40s" % (headline.upper(), '*hyperstyle-'+headline.lower()+'*'))
 44 |         self.l("")
 45 |     def table(self, items):
 46 |         def fmt(m):
 47 |             left = m.group(1)
 48 |             if len(left) <= 5: left = "`"+left+"`"
 49 |             if m.group(2): return "%s[%s]" % (left, m.group(2))
 50 |             else: return left
 51 |         for name, aliases in items:
 52 |             aliases = re.sub(r'([^ \[\]]+)(?:\[([^ ]+)\])?', fmt, aliases)
 53 |             self.l("  %-35s %s" % ("*%s*"%name.replace(' ','* *'), aliases))
 54 |         self.l("")
 55 | 
 56 | class MarkdownPrinter(VimPrinter):
 57 |     def top(self):
 58 |         pass
 59 |     def foot(self):
 60 |         pass
 61 |     def headline(self, headline):
 62 |         self.l("## " + headline)
 63 |         self.l("")
 64 |     def table(self, items):
 65 |         self.l("| %-35s | %-60s |" % ("Expansion", "Shortcuts"))
 66 |         self.l("| --- | --- |")
 67 |         def fmt(m):
 68 |             left = m.group(1)
 69 |             if len(left) <= 5: left = "<kbd>"+left+"</kbd>"
 70 |             else: left = "<u>"+left+"</u>"
 71 |             if m.group(2): return "%s%s" % (left, m.group(2))
 72 |             else: return left
 73 |         for name, aliases in items:
 74 |             aliases = re.sub(r'([^ \[\]]+)(?:\[([^ ]+)\])?', fmt, aliases)
 75 |             id = re.sub(r'[^a-zA-Z0-9]+', ' ', name).strip()
 76 |             id = re.sub(r' ', '-', id)
 77 |             anchor = "<a name='%s' href='#%s'>•</a>" % (id, id)
 78 |             self.l("| %s %-35s | %-60s |" % (anchor, "**%s**"%name, aliases))
 79 |         self.l("")
 80 | 
 81 | def get_property_reference():
 82 |     """
 83 |     Returns a reference table. This is a `list` with a tuple in each item.
 84 | 
 85 |     >>> get_property_reference()
 86 |     [ ('float:', 'fl[oat]'),
 87 |       ('margin-left', 'ml[eft]'), ... ]
 88 |     """
 89 | 
 90 |     return get_generic_reference(index.full_properties.items(), index.properties, ':')
 91 | 
 92 | def get_statement_reference():
 93 |     """
 94 |     Returns a reference table. This is a `list` with a tuple in each item.
 95 | 
 96 |     >>> get_statement_reference()
 97 |     [ ('margin-left: 0 auto', 'moa m0a'),
 98 |       ('float: left', 'fl[eft]'), ... ]
 99 |     """
100 |     return get_generic_reference(index.full_statements.items(), index.statements)
101 | 
102 | def get_generic_reference(items, index, suf=''):
103 |     ref = []
104 |     items = sorted(items)
105 |     for prop, options in items:
106 |         aliases = options.get('aliases')
107 |         aliases_ref = resolve_aliases(aliases, options, index)
108 |         ref.append(("%s%s" % (prop, suf), aliases_ref))
109 |     return ref
110 | 
111 | def resolve_aliases(aliases, this, index):
112 |     """
113 |     Given a bunch of `aliases`, shorten them in documentation format.
114 | 
115 |     Do this by looking for the "root" of each alias: that is, the shortest the
116 |     alias can be typed. For instance, `texalign` has the root of `tex`, because
117 |     `te` will evaluate to something else already.
118 | 
119 |     >>> resolve_aliases(['talign', 'textalign'], options, index.properties)
120 |     "ta[lign] tex[align]"
121 |     """
122 |     taken = {}
123 | 
124 |     def referencify(alias):
125 |         root_length = 1
126 |         for i in range(len(alias), 0, -1):
127 |             newalias = alias[0:i]
128 |             if index.get(newalias) == this:
129 |                 root_length = i
130 | 
131 |         if len(alias) == root_length:
132 |             return alias
133 |         else:
134 |             root = alias[0:root_length]
135 |             if root in taken or root in tags:
136 |                 return alias
137 |             else:
138 |                 taken[root] = True
139 |                 return "%s[%s]" % (root, alias[root_length:])
140 | 
141 |     refs = [referencify(a) for a in aliases]
142 |     return " ".join(refs)
143 | 
144 | references = {
145 |     "properties": get_property_reference(),
146 |     "statements": get_statement_reference()
147 | }
148 | 
149 | if __name__ == '__main__':
150 |     print_reference()
151 | 


--------------------------------------------------------------------------------
/autoload/hyperstyle.vim:
--------------------------------------------------------------------------------
  1 | if exists("g:hyperstyle_autoloaded") | finish | endif
  2 | let g:hyperstyle_autoloaded=1
  3 | 
  4 | if !exists("g:hyperstyle_use_colon")
  5 |   let g:hyperstyle_use_colon=1
  6 | endif
  7 | 
  8 | "
  9 | " Check if python is supported, and invoke the python env.
 10 | "
 11 | 
 12 | if !has("python") && !has("python3")
 13 |   echohl WarningMsg
 14 |   echomsg "vim-hyperstyle requires vim with python support."
 15 |   if has("nvim") | echomsg "for Neovim, see `:help nvim-python`."
 16 |   else | echomsg "you may need to rebuild vim with --with-python."
 17 |   endif
 18 |   echohl None
 19 |   finish
 20 | endif
 21 | 
 22 | let g:hyperstyle_python=has('python') ? 'python2' : 'python3'
 23 | 
 24 | let s:current_file=expand("<sfile>")
 25 | 
 26 | "
 27 | " Same-line expansions
 28 | "
 29 | 
 30 | " Expand spaces (fl_ => float:_)
 31 | function! hyperstyle#expand_space()
 32 |   return s:expand_inline('property', ' ', {})
 33 | endfunction
 34 | 
 35 | " Expand colons (fl: => float:)
 36 | function! hyperstyle#expand_colon()
 37 |   return s:expand_inline('property', '', {})
 38 | endfunction
 39 | 
 40 | " Expand semicolons (display: b; => display: block;)
 41 | function! hyperstyle#expand_semicolon()
 42 |   return s:expand_inline('statement', get(b:, 'hyperstyle_semi'), {})
 43 | endfunction
 44 | 
 45 | "
 46 | " The <Tab> key combines the `:` expansion and the `;` expansion.
 47 | " Also, only work on indented lines. This will avoid expanding selectors.
 48 | "
 49 | 
 50 | function! hyperstyle#expand_tab()
 51 |   if ! get(b:, 'hyperstyle') | return '' | endif
 52 |   if ! s:at_indented_line() | return '' | endif
 53 |   if ! s:at_eol() | return '' | endif
 54 | 
 55 |   let r = s:expand_inline("property", ' ', {'expr': '^\(\s*\)\([a-z0-9]\+\)\s*$' })
 56 |   if r != '' | return r | endif
 57 |   let r = s:expand_inline('statement', get(b:, 'hyperstyle_semi'), {})
 58 |   if r != '' | return r | endif
 59 |   return ''
 60 | endfunction
 61 | 
 62 | "
 63 | " Expands carriage return (db => display: block;)
 64 | " This one is different because it takes from the previous line
 65 | "
 66 | 
 67 | function! hyperstyle#expand_cr()
 68 |   if ! get(b:, 'hyperstyle') | return '' | endif
 69 |   " If it broke in the middle of a line, don't.
 70 |   if match(getline('.'), '^\s*$') == -1 | return '' | endif
 71 | 
 72 |   let ln     = s:get_line_info(line('.')-1, '^\(\s*\)\(.\+\)\s*$')
 73 |   let result = s:expand('statement', ln.shorthand)
 74 |   if result == '' | return '' | endif
 75 | 
 76 |   exe 'normal kJ0"_C'
 77 |   return (ln.indent) . result . (b:hyperstyle_semi."\n")
 78 | endfunction
 79 | 
 80 | "
 81 | " (Internal) Gets from the current line, passes it to a python function,
 82 | " then modifies the buffer as needed
 83 | "
 84 | 
 85 | function! s:expand_inline(fn, append, o)
 86 |   if ! get(b:, 'hyperstyle') | return '' | endif
 87 |   if ! s:at_eol() | return "" | endif
 88 | 
 89 |   let expr   = exists('a:o.expr') ? a:o.expr : '^\(\s*\)\(.\+\).$'
 90 |   let ln     = s:get_line_info(line('.'), expr)
 91 |   let result = s:expand(a:fn, ln.shorthand)
 92 |   if result == '' | return "" | endif
 93 | 
 94 |   exe 'normal! 0"_C'
 95 |   return (ln.indent) . result . (a:append)
 96 | endfunction
 97 | 
 98 | "
 99 | " Executes a python function with a given string as an argument
100 | "
101 | 
102 | function s:expand(what, str)
103 |   let method = 'expand_'.a:what
104 |   let usecolon = g:hyperstyle_use_colon == 1 ? 'True' : 'False'
105 |   let escaped = substitute(a:str, '"', '\"', 'g')
106 |   return s:pyeval("hyperstyle.".method."(\"".escaped."\", ".usecolon.")")
107 | endfunction
108 | 
109 | "
110 | " pyeval() polyfill
111 | " We can actually use :pythonx, but it's not available in Neovim 0.2.0.
112 | " We can also use the built-in pyeval(), but it seems to start 'fresh' in
113 | " Vim 8.0 (so 'hyperstyle' isn't defined).
114 | "
115 | 
116 | if g:hyperstyle_python == 'python3'
117 |   python3 << EOF
118 | import sys, os, vim
119 | path = os.path.dirname(vim.eval("s:current_file")) + '/../python'
120 | sys.path.insert(0, path)
121 | import hyperstyle as hyperstyle
122 | EOF
123 |   function! s:pyeval(code)
124 |     python3 << EOF
125 | result = eval(vim.eval('a:code'))
126 | if isinstance(result, str): vim.command('return ' + repr(result))
127 | EOF
128 |   endfunction
129 | else
130 |   python << EOF
131 | import sys, os, vim
132 | path = os.path.dirname(vim.eval("s:current_file")) + '/../python'
133 | sys.path.insert(0, path)
134 | import hyperstyle as hyperstyle
135 | EOF
136 |   function! s:pyeval(code)
137 |     python << EOF
138 | result = eval(vim.eval('a:code'))
139 | if isinstance(result, str): vim.command('return ' + repr(result))
140 | EOF
141 |   endfunction
142 | endif
143 | 
144 | "
145 | " (Internal) Splits a line to indent and shorthand
146 | "
147 | "  - indent: indentation text
148 | "  - shorthand: the thing matching regexps
149 | "
150 | 
151 | function! s:get_line_info(ln, expr)
152 |   let m = matchlist(getline(a:ln), a:expr)
153 |   let indent = exists("m[1]") ? m[1] : ''
154 |   let shorthand = exists("m[2]") ? m[2] : ''
155 |   return { "indent": indent, "shorthand": shorthand }
156 | endfunction
157 | 
158 | " (internal) Checks if we're at the end of the line.
159 | function s:at_eol()
160 |   return col('.') >= strlen(getline('.'))
161 | endfunction
162 | 
163 | " (internal) Checks if we're at a line that's indented
164 | function s:at_indented_line()
165 |   return getline('.') =~ '^\s'
166 | endfunction
167 | 


--------------------------------------------------------------------------------
/HISTORY.md:
--------------------------------------------------------------------------------
  1 | ## [v0.11.0]
  2 | > Aug  1, 2017
  3 | 
  4 | - Added `g:hyperstyle_use_colon` configuration flag ([#5], [@gabrielflorit])
  5 | - Improved compatibility with Neovim 0.2.0 and Vim 8.0
  6 | 
  7 | [v0.11.0]: https://github.com/rstacruz/vim-hyperstyle/compare/v0.10.0...v0.11.0
  8 | 
  9 | ## [v0.10.0]
 10 | > Oct  6, 2015
 11 | 
 12 | - Add `list-style` and `list-style-type`
 13 | 
 14 | [v0.10.0]: https://github.com/rstacruz/vim-hyperstyle/compare/v0.9.2...v0.10.0
 15 | 
 16 | ## [v0.9.2]
 17 | > Sep 20, 2015
 18 | 
 19 | - Expands `bc` to `background-color`
 20 | - Expands `bi` to `background-image`
 21 | 
 22 | [v0.9.2]: https://github.com/rstacruz/vim-hyperstyle/compare/v0.9.1...v0.9.2
 23 | 
 24 | ## [v0.9.1]
 25 | > Sep 20, 2015
 26 | 
 27 | - Expands `bg` to `background`
 28 | 
 29 | [v0.9.1]: https://github.com/rstacruz/vim-hyperstyle/compare/v0.9.0...v0.9.1
 30 | 
 31 | ## [v0.9.0]
 32 | > Sep 20, 2015
 33 | 
 34 | - [#2] - Add background-image
 35 | 
 36 | [v0.9.0]: https://github.com/rstacruz/vim-hyperstyle/compare/v0.8.0...v0.9.0
 37 | 
 38 | ## [v0.8.0]
 39 | > Aug 14, 2015
 40 | 
 41 | - Add background-repeat
 42 | 
 43 | ## [v0.7.1]
 44 | > May 31, 2015
 45 | 
 46 | - Disable Hyperstyle unless `b:hyperstyle` is on. This allows you to temporarily turn it off, and improves compatibility a bit.
 47 | 
 48 | ## [v0.7.0]
 49 | > May 31, 2015
 50 | 
 51 | - Improve compatibility with other plugins: UltiSnips, auto-pairs, endwise, [vim-closer].
 52 | - Improve compatibility with anything else I haven't seen, really (hopefully).
 53 | 
 54 | [vim-closer]: https://github.com/rstacruz/vim-closer
 55 | 
 56 | ## [v0.6.0]
 57 | > May 31, 2015
 58 | 
 59 | - Publish a reference: [REFERENCE.md](REFERENCE.md).
 60 | - Add help docs (`:h hyperstyle`).
 61 | - Add more shortcuts to existing properties.
 62 | - Big internal refactor.
 63 | 
 64 | ## [v0.5.1]
 65 | > May 30, 2015
 66 | 
 67 | - Fix compatilibity with UltiSnips.
 68 | - Improve compatibilty with plugins that remap space.
 69 | - Fix pressing <kbd>Enter</kbd> in the middle of a line.
 70 | - Add `max-width` and `max-height`.
 71 | 
 72 | ## [v0.5.0]
 73 | > May 29, 2015
 74 | 
 75 | - Rename project to `vim-hyperstyle`. (previously `vim-css-shorthand`)
 76 | - Internal changes and cleanups.
 77 | 
 78 | ## [v0.4.1]
 79 | > May 29, 2015
 80 | 
 81 | - Fix compatibility with auto-pairs.
 82 | - Fix compatibility with UltiSnips.
 83 | - Internal changes.
 84 | 
 85 | ## [v0.4.0]
 86 | > May 28, 2015
 87 | 
 88 | * Support the tab key.
 89 | * Don't expand lines when the line is not indented.
 90 | 
 91 | ## [v0.3.0]
 92 | > May 27, 2015
 93 | 
 94 | * Vim 7.3 support!
 95 | * `boxs` now expands to `box-shadow` instead of box-sizing.
 96 | * `cursor` values are now supported.
 97 | * Updated shortcuts for `position`.
 98 | * Added `ha` for `height: auto`.
 99 | * Fix double semicolon problem.
100 | 
101 | [v0.2.4]
102 | 
103 | * Fix `vertical-align:mid` not completing to `middle`.
104 | * Zoom now accepts a number. `zo1` will expand to `zoom: 1`.
105 | * Fixes polution of the clipboard.
106 | * More shortcuts.
107 | * `e` now expands to 'em', eg: `m:3e` is `margin: 3em`.
108 | * Add explicit support for more units like *ch, vmin, ex*.
109 | * `trans` now defaults to `transition` and not `transform` (use `tf` for transform).
110 | * Add `wa` for width: auto.
111 | * Add `mart`, `padt`, and `bort` for margin, padding and bottom-top (and its cousins).
112 | 
113 | [v0.2.3]
114 | 
115 | * Keyword values are expanded now as well. `fl:l⏎` should expand to `float: left`.
116 | * Improve rules on auto-spacing after `:`. For instance, `opacity:1` should automatically insert a space after `:` now.
117 | * Opacity now accepts numbers; `op.5` should translate to `opacity: 0.5`.
118 | 
119 | [v0.2.2]
120 | 
121 | * Add `jcs` as `justify-column: flex-start`.
122 | * Add `jce` as `justify-column: flex-end`.
123 | * Spaces after `:` are now optional: `mar:3⏎` will now expand to `margin: 3px;`.
124 | 
125 | [v0.2.1]
126 | 
127 | * `co` will now expand to *color* instead of *content*.
128 | * Added *visibility*, *zoom* and *clear* shortcuts.
129 | * `di:` will now expand to `display:` instead of `direction:`.
130 | 
131 | [v0.2.0]
132 | 
133 | * `margin: 3⏎` will now expand to `margin: 3px;` (and with similar properties too).
134 | * Added `abs⏎` and `rel⏎`.
135 | * Added `ts:` for *text-shadow*.
136 | 
137 | ## v0.1.0
138 | > May 27, 2015
139 | 
140 | Initial release.
141 | 
142 | [v0.2.0]: https://github.com/rstacruz/vim-hyperstyle/compare/v0.1.0...v0.2.0
143 | [v0.2.1]: https://github.com/rstacruz/vim-hyperstyle/compare/v0.2.0...v0.2.1
144 | [v0.2.2]: https://github.com/rstacruz/vim-hyperstyle/compare/v0.2.1...v0.2.2
145 | [v0.2.3]: https://github.com/rstacruz/vim-hyperstyle/compare/v0.2.2...v0.2.3
146 | [v0.2.4]: https://github.com/rstacruz/vim-hyperstyle/compare/v0.2.3...v0.2.4
147 | [v0.3.0]: https://github.com/rstacruz/vim-hyperstyle/compare/v0.2.4...v0.3.0
148 | [v0.4.0]: https://github.com/rstacruz/vim-hyperstyle/compare/v0.3.0...v0.4.0
149 | [v0.4.1]: https://github.com/rstacruz/vim-hyperstyle/compare/v0.4.0...v0.4.1
150 | [v0.5.0]: https://github.com/rstacruz/vim-hyperstyle/compare/v0.4.1...v0.5.0
151 | [v0.5.1]: https://github.com/rstacruz/vim-hyperstyle/compare/v0.5.0...v0.5.1
152 | [v0.6.0]: https://github.com/rstacruz/vim-hyperstyle/compare/v0.5.1...v0.6.0
153 | [v0.7.0]: https://github.com/rstacruz/vim-hyperstyle/compare/v0.6.0...v0.7.0
154 | [v0.7.1]: https://github.com/rstacruz/vim-hyperstyle/compare/v0.7.0...v0.7.1
155 | [v0.8.0]: https://github.com/rstacruz/vim-hyperstyle/compare/v0.7.1...v0.8.0
156 | [v0.9.0]: https://github.com/rstacruz/vim-hyperstyle/compare/v0.8.0...v0.9.0
157 | [v0.9.1]: https://github.com/rstacruz/vim-hyperstyle/compare/v0.9.0...v0.9.1
158 | [v0.9.2]: https://github.com/rstacruz/vim-hyperstyle/compare/v0.9.1...v0.9.2
159 | [v0.10.0]: https://github.com/rstacruz/vim-hyperstyle/compare/v0.9.2...v0.10.0
160 | [#2]: https://github.com/rstacruz/vim-hyperstyle/issues/2
161 | [#5]: https://github.com/rstacruz/vim-hyperstyle/issues/5
162 | [@gabrielflorit]: https://github.com/gabrielflorit
163 | 


--------------------------------------------------------------------------------
/python/hyperstyle.py:
--------------------------------------------------------------------------------
  1 | """Expands things.
  2 | 
  3 | >>> expand_statement("m10m")
  4 | "margin: 10em"
  5 | 
  6 | >>> expand_statement("    m10m")
  7 | "    margin: 10em"
  8 | 
  9 | >>> expand_property("pad")
 10 | "padding:"
 11 | """
 12 | import re
 13 | from definitions import definitions
 14 | from indexer import Indexer
 15 | 
 16 | # Indexing
 17 | index = Indexer()
 18 | index.index(definitions)
 19 | 
 20 | # Also see http://www.w3.org/TR/css3-values/
 21 | line_expr = re.compile(r'^(\s*)(.*?)$')
 22 | rule_expr = re.compile(r'^((?:[a-z]+-)*[a-z]+): *([^\s].*?);?$')
 23 | value_expr = re.compile(r'^([^\.\d-]*)(-?\d*\.?\d+)(x|p[tcx]?|e[mx]?|s|m[ms]?|rem|ch|v[wh]|vmin|max|%|)$')
 24 | semicolon_expr = re.compile(r';\s*$')
 25 | selectorlike_expr = re.compile(r'.*(link|visited|before|placeholder|root|after|focus|hover|active|checked|selected).*')
 26 | ends_in_brace_expr = re.compile(r'.*\{\s*$')
 27 | 
 28 | def expand_statement(line, usecolon=True):
 29 |     """Expands a statement line. Executed when pressing <Enter>.
 30 | 
 31 |         "db"          => "display: block"
 32 |         "m3m"         => "margin: 3em"
 33 |         "pad10"       => "padding: 10px"
 34 |         "margin: 3"   => "margin: 3px"
 35 |         "margin: 3px" => "margin: 3px"
 36 |         "margin:3px"  => "margin: 3px"
 37 |     """
 38 |     indent, snippet = split_indent(line)
 39 | 
 40 |     separator = ':' if usecolon else ''
 41 | 
 42 |     out = \
 43 |         expand_statement_simple(snippet, separator) or \
 44 |         expand_statement_with_property(snippet, separator) or \
 45 |         expand_statement_value(snippet, separator)
 46 | 
 47 |     if out: return indent + out
 48 | 
 49 | def expand_statement_simple(snippet, separator):
 50 |     """Check if its a simple statement. (Internal)
 51 | 
 52 |         "db"  => "display: block"
 53 |     """
 54 |     options = index.statements.get(snippet)
 55 |     if not options: return
 56 | 
 57 |     return "%s%s %s" % (options["property"], separator, options["value"])
 58 | 
 59 | def expand_statement_with_property(snippet, separator):
 60 |     """Expands a statement with both shorthand property and value. (Internal)
 61 | 
 62 |         "m10em"  => "margin: 10em"
 63 |         "pad10"  => "padding: 10px"
 64 |     """
 65 |     short, value, unit = split_value(snippet) # ("m","10","em")
 66 |     options = index.properties.get(short) # ("margin", {"unit": "px"})
 67 |     if not options: return
 68 | 
 69 |     xvalue = expand_full_value(value + unit, options["property"])
 70 |     if xvalue: return "%s%s %s" % (options["property"], separator, xvalue)
 71 | 
 72 | def expand_statement_value(snippet, separator):
 73 |     """Expands a statement's unit value. (Internal)
 74 | 
 75 |         "margin: 3"    => "margin: 3px"
 76 |         "margin: 3px"  => "margin: 3px"
 77 |         "margin:3px"   => "margin: 3px"
 78 | 
 79 |     skip it if it's say 'p:before' or anything selector-like.
 80 |     this will also return the same thing for "complete" rules
 81 |     (eg: "margin: auto"), thereby adding semicolons to them.
 82 |     """
 83 |     # skip non-rules (must match "x: y")
 84 |     m = rule_expr.match(snippet)
 85 |     if not m: return
 86 | 
 87 |     # skip "complete" rules ("...;")
 88 |     if semicolon_expr.match(snippet): return
 89 | 
 90 |     prop, value = m.group(1), m.group(2) # ("margin", "3")
 91 |     if is_selectorlike(value): return
 92 | 
 93 |     # skip imbalanced rules (eg, opening of `scaleX(`)
 94 |     if value.count('(') != value.count(')'): return
 95 | 
 96 |     new_value = expand_full_value(value, prop)
 97 |     return "%s%s %s" % (prop, separator, new_value or value)
 98 | 
 99 | def split_value(snippet):
100 |     """Splits a snippet into `property`, `number` and `unit`. Property and unit
101 |     are optional.
102 | 
103 |         # margin: 10px
104 |         "m10p" => ("m", "10", "p")
105 |         "10p"  => ("", "10", "p")
106 |         "10"   => ("", "10", "")
107 |         "??"   => (None, None, None)
108 |     """
109 |     m = value_expr.match(snippet)
110 |     if m:
111 |         return (m.group(1), m.group(2), m.group(3))
112 |     else:
113 |         return (None, None, None)
114 | 
115 | def expand_property(line, usecolon=True):
116 |     """Expands a property. Used to expand on `:` or ` `.
117 | 
118 |     >>> expand_property("m")
119 |     "margin:"
120 |     """
121 |     indent, snippet = split_indent(line)
122 | 
123 |     options = index.properties.get(snippet)
124 |     if not options: return
125 | 
126 |     separator = ':' if usecolon else ''
127 | 
128 |     return "%s%s%s" % (indent, options["property"], separator)
129 | 
130 | def expand_full_value(val, prop):
131 |     """Expands a value of a given property `prop`. Returns the expanded value.
132 | 
133 |         e("3", "margin")  => "3px"
134 |         e("3x", "margin") => "3px"
135 |         e("a", "margin")  => "auto"
136 |         e("l", "float")   => "left"
137 |     """
138 |     options = index.full_properties.get(prop)
139 |     if not options: return
140 | 
141 |     # Account for default units
142 |     # ('margin', '3') => '3px'
143 |     default_unit = options.get('unit')
144 |     if default_unit:
145 |         _, number, unit = split_value(val)
146 |         if number:
147 |             return unitify(number, unit, default_unit)
148 | 
149 |     # Account for preset value keywords
150 |     # ('float', 'l') => 'left'
151 |     values = options.get('values')
152 |     if values:
153 |         return match_keyword(val, values)
154 | 
155 | def match_keyword(value, keywords):
156 |     """Finds the closest match to a `value` given a list of `keywords`.
157 | 
158 |     >>> match_keyword('l', ['left', 'right', 'auto'])
159 |     "left"
160 | 
161 |     >>> match_keyword('xxx', ['inherit', 'auto'])
162 |     None
163 |     """
164 |     for word in keywords:
165 |         if re.match('^'+value, word): return word
166 |     for word in keywords:
167 |         if re.match(value, word): return word
168 | 
169 | def unitify(number, unit, default_unit):
170 |     """Expands a single `number` + `unit` value. If the unit is absent (blank
171 |     string), the `default_unit` will be used instead.
172 | 
173 |         ("10", "", "px")  => "10px"
174 |         ("10", "m")       => "10em"
175 |     """
176 |     if number == "0":
177 |         return number
178 | 
179 |     if unit == "p" or unit == "x":
180 |         unit = "px"
181 |     if unit == "m" or unit == "e":
182 |         unit = "em"
183 |     if unit == "":
184 |         if default_unit == "_":
185 |             unit = ""
186 |         else:
187 |             unit = (default_unit or px)
188 | 
189 |     return number + unit
190 | 
191 | def split_indent(line):
192 |     """(Private) splits a line into its indentation and meat.
193 | 
194 |     >>> (indent, snippet) = split_indent("  db")
195 |     ("  ", "db")
196 |     """
197 |     match = line_expr.match(line)
198 |     return (match.group(1), match.group(2))
199 | 
200 | def is_selectorlike(value):
201 |     """Checks if a line looks like a selector. This is used to prevent
202 |     expansion on things that seem like rules, but are actually selectors.
203 | 
204 |         "pad:10"    => False
205 |         "p:10"      => False
206 |         "p:before"  => True
207 |     """
208 |     if selectorlike_expr.match(value) or ends_in_brace_expr.match(value):
209 |         return True
210 | 


--------------------------------------------------------------------------------
/python/test.py:
--------------------------------------------------------------------------------
  1 | import hyperstyle as cssx
  2 | from definitions import definitions
  3 | import unittest
  4 | 
  5 | class TestCr(unittest.TestCase):
  6 |     def expect(self, source, expected):
  7 |         output = cssx.expand_statement(source)
  8 |         self.assertEqual(output, expected)
  9 | 
 10 |     def test_unparseables(self):
 11 |         self.expect('aoeu', None)
 12 | 
 13 |     def test_display_block(self):
 14 |         self.expect('db', 'display: block')
 15 | 
 16 |     def test_ms_units(self):
 17 |         self.expect('tdur300', 'transition-duration: 300ms')
 18 | 
 19 |     def test_display_block_with_indent(self):
 20 |         self.expect('  db', '  display: block')
 21 | 
 22 |     def test_double_semicolon(self):
 23 |         self.expect('  position: fixed', '  position: fixed')
 24 | 
 25 |     def test_dont_expand_p(self):
 26 |         self.expect('  p', None)
 27 | 
 28 |     def test_mopobo(self):
 29 |         self.expect('m0', 'margin: 0')
 30 |         self.expect('b0', 'border: 0')
 31 |         self.expect('p0', 'padding: 0')
 32 | 
 33 |     def test_unparseables_with_indent(self):
 34 |         self.expect('  aoeu', None)
 35 | 
 36 |     def test_numeric(self):
 37 |         self.expect('m0', 'margin: 0')
 38 | 
 39 |     def test_z_index(self):
 40 |         self.expect('zi0', 'z-index: 0')
 41 |         self.expect('z0', 'z-index: 0')
 42 | 
 43 |     def _test_multi_numeric(self):
 44 |         self.expect('m0 3px', 'margin: 0 3px')
 45 | 
 46 |     def test_numeric_with_em_as_default_unit(self):
 47 |         self.expect('fs3', 'font-size: 3em')
 48 | 
 49 |     def test_numeric_with_unitless_values(self):
 50 |         self.expect('lh3', 'line-height: 3')
 51 | 
 52 |     def test_numeric_with_unitless_values_and_decimal_point(self):
 53 |         self.expect('lh1.5', 'line-height: 1.5')
 54 | 
 55 |     def test_numeric_with_implied_unit(self):
 56 |         self.expect('w10', 'width: 10px')
 57 | 
 58 |     def test_border_0(self):
 59 |         self.expect('b0', 'border: 0')
 60 | 
 61 |     def test_skip_non_numeric_properties(self):
 62 |         self.expect('fw0', None)
 63 | 
 64 |     def test_numeric_negative_with_implied_value(self):
 65 |         self.expect('w-10', 'width: -10px')
 66 | 
 67 |     def test_numeric_em_short(self):
 68 |         self.expect('m2m', 'margin: 2em')
 69 | 
 70 |     def test_numeric_em_short(self):
 71 |         self.expect('m2e', 'margin: 2em')
 72 | 
 73 |     def test_numeric_em(self):
 74 |         self.expect('m2em', 'margin: 2em')
 75 | 
 76 |     def test_numeric_decimal_em(self):
 77 |         self.expect('m2.5m', 'margin: 2.5em')
 78 | 
 79 |     def test_auto_comma(self):
 80 |         self.expect('  font-weight: 400', '  font-weight: 400')
 81 | 
 82 |     def test_auto_space(self):
 83 |         self.expect('  font-weight:400', '  font-weight: 400')
 84 | 
 85 |     def test_auto_space_2(self):
 86 |         self.expect('  opacity:1', '  opacity: 1')
 87 | 
 88 |     def test_auto_space_unknown_property(self):
 89 |         self.expect('  x-y:1', '  x-y: 1')
 90 | 
 91 |     def test_autocomplete_values(self):
 92 |         self.expect('  float: l', '  float: left')
 93 | 
 94 |     def test_flex(self):
 95 |         # should not mess with flex: property
 96 |         self.expect('flex', 'display: flex')
 97 | 
 98 |     def test_flex_grow(self):
 99 |         self.expect('fgrow1', 'flex-grow: 1')
100 | 
101 |     def test_flex_grow_short(self):
102 |         self.expect('fg1', 'flex-grow: 1')
103 | 
104 |     def test_flex_grow_short(self):
105 |         self.expect('fwrap', 'flex-wrap: wrap')
106 | 
107 |     def test_expand_units(self):
108 |         self.expect('width: 3', 'width: 3px')
109 | 
110 |     def test_expand_units_no_space(self):
111 |         self.expect('width:3', 'width: 3px')
112 | 
113 |     def test_position(self):
114 |         self.expect('abs', 'position: absolute')
115 |         self.expect('rel', 'position: relative')
116 | 
117 |     def test_z_index_number(self):
118 |         self.expect('z9', 'z-index: 9')
119 | 
120 |     def test_opacity_number(self):
121 |         self.expect('op0.5', 'opacity: 0.5')
122 | 
123 |     def test_rtl(self):
124 |         self.expect('rtl', 'direction: rtl')
125 | 
126 |     def test_zoom_number(self):
127 |         self.expect('zo1', 'zoom: 1')
128 | 
129 |     def test_font_weights(self):
130 |         self.expect('f1', 'font-weight: 100')
131 |         self.expect('fw1', 'font-weight: 100')
132 |         self.expect('fw100', 'font-weight: 100')
133 |         self.expect('f100', 'font-weight: 100')
134 |         self.expect('under', 'text-decoration: underline')
135 | 
136 |     def test_misc(self):
137 |         self.expect('oh', 'overflow: hidden')
138 |         self.expect('os', 'overflow: scroll')
139 |         self.expect('mo', 'margin: 0')
140 |         self.expect('moa', 'margin: 0 auto')
141 |         self.expect('fn', 'float: none')
142 |         self.expect('fl', 'float: left')
143 | 
144 |     def test_leave_selectors_alone(self):
145 |         self.expect('p:before', None)
146 |         self.expect('p:hover', None)
147 |         self.expect('p::placeholder', None)
148 |         self.expect('cursor:w{', None)
149 | 
150 | class TestSpace(unittest.TestCase):
151 |     def expect(self, source, expected):
152 |         output = cssx.expand_property(source)
153 |         self.assertEqual(output, expected)
154 | 
155 |     def test_simple(self):
156 |         self.expect('m', 'margin:')
157 | 
158 |     def test_display(self):
159 |         self.expect('d', 'display:')
160 | 
161 |     def test_border_right(self):
162 |         self.expect('bri', 'border-right:')
163 | 
164 |     def test_blacklist_of_br(self):
165 |         # Because `br` is a tag. Use `bri`.
166 |         self.expect('br', None)
167 | 
168 |     def test_display_fuzzying(self):
169 |         self.expect('dis', 'display:')
170 |         self.expect('disp', 'display:')
171 |         self.expect('displ', 'display:')
172 | 
173 |     def test_alias_fuzzying(self):
174 |         self.expect('bgcolor', 'background-color:')
175 | 
176 |     def test_border(self):
177 |         self.expect('bor', 'border:')
178 | 
179 |     def test_simple_2(self):
180 |         self.expect('tt', 'text-transform:')
181 | 
182 |     def test_expansion_with_hyphens(self):
183 |         self.expect('border-co', 'border-color:')
184 |         self.expect('borco', 'border-color:')
185 | 
186 |     def test_font_shortcuts(self):
187 |         self.expect('fow', 'font-weight:')
188 |         self.expect('fw', 'font-weight:')
189 |         self.expect('fos', 'font-size:')
190 |         self.expect('fs', 'font-size:')
191 |         self.expect('fost', 'font-style:')
192 |         self.expect('fst', 'font-style:')
193 |         self.expect('fova', 'font-variant:')
194 |         self.expect('fov', 'font-variant:')
195 |         self.expect('fv', 'font-variant:')
196 |         self.expect('fvar', 'font-variant:')
197 | 
198 |     def test_padding_shortcuts(self):
199 |         self.expect('pad', 'padding:')
200 |         self.expect('padt', 'padding-top:')
201 |         self.expect('padl', 'padding-left:')
202 |         self.expect('padb', 'padding-bottom:')
203 |         self.expect('padr', 'padding-right:')
204 |         self.expect('padt', 'padding-top:')
205 |         self.expect('padl', 'padding-left:')
206 |         self.expect('padb', 'padding-bottom:')
207 |         self.expect('padr', 'padding-right:')
208 | 
209 |     def test_margin_shortcuts(self):
210 |         self.expect('mar', 'margin:')
211 |         self.expect('mart', 'margin-top:')
212 |         self.expect('marl', 'margin-left:')
213 |         self.expect('marb', 'margin-bottom:')
214 |         self.expect('marr', 'margin-right:')
215 |         self.expect('mt', 'margin-top:')
216 |         self.expect('ml', 'margin-left:')
217 |         self.expect('mb', 'margin-bottom:')
218 |         self.expect('mr', 'margin-right:')
219 | 
220 |     def test_border_shortcuts(self):
221 |         self.expect('boc', 'border-color:')
222 |         self.expect('bbo', 'border-bottom:')
223 |         self.expect('bbot', 'border-bottom:')
224 |         self.expect('bto', 'border-top:')
225 |         self.expect('btop', 'border-top:')
226 |         self.expect('bri', 'border-right:')
227 |         self.expect('brig', 'border-right:')
228 |         self.expect('borr', 'border-right:')
229 |         self.expect('bs', 'box-shadow:')
230 |         self.expect('bos', 'box-shadow:')
231 |         self.expect('bot', 'bottom:')
232 |         self.expect('bott', 'bottom:')
233 |         self.expect('borr', 'border-right:')
234 |         self.expect('borl', 'border-left:')
235 |         self.expect('borb', 'border-bottom:')
236 |         self.expect('bortop', 'border-top:')
237 |         self.expect('bort', 'border-top:')
238 |         self.expect('bsh', 'box-shadow:')
239 |         self.expect('bs', 'box-shadow:')
240 |         self.expect('bsi', 'box-sizing:')
241 |         self.expect('bsize', 'box-sizing:')
242 | 
243 |     def test_misc_shortcuts(self):
244 |         self.expect('tl', 'table-layout:')
245 |         self.expect('ta', 'text-align:')
246 |         self.expect('tb', None)
247 |         self.expect('tc', None)
248 |         self.expect('td', 'text-decoration:')
249 |         self.expect('te', 'text-align:')
250 |         self.expect('tf', 'transform:')
251 |         self.expect('tg', None)
252 |         self.expect('tr', 'transition:')
253 | 
254 | class TestSelectorLike(unittest.TestCase):
255 |     def expect(self, input, expected):
256 |         output = cssx.is_selectorlike(input)
257 |         self.assertEqual(not not output, expected)
258 | 
259 |     def test_simple(self):
260 |         self.expect("pad:10", False)
261 | 
262 |     def test_simple_2(self):
263 |         self.expect("p:10", False)
264 | 
265 |     def test_before(self):
266 |         self.expect("p:before", True)
267 | 
268 | class TestExpanders(unittest.TestCase):
269 |     def keyword(self, a, b):
270 |         return cssx.match_keyword(a, b)
271 | 
272 |     def full(self, prop, val):
273 |         return cssx.expand_full_value(prop, val)
274 | 
275 |     def test_simple(self):
276 |         self.assertEqual(self.keyword('l', ['left', 'right']), 'left')
277 | 
278 |     def test_prioritize_prefixes(self):
279 |         self.assertEqual(self.keyword('r', ['lefrt', 'right']), 'right')
280 | 
281 |     def test_no_matches(self):
282 |         self.assertEqual(self.keyword('x', ['lert', 'right']), None)
283 | 
284 |     def test_auto_unit(self):
285 |         self.assertEqual(self.full('3', 'margin'), '3px')
286 | 
287 |     def test_keyword_for_margin(self):
288 |         self.assertEqual(self.full('a', 'margin'), 'auto')
289 | 
290 |     def test_keyword_for_text_align(self):
291 |         self.assertEqual(self.full('le', 'text-align'), 'left')
292 | 
293 |     def test_keyword_for_vertical_align(self):
294 |         self.assertEqual(self.full('mid', 'vertical-align'), 'middle')
295 | 
296 |     def test_expand_unit(self):
297 |         self.assertEqual(self.full('3x', 'margin'), '3px')
298 | 
299 |     def test_leave_alone(self):
300 |         self.assertEqual(self.full('aoeuaoeu', 'margin'), None)
301 | 
302 | # TODO:
303 | # - [x] autocompleting values (float: l => float: left)
304 | # - [x] auto-uniting values (margin: 3 => margin: 3px)
305 | # - [ ] better autocompleting values (jc:s => justify-content: flex-start)
306 | # - [ ] multi numeric (m0 3 => margin: 0 3px)
307 | 
308 | if __name__ == '__main__':
309 |     unittest.main()
310 | 


--------------------------------------------------------------------------------
/python/definitions.py:
--------------------------------------------------------------------------------
  1 | """
  2 | A list of CSS properties to expand.
  3 | Format:
  4 | 
  5 |     (property, [aliases], unit, [values])
  6 | 
  7 | - property : (String) the full CSS property name.
  8 | - aliases : (String list) a list of aliases for this shortcut.
  9 | - unit : (String) when defined, assumes that the property has a value with a
 10 |   unit. When the value is numberless (eg, `margin:12`), the given unit will
 11 |   be assumed (`12px`). Set this to `_` for unitless numbers (eg, line-height).
 12 | - values : (String list) possible values for this property.
 13 | 
 14 | Each property will be accessible through these ways:
 15 | 
 16 | - fuzzy matches of the aliases defined
 17 | - fuzzy matches of the property name, no dashes (eg: mi, min, minh, minhe,
 18 |   minhei...)
 19 | - fuzzy matches with dashes (eg: min-h, min-hei, min-heig...)
 20 | """
 21 | 
 22 | properties = [
 23 |     ("margin", [], "px", ["auto"]),
 24 |     ("width", [], "px", ["auto"]),
 25 |     ("height", [], "px", ["auto"]),
 26 |     ("padding", [], "px", ["auto"]),
 27 |     ("border", [], None, None),
 28 |     ("outline", [], None, None),
 29 |     ("left", [], "px", None),
 30 |     ("top", [], "px", None),
 31 |     ("bottom", [], "px", None),
 32 |     ("right", [], "px", None),
 33 |     ("background", ["bground"], None, ["transparent"]),
 34 |     ("min-height", ["mheight"], "px", ["auto"]),
 35 |     ("min-width", ["mwidth"], "px", ["auto"]),
 36 |     ("max-height", ["xheight","mxheight"], "px", ["auto"]),
 37 |     ("max-width", ["xwidth","mxheight"], "px", ["auto"]),
 38 | 
 39 |     ("margin-left", ["mleft","marleft"], "px", ["auto"]),
 40 |     ("margin-right", ["mright","marright"], "px", ["auto"]),
 41 |     ("margin-top", ["mtop","martop"], "px", ["auto"]),
 42 |     ("margin-bottom", ["mbottom","marbottom"], "px", ["auto"]),
 43 | 
 44 |     ("padding-left", ["pleft","padleft"], "px", None),
 45 |     ("padding-right", ["pright","padright"], "px", None),
 46 |     ("padding-top", ["ptop","padtop"], "px", None),
 47 |     ("padding-bottom", ["pbottom","padbottom"], "px", None),
 48 | 
 49 |     ("z-index", [], "_", None),
 50 | 
 51 |     ("display", [], None, ["none", "block", "inline", "inline-block", "table", "table-cell", "table-row"]),
 52 |     ("text-align", ["talign"], None, ["left", "right", "justify", "center", "inherit"]),
 53 | 
 54 |     ("overflow", ["oflow"], None, ["visible", "scroll", "hidden", "auto", "inherit"]),
 55 |     ("overflow-x", ["ox"], None, ["visible", "scroll", "hidden", "auto", "inherit"]),
 56 |     ("overflow-y", ["oy"], None, ["visible", "scroll", "hidden", "auto", "inherit"]),
 57 | 
 58 |     ("font", [], None, None),
 59 |     ("font-size", ["fsize", "fosize"], "em", None),
 60 |     ("font-style", ["fstyle", "fostyle"], None, ["italic","normal","inherit"]),
 61 |     ("font-weight", ["fweight", "foweight"], None, ["100","200","300","400","500","600","700","800","900","bold","normal","inherit"]),
 62 |     ("font-variant", ["fvariant", "fovariant"], None, None),
 63 |     ("font-family", ["ffamily", "family"], None, None),
 64 |     ("line-height", ["lheight", "liheight"], "_", None),
 65 |     ("letter-spacing", ["lspacing", "lespacing"], "px", None),
 66 | 
 67 |     ("transition", ["trans", "tn", "tsition"], None, None),
 68 |     ("transform", ["tform", "xform"], None, None),
 69 |     ("text-transform", ["ttransform"], None, ["uppercase", "lowercase", "capitalize", "none", "full-width", "inherit"]),
 70 |     ("text-decoration", ["tdecoration"], None, ["underline", "none", "line-through", "overline", "inherit", "initial"]),
 71 |     ("text-decoration-line", ["tdline"], None, ["underline", "none", "line-through", "overline", "inherit", "initial"]),
 72 |     ("text-indent", ["tindent"], "px", None),
 73 |     ("text-shadow", ["tshadow", "teshadow"], None, ["none"]),
 74 |     ("table-layout", ["tlayout", "talayout"], None, ["fixed", "auto", "inherit"]),
 75 |     ("vertical-align", ["valign"], None, ["middle","top","bottom","baseline","text-top","text-bottom","sub","super"]),
 76 | 
 77 |     ("transition-duration", ["tduration"], "ms", None),
 78 | 
 79 |     ("float", [], None, ["left", "right", "none", "inherit"]),
 80 |     ("color", [], None, None),
 81 |     ("opacity", [], "_", None),
 82 | 
 83 |     ("border-right", ["bright", "borright"], None, None),
 84 |     ("border-left", ["bleft", "borleft"], None, None),
 85 |     ("border-top", ["btop", "bortop"], None, None),
 86 |     ("border-bottom", ["bbottom", "borbottom"], None, None),
 87 | 
 88 |     ("border-width", ["bwidth"], "px", None),
 89 |     ("border-right-width", ["brwidth"], "px", None),
 90 |     ("border-left-width", ["blwidth"], "px", None),
 91 |     ("border-top-width", ["btwidth"], "px", None),
 92 |     ("border-bottom-width", ["bbwidth"], "px", None),
 93 | 
 94 |     ("border-image", ["borimage"], None, None),
 95 | 
 96 |     ("cursor", [], None, ["wait", "pointer", "auto", "default", "help", "progress", "cell", "crosshair", "text", "vertical-text", "alias", "copy", "move", "not-allowed", "no-drop", "all-scroll", "col-resize", "row-resize", "n-resize", "e-resize", "s-resize", "w-resize", "nw-resize", "ne-resize", "sw-resize", "se-resize", "ew-resize", "ns-resize", "zoom-in", "zoom-out", "grab", "grabbing" ]),
 97 |     ("animation", [], None, None),
 98 | 
 99 |     ("background-image", ["bgimage", "backimage", "bimage"], None, None),
100 |     ("background-color", ["bgcolor", "backcolor", "bcolor"], None, None),
101 |     ("background-size", ["bgsize", "backsize"], None, None),
102 |     ("background-position", ["bgposition", "backposition", "bposition"], None, ["center", "top", "left", "middle", "bottom", "right"]),
103 |     ("background-repeat", ["bgrepeat", "backrepeat", "brepeat"], None, ["repeat-x", "repeat-y", "no-repeat"]),
104 | 
105 |     ("border-radius", ["bradius", "boradius"], "px", None),
106 |     ("border-color", ["bcolor", "bocolor", "borcolor"], "px", None),
107 |     ("border-collapse", ["bcollapse", "borcollapse", "collapse"], None, ["collapse","auto","inherit"]),
108 | 
109 |     ("box-shadow", ["bshadow", "boshadow"], None, ["none"]),
110 |     ("box-sizing", ["bsizing", "bsize", "boxsize"], None, ["border-box", "content-box", "padding-box"]),
111 | 
112 |     ("position", [], None, ["absolute", "relative", "fixed", "static", "inherit"]),
113 |     ("flex", [], None, None),
114 |     ("white-space", ["wspace", "whispace", "whspace", "wispace"], None, ["nowrap", "normal", "pre", "pre-wrap", "pre-line", "inherit"]),
115 | 
116 |     ("visibility", [], None, ["visible", "hidden", "collapse", "inherit"]),
117 | 
118 |     ("flex-grow", ["fgrow", "flgrow", "flegrow"], "_", None),
119 |     ("flex-shrink", ["fshrink", "flshrink", "fleshrink"], "_", None),
120 |     ("flex-direction", ["fdirection", "fldirection", "fledirection"], None, None),
121 |     ("flex-wrap", ["fwrap", "flwrap", "flewrap"], None, None),
122 |     ("align-items", ["aitems", "alitems"], None, ["flex-start", "flex-end", "center", "baseline", "stretch", "inherit"]),
123 |     ("justify-content", ["jcontent", "jucontent", "juscontent", "justcontent"], None, ["flex-start", "flex-end", "center", "space-around", "space-between", "inherit"]),
124 |     ("order", [], "_", None),
125 | 
126 |     ("page-break-after", ["pbafter"], None, ["always", "auto", "avoid", "left", "right", "inherit"]),
127 |     ("page-break-before", ["pbbefore"], None, ["always", "auto", "avoid", "left", "right", "inherit"]),
128 |     ("perspective", [], None, None),
129 |     ("perspective-origin", ["porigin"], None, None),
130 |     ("word-break", ["wbreak"], None, []),
131 |     ("quotes", [], None, None),
132 |     ("content", [], None, None),
133 |     ("clear", [], None, ["left", "right", "both", "inherit"]),
134 |     ("zoom", [], "_", None),
135 |     ("direction", [], None, ["ltr", "rtl", "inherit"]),
136 | 
137 |     ("list-style", ["lstyle"], None, ["none", "square", "disc", "inside", "outside", "inherit", "initial", "unset", "decimal", "georgian"]),
138 | ]
139 | 
140 | """
141 | A list of CSS statements to expand.
142 | 
143 | This differs from `properties` as this defines shortcuts for an entire statement.
144 | For instance, `dib<Enter>` will expand to `display: inline-block`.
145 | 
146 | Each line is in this format:
147 | 
148 |     (property, value, alias)
149 | 
150 | The following options are available:
151 | 
152 | - alias : (String list) see `property_list` on how aliases work.
153 | """
154 | 
155 | statements = [
156 |     ("display", "block", ["dblock"]),
157 |     ("display", "inline", ["dinline"]),
158 |     ("display", "inline-block", ["diblock"]),
159 |     ("display", "inline-flex", ["diflex"]),
160 |     ("display", "table", ["dtable", "table"]),
161 |     ("display", "table-cell", ["dtcell","cell","tablecell","table-cell"]),
162 |     ("display", "table-row", ["dtrow","row","tablerow","table-row"]),
163 | 
164 |     ("float", "left", ["fleft", "flleft", "floleft"]),
165 |     ("float", "right", ["fright", "flright", "floright"]),
166 |     ("float", "none", ["fnone", "flnone", "flonone"]),
167 | 
168 |     ("display", "none", ["dnone"]),
169 |     ("display", "flex", ["dflex", "flex"]),
170 | 
171 |     ("font-weight", "normal", ["fwnormal"]),
172 |     ("font-weight", "bold", ["fwbold", "bold"]),
173 |     ("font-style", "italic", ["fsitalic", "italic"]),
174 |     ("font-style", "normal", ["fnormal"]),
175 | 
176 |     ("border", "0", ["b0"]),
177 |     ("padding", "0", ["p0","po"]),
178 |     ("margin", "0", ["m0","mo"]),
179 |     ("margin", "0 auto", ["m0a", "moa"]),
180 | 
181 |     ("overflow", "hidden", ["ohidden"]),
182 |     ("overflow", "scroll", ["oscroll"]),
183 |     ("overflow", "auto", ["oauto"]),
184 |     ("overflow", "visible", ["ovisible"]),
185 | 
186 |     ("overflow-x", "hidden", ["oxhidden"]),
187 |     ("overflow-x", "scroll", ["oxscroll"]),
188 |     ("overflow-x", "auto", ["oxauto"]),
189 |     ("overflow-x", "visible", ["oxvisible"]),
190 | 
191 |     ("overflow-y", "hidden", ["oyhidden"]),
192 |     ("overflow-y", "scroll", ["oyscroll"]),
193 |     ("overflow-y", "auto", ["oyauto"]),
194 |     ("overflow-y", "visible", ["oyvisible"]),
195 | 
196 |     ("font-weight", "100", ["f100", "fw100"]),
197 |     ("font-weight", "200", ["f200", "fw200"]),
198 |     ("font-weight", "300", ["f300", "fw300"]),
199 |     ("font-weight", "400", ["f400", "fw400"]),
200 |     ("font-weight", "500", ["f500", "fw500"]),
201 |     ("font-weight", "600", ["f600", "fw600"]),
202 |     ("font-weight", "700", ["f700", "fw700"]),
203 |     ("font-weight", "800", ["f800", "fw800"]),
204 |     ("font-weight", "900", ["f900", "fw900"]),
205 | 
206 |     ("border", "0", ["b0"]),
207 |     ("border-collapse", "collapse", ["bccollapse"]),
208 |     ("border-collapse", "separate", ["bcseparate"]),
209 | 
210 |     ("background-repeat", "repeat-x", [ "brx", "rx", "bgrx", "repeatx" ]),
211 |     ("background-repeat", "repeat-y", [ "bry", "ry", "bgry", "repeaty" ]),
212 |     ("background-repeat", "no-repeat", [ "brnorepeat", "norepeat"]),
213 | 
214 |     ("background-size", "cover", ["cover"]),
215 |     ("background-size", "contain", ["contain"]),
216 | 
217 |     ("cursor", "pointer", ["cupointer", "curpointer"]),
218 |     ("cursor", "wait", ["cuwait", "curwait"]),
219 |     ("cursor", "busy", ["cubusy", "curbusy"]),
220 |     ("cursor", "text", ["cutext", "curtext"]),
221 | 
222 |     ("vertical-align", "middle", ["vamiddle"]),
223 |     ("vertical-align", "top", ["vatop"]),
224 |     ("vertical-align", "bottom", ["vabottom"]),
225 |     ("vertical-align", "sub", ["vasub"]),
226 |     ("vertical-align", "super", ["vasuper"]),
227 |     ("vertical-align", "baseline", ["vabline", "vabaseline", "baseline"]),
228 |     ("vertical-align", "text-top", ["vattop"]),
229 |     ("vertical-align", "text-bottom", ["vattbottom"]),
230 | 
231 |     ("visibility", "visible", ["vvisible","visible"]),
232 |     ("visibility", "hidden", ["vhidden", "vishidden", "vihidden", "hidden", "hide"]),
233 |     ("visibility", "collapse", ["vcollapse", "viscollapse", "vicollapse"]),
234 | 
235 |     ("clear", "both", ["cboth"]),
236 |     ("clear", "right", ["cright"]),
237 |     ("clear", "left", ["cleft"]),
238 | 
239 |     ("content", "''", ["content"]),
240 | 
241 |     ("text-transform", "uppercase", ["ttupper", "uppercase"]),
242 |     ("text-transform", "lowercase", ["ttlower"]),
243 |     ("text-transform", "none", ["ttnone"]),
244 |     ("text-transform", "capitalize", ["ttcap"]),
245 |     ("text-transform", "full-width", ["ttfull"]),
246 | 
247 |     ("text-align", "left", ["taleft"]),
248 |     ("text-align", "right", ["taright"]),
249 |     ("text-align", "center", ["tacenter", "center"]),
250 |     ("text-align", "justify", ["tajustify", "justify"]),
251 | 
252 |     ("text-decoration", "underline", ["tdunderline", "underline"]),
253 |     ("text-decoration", "none", ["tdnone"]),
254 | 
255 |     ("box-sizing", "border-box", ["bsbox"]),
256 |     ("box-sizing", "padding-box", ["bspadding"]),
257 |     ("box-sizing", "content-box", ["bscontent"]),
258 | 
259 |     ("margin", "auto", ["mauto"]),
260 |     ("margin-left", "auto", ["mlauto"]),
261 |     ("margin-right", "auto", ["mrauto"]),
262 | 
263 |     ("width", "auto", ["wauto"]),
264 |     ("height", "auto", ["hauto"]),
265 | 
266 |     ("position", "relative", ["porelative", "prelative", "relative"]),
267 |     ("position", "fixed", ["pofixed", "pfixed", "fixed"]),
268 |     ("position", "static", ["postatic", "pstatic", "static"]),
269 |     ("position", "absolute", ["poabsolute", "pabsolute", "absolute"]),
270 | 
271 |     ("white-space", "nowrap", ["nowrap"]),
272 |     ("text-overflow", "ellipsis", ["ellipsis"]),
273 | 
274 |     ("flex", "auto", ["flauto"]),
275 | 
276 |     ("align-items", "flex-start", ["aistart"]),
277 |     ("align-items", "flex-end", ["aiend"]),
278 |     ("align-items", "center", ["aicenter"]),
279 |     ("align-items", "stretch", ["aistretch"]),
280 | 
281 |     ("text-overflow", "ellipsis", ["elip", "ellipsis", "toellipsis"]),
282 | 
283 |     ("flex-wrap", "wrap", ["fwrap","flexwrap"]),
284 |     ("flex-wrap", "nowrap", ["fnowrap"]),
285 | 
286 |     ("flex-direction", "row", ["fdrow"]),
287 |     ("flex-direction", "row-reverse", ["fdrreverse"]),
288 |     ("flex-direction", "column", ["fdcolumn"]),
289 |     ("flex-direction", "column-reverse", ["fdcreverse"]),
290 | 
291 |     ("justify-content", "center", ["jccenter"]),
292 |     ("justify-content", "flex-start", ["jcstart"]),
293 |     ("justify-content", "flex-end", ["jcend"]),
294 | 
295 |     ("direction", "ltr", ["ltr","dirltr"]),
296 |     ("direction", "rtl", ["rtl","dirrtl"]),
297 | 
298 |     ("text-shadow", "none", ["tsnone", "teshnone"]),
299 |     ("table-layout", "fixed", ["tlfixed"]),
300 |     ("table-layout", "auto", ["tlauto"]),
301 | 
302 |     ("list-style", "none", ["lsnone"]),
303 |     ("list-style-type", "none", ["lstnone"]),
304 | ]
305 | 
306 | definitions = { "properties": properties, "statements": statements }
307 | 


--------------------------------------------------------------------------------
/doc/hyperstyle.txt:
--------------------------------------------------------------------------------
  1 | *hyperstyle*  Style much faster
  2 | 
  3 | ================================================================================
  4 | PROPERTIES                                               *hyperstyle-properties*
  5 | 
  6 |   *align-items:*                      `ai`[tems] `al`[items] alignitems align-items
  7 |   *animation:*                        `an`[imation]
  8 |   *background:*                       `bg`[round] `ba`[ckground]
  9 |   *background-color:*                 `bgc`[olor] `backc`[olor] `bc`[olor] backgroundc[olor] background-c[olor]
 10 |   *background-image:*                 `bgi`[mage] `backi`[mage] `bi`[mage] backgroundi[mage] background-[image]
 11 |   *background-position:*              `bgp`[osition] `backp`[osition] `bp`[osition] backgroundp[osition] background-p[osition]
 12 |   *background-repeat:*                `bgre`[peat] `backr`[epeat] `bre`[peat] backgroundr[epeat] background-r[epeat]
 13 |   *background-size:*                  `bgs`[ize] `backs`[ize] backgrounds[ize] background-s[ize]
 14 |   *border:*                           `bo`[rder]
 15 |   *border-bottom:*                    `bb`[ottom] `borb`[ottom] borderb[ottom] border-b[ottom]
 16 |   *border-bottom-width:*              `bbw`[idth] borderbottomw[idth] border-bottom-[width]
 17 |   *border-collapse:*                  `bcoll`[apse] borcoll[apse] `coll`[apse] bordercoll[apse] border-coll[apse]
 18 |   *border-color:*                     bcolor `boc`[olor] `borc`[olor] borderc[olor] border-c[olor]
 19 |   *border-image:*                     `bori`[mage] borderi[mage] border-i[mage]
 20 |   *border-left:*                      `bl`[eft] `borl`[eft] borderl[eft] border-l[eft]
 21 |   *border-left-width:*                `blw`[idth] borderleftw[idth] border-left-[width]
 22 |   *border-radius:*                    `bra`[dius] `bora`[dius] borderra[dius] border-ra[dius]
 23 |   *border-right:*                     `bri`[ght] `borr`[ight] borderr[ight] border-[right]
 24 |   *border-right-width:*               `brw`[idth] borderrightw[idth] border-right-[width]
 25 |   *border-top:*                       `bt`[op] `bort`[op] bordert[op] border-t[op]
 26 |   *border-top-width:*                 `btw`[idth] bordertopw[idth] border-top-[width]
 27 |   *border-width:*                     `bw`[idth] borderw[idth] border-w[idth]
 28 |   *bottom:*                           `bot`[tom]
 29 |   *box-shadow:*                       `bs`[hadow] `bos`[hadow] `box`[shadow] box-shadow
 30 |   *box-sizing:*                       `bsi`[zing] `bsize` `boxsi`[ze] boxsizing box-si[zing]
 31 |   *clear:*                            `cl`[ear]
 32 |   *color:*                            `c`[olor]
 33 |   *content:*                          `con`[tent]
 34 |   *cursor:*                           `cu`[rsor]
 35 |   *direction:*                        `dir`[ection]
 36 |   *display:*                          `d`[isplay]
 37 |   *flex:*                             `fle`[x]
 38 |   *flex-direction:*                   `fd`[irection] `fld`[irection] `fled`[irection] `flexd`[irection] flex-d[irection]
 39 |   *flex-grow:*                        `fg`[row] `flg`[row] `fleg`[row] `flexg`[row] `flex-`[grow]
 40 |   *flex-shrink:*                      `fsh`[rink] `fls`[hrink] `fles`[hrink] `flexs`[hrink] flex-s[hrink]
 41 |   *flex-wrap:*                        `fwr`[ap] `flw`[rap] `flew`[rap] `flexw`[rap] flex-w[rap]
 42 |   *float:*                            `fl`[oat]
 43 |   *font:*                             `f`[ont]
 44 |   *font-family:*                      `ff`[amily] `fa`[mily] `fontf`[amily] font-f[amily]
 45 |   *font-size:*                        `fs`[ize] `fos`[ize] `fonts`[ize] `font-`[size]
 46 |   *font-style:*                       `fst`[yle] `fost`[yle] fontst[yle] font-st[yle]
 47 |   *font-variant:*                     `fv`[ariant] `fov`[ariant] `fontv`[ariant] font-v[ariant]
 48 |   *font-weight:*                      `fw`[eight] `fow`[eight] `fontw`[eight] font-w[eight]
 49 |   *height:*                           `h`[eight]
 50 |   *justify-content:*                  `j`[content] jucontent juscontent justcontent justifycontent justify-content
 51 |   *left:*                             `l`[eft]
 52 |   *letter-spacing:*                   `ls`[pacing] `les`[pacing] `let`[terspacing] letter-spacing
 53 |   *line-height:*                      `lh`[eight] `lih`[eight] `lin`[eheight] line-height
 54 |   *list-style:*                       `lst`[yle] `lis`[tstyle] list-style
 55 |   *margin:*                           `m`[argin]
 56 |   *margin-bottom:*                    `mb`[ottom] `marb`[ottom] marginb[ottom] margin-b[ottom]
 57 |   *margin-left:*                      `ml`[eft] `marl`[eft] marginl[eft] margin-[left]
 58 |   *margin-right:*                     `mr`[ight] `marr`[ight] marginr[ight] margin-r[ight]
 59 |   *margin-top:*                       `mt`[op] `mart`[op] margint[op] margin-t[op]
 60 |   *max-height:*                       `x`[height] `mx`[height] `max`[height] max-height
 61 |   *max-width:*                        `xw`[idth] `m`[xheight] `maxw`[idth] `max-w`[idth]
 62 |   *min-height:*                       `mh`[eight] `mi`[nheight] min-height
 63 |   *min-width:*                        `mw`[idth] `minw`[idth] `min-w`[idth]
 64 |   *opacity:*                          `op`[acity]
 65 |   *order:*                            `or`[der]
 66 |   *outline:*                          `o`[utline]
 67 |   *overflow:*                         `of`[low] `ov`[erflow]
 68 |   *overflow-x:*                       `ox` overflowx overflow-[x]
 69 |   *overflow-y:*                       `oy` overflowy overflow-y
 70 |   *padding:*                          `pa`[dding]
 71 |   *padding-bottom:*                   `pb`[ottom] `padb`[ottom] paddingb[ottom] padding-b[ottom]
 72 |   *padding-left:*                     `pl`[eft] `padl`[eft] paddingl[eft] padding-[left]
 73 |   *padding-right:*                    `pr`[ight] `padr`[ight] paddingr[ight] padding-r[ight]
 74 |   *padding-top:*                      `pt`[op] `padt`[op] paddingt[op] padding-t[op]
 75 |   *page-break-after:*                 `pba`[fter] `pag`[ebreakafter] page-break-after
 76 |   *page-break-before:*                `pbb`[efore] pagebreakb[efore] page-break-b[efore]
 77 |   *perspective:*                      `pe`[rspective]
 78 |   *perspective-origin:*               `por`[igin] perspectiveo[rigin] perspective-[origin]
 79 |   *position:*                         `po`[sition]
 80 |   *quotes:*                           `q`[uotes]
 81 |   *right:*                            `r`[ight]
 82 |   *table-layout:*                     `tl`[ayout] `tala`[yout] `tab`[lelayout] table-layout
 83 |   *text-align:*                       `ta`[lign] `te`[xtalign] text-align
 84 |   *text-decoration:*                  `td`[ecoration] `textd`[ecoration] text-d[ecoration]
 85 |   *text-decoration-line:*             `tdl`[ine] textdecorationl[ine] text-decoration-[line]
 86 |   *text-indent:*                      `ti`[ndent] `texti`[ndent] text-i[ndent]
 87 |   *text-shadow:*                      `tsh`[adow] `tes`[hadow] `texts`[hadow] text-s[hadow]
 88 |   *text-transform:*                   `tt`[ransform] `textt`[ransform] text-t[ransform]
 89 |   *top:*                              `t`[op]
 90 |   *transform:*                        `tf`[orm] `xf`[orm] transf[orm]
 91 |   *transition:*                       `tr`[ans] `tn` `ts`[ition] transition
 92 |   *transition-duration:*              `tdu`[ration] transitiond[uration] transition-[duration]
 93 |   *vertical-align:*                   `v`[align] verticalalign vertical-align
 94 |   *visibility:*                       `vi`[sibility]
 95 |   *white-space:*                      `ws`[pace] `wh`[ispace] whspace `wis`[pace] whitespace white-space
 96 |   *width:*                            `w`[idth]
 97 |   *word-break:*                       `wb`[reak] `wo`[rdbreak] word-break
 98 |   *z-index:*                          `z`[index] z-index
 99 |   *zoom:*                             `zo`[om]
100 | 
101 | ================================================================================
102 | STATEMENTS                                               *hyperstyle-statements*
103 | 
104 |   *align-items:* *center*             `aic`[enter]
105 |   *align-items:* *flex-end*           `aie`[nd]
106 |   *align-items:* *flex-start*         `ai`[start]
107 |   *align-items:* *stretch*            `aistr`[etch]
108 |   *background-repeat:* *no-repeat*    `brn`[orepeat] `n`[orepeat]
109 |   *background-repeat:* *repeat-x*     `brx` `rx` `bg`[rx] `re`[peatx]
110 |   *background-repeat:* *repeat-y*     `bry` `ry` `bgry` repeaty
111 |   *background-size:* *contain*        `con`[tain]
112 |   *background-size:* *cover*          `co`[ver]
113 |   *border-collapse:* *collapse*       `bc`[collapse]
114 |   *border-collapse:* *separate*       `bcs`[eparate]
115 |   *border:* *0*                       `b0`
116 |   *box-sizing:* *border-box*          `bs`[box]
117 |   *box-sizing:* *content-box*         `bsc`[ontent]
118 |   *box-sizing:* *padding-box*         `bsp`[adding]
119 |   *clear:* *both*                     `cb`[oth]
120 |   *clear:* *left*                     `cl`[eft]
121 |   *clear:* *right*                    `cr`[ight]
122 |   *content:* *''*                     `conte`[nt]
123 |   *cursor:* *busy*                    `cub`[usy] `curb`[usy]
124 |   *cursor:* *pointer*                 `cu`[pointer] curpointer
125 |   *cursor:* *text*                    `cut`[ext] `curt`[ext]
126 |   *cursor:* *wait*                    `cuw`[ait] `curw`[ait]
127 |   *direction:* *ltr*                  `l`[tr] `dir`[ltr]
128 |   *direction:* *rtl*                  `rt`[l] `dirr`[tl]
129 |   *display:* *block*                  `d`[block]
130 |   *display:* *flex*                   `df`[lex] `flex`
131 |   *display:* *inline*                 `di`[nline]
132 |   *display:* *inline-block*           `dib`[lock]
133 |   *display:* *inline-flex*            `dif`[lex]
134 |   *display:* *none*                   `dn`[one]
135 |   *display:* *table*                  `dt`[able] `t`[able]
136 |   *display:* *table-cell*             `dtc`[ell] `c`[ell] tablec[ell] table-[cell]
137 |   *display:* *table-row*              `dtr`[ow] `r`[ow] tabler[ow] table-r[ow]
138 |   *flex-direction:* *column*          `fdc`[olumn]
139 |   *flex-direction:* *column-reverse*  `fdcr`[everse]
140 |   *flex-direction:* *row*             `fd`[row]
141 |   *flex-direction:* *row-reverse*     `fdrr`[everse]
142 |   *flex-wrap:* *nowrap*               `fnow`[rap]
143 |   *flex-wrap:* *wrap*                 `fwr`[ap] `flexw`[rap]
144 |   *flex:* *auto*                      `fla`[uto]
145 |   *float:* *left*                     `f`[left] flleft floleft
146 |   *float:* *none*                     `fn`[one] `fln`[one] `flon`[one]
147 |   *float:* *right*                    `fr`[ight] `flr`[ight] `flor`[ight]
148 |   *font-style:* *italic*              `fs`[italic] `it`[alic]
149 |   *font-style:* *normal*              `fnor`[mal]
150 |   *font-weight:* *100*                `f1`[00] `fw1`[00]
151 |   *font-weight:* *200*                `f2`[00] `fw2`[00]
152 |   *font-weight:* *300*                `f3`[00] `fw3`[00]
153 |   *font-weight:* *400*                `f4`[00] `fw4`[00]
154 |   *font-weight:* *500*                `f5`[00] `fw5`[00]
155 |   *font-weight:* *600*                `f6`[00] `fw6`[00]
156 |   *font-weight:* *700*                `f7`[00] `fw7`[00]
157 |   *font-weight:* *800*                `f8`[00] `fw8`[00]
158 |   *font-weight:* *900*                `f9`[00] `fw9`[00]
159 |   *font-weight:* *bold*               `fwb`[old] `bo`[ld]
160 |   *font-weight:* *normal*             `fw`[normal]
161 |   *height:* *auto*                    `ha`[uto]
162 |   *justify-content:* *center*         `jc`[center]
163 |   *justify-content:* *flex-end*       `jce`[nd]
164 |   *justify-content:* *flex-start*     `jcs`[tart]
165 |   *list-style-type:* *none*           `lst`[none]
166 |   *list-style:* *none*                `ls`[none]
167 |   *margin-left:* *auto*               `ml`[auto]
168 |   *margin-right:* *auto*              `mr`[auto]
169 |   *margin:* *0*                       `m`[0] `mo`
170 |   *margin:* *0* *auto*                `m0a` `moa`
171 |   *margin:* *auto*                    `ma`[uto]
172 |   *overflow-x:* *auto*                `oxa`[uto]
173 |   *overflow-x:* *hidden*              `ox`[hidden]
174 |   *overflow-x:* *scroll*              `oxs`[croll]
175 |   *overflow-x:* *visible*             `oxv`[isible]
176 |   *overflow-y:* *auto*                `oya`[uto]
177 |   *overflow-y:* *hidden*              `oy`[hidden]
178 |   *overflow-y:* *scroll*              `oys`[croll]
179 |   *overflow-y:* *visible*             `oyv`[isible]
180 |   *overflow:* *auto*                  `oa`[uto]
181 |   *overflow:* *hidden*                `o`[hidden]
182 |   *overflow:* *scroll*                `os`[croll]
183 |   *overflow:* *visible*               `ov`[isible]
184 |   *padding:* *0*                      `p0` `po`
185 |   *position:* *absolute*              `poa`[bsolute] `pa`[bsolute] `ab`[solute]
186 |   *position:* *fixed*                 `pof`[ixed] `pf`[ixed] `fi`[xed]
187 |   *position:* *relative*              `por`[elative] `pr`[elative] `rel`[ative]
188 |   *position:* *static*                `pos`[tatic] `ps`[tatic] `s`[tatic]
189 |   *table-layout:* *auto*              `tla`[uto]
190 |   *table-layout:* *fixed*             `tl`[fixed]
191 |   *text-align:* *center*              `tac`[enter] `cen`[ter]
192 |   *text-align:* *justify*             `taj`[ustify] `j`[ustify]
193 |   *text-align:* *left*                `tal`[eft]
194 |   *text-align:* *right*               `tar`[ight]
195 |   *text-decoration:* *none*           `tdn`[one]
196 |   *text-decoration:* *underline*      `td`[underline] `un`[derline]
197 |   *text-overflow:* *ellipsis*         `e`[lip] ellipsis `to`[ellipsis]
198 |   *text-shadow:* *none*               `ts`[none] `te`[shnone]
199 |   *text-transform:* *capitalize*      `ttc`[ap]
200 |   *text-transform:* *full-width*      `ttf`[ull]
201 |   *text-transform:* *lowercase*       `ttl`[ower]
202 |   *text-transform:* *none*            `ttn`[one]
203 |   *text-transform:* *uppercase*       `tt`[upper] `u`[ppercase]
204 |   *vertical-align:* *baseline*        `vabl`[ine] `vaba`[seline] `ba`[seline]
205 |   *vertical-align:* *bottom*          `vab`[ottom]
206 |   *vertical-align:* *middle*          `v`[amiddle]
207 |   *vertical-align:* *sub*             `vas`[ub]
208 |   *vertical-align:* *super*           `vasup`[er]
209 |   *vertical-align:* *text-bottom*     `vattb`[ottom]
210 |   *vertical-align:* *text-top*        `vatt`[op]
211 |   *vertical-align:* *top*             `vat`[op]
212 |   *visibility:* *collapse*            `vc`[ollapse] `visc`[ollapse] `vic`[ollapse]
213 |   *visibility:* *hidden*              `vh`[idden] `vish`[idden] `vih`[idden] `h`[idden] `hide`
214 |   *visibility:* *visible*             `vv`[isible] `vi`[sible]
215 |   *white-space:* *nowrap*             `now`[rap]
216 |   *width:* *auto*                     `w`[auto]
217 | 
218 | vim:tw=78:ts=8:ft=help:norl:
219 | 


--------------------------------------------------------------------------------
/REFERENCE.md:
--------------------------------------------------------------------------------
  1 | ## Properties
  2 | 
  3 | | Expansion                           | Shortcuts                                                    |
  4 | | --- | --- |
  5 | | <a name='align-items' href='#align-items'>•</a> **align-items:**                    | <kbd>ai</kbd>tems <kbd>al</kbd>items <u>alignitems</u> <u>align-items</u> |
  6 | | <a name='animation' href='#animation'>•</a> **animation:**                      | <kbd>an</kbd>imation                                         |
  7 | | <a name='background' href='#background'>•</a> **background:**                     | <kbd>bg</kbd>round <kbd>ba</kbd>ckground                     |
  8 | | <a name='background-color' href='#background-color'>•</a> **background-color:**               | <kbd>bgc</kbd>olor <kbd>backc</kbd>olor <kbd>bc</kbd>olor <u>backgroundc</u>olor <u>background-c</u>olor |
  9 | | <a name='background-image' href='#background-image'>•</a> **background-image:**               | <kbd>bgi</kbd>mage <kbd>backi</kbd>mage <kbd>bi</kbd>mage <u>backgroundi</u>mage <u>background-</u>image |
 10 | | <a name='background-position' href='#background-position'>•</a> **background-position:**            | <kbd>bgp</kbd>osition <kbd>backp</kbd>osition <kbd>bp</kbd>osition <u>backgroundp</u>osition <u>background-p</u>osition |
 11 | | <a name='background-repeat' href='#background-repeat'>•</a> **background-repeat:**              | <kbd>bgre</kbd>peat <kbd>backr</kbd>epeat <kbd>bre</kbd>peat <u>backgroundr</u>epeat <u>background-r</u>epeat |
 12 | | <a name='background-size' href='#background-size'>•</a> **background-size:**                | <kbd>bgs</kbd>ize <kbd>backs</kbd>ize <u>backgrounds</u>ize <u>background-s</u>ize |
 13 | | <a name='border' href='#border'>•</a> **border:**                         | <kbd>bo</kbd>rder                                            |
 14 | | <a name='border-bottom' href='#border-bottom'>•</a> **border-bottom:**                  | <kbd>bb</kbd>ottom <kbd>borb</kbd>ottom <u>borderb</u>ottom <u>border-b</u>ottom |
 15 | | <a name='border-bottom-width' href='#border-bottom-width'>•</a> **border-bottom-width:**            | <kbd>bbw</kbd>idth <u>borderbottomw</u>idth <u>border-bottom-</u>width |
 16 | | <a name='border-collapse' href='#border-collapse'>•</a> **border-collapse:**                | <kbd>bcoll</kbd>apse <u>borcoll</u>apse <kbd>coll</kbd>apse <u>bordercoll</u>apse <u>border-coll</u>apse |
 17 | | <a name='border-color' href='#border-color'>•</a> **border-color:**                   | <u>bcolor</u> <kbd>boc</kbd>olor <kbd>borc</kbd>olor <u>borderc</u>olor <u>border-c</u>olor |
 18 | | <a name='border-image' href='#border-image'>•</a> **border-image:**                   | <kbd>bori</kbd>mage <u>borderi</u>mage <u>border-i</u>mage   |
 19 | | <a name='border-left' href='#border-left'>•</a> **border-left:**                    | <kbd>bl</kbd>eft <kbd>borl</kbd>eft <u>borderl</u>eft <u>border-l</u>eft |
 20 | | <a name='border-left-width' href='#border-left-width'>•</a> **border-left-width:**              | <kbd>blw</kbd>idth <u>borderleftw</u>idth <u>border-left-</u>width |
 21 | | <a name='border-radius' href='#border-radius'>•</a> **border-radius:**                  | <kbd>bra</kbd>dius <kbd>bora</kbd>dius <u>borderra</u>dius <u>border-ra</u>dius |
 22 | | <a name='border-right' href='#border-right'>•</a> **border-right:**                   | <kbd>bri</kbd>ght <kbd>borr</kbd>ight <u>borderr</u>ight <u>border-</u>right |
 23 | | <a name='border-right-width' href='#border-right-width'>•</a> **border-right-width:**             | <kbd>brw</kbd>idth <u>borderrightw</u>idth <u>border-right-</u>width |
 24 | | <a name='border-top' href='#border-top'>•</a> **border-top:**                     | <kbd>bt</kbd>op <kbd>bort</kbd>op <u>bordert</u>op <u>border-t</u>op |
 25 | | <a name='border-top-width' href='#border-top-width'>•</a> **border-top-width:**               | <kbd>btw</kbd>idth <u>bordertopw</u>idth <u>border-top-</u>width |
 26 | | <a name='border-width' href='#border-width'>•</a> **border-width:**                   | <kbd>bw</kbd>idth <u>borderw</u>idth <u>border-w</u>idth     |
 27 | | <a name='bottom' href='#bottom'>•</a> **bottom:**                         | <kbd>bot</kbd>tom                                            |
 28 | | <a name='box-shadow' href='#box-shadow'>•</a> **box-shadow:**                     | <kbd>bs</kbd>hadow <kbd>bos</kbd>hadow <kbd>box</kbd>shadow <u>box-shadow</u> |
 29 | | <a name='box-sizing' href='#box-sizing'>•</a> **box-sizing:**                     | <kbd>bsi</kbd>zing <kbd>bsize</kbd> <kbd>boxsi</kbd>ze <u>boxsizing</u> <u>box-si</u>zing |
 30 | | <a name='clear' href='#clear'>•</a> **clear:**                          | <kbd>cl</kbd>ear                                             |
 31 | | <a name='color' href='#color'>•</a> **color:**                          | <kbd>c</kbd>olor                                             |
 32 | | <a name='content' href='#content'>•</a> **content:**                        | <kbd>con</kbd>tent                                           |
 33 | | <a name='cursor' href='#cursor'>•</a> **cursor:**                         | <kbd>cu</kbd>rsor                                            |
 34 | | <a name='direction' href='#direction'>•</a> **direction:**                      | <kbd>dir</kbd>ection                                         |
 35 | | <a name='display' href='#display'>•</a> **display:**                        | <kbd>d</kbd>isplay                                           |
 36 | | <a name='flex' href='#flex'>•</a> **flex:**                           | <kbd>fle</kbd>x                                              |
 37 | | <a name='flex-direction' href='#flex-direction'>•</a> **flex-direction:**                 | <kbd>fd</kbd>irection <kbd>fld</kbd>irection <kbd>fled</kbd>irection <kbd>flexd</kbd>irection <u>flex-d</u>irection |
 38 | | <a name='flex-grow' href='#flex-grow'>•</a> **flex-grow:**                      | <kbd>fg</kbd>row <kbd>flg</kbd>row <kbd>fleg</kbd>row <kbd>flexg</kbd>row <kbd>flex-</kbd>grow |
 39 | | <a name='flex-shrink' href='#flex-shrink'>•</a> **flex-shrink:**                    | <kbd>fsh</kbd>rink <kbd>fls</kbd>hrink <kbd>fles</kbd>hrink <kbd>flexs</kbd>hrink <u>flex-s</u>hrink |
 40 | | <a name='flex-wrap' href='#flex-wrap'>•</a> **flex-wrap:**                      | <kbd>fwr</kbd>ap <kbd>flw</kbd>rap <kbd>flew</kbd>rap <kbd>flexw</kbd>rap <u>flex-w</u>rap |
 41 | | <a name='float' href='#float'>•</a> **float:**                          | <kbd>fl</kbd>oat                                             |
 42 | | <a name='font' href='#font'>•</a> **font:**                           | <kbd>f</kbd>ont                                              |
 43 | | <a name='font-family' href='#font-family'>•</a> **font-family:**                    | <kbd>ff</kbd>amily <kbd>fa</kbd>mily <kbd>fontf</kbd>amily <u>font-f</u>amily |
 44 | | <a name='font-size' href='#font-size'>•</a> **font-size:**                      | <kbd>fs</kbd>ize <kbd>fos</kbd>ize <kbd>fonts</kbd>ize <kbd>font-</kbd>size |
 45 | | <a name='font-style' href='#font-style'>•</a> **font-style:**                     | <kbd>fst</kbd>yle <kbd>fost</kbd>yle <u>fontst</u>yle <u>font-st</u>yle |
 46 | | <a name='font-variant' href='#font-variant'>•</a> **font-variant:**                   | <kbd>fv</kbd>ariant <kbd>fov</kbd>ariant <kbd>fontv</kbd>ariant <u>font-v</u>ariant |
 47 | | <a name='font-weight' href='#font-weight'>•</a> **font-weight:**                    | <kbd>fw</kbd>eight <kbd>fow</kbd>eight <kbd>fontw</kbd>eight <u>font-w</u>eight |
 48 | | <a name='height' href='#height'>•</a> **height:**                         | <kbd>h</kbd>eight                                            |
 49 | | <a name='justify-content' href='#justify-content'>•</a> **justify-content:**                | <kbd>j</kbd>content <u>jucontent</u> <u>juscontent</u> <u>justcontent</u> <u>justifycontent</u> <u>justify-content</u> |
 50 | | <a name='left' href='#left'>•</a> **left:**                           | <kbd>l</kbd>eft                                              |
 51 | | <a name='letter-spacing' href='#letter-spacing'>•</a> **letter-spacing:**                 | <kbd>ls</kbd>pacing <kbd>les</kbd>pacing <kbd>let</kbd>terspacing <u>letter-spacing</u> |
 52 | | <a name='line-height' href='#line-height'>•</a> **line-height:**                    | <kbd>lh</kbd>eight <kbd>lih</kbd>eight <kbd>lin</kbd>eheight <u>line-height</u> |
 53 | | <a name='margin' href='#margin'>•</a> **margin:**                         | <kbd>m</kbd>argin                                            |
 54 | | <a name='margin-bottom' href='#margin-bottom'>•</a> **margin-bottom:**                  | <kbd>mb</kbd>ottom <kbd>marb</kbd>ottom <u>marginb</u>ottom <u>margin-b</u>ottom |
 55 | | <a name='margin-left' href='#margin-left'>•</a> **margin-left:**                    | <kbd>ml</kbd>eft <kbd>marl</kbd>eft <u>marginl</u>eft <u>margin-</u>left |
 56 | | <a name='margin-right' href='#margin-right'>•</a> **margin-right:**                   | <kbd>mr</kbd>ight <kbd>marr</kbd>ight <u>marginr</u>ight <u>margin-r</u>ight |
 57 | | <a name='margin-top' href='#margin-top'>•</a> **margin-top:**                     | <kbd>mt</kbd>op <kbd>mart</kbd>op <u>margint</u>op <u>margin-t</u>op |
 58 | | <a name='max-height' href='#max-height'>•</a> **max-height:**                     | <kbd>x</kbd>height <kbd>mx</kbd>height <kbd>max</kbd>height <u>max-height</u> |
 59 | | <a name='max-width' href='#max-width'>•</a> **max-width:**                      | <kbd>xw</kbd>idth <kbd>m</kbd>xheight <kbd>maxw</kbd>idth <kbd>max-w</kbd>idth |
 60 | | <a name='min-height' href='#min-height'>•</a> **min-height:**                     | <kbd>mh</kbd>eight <kbd>mi</kbd>nheight <u>min-height</u>    |
 61 | | <a name='min-width' href='#min-width'>•</a> **min-width:**                      | <kbd>mw</kbd>idth <kbd>minw</kbd>idth <kbd>min-w</kbd>idth   |
 62 | | <a name='opacity' href='#opacity'>•</a> **opacity:**                        | <kbd>op</kbd>acity                                           |
 63 | | <a name='order' href='#order'>•</a> **order:**                          | <kbd>or</kbd>der                                             |
 64 | | <a name='outline' href='#outline'>•</a> **outline:**                        | <kbd>o</kbd>utline                                           |
 65 | | <a name='overflow' href='#overflow'>•</a> **overflow:**                       | <kbd>of</kbd>low <kbd>ov</kbd>erflow                         |
 66 | | <a name='overflow-x' href='#overflow-x'>•</a> **overflow-x:**                     | <kbd>ox</kbd> <u>overflowx</u> <u>overflow-</u>x             |
 67 | | <a name='overflow-y' href='#overflow-y'>•</a> **overflow-y:**                     | <kbd>oy</kbd> <u>overflowy</u> <u>overflow-y</u>             |
 68 | | <a name='padding' href='#padding'>•</a> **padding:**                        | <kbd>pa</kbd>dding                                           |
 69 | | <a name='padding-bottom' href='#padding-bottom'>•</a> **padding-bottom:**                 | <kbd>pb</kbd>ottom <kbd>padb</kbd>ottom <u>paddingb</u>ottom <u>padding-b</u>ottom |
 70 | | <a name='padding-left' href='#padding-left'>•</a> **padding-left:**                   | <kbd>pl</kbd>eft <kbd>padl</kbd>eft <u>paddingl</u>eft <u>padding-</u>left |
 71 | | <a name='padding-right' href='#padding-right'>•</a> **padding-right:**                  | <kbd>pr</kbd>ight <kbd>padr</kbd>ight <u>paddingr</u>ight <u>padding-r</u>ight |
 72 | | <a name='padding-top' href='#padding-top'>•</a> **padding-top:**                    | <kbd>pt</kbd>op <kbd>padt</kbd>op <u>paddingt</u>op <u>padding-t</u>op |
 73 | | <a name='page-break-after' href='#page-break-after'>•</a> **page-break-after:**               | <kbd>pba</kbd>fter <kbd>pag</kbd>ebreakafter <u>page-break-after</u> |
 74 | | <a name='page-break-before' href='#page-break-before'>•</a> **page-break-before:**              | <kbd>pbb</kbd>efore <u>pagebreakb</u>efore <u>page-break-b</u>efore |
 75 | | <a name='perspective' href='#perspective'>•</a> **perspective:**                    | <kbd>pe</kbd>rspective                                       |
 76 | | <a name='perspective-origin' href='#perspective-origin'>•</a> **perspective-origin:**             | <kbd>por</kbd>igin <u>perspectiveo</u>rigin <u>perspective-</u>origin |
 77 | | <a name='position' href='#position'>•</a> **position:**                       | <kbd>po</kbd>sition                                          |
 78 | | <a name='quotes' href='#quotes'>•</a> **quotes:**                         | <kbd>q</kbd>uotes                                            |
 79 | | <a name='right' href='#right'>•</a> **right:**                          | <kbd>r</kbd>ight                                             |
 80 | | <a name='table-layout' href='#table-layout'>•</a> **table-layout:**                   | <kbd>tl</kbd>ayout <kbd>tala</kbd>yout <kbd>tab</kbd>lelayout <u>table-layout</u> |
 81 | | <a name='text-align' href='#text-align'>•</a> **text-align:**                     | <kbd>ta</kbd>lign <kbd>te</kbd>xtalign <u>text-align</u>     |
 82 | | <a name='text-decoration' href='#text-decoration'>•</a> **text-decoration:**                | <kbd>td</kbd>ecoration <kbd>textd</kbd>ecoration <u>text-d</u>ecoration |
 83 | | <a name='text-decoration-line' href='#text-decoration-line'>•</a> **text-decoration-line:**           | <kbd>tdl</kbd>ine <u>textdecorationl</u>ine <u>text-decoration-</u>line |
 84 | | <a name='text-indent' href='#text-indent'>•</a> **text-indent:**                    | <kbd>ti</kbd>ndent <kbd>texti</kbd>ndent <u>text-i</u>ndent  |
 85 | | <a name='text-shadow' href='#text-shadow'>•</a> **text-shadow:**                    | <kbd>tsh</kbd>adow <kbd>tes</kbd>hadow <kbd>texts</kbd>hadow <u>text-s</u>hadow |
 86 | | <a name='text-transform' href='#text-transform'>•</a> **text-transform:**                 | <kbd>tt</kbd>ransform <kbd>textt</kbd>ransform <u>text-t</u>ransform |
 87 | | <a name='top' href='#top'>•</a> **top:**                            | <kbd>t</kbd>op                                               |
 88 | | <a name='transform' href='#transform'>•</a> **transform:**                      | <kbd>tf</kbd>orm <kbd>xf</kbd>orm <u>transf</u>orm           |
 89 | | <a name='transition' href='#transition'>•</a> **transition:**                     | <kbd>tr</kbd>ans <kbd>tn</kbd> <kbd>ts</kbd>ition <u>transition</u> |
 90 | | <a name='transition-duration' href='#transition-duration'>•</a> **transition-duration:**            | <kbd>tdu</kbd>ration <u>transitiond</u>uration <u>transition-</u>duration |
 91 | | <a name='vertical-align' href='#vertical-align'>•</a> **vertical-align:**                 | <kbd>v</kbd>align <u>verticalalign</u> <u>vertical-align</u> |
 92 | | <a name='visibility' href='#visibility'>•</a> **visibility:**                     | <kbd>vi</kbd>sibility                                        |
 93 | | <a name='white-space' href='#white-space'>•</a> **white-space:**                    | <kbd>ws</kbd>pace <kbd>wh</kbd>ispace <u>whspace</u> <kbd>wis</kbd>pace <u>whitespace</u> <u>white-space</u> |
 94 | | <a name='width' href='#width'>•</a> **width:**                          | <kbd>w</kbd>idth                                             |
 95 | | <a name='word-break' href='#word-break'>•</a> **word-break:**                     | <kbd>wb</kbd>reak <kbd>wo</kbd>rdbreak <u>word-break</u>     |
 96 | | <a name='z-index' href='#z-index'>•</a> **z-index:**                        | <kbd>z</kbd>index <u>z-index</u>                             |
 97 | | <a name='zoom' href='#zoom'>•</a> **zoom:**                           | <kbd>zo</kbd>om                                              |
 98 | 
 99 | ## Statements
100 | 
101 | | Expansion                           | Shortcuts                                                    |
102 | | --- | --- |
103 | | <a name='align-items-center' href='#align-items-center'>•</a> **align-items: center**             | <kbd>aic</kbd>enter                                          |
104 | | <a name='align-items-flex-end' href='#align-items-flex-end'>•</a> **align-items: flex-end**           | <kbd>aie</kbd>nd                                             |
105 | | <a name='align-items-flex-start' href='#align-items-flex-start'>•</a> **align-items: flex-start**         | <kbd>ai</kbd>start                                           |
106 | | <a name='align-items-stretch' href='#align-items-stretch'>•</a> **align-items: stretch**            | <kbd>aistr</kbd>etch                                         |
107 | | <a name='background-repeat-no-repeat' href='#background-repeat-no-repeat'>•</a> **background-repeat: no-repeat**    | <kbd>brn</kbd>orepeat <kbd>n</kbd>orepeat                    |
108 | | <a name='background-repeat-repeat-x' href='#background-repeat-repeat-x'>•</a> **background-repeat: repeat-x**     | <kbd>brx</kbd> <kbd>rx</kbd> <kbd>bg</kbd>rx <kbd>re</kbd>peatx |
109 | | <a name='background-repeat-repeat-y' href='#background-repeat-repeat-y'>•</a> **background-repeat: repeat-y**     | <kbd>bry</kbd> <kbd>ry</kbd> <kbd>bgry</kbd> <u>repeaty</u>  |
110 | | <a name='background-size-contain' href='#background-size-contain'>•</a> **background-size: contain**        | <kbd>con</kbd>tain                                           |
111 | | <a name='background-size-cover' href='#background-size-cover'>•</a> **background-size: cover**          | <kbd>co</kbd>ver                                             |
112 | | <a name='border-collapse-collapse' href='#border-collapse-collapse'>•</a> **border-collapse: collapse**       | <kbd>bc</kbd>collapse                                        |
113 | | <a name='border-collapse-separate' href='#border-collapse-separate'>•</a> **border-collapse: separate**       | <kbd>bcs</kbd>eparate                                        |
114 | | <a name='border-0' href='#border-0'>•</a> **border: 0**                       | <kbd>b0</kbd>                                                |
115 | | <a name='box-sizing-border-box' href='#box-sizing-border-box'>•</a> **box-sizing: border-box**          | <kbd>bs</kbd>box                                             |
116 | | <a name='box-sizing-content-box' href='#box-sizing-content-box'>•</a> **box-sizing: content-box**         | <kbd>bsc</kbd>ontent                                         |
117 | | <a name='box-sizing-padding-box' href='#box-sizing-padding-box'>•</a> **box-sizing: padding-box**         | <kbd>bsp</kbd>adding                                         |
118 | | <a name='clear-both' href='#clear-both'>•</a> **clear: both**                     | <kbd>cb</kbd>oth                                             |
119 | | <a name='clear-left' href='#clear-left'>•</a> **clear: left**                     | <kbd>cl</kbd>eft                                             |
120 | | <a name='clear-right' href='#clear-right'>•</a> **clear: right**                    | <kbd>cr</kbd>ight                                            |
121 | | <a name='content' href='#content'>•</a> **content: ''**                     | <kbd>conte</kbd>nt                                           |
122 | | <a name='cursor-busy' href='#cursor-busy'>•</a> **cursor: busy**                    | <kbd>cub</kbd>usy <kbd>curb</kbd>usy                         |
123 | | <a name='cursor-pointer' href='#cursor-pointer'>•</a> **cursor: pointer**                 | <kbd>cu</kbd>pointer <u>curpointer</u>                       |
124 | | <a name='cursor-text' href='#cursor-text'>•</a> **cursor: text**                    | <kbd>cut</kbd>ext <kbd>curt</kbd>ext                         |
125 | | <a name='cursor-wait' href='#cursor-wait'>•</a> **cursor: wait**                    | <kbd>cuw</kbd>ait <kbd>curw</kbd>ait                         |
126 | | <a name='direction-ltr' href='#direction-ltr'>•</a> **direction: ltr**                  | <kbd>l</kbd>tr <kbd>dir</kbd>ltr                             |
127 | | <a name='direction-rtl' href='#direction-rtl'>•</a> **direction: rtl**                  | <kbd>rt</kbd>l <kbd>dirr</kbd>tl                             |
128 | | <a name='display-block' href='#display-block'>•</a> **display: block**                  | <kbd>d</kbd>block                                            |
129 | | <a name='display-flex' href='#display-flex'>•</a> **display: flex**                   | <kbd>df</kbd>lex <kbd>flex</kbd>                             |
130 | | <a name='display-inline' href='#display-inline'>•</a> **display: inline**                 | <kbd>di</kbd>nline                                           |
131 | | <a name='display-inline-block' href='#display-inline-block'>•</a> **display: inline-block**           | <kbd>dib</kbd>lock                                           |
132 | | <a name='display-inline-flex' href='#display-inline-flex'>•</a> **display: inline-flex**            | <kbd>dif</kbd>lex                                            |
133 | | <a name='display-none' href='#display-none'>•</a> **display: none**                   | <kbd>dn</kbd>one                                             |
134 | | <a name='display-table' href='#display-table'>•</a> **display: table**                  | <kbd>dt</kbd>able <kbd>t</kbd>able                           |
135 | | <a name='display-table-cell' href='#display-table-cell'>•</a> **display: table-cell**             | <kbd>dtc</kbd>ell <kbd>c</kbd>ell <u>tablec</u>ell <u>table-</u>cell |
136 | | <a name='display-table-row' href='#display-table-row'>•</a> **display: table-row**              | <kbd>dtr</kbd>ow <kbd>r</kbd>ow <u>tabler</u>ow <u>table-r</u>ow |
137 | | <a name='flex-direction-column' href='#flex-direction-column'>•</a> **flex-direction: column**          | <kbd>fdc</kbd>olumn                                          |
138 | | <a name='flex-direction-column-reverse' href='#flex-direction-column-reverse'>•</a> **flex-direction: column-reverse**  | <kbd>fdcr</kbd>everse                                        |
139 | | <a name='flex-direction-row' href='#flex-direction-row'>•</a> **flex-direction: row**             | <kbd>fd</kbd>row                                             |
140 | | <a name='flex-direction-row-reverse' href='#flex-direction-row-reverse'>•</a> **flex-direction: row-reverse**     | <kbd>fdrr</kbd>everse                                        |
141 | | <a name='flex-wrap-nowrap' href='#flex-wrap-nowrap'>•</a> **flex-wrap: nowrap**               | <kbd>fnow</kbd>rap                                           |
142 | | <a name='flex-wrap-wrap' href='#flex-wrap-wrap'>•</a> **flex-wrap: wrap**                 | <kbd>fwr</kbd>ap <kbd>flexw</kbd>rap                         |
143 | | <a name='flex-auto' href='#flex-auto'>•</a> **flex: auto**                      | <kbd>fla</kbd>uto                                            |
144 | | <a name='float-left' href='#float-left'>•</a> **float: left**                     | <kbd>f</kbd>left <u>flleft</u> <u>floleft</u>                |
145 | | <a name='float-none' href='#float-none'>•</a> **float: none**                     | <kbd>fn</kbd>one <kbd>fln</kbd>one <kbd>flon</kbd>one        |
146 | | <a name='float-right' href='#float-right'>•</a> **float: right**                    | <kbd>fr</kbd>ight <kbd>flr</kbd>ight <kbd>flor</kbd>ight     |
147 | | <a name='font-style-italic' href='#font-style-italic'>•</a> **font-style: italic**              | <kbd>fs</kbd>italic <kbd>it</kbd>alic                        |
148 | | <a name='font-style-normal' href='#font-style-normal'>•</a> **font-style: normal**              | <kbd>fnor</kbd>mal                                           |
149 | | <a name='font-weight-100' href='#font-weight-100'>•</a> **font-weight: 100**                | <kbd>f1</kbd>00 <kbd>fw1</kbd>00                             |
150 | | <a name='font-weight-200' href='#font-weight-200'>•</a> **font-weight: 200**                | <kbd>f2</kbd>00 <kbd>fw2</kbd>00                             |
151 | | <a name='font-weight-300' href='#font-weight-300'>•</a> **font-weight: 300**                | <kbd>f3</kbd>00 <kbd>fw3</kbd>00                             |
152 | | <a name='font-weight-400' href='#font-weight-400'>•</a> **font-weight: 400**                | <kbd>f4</kbd>00 <kbd>fw4</kbd>00                             |
153 | | <a name='font-weight-500' href='#font-weight-500'>•</a> **font-weight: 500**                | <kbd>f5</kbd>00 <kbd>fw5</kbd>00                             |
154 | | <a name='font-weight-600' href='#font-weight-600'>•</a> **font-weight: 600**                | <kbd>f6</kbd>00 <kbd>fw6</kbd>00                             |
155 | | <a name='font-weight-700' href='#font-weight-700'>•</a> **font-weight: 700**                | <kbd>f7</kbd>00 <kbd>fw7</kbd>00                             |
156 | | <a name='font-weight-800' href='#font-weight-800'>•</a> **font-weight: 800**                | <kbd>f8</kbd>00 <kbd>fw8</kbd>00                             |
157 | | <a name='font-weight-900' href='#font-weight-900'>•</a> **font-weight: 900**                | <kbd>f9</kbd>00 <kbd>fw9</kbd>00                             |
158 | | <a name='font-weight-bold' href='#font-weight-bold'>•</a> **font-weight: bold**               | <kbd>fwb</kbd>old <kbd>bo</kbd>ld                            |
159 | | <a name='font-weight-normal' href='#font-weight-normal'>•</a> **font-weight: normal**             | <kbd>fw</kbd>normal                                          |
160 | | <a name='height-auto' href='#height-auto'>•</a> **height: auto**                    | <kbd>ha</kbd>uto                                             |
161 | | <a name='justify-content-center' href='#justify-content-center'>•</a> **justify-content: center**         | <kbd>jc</kbd>center                                          |
162 | | <a name='justify-content-flex-end' href='#justify-content-flex-end'>•</a> **justify-content: flex-end**       | <kbd>jce</kbd>nd                                             |
163 | | <a name='justify-content-flex-start' href='#justify-content-flex-start'>•</a> **justify-content: flex-start**     | <kbd>jcs</kbd>tart                                           |
164 | | <a name='margin-left-auto' href='#margin-left-auto'>•</a> **margin-left: auto**               | <kbd>ml</kbd>auto                                            |
165 | | <a name='margin-right-auto' href='#margin-right-auto'>•</a> **margin-right: auto**              | <kbd>mr</kbd>auto                                            |
166 | | <a name='margin-0' href='#margin-0'>•</a> **margin: 0**                       | <kbd>m</kbd>0 <kbd>mo</kbd>                                  |
167 | | <a name='margin-0-auto' href='#margin-0-auto'>•</a> **margin: 0 auto**                  | <kbd>m0a</kbd> <kbd>moa</kbd>                                |
168 | | <a name='margin-auto' href='#margin-auto'>•</a> **margin: auto**                    | <kbd>ma</kbd>uto                                             |
169 | | <a name='overflow-x-auto' href='#overflow-x-auto'>•</a> **overflow-x: auto**                | <kbd>oxa</kbd>uto                                            |
170 | | <a name='overflow-x-hidden' href='#overflow-x-hidden'>•</a> **overflow-x: hidden**              | <kbd>ox</kbd>hidden                                          |
171 | | <a name='overflow-x-scroll' href='#overflow-x-scroll'>•</a> **overflow-x: scroll**              | <kbd>oxs</kbd>croll                                          |
172 | | <a name='overflow-x-visible' href='#overflow-x-visible'>•</a> **overflow-x: visible**             | <kbd>oxv</kbd>isible                                         |
173 | | <a name='overflow-y-auto' href='#overflow-y-auto'>•</a> **overflow-y: auto**                | <kbd>oya</kbd>uto                                            |
174 | | <a name='overflow-y-hidden' href='#overflow-y-hidden'>•</a> **overflow-y: hidden**              | <kbd>oy</kbd>hidden                                          |
175 | | <a name='overflow-y-scroll' href='#overflow-y-scroll'>•</a> **overflow-y: scroll**              | <kbd>oys</kbd>croll                                          |
176 | | <a name='overflow-y-visible' href='#overflow-y-visible'>•</a> **overflow-y: visible**             | <kbd>oyv</kbd>isible                                         |
177 | | <a name='overflow-auto' href='#overflow-auto'>•</a> **overflow: auto**                  | <kbd>oa</kbd>uto                                             |
178 | | <a name='overflow-hidden' href='#overflow-hidden'>•</a> **overflow: hidden**                | <kbd>o</kbd>hidden                                           |
179 | | <a name='overflow-scroll' href='#overflow-scroll'>•</a> **overflow: scroll**                | <kbd>os</kbd>croll                                           |
180 | | <a name='overflow-visible' href='#overflow-visible'>•</a> **overflow: visible**               | <kbd>ov</kbd>isible                                          |
181 | | <a name='padding-0' href='#padding-0'>•</a> **padding: 0**                      | <kbd>p0</kbd> <kbd>po</kbd>                                  |
182 | | <a name='position-absolute' href='#position-absolute'>•</a> **position: absolute**              | <kbd>poa</kbd>bsolute <kbd>pa</kbd>bsolute <kbd>ab</kbd>solute |
183 | | <a name='position-fixed' href='#position-fixed'>•</a> **position: fixed**                 | <kbd>pof</kbd>ixed <kbd>pf</kbd>ixed <kbd>fi</kbd>xed        |
184 | | <a name='position-relative' href='#position-relative'>•</a> **position: relative**              | <kbd>por</kbd>elative <kbd>pr</kbd>elative <kbd>rel</kbd>ative |
185 | | <a name='position-static' href='#position-static'>•</a> **position: static**                | <kbd>pos</kbd>tatic <kbd>ps</kbd>tatic <kbd>s</kbd>tatic     |
186 | | <a name='table-layout-auto' href='#table-layout-auto'>•</a> **table-layout: auto**              | <kbd>tla</kbd>uto                                            |
187 | | <a name='table-layout-fixed' href='#table-layout-fixed'>•</a> **table-layout: fixed**             | <kbd>tl</kbd>fixed                                           |
188 | | <a name='text-align-center' href='#text-align-center'>•</a> **text-align: center**              | <kbd>tac</kbd>enter <kbd>cen</kbd>ter                        |
189 | | <a name='text-align-justify' href='#text-align-justify'>•</a> **text-align: justify**             | <kbd>taj</kbd>ustify <kbd>j</kbd>ustify                      |
190 | | <a name='text-align-left' href='#text-align-left'>•</a> **text-align: left**                | <kbd>tal</kbd>eft                                            |
191 | | <a name='text-align-right' href='#text-align-right'>•</a> **text-align: right**               | <kbd>tar</kbd>ight                                           |
192 | | <a name='text-decoration-none' href='#text-decoration-none'>•</a> **text-decoration: none**           | <kbd>tdn</kbd>one                                            |
193 | | <a name='text-decoration-underline' href='#text-decoration-underline'>•</a> **text-decoration: underline**      | <kbd>td</kbd>underline <kbd>un</kbd>derline                  |
194 | | <a name='text-overflow-ellipsis' href='#text-overflow-ellipsis'>•</a> **text-overflow: ellipsis**         | <kbd>e</kbd>lip <u>ellipsis</u> <kbd>to</kbd>ellipsis        |
195 | | <a name='text-shadow-none' href='#text-shadow-none'>•</a> **text-shadow: none**               | <kbd>ts</kbd>none <kbd>te</kbd>shnone                        |
196 | | <a name='text-transform-capitalize' href='#text-transform-capitalize'>•</a> **text-transform: capitalize**      | <kbd>ttc</kbd>ap                                             |
197 | | <a name='text-transform-full-width' href='#text-transform-full-width'>•</a> **text-transform: full-width**      | <kbd>ttf</kbd>ull                                            |
198 | | <a name='text-transform-lowercase' href='#text-transform-lowercase'>•</a> **text-transform: lowercase**       | <kbd>ttl</kbd>ower                                           |
199 | | <a name='text-transform-none' href='#text-transform-none'>•</a> **text-transform: none**            | <kbd>ttn</kbd>one                                            |
200 | | <a name='text-transform-uppercase' href='#text-transform-uppercase'>•</a> **text-transform: uppercase**       | <kbd>tt</kbd>upper <kbd>u</kbd>ppercase                      |
201 | | <a name='vertical-align-baseline' href='#vertical-align-baseline'>•</a> **vertical-align: baseline**        | <kbd>vabl</kbd>ine <kbd>vaba</kbd>seline <kbd>ba</kbd>seline |
202 | | <a name='vertical-align-bottom' href='#vertical-align-bottom'>•</a> **vertical-align: bottom**          | <kbd>vab</kbd>ottom                                          |
203 | | <a name='vertical-align-middle' href='#vertical-align-middle'>•</a> **vertical-align: middle**          | <kbd>v</kbd>amiddle                                          |
204 | | <a name='vertical-align-sub' href='#vertical-align-sub'>•</a> **vertical-align: sub**             | <kbd>vas</kbd>ub                                             |
205 | | <a name='vertical-align-super' href='#vertical-align-super'>•</a> **vertical-align: super**           | <kbd>vasup</kbd>er                                           |
206 | | <a name='vertical-align-text-bottom' href='#vertical-align-text-bottom'>•</a> **vertical-align: text-bottom**     | <kbd>vattb</kbd>ottom                                        |
207 | | <a name='vertical-align-text-top' href='#vertical-align-text-top'>•</a> **vertical-align: text-top**        | <kbd>vatt</kbd>op                                            |
208 | | <a name='vertical-align-top' href='#vertical-align-top'>•</a> **vertical-align: top**             | <kbd>vat</kbd>op                                             |
209 | | <a name='visibility-collapse' href='#visibility-collapse'>•</a> **visibility: collapse**            | <kbd>vc</kbd>ollapse <kbd>visc</kbd>ollapse <kbd>vic</kbd>ollapse |
210 | | <a name='visibility-hidden' href='#visibility-hidden'>•</a> **visibility: hidden**              | <kbd>vh</kbd>idden <kbd>vish</kbd>idden <kbd>vih</kbd>idden <kbd>h</kbd>idden <kbd>hide</kbd> |
211 | | <a name='visibility-visible' href='#visibility-visible'>•</a> **visibility: visible**             | <kbd>vv</kbd>isible <kbd>vi</kbd>sible                       |
212 | | <a name='white-space-nowrap' href='#white-space-nowrap'>•</a> **white-space: nowrap**             | <kbd>now</kbd>rap                                            |
213 | | <a name='width-auto' href='#width-auto'>•</a> **width: auto**                     | <kbd>w</kbd>auto                                             |
214 | 
215 | 


--------------------------------------------------------------------------------