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, as an illustration of what should have been. It also fixes newer syntax compromised by trying to maintain consistency with previous mistakes.

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

| Flag | Description | | --------------------- | ----------------------------------- | | -o, --output <file> | Write output to file | | -w, --watch | Watch input file for changes | | --stdin | Read from stdin | | --no-shorthand | Don't fix shorthand defaults | | --no-axis | Don't fix axis order | | --no-combinators | Don't fix selector combinators | | --ccw | Enable CCW->CW shorthand conversion | | -h, --help | Show help |

See Also

• BritCSS (the catalyst for this project)