README.md 3.05 KB
Newer Older
Taddeüs Kroes's avatar
Taddeüs Kroes committed
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23
mincss is an extendible CSS minifier written in OCaml. It contains a complete
parser for the CSS3 language, along with consistent type definitions and a
traversal utility function for use in transformation passes.

mincss is currently still in development, finished components are the parser,
stringification (along with whitespace compression), and color compression.
Rulset merging is partially documented below but currently unimplemented.


Features
========

- Whitespace compression
- Color compression
- Creation of shorthand properties (e.g. `font` and `background`)
- Ruleset merging (see below)
- Command-line interface and web interface

Ruleset merging
---------------

Apart from simply writing the CSS in a shorter format (i.e.
whitespace/color/shorthand compression), mincss attempts to restructure rule
Taddeüs Kroes's avatar
Taddeüs Kroes committed
24 25
sets such that the resulting stylesheet is the minimal representation of the
input. For example:
Taddeüs Kroes's avatar
Taddeüs Kroes committed
26 27 28 29 30 31 32 33 34 35 36

    a { color: red }
    p { color: red }

can be written much shorter as:

    a, p { color: red }

Merging selectors is something that is done by the programmer in most cases,
but the example above may occur when multiple different CSS files are merged
into one, or when a large CSS file is structured in such a way that the
Taddeüs Kroes's avatar
Taddeüs Kroes committed
37 38 39
definitions of `a` and `p` are far apart. Another thing that may happen is that
some framework file defines a default style for a selector, that is then
overwritten in a custom stylesheet, for example:
Taddeüs Kroes's avatar
Taddeüs Kroes committed
40

Taddeüs Kroes's avatar
Taddeüs Kroes committed
41
    /* file: framework.css */
Taddeüs Kroes's avatar
Taddeüs Kroes committed
42
    a {
Taddeüs Kroes's avatar
Taddeüs Kroes committed
43
        border: 1px solid red;
Taddeüs Kroes's avatar
Taddeüs Kroes committed
44 45 46 47
    }

    ...

Taddeüs Kroes's avatar
Taddeüs Kroes committed
48
    /* file: my-special-page.css */
Taddeüs Kroes's avatar
Taddeüs Kroes committed
49
    a {
Taddeüs Kroes's avatar
Taddeüs Kroes committed
50
        border-color: blue;
Taddeüs Kroes's avatar
Taddeüs Kroes committed
51 52
    }

Taddeüs Kroes's avatar
Taddeüs Kroes committed
53
which can be merged into:
Taddeüs Kroes's avatar
Taddeüs Kroes committed
54 55

    a {
Taddeüs Kroes's avatar
Taddeüs Kroes committed
56
        border: 1px solid blue;
Taddeüs Kroes's avatar
Taddeüs Kroes committed
57 58 59
    }


Taddeüs Kroes's avatar
Taddeüs Kroes committed
60 61 62 63
Compression phases
==================

To achieve the features listed above, the input stylesheet is rewritten in a
Taddeus Kroes's avatar
Taddeus Kroes committed
64 65 66 67 68 69 70 71
number of steps:

1. Parse the input CSS, producing an Abstract Syntax Tree (AST) in accordance
   with the CSS syntax definition. This eliminates unnecessary whitespaces and
   catches syntax errors.
2. Transform shorthand declarations into a separate declaration for each
   expression in the shorthand.
3. Duplicate rulesets for each of its selectors, so that every ruleset has
Taddeüs Kroes's avatar
Taddeüs Kroes committed
72
   exactly one selector.
Taddeus Kroes's avatar
Taddeus Kroes committed
73 74 75 76 77 78 79 80 81 82 83 84 85
4. Create a new declaration block for each property declaration on each
   selector, e.g. `a,p{color:red;border:blue}` becomes `a{color:red}
   a{border:blue} p{color:red} p{border:blue}`.
5. Prune duplicate declarations (when the same property is overwritten for the
   same selector). Note: this may be disabled with `--no-prune` for stylesheets
   that contain duplication hacks.
6. Combine selectors for identical blocks (as long as the correct order of
   declarations is preserved).
7. Concatenate blocks for identical (combinations of) selectors.
8. Optimize individual declaration blocks by generating shorthand declarations
   and simple compression on expressions (i.e. color compression, removal of
   unnecessary string quotes, etc.).
9. Output the resulting AST with minimal whitespace.
Taddeüs Kroes's avatar
Taddeüs Kroes committed
86 87 88 89 90 91 92 93 94 95 96 97


Building mincss
===============

TODO


Compression scores
==================

TODO: compare to existing minifiers