css-optimizer/readme.txt at master · danielabrantes/css-optimizer · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
CSS prefixer and optimizer.
===========================

Reads css code, automatically inserts browser-specific prefixes and compresses the code.
There is a possibility of caching the result.

----- FEACHURES -----

      Handles both external and embedded styles.

    - Handles css @import directive thus multiple files can be combined into one.
    - Handles rules (ex.@keyframes), pseudoelevents (ex. ::placeholder).
    - Automatically inserts browser-specific prefixes for defined css properties.
    - Replaces image references within CSS with base64_encoded data.
    - Replaces fonts (.woff, .woff2) references within CSS rule @font-face with base64_encoded data.
    - Optimizes the color settings (#00ff77 => #0f7) and property values (0px => 0, -0.5 => -.5).
    - Converts rgb(43, 92, 160), rgb(16.9%, 36.1%, 62.7%), hsl(214.9,57.6%,39.8%) to hex value (#2b5ca0).
    - Removes two or more consecutive spaces.
    - Removes the spaces, if a curly bracket, colon, semicolon or comma is placed before or after them.
    - Removes the last semicolon in the list of properties of the selector or the rule.
    - Removes newline characters and tabs.
    - Writes and reads the compiled data into/from cache.

----- REQUIREMENT -----

This program requires PHP 5.4+

----- EXAMPLE -----

/* File styles.css */

    /* This will be prefixed */
    input[type="search"]::placeholder {
        color: #ffdd55;  /* This will be reduced to #fd5 */
    }
    .some_class {
        background: #1e5799;

        /* This will be prefixed */
        background: linear-gradient(to bottom, #1e5799 0%, #2989d8 50%, #207cca 51%, #7db9e8 100%);

        border: #000000 solid 1px; /* This will be reduced to #000 */

        /* This will be prefixed */
        border-radius: 5px;

        /* This will be prefixed */
        box-sizing: content-box;

        margin: 0em 5px;  /* This will be replaced with 0 ( 0em; )*/
        padding: 5px 0px; /* This will be replaced with 0 ( 0px; )*/

        /* This will be prefixed */
        transition: height 0.25s ease 0.1s; /* This will be reduced to .25s and .1s */

        /* This will be prefixed */
        @keyframes eye {
            90% { transform: none; }
            95% { transform: scaleY(0.1); }
        }

    }

----- RESULT -----

input[type="search"]::-webkit-input-placeholder{
color:#fd5;
}
input[type="search"]::-moz-placeholder{
color:#fd5;
}
input[type="search"]::-ms-input-placeholder{
color:#fd5;
}
input[type="search"]::placeholder{
color:#fd5;
}

.some_class{
background:#1e5799;
background:-webkit-linear-gradient(to bottom,#1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%);
background:-moz-linear-gradient(to bottom, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%);
background:-o-linear-gradient(to bottom, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%);
background:linear-gradient(to bottom,#1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%);
borrder:#000 solid 1px;
-webkit-border-radius:5px;
-moz-border-radius:5px;
border-radius:5px;
-webkit-box-sizing:content-box;
-moz-box-sizing:content-box;
box-sizing:content-box;
margin:0 5px;
padding:5px 0;
-webkit-transition:height .25s ease .1s;
-moz-transition:height .25s ease .1s;
-o-transition:height .25s ease .1s;
transition:height .25s ease .1s;
@-webkit-keyframes eye{
90%{-webkit-transform:none;-moz-transform:none;-ms-transform:none;-o-transform:none;transform:none;}
95%{-webkit-transform:scaleY(0.1);-moz-transform:scaleY(0.1);-ms-transform:scaleY(0.1);-o-transform:scaleY(0.1);transform:scaleY(0.1);}
}
@-moz-keyframes eye{
90%{-webkit-transform:none;-moz-transform:none;-ms-transform:none;-o-transform:none;transform:none;}
95%{-webkit-transform:scaleY(0.1);-moz-transform:scaleY(0.1);-ms-transform:scaleY(0.1);-o-transform:scaleY(0.1);transform:scaleY(0.1);}
}
@-o-keyframes eye{
90%{-webkit-transform:none;-moz-transform:none;-ms-transform:none;-o-transform:none;transform:none;}
95%{-webkit-transform:scaleY(0.1);-moz-transform:scaleY(0.1);-ms-transform:scaleY(0.1);-o-transform:scaleY(0.1);transform:scaleY(0.1);}
}
@keyframes eye{
90%{-webkit-transform:none;-moz-transform:none;-ms-transform:none;-o-transform:none;transform:none;}
95%{-webkit-transform:scaleY(0.1);-moz-transform:scaleY(0.1);-ms-transform:scaleY(0.1);-o-transform:scaleY(0.1);transform:scaleY(0.1);}
}
}

After finishing (removing newlines) the data file will be placed in one line.

The original code: https://github.com/Greenray/css-optimizer.
Copyright (C) 2016 Victor Nabatov greenray.spb@gmail.com