Library to rectify mistakes in the design of CSS.
npmx.dev/package/@declanchidlow/fixcss
webdev
front-end
css
fixcss
Cleanup README
Declan Chidlow
(Jul 1, 2026, 11:32 AM +0800)
3b5e54da
9e620414
+21
-21
+21
-21
README.md
+21
-21
README.md
···
2
2
<h1>
3
3
FixCSS
4
4
</h1>
5
-
CSS as it *should* have been designed.
5
+
CSS as it <em>should</em> have been designed.
6
6
</div>
7
7
<br/>
8
8
9
9
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](https://wiki.csswg.org/ideas/mistakes/).
10
10
11
-
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.
11
+
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.
12
12
13
13
## Usage
14
14
···
25
25
### Build-time
26
26
27
27
```bash
28
-
# CLI
28
+
# CLI:
29
29
node fixcss-cli.js styles.css -o styles.fixed.css
30
30
31
-
# Or programmatically
31
+
# Or programmatically:
32
32
npm install fixcss
33
33
```
34
34
···
50
50
51
51
```js
52
52
const out = fixCSS.fixCSS(".box { corner-radius: 10px; }");
53
-
// → '.box { border-radius: 10px; }'
53
+
// -> '.box { border-radius: 10px; }'
54
54
```
55
55
56
56
**Options:**
57
57
58
-
- `fixShorthandDefaults` (default: `true`) — Single-value `background-size` duplicates to both axes, single-value `translate()` duplicates
59
-
- `fixAxisOrder` (default: `true`) — Swap vertical-first axis order to horizontal-first for `background-position` and `border-spacing`
60
-
- `fixSelectorCombinators` (default: `true`) — Convert `>>` → ` ` and `++` → `~`
58
+
- `fixShorthandDefaults` (default: `true`) - Single-value `background-size` duplicates to both axes, single-value `translate()` duplicates
59
+
- `fixAxisOrder` (default: `true`) - Swap vertical-first axis order to horizontal-first for `background-position` and `border-spacing`
60
+
- `fixSelectorCombinators` (default: `true`) - Convert `>>` → ` ` and `++` → `~`
61
61
62
62
#### `fixCSS.convertCCW(css)`
63
63
64
-
Convert CCW-ordered 4-value shorthands to CW (see mistake #11). This fix is opt-in, due to just being numbers and there unable to be auto-detected.
64
+
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.
65
65
66
66
```js
67
-
// CCW: top, left, bottom, right → CW: top, right, bottom, left
67
+
// CCW: top, left, bottom, right -> CW: top, right, bottom, left
68
68
fixCSS.convertCCW(".x { margin: 10px 20px 30px 40px; }");
69
-
// → '.x { margin: 10px 40px 30px 20px; }'
69
+
// -> '.x { margin: 10px 40px 30px 20px; }'
70
70
```
71
71
72
72
#### `fixCSS.convertProperties(css)`
···
107
107
node fixcss-cli.js input.css -o output.css --ccw --no-axis
108
108
```
109
109
110
-
| Flag | Description |
111
-
| --------------------- | ---------------------------------- |
112
-
| `-o, --output <file>` | Write output to file |
113
-
| `-w, --watch` | Watch input file for changes |
114
-
| `--stdin` | Read from stdin |
115
-
| `--no-shorthand` | Don't fix shorthand defaults |
116
-
| `--no-axis` | Don't fix axis order |
117
-
| `--no-combinators` | Don't fix selector combinators |
118
-
| `--ccw` | Enable CCW→CW shorthand conversion |
119
-
| `-h, --help` | Show help |
110
+
| Flag | Description |
111
+
| --------------------- | ----------------------------------- |
112
+
| `-o, --output <file>` | Write output to file |
113
+
| `-w, --watch` | Watch input file for changes |
114
+
| `--stdin` | Read from stdin |
115
+
| `--no-shorthand` | Don't fix shorthand defaults |
116
+
| `--no-axis` | Don't fix axis order |
117
+
| `--no-combinators` | Don't fix selector combinators |
118
+
| `--ccw` | Enable CCW->CW shorthand conversion |
119
+
| `-h, --help` | Show help |
120
120
121
121
## See Also
122
122