postcss-every-unit

A PostCSS plugin that converts every recognized length and time unit in real life to CSS-compatible units.

Want to use light-years, furlongs, or jiffies in your CSS? Now you can!

Note: AI wrote this. It's a shitpost.

Features

• Converts ALL length units to a target unit (default: inches)
• Converts ALL time units to a target unit (default: seconds)
• Properly handles calc() expressions and CSS custom properties
• Supports multiple aliases for each unit (e.g., mi, mile, miles all work)
• Works with any CSS property that accepts length or time values

Installation

npm install postcss-every-unit --save-dev

Live Demo

Want to see it in action? Run the live demo:

npm run build  # Build the plugin first
npm install    # Install demo dependencies
npm run demo   # Start the demo server

This will:

1. Start a live server at http://localhost:8080
2. Watch demo/input.css for changes
3. Show side-by-side input/output CSS in your browser
4. Auto-refresh when you edit the input file

Try editing demo/input.css and watch the conversions happen in real-time!

Usage

PostCSS Config

module.exports = {
  plugins: [
    require('postcss-every-unit')({
      targetLengthUnit: 'in',  // Convert all lengths to inches (default)
      targetTimeUnit: 's',      // Convert all times to seconds (default)
      precision: 6              // Decimal places (0 = no rounding, default: 0)
    })
  ]
}

Examples

Input CSS

.astronomical {
  margin: 0.00000000000000000268478ly; /* light-years */
  padding: 2au 5parsecs;                /* astronomical units & parsecs */
}

.imperial {
  width: 5ft;                           /* feet */
  height: 100miles;                     /* miles */
  border-width: 50furlongs;             /* furlongs */
}

.time {
  animation-delay: 10jiffy;             /* jiffies (1/60 second) */
  transition-duration: 2fortnight;      /* fortnights */
}

.calc-expressions {
  width: calc(5ft + 10yards - 2inches);
  animation: slide 3hours ease-in-out;
}

Output CSS (default options)

.astronomical {
  margin: 105.77in;                     /* converted from light-years */
  padding: 5.8906e+12in 1.215e+18in;    /* AU & parsecs to inches */
}

.imperial {
  width: 60in;                          /* feet to inches */
  height: 6336000in;                    /* miles to inches */
  border-width: 792000in;               /* furlongs to inches */
}

.time {
  animation-delay: 0.166667s;           /* jiffies to seconds */
  transition-duration: 1209600s;        /* fortnights to seconds */
}

.calc-expressions {
  width: calc(60in + 360in - 2in);      /* all converted to inches */
  animation: slide 10800s ease-in-out;  /* hours to seconds */
}

Supported Units

Length Units (→ inches by default)

Metric:

• meter (m, meter, metre)
• centimeter (cm)
• millimeter (mm)
• kilometer (km)
• micrometer (µm, um, micron)
• nanometer (nm)
• picometer (pm)

Imperial/US:

• foot (ft, feet)
• yard (yd)
• mile (mi, miles)
• inch (in)
• mil (thou)

Astronomical:

• light-year (ly, lightyear)
• astronomical unit (au)
• parsec (pc)

Nautical:

• nautical mile (nmi)
• fathom

Small Scale:

• angstrom (Å)
• fermi
• Planck length

Historical/Obscure:

• furlong, chain, rod, league, hand, cubit, barleycorn, link, span, ell

Time Units (→ seconds by default)

Common:

• minute (min)
• hour (h, hr)
• day (d)
• week (w, wk)
• fortnight
• year (y, yr)

Large Scale:

• month (mo)
• decade
• century
• millennium
• eon

Scientific:

• millisecond (ms)
• microsecond (µs, us)
• nanosecond (ns)
• picosecond (ps)
• jiffy
• shake
• Planck time

Options

targetLengthUnit

Type: string Default: 'in'

The CSS unit to convert all length values to. Can be any valid CSS length unit or any unit supported by this plugin.

targetTimeUnit

Type: string Default: 's'

The CSS unit to convert all time values to. Can be any valid CSS time unit or any unit supported by this plugin.

precision

Type: number Default: 0

Number of decimal places to round to. Set to 0 to disable rounding (preserves full precision).

License

MIT