postcss-scrib

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-top
bb border-bottom

d display
  b block # Define a value shortcut by indenting under a property.
  ib inline-block
  tr table-row

c color
bgc 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 */
tr.fancy-class {
  b: solid 1px black;
  d: b;
  c: white;
  bgc: tr;
  overflow: au;
}

/* output.css */
tr.fancy-class { /* <-- 'tr' only affects properties, so the selector remains safe */
  border: solid 1px black;
  display: block;
  color: white;
  background-color: transparent;
  overflow: auto;
}

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-scrib
var shortcuts = 'b border\nd display\n  b block';
postcss([require('postcss-scrib')(shortcuts)]);

// 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.
};
postcss([require('postcss-scrib')(options)]);

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 = require('postcss-scrib');
scrib.parseShortcutText('b border\nd display\n  b block');
// >> {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 margin
mt margin-top
mb margin-bottom
ml margin-left
mr margin-right

b border
bt border-top
bb border-bottom
bl border-left
br border-right

p padding
pt padding-top
pb padding-bottom
pl padding-left
pr padding-right

f font
ff font-family
fs font-size
c color

bg background
bgc background-color

ts text-shadow
bs box-shadow

f float
  l left
  r right