PostCSS plugin to let you write shortcuts for your favourite properties and their favourite values.
# my-scrib-shortcuts.txt b border # Define a property shortcut. bt border-topbb border-bottom d display b block # Define a value shortcut by indenting under a property. ib inline-block tr table-row c colorbgc background-color tr transparent # Value shortcuts work for a group of multiple properties too (seperate groups with double-newlines). * au auto # If necessary, Use * for generic value shortcuts (i.e. not tied to any property).
/* Input.css */
/* output.css */
Similar Libraries (may fit your use case better):
- postcss-alias - Custom aliases for CSS properties through an
@alias
rule - postcss-crip - Useful if you want a pre-defined set of shortcuts
Usage
// Pass a list of shortcuts (formatted like the example on top of this readme) as a string to postcss-scribvar shortcuts = 'b border\nd display\n b block';; // OR // Pass in an options object with with 1 of the following keys: 1) shortcuts, 2) file, or 3) tree.var options = shortcuts: 'b border\nd display\n b block' // List of shortcut definitions // OR file: './my-shortcut-file.txt' // Path to a file that contains shortcut definitions (passed directly to fs.readFile). // OR tree: b: 'border' d: 'display' b: 'block' // Alternative intermediate JS representation.;;
See PostCSS docs for examples for your environment.
Intermediate JS representation
Using the tree
option, you have the choice of writing your shortcuts directly in JS, instead of in this plugin's custom format. It is slightly more verbose, but may come in useful in cases where you wish to generate shortcuts programmatically, or modify shortcuts at a later time. Converting the example at the top of this readme into a tree gives us:
b: 'border' bt: 'border-top' bb: 'border-bottom' d: _becomes: 'display' _shortcuts: b: 'block' ib: 'inline-block' tr: 'table-row' c: _becomes: 'color' _shortcuts: tr: 'transparent' bgc: _becomes: 'background-color' _shortcuts: tr: 'transparent' // same _shortcuts object reference as c. '*': _becomes: undefined _shortcuts: au: 'auto'
parseShortcutText
is available as a method on the module if you wish to generate such a tree:
var scrib = ;scrib;// >> {b: 'border', d: 'display', b: 'block'}
Sample Shortcuts
As a reference, here's the shortcuts that I use. I'd suggest to keep the shortcuts tight, and define them only for the props/values you really need (as opposed to going overboard and short-cutting the entire language, then forgetting them all tomorrow morning).
# sneakertack's shortcuts d display b block i inline ib inline-block n none t table tr table-row tc table-cell pos position rel relative abs absolute m marginmt margin-topmb margin-bottomml margin-leftmr margin-right b borderbt border-topbb border-bottombl border-leftbr border-right p paddingpt padding-toppb padding-bottompl padding-leftpr padding-right f fontff font-familyfs font-sizec color bg backgroundbgc background-color ts text-shadowbs box-shadow f float l left r right