FixCSS

In the design of CSS, mistakes were made. In fact, quite a number. The CSS Working Group says as much, having published an Incomplete List of Mistakes in the Design of CSS.

This library rectifies these failings and allows writing CSS the way it should have been designed. FixCSS automatically converts corrected property names, values, selectors, and syntax into spec-adhering CSS that browsers support as an illustration of what should have been. Newer syntax compromised by trying to maintain consistency with previous mistakes is also converted.

For example, you can write white-space: no-wrap as mentioned as the first item in the list of mistakes, and this library will convert it to white-space: nowrap by the method of your choosing.

• Available on NPM
• Demo on CodePen

Usage#

Client-side#

To use this script, simply include it in your HTML:

<script src="fixcss.js"></script>

That's it. All <style> blocks, inline styles, and future DOM mutations are auto-converted. No build step needed.

Build-time#

# CLI:
node fixcss-cli.js styles.css -o styles.fixed.css

# Or programmatically:
npm install @declanchidlow/fixcss

const { fixCSS } = require("@declanchidlow/fixcss");
const fs = require("fs");

const input = fs.readFileSync("styles.css", "utf8");
fs.writeFileSync("styles.out.css", fixCSS(input));

API Reference#

Core Functions#

fixCSS.fixCSS(css, options?)#

Convert a CSS string from fixed syntax to browser-compatible CSS.

const out = fixCSS.fixCSS(".box { corner-radius: 10px; }");
// -> '.box { border-radius: 10px; }'

Options:

• fixShorthandDefaults (default: true) - Single-value background-size duplicates to both axes, single-value translate() duplicates
• fixAxisOrder (default: true) - Swap vertical-first axis order to horizontal-first for background-position and border-spacing
• fixSelectorCombinators (default: true) - Convert >> → and ++ → ~

fixCSS.convertCCW(css)#

Convert CCW-ordered 4-value shorthands to CW (see mistake #11). This fix is opt-in due to just being numbers which cannot be auto-detected.

// CCW: top, left, bottom, right -> CW: top, right, bottom, left
fixCSS.convertCCW(".x { margin: 10px 20px 30px 40px; }");
// -> '.x { margin: 10px 40px 30px 20px; }'

fixCSS.convertProperties(css)#

Convert only property names (not values or selectors).

Browser Runtime#

fixCSS.start()#

Start observing the DOM for styles and auto-convert. Called automatically on load.

fixCSS.shutdown()#

Stop observing the DOM.

fixCSS.convertPage()#

Manually convert all <style> blocks and inline styles on the page.

fixCSS.debug(flag)#

Enable/disable debug logging to the console.

CLI Usage#

# Convert a file
node fixcss-cli.js input.css -o output.css

# Read from stdin
cat input.css | node fixcss-cli.js --stdin > output.css

# Watch mode
node fixcss-cli.js input.css -o output.css --watch

# With options
node fixcss-cli.js input.css -o output.css --ccw --no-axis

See Also#

• BritCSS (the catalyst for this project)