See #260 - adds a very basic browser client.
authorJakub Pawlowicz <contact@jakubpawlowicz.com>
Fri, 21 Oct 2016 16:05:00 +0000 (18:05 +0200)
committerJakub Pawlowicz <contact@jakubpawlowicz.com>
Thu, 3 Nov 2016 19:06:19 +0000 (20:06 +0100)
Why:

* So there's an easy way to minify files without installing
  clean-css module;

docs/css/home.css [new file with mode: 0644]
docs/css/vendor/normalize.css [new file with mode: 0644]
docs/img/logo.svg [new file with mode: 0644]
docs/index.html [new file with mode: 0644]
docs/js/drag-drop.js [new file with mode: 0644]
docs/js/optimizer-worker.js [new file with mode: 0644]
docs/js/optimizer.js [new file with mode: 0644]

diff --git a/docs/css/home.css b/docs/css/home.css
new file mode 100644 (file)
index 0000000..cf5de0d
--- /dev/null
@@ -0,0 +1,63 @@
+a, article, body, div, fieldset, form, h1, h2, h3, h4, h5, h6, input, label, li, nav, ol, p, section, span, textarea, ul {
+  -moz-box-sizing: border-box;
+  -webkit-box-sizing: border-box;
+  box-sizing: border-box;
+  padding-left: 0;
+  padding-top: 0;
+  margin-left: 0;
+  margin-top: 0;
+}
+
+.logo__link {
+  background: url(../img/logo.svg) no-repeat center 55%;
+  display: block;
+  height: 10rem;
+  outline: none;
+  overflow: hidden;
+  text-indent: -999rem;
+}
+
+.content {
+  line-height: 1.35rem;
+  margin: 0 5% 5rem;
+  width: 90%;
+}
+
+.drag-target {
+  border: 5px dashed hsl(0, 0%, 90%);
+  margin-bottom: 2rem;
+  min-height: 10rem;
+}
+
+.drag-target:empty:before {
+  content: attr(title);
+  color: hsl(0, 0%, 15%);
+  display: block;
+  font-weight: bold;
+  height: inherit;
+  padding-top: 3rem;
+  text-align: center;
+  text-transform: uppercase;
+}
+
+.dropped-files {
+  list-style: none;
+  padding: 1rem;
+}
+
+.dropped-files__file:not(:last-child) {
+  margin-bottom: 0.5rem;
+}
+
+.dropped-files__file:not(.dropped-files__file--optimized) > .dropped-files__file__save {
+  display: none;
+}
+
+.footer {
+  text-align: center;
+  margin-bottom: 2rem;
+}
+
+.footer__heart {
+  color: hsl(0, 100%, 45%);
+}
diff --git a/docs/css/vendor/normalize.css b/docs/css/vendor/normalize.css
new file mode 100644 (file)
index 0000000..ed7b657
--- /dev/null
@@ -0,0 +1,83 @@
+nav,
+section {
+  display: block;
+}
+
+html {
+  font-family: sans-serif;
+  -ms-text-size-adjust: 100%;
+  -webkit-text-size-adjust: 100%;
+}
+
+body {
+  margin: 0;
+}
+
+a {
+  background: transparent;
+}
+
+a:focus {
+  outline: thin dotted;
+}
+
+a:active,
+a:hover {
+  outline: 0;
+}
+
+h1 {
+  font-size: 2em;
+  margin: 0.67em 0;
+}
+
+b,
+strong {
+  font-weight: bold;
+}
+
+img {
+  border: 0;
+}
+
+fieldset {
+  border: 1px solid #c0c0c0;
+  margin: 0 2px;
+  padding: 0.35em 0.625em 0.75em;
+}
+
+button,
+input {
+  font-family: inherit;
+  font-size: 100%;
+  margin: 0;
+}
+
+button,
+input {
+  line-height: normal;
+}
+
+button {
+  text-transform: none;
+}
+
+button,
+html input[type="button"],
+input[type="reset"],
+input[type="submit"] {
+  -webkit-appearance: button;
+  cursor: pointer;
+}
+
+input[type="checkbox"],
+input[type="radio"] {
+  box-sizing: border-box;
+  padding: 0;
+}
+
+button::-moz-focus-inner,
+input::-moz-focus-inner {
+  border: 0;
+  padding: 0;
+}
diff --git a/docs/img/logo.svg b/docs/img/logo.svg
new file mode 100644 (file)
index 0000000..440672b
--- /dev/null
@@ -0,0 +1,27 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg width="204px" height="29px" viewBox="0 0 204 29" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <defs>
+        <path d="M11,0 C11,2 21.1538462,13.1297734 21.1538462,18.0952381 C21.1538462,24.4095238 15.9499996,28.2172852 10.9999996,28.2172852 C6.04999963,28.2172852 0.846153846,24.4095238 0.846153846,18.0952381 C0.846153846,13.217951 11,2 11,0 Z" id="path-1"></path>
+        <mask id="mask-2" maskContentUnits="userSpaceOnUse" maskUnits="objectBoundingBox" x="0" y="0" width="20.3076923" height="28.2172852" fill="white">
+            <use xlink:href="#path-1"></use>
+        </mask>
+    </defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="logo-4" transform="translate(0.000000, -1.000000)">
+            <g id="label" transform="translate(34.000000, 0.300000)" fill="#27AAE1">
+                <path d="M0.37,18.303 C0.37,16.873 0.617,15.521 1.111,14.246 C1.605,12.973 2.3,11.867 3.197,10.932 C4.094,9.995 5.153,9.254 6.376,8.709 C7.598,8.163 8.937,7.89 10.393,7.89 C12.239,7.89 13.857,8.306 15.248,9.138 C16.639,9.97 17.698,11.127 18.426,12.609 L16.515,13.233 C15.916,12.116 15.058,11.238 13.941,10.6 C12.823,9.963 11.601,9.645 10.275,9.645 C9.157,9.645 8.117,9.866 7.155,10.308 C6.193,10.75 5.355,11.361 4.64,12.141 C3.924,12.921 3.366,13.837 2.963,14.89 C2.56,15.944 2.359,17.081 2.359,18.303 C2.359,19.526 2.573,20.676 3.003,21.754 C3.432,22.833 4.003,23.77 4.719,24.562 C5.434,25.356 6.273,25.986 7.235,26.454 C8.196,26.923 9.224,27.156 10.316,27.156 C11.018,27.156 11.713,27.052 12.402,26.844 C13.09,26.636 13.728,26.363 14.313,26.025 C14.898,25.687 15.405,25.291 15.834,24.836 C16.263,24.382 16.556,23.906 16.711,23.412 L18.622,23.958 C18.362,24.66 17.965,25.317 17.433,25.928 C16.9,26.539 16.269,27.066 15.541,27.508 C14.812,27.95 14.013,28.294 13.143,28.541 C12.271,28.788 11.369,28.911 10.433,28.911 C9.003,28.911 7.677,28.632 6.455,28.073 C5.232,27.514 4.173,26.747 3.276,25.772 C2.379,24.796 1.671,23.672 1.151,22.398 C0.629,21.125 0.37,19.759 0.37,18.303 L0.37,18.303 Z" id="Shape"></path>
+                <path d="M25.2220489,0.730957031 L25.2220489,24.6659682 C25.2220489,25.4199682 25.4370489,26.0179682 25.8660489,26.4599682 C26.2950489,26.9019682 26.8860489,27.1229682 27.6400489,27.1229682 C27.9260489,27.1229682 28.2700489,27.0899682 28.6740489,27.0249682 C29.0770489,26.9609682 29.4470489,26.8629682 29.7850489,26.7319682 L30.1750489,28.2929682 C29.7330489,28.4749682 29.1870489,28.6239682 28.5370489,28.7409682 C27.8870489,28.8579682 27.3280489,28.9169682 26.8600489,28.9169682 C25.7680489,28.9169682 24.8900489,28.5849682 24.2270489,27.9219682 C23.5640489,27.2589682 23.2330489,26.3689682 23.2330489,25.2509682 L23.2330489,0.730957031 L25.2220489,0.730957031 Z" id="Shape"></path>
+                <path d="M41.397,28.911 C39.967,28.911 38.641,28.632 37.419,28.073 C36.196,27.514 35.137,26.747 34.24,25.772 C33.343,24.796 32.641,23.672 32.134,22.398 C31.627,21.125 31.374,19.759 31.374,18.303 C31.374,16.873 31.627,15.528 32.134,14.266 C32.641,13.005 33.336,11.901 34.22,10.952 C35.104,10.003 36.157,9.255 37.379,8.709 C38.601,8.163 39.914,7.89 41.318,7.89 C42.748,7.89 44.068,8.17 45.276,8.728 C46.485,9.287 47.531,10.041 48.416,10.99 C49.299,11.939 49.996,13.044 50.502,14.304 C51.009,15.566 51.262,16.898 51.262,18.302 C51.262,18.432 51.256,18.594 51.242,18.789 C51.228,18.984 51.222,19.107 51.222,19.159 L33.402,19.159 C33.48,20.329 33.753,21.415 34.221,22.416 C34.689,23.417 35.28,24.282 35.995,25.01 C36.71,25.738 37.536,26.31 38.472,26.726 C39.408,27.142 40.409,27.35 41.475,27.35 C42.177,27.35 42.872,27.252 43.562,27.057 C44.25,26.863 44.888,26.596 45.473,26.258 C46.058,25.92 46.578,25.511 47.033,25.029 C47.488,24.548 47.845,24.021 48.106,23.449 L49.822,23.918 C49.51,24.646 49.074,25.315 48.515,25.926 C47.956,26.537 47.306,27.064 46.565,27.506 C45.824,27.948 45.011,28.292 44.127,28.539 C43.243,28.788 42.333,28.911 41.397,28.911 L41.397,28.911 Z M49.354,17.601 C49.276,16.406 49.009,15.313 48.554,14.325 C48.099,13.338 47.514,12.486 46.799,11.77 C46.084,11.056 45.258,10.497 44.322,10.093 C43.386,9.691 42.385,9.489 41.319,9.489 C40.253,9.489 39.252,9.691 38.316,10.093 C37.38,10.496 36.554,11.056 35.839,11.77 C35.124,12.486 34.552,13.344 34.123,14.344 C33.694,15.345 33.44,16.431 33.362,17.601 L49.354,17.601 L49.354,17.601 Z" id="Shape"></path>
+                <path d="M60.546,28.911 C59.61,28.911 58.733,28.749 57.913,28.424 C57.094,28.1 56.379,27.657 55.768,27.098 C55.157,26.539 54.682,25.876 54.345,25.11 C54.007,24.343 53.838,23.517 53.838,22.633 C53.838,21.749 54.046,20.943 54.462,20.215 C54.878,19.487 55.462,18.857 56.217,18.323 C56.971,17.79 57.861,17.374 58.888,17.075 C59.915,16.776 61.053,16.627 62.301,16.627 C63.393,16.627 64.498,16.724 65.616,16.919 C66.734,17.114 67.735,17.381 68.619,17.719 L68.619,15.73 C68.619,13.806 68.073,12.279 66.981,11.148 C65.889,10.016 64.407,9.451 62.535,9.451 C61.521,9.451 60.461,9.66 59.357,10.075 C58.252,10.491 57.14,11.09 56.022,11.869 L55.242,10.544 C57.868,8.775 60.338,7.892 62.652,7.892 C65.095,7.892 67.026,8.6 68.444,10.017 C69.861,11.435 70.569,13.391 70.569,15.887 L70.569,25.792 C70.569,26.442 70.842,26.768 71.388,26.768 L71.388,28.523 C71.258,28.548 71.135,28.562 71.017,28.562 L70.685,28.562 C70.217,28.562 69.788,28.4 69.398,28.075 C69.008,27.75 68.813,27.328 68.813,26.807 L68.813,25.13 C67.877,26.352 66.688,27.288 65.245,27.938 C63.802,28.588 62.236,28.911 60.546,28.911 L60.546,28.911 Z M60.936,27.351 C62.444,27.351 63.835,27.072 65.109,26.512 C66.382,25.953 67.332,25.193 67.956,24.231 C68.398,23.711 68.619,23.191 68.619,22.671 L68.619,19.082 C66.643,18.354 64.615,17.99 62.535,17.99 C60.507,17.99 58.869,18.406 57.621,19.238 C56.373,20.071 55.749,21.163 55.749,22.514 C55.749,23.19 55.879,23.827 56.139,24.425 C56.399,25.023 56.763,25.536 57.231,25.965 C57.699,26.394 58.251,26.733 58.888,26.98 C59.525,27.228 60.208,27.351 60.936,27.351 L60.936,27.351 Z" id="Shape"></path>
+                <path d="M93.111,28.5610614 L91.161,28.5610614 L91.161,17.211 C91.161,14.585 90.79,12.674 90.05,11.478 C89.309,10.283 88.119,9.684 86.482,9.684 C85.624,9.684 84.772,9.84 83.927,10.152 C83.082,10.464 82.302,10.907 81.587,11.478 C80.871,12.05 80.241,12.72 79.695,13.487 C79.149,14.254 78.745,15.08 78.486,15.964 L78.486,28.5620614 L76.536,28.5620614 L76.536,8.241 L78.33,8.241 L78.33,13.076 C78.746,12.297 79.266,11.589 79.89,10.951 C80.514,10.314 81.202,9.768 81.957,9.312 C82.711,8.858 83.523,8.507 84.395,8.259 C85.266,8.012 86.156,7.889 87.067,7.889 C89.276,7.889 90.837,8.663 91.747,10.209 C92.657,11.756 93.112,13.973 93.112,16.858 L93.111,28.5610614 Z" id="Shape"></path>
+                <polygon id="Shape" points="98.532 18.81 98.532 17.016 109.763 17.016 109.763 18.81"></polygon>
+                <path d="M114.053,18.303 C114.053,16.873 114.3,15.521 114.794,14.246 C115.288,12.973 115.983,11.867 116.881,10.932 C117.777,9.995 118.837,9.254 120.059,8.709 C121.282,8.163 122.621,7.89 124.077,7.89 C125.923,7.89 127.541,8.306 128.932,9.138 C130.323,9.97 131.382,11.127 132.111,12.609 L130.2,13.233 C129.601,12.116 128.743,11.238 127.626,10.6 C126.508,9.963 125.286,9.645 123.96,9.645 C122.842,9.645 121.802,9.866 120.84,10.308 C119.878,10.75 119.039,11.361 118.324,12.141 C117.609,12.921 117.051,13.837 116.647,14.89 C116.244,15.944 116.043,17.081 116.043,18.303 C116.043,19.526 116.258,20.676 116.687,21.754 C117.116,22.833 117.688,23.77 118.403,24.562 C119.118,25.356 119.957,25.986 120.919,26.454 C121.881,26.923 122.908,27.156 124,27.156 C124.702,27.156 125.397,27.052 126.087,26.844 C126.775,26.636 127.412,26.363 127.997,26.025 C128.582,25.687 129.09,25.291 129.518,24.836 C129.947,24.382 130.24,23.906 130.395,23.412 L132.306,23.958 C132.046,24.66 131.65,25.317 131.117,25.928 C130.584,26.539 129.953,27.066 129.225,27.508 C128.497,27.95 127.698,28.294 126.827,28.541 C125.956,28.788 125.053,28.911 124.117,28.911 C122.686,28.911 121.36,28.632 120.138,28.073 C118.916,27.514 117.857,26.747 116.96,25.772 C116.063,24.796 115.354,23.672 114.834,22.398 C114.312,21.125 114.053,19.759 114.053,18.303 L114.053,18.303 Z" id="Shape"></path>
+                <path d="M142.991,28.911 C141.431,28.911 139.936,28.651 138.507,28.132 C137.076,27.611 135.828,26.832 134.763,25.791 L135.738,24.466 C136.831,25.454 137.962,26.182 139.132,26.65 C140.302,27.118 141.589,27.352 142.992,27.352 C144.761,27.352 146.183,26.982 147.263,26.241 C148.343,25.5 148.882,24.467 148.882,23.14 C148.882,22.516 148.745,21.99 148.472,21.56 C148.2,21.131 147.79,20.768 147.243,20.468 C146.697,20.169 146.021,19.903 145.216,19.669 C144.409,19.435 143.474,19.188 142.407,18.928 C141.263,18.668 140.268,18.407 139.424,18.148 C138.58,17.889 137.884,17.577 137.338,17.212 C136.792,16.847 136.382,16.406 136.109,15.886 C135.836,15.365 135.699,14.703 135.699,13.897 C135.699,12.883 135.894,12 136.284,11.245 C136.675,10.491 137.214,9.867 137.903,9.373 C138.591,8.88 139.384,8.509 140.282,8.262 C141.178,8.015 142.135,7.892 143.148,7.892 C144.734,7.892 146.138,8.159 147.36,8.691 C148.582,9.225 149.531,9.906 150.208,10.738 L149.115,11.791 C148.439,11.012 147.561,10.427 146.483,10.036 C145.404,9.646 144.254,9.451 143.031,9.451 C142.277,9.451 141.569,9.529 140.906,9.685 C140.243,9.841 139.664,10.088 139.171,10.426 C138.677,10.764 138.286,11.199 138.001,11.733 C137.714,12.266 137.571,12.896 137.571,13.624 C137.571,14.223 137.669,14.704 137.864,15.067 C138.059,15.431 138.371,15.744 138.8,16.004 C139.23,16.264 139.781,16.491 140.458,16.686 C141.134,16.881 141.939,17.096 142.876,17.33 C144.149,17.642 145.28,17.941 146.269,18.227 C147.258,18.513 148.082,18.865 148.746,19.28 C149.409,19.696 149.916,20.19 150.267,20.762 C150.618,21.334 150.793,22.062 150.793,22.946 C150.793,24.766 150.084,26.217 148.667,27.295 C147.249,28.372 145.357,28.911 142.991,28.911 L142.991,28.911 Z" id="Shape"></path>
+                <path d="M161.75,28.911 C160.19,28.911 158.695,28.651 157.266,28.132 C155.835,27.611 154.587,26.832 153.522,25.791 L154.497,24.466 C155.59,25.454 156.721,26.182 157.891,26.65 C159.061,27.118 160.348,27.352 161.751,27.352 C163.52,27.352 164.942,26.982 166.022,26.241 C167.102,25.5 167.641,24.467 167.641,23.14 C167.641,22.516 167.504,21.99 167.231,21.56 C166.959,21.131 166.549,20.768 166.002,20.468 C165.456,20.169 164.78,19.903 163.975,19.669 C163.168,19.435 162.233,19.188 161.166,18.928 C160.022,18.668 159.027,18.407 158.183,18.148 C157.339,17.889 156.643,17.577 156.097,17.212 C155.551,16.847 155.141,16.406 154.868,15.886 C154.595,15.365 154.458,14.703 154.458,13.897 C154.458,12.883 154.653,12 155.043,11.245 C155.434,10.491 155.973,9.867 156.662,9.373 C157.35,8.88 158.143,8.509 159.041,8.262 C159.937,8.015 160.894,7.892 161.907,7.892 C163.493,7.892 164.897,8.159 166.119,8.691 C167.341,9.225 168.29,9.906 168.967,10.738 L167.874,11.791 C167.198,11.012 166.32,10.427 165.242,10.036 C164.163,9.646 163.013,9.451 161.79,9.451 C161.036,9.451 160.328,9.529 159.665,9.685 C159.002,9.841 158.423,10.088 157.93,10.426 C157.436,10.764 157.045,11.199 156.76,11.733 C156.473,12.266 156.33,12.896 156.33,13.624 C156.33,14.223 156.428,14.704 156.623,15.067 C156.818,15.431 157.13,15.744 157.559,16.004 C157.989,16.264 158.54,16.491 159.217,16.686 C159.893,16.881 160.698,17.096 161.635,17.33 C162.908,17.642 164.039,17.941 165.028,18.227 C166.017,18.513 166.841,18.865 167.505,19.28 C168.168,19.696 168.675,20.19 169.026,20.762 C169.377,21.334 169.552,22.062 169.552,22.946 C169.552,24.766 168.843,26.217 167.426,27.295 C166.008,28.372 164.116,28.911 161.75,28.911 L161.75,28.911 Z" id="Shape"></path>
+            </g>
+            <g id="drop" transform="translate(0.000000, 1.000000)" stroke="#27AAE1" stroke-width="3.5">
+                <use id="Shape" mask="url(#mask-2)" xlink:href="#path-1"></use>
+            </g>
+        </g>
+    </g>
+</svg>
diff --git a/docs/index.html b/docs/index.html
new file mode 100644 (file)
index 0000000..e8214f7
--- /dev/null
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8"/>
+  <title>clean-css: fast and efficient CSS optimizer</title>
+  <link rel="stylesheet" type="text/css" href="css/vendor/normalize.css"/>
+  <link rel="stylesheet" type="text/css" href="css/home.css"/>
+  <script src="js/optimizer.js"></script>
+  <script src="js/drag-drop.js"></script>
+</head>
+<body>
+  <h1 class="logo">
+    <a class="logo__link" href="//github.com/jakubpawlowicz/clean-css" title="Go to clean-css project page">Go to clean-css project page</a>
+  </h1>
+  <article class="content">
+    <ol class="drag-target dropped-files" title="Drop your files here to optimize them"></ol>
+    <p class="legend">
+      CSS optimizing happens directly in your browser using a browser-compatible build of clean-css. If you miss any functionality, you are more than welcome to <a href="//github.com/jakubpawlowicz/clean-css/tree/master/docs">add it</a>!
+    </p>
+  </article>
+  <footer class="footer">
+    Hosted with <span class="footer__heart">❤️</span> on <a href="//pages.github.com/">GitHub Pages.</a>
+  </footer>
+  <template class="dropped-file-template">
+    <li class="dropped-files__file">
+      <span class="dropped-files__file__name"></span>
+      <a class="dropped-files__file__save" href="#" download="test.css">save</a>
+    </li>
+  </template>
+</body>
+</html>
diff --git a/docs/js/drag-drop.js b/docs/js/drag-drop.js
new file mode 100644 (file)
index 0000000..24f9d42
--- /dev/null
@@ -0,0 +1,75 @@
+(function () {
+  var uniqueID = (function () {
+    var UID = new Date().getTime()
+
+    return function () {
+      return (UID++).toString(36)
+    }
+  })()
+
+  function fileDraggedIn(event) {
+    event.preventDefault()
+    event.dataTransfer.dropEffect = 'copy'
+  }
+
+  function fileDraggedOver(event) {
+    event.preventDefault()
+    event.dataTransfer.dropEffect = 'copy'
+  }
+
+  function fileDropped(dropContainer) {
+    var templateNode = document.querySelector('.dropped-file-template')
+
+    return function (event) {
+      event.preventDefault()
+
+      for (var i = 0, l = event.dataTransfer.files.length; i< l; i++) {
+        var file = event.dataTransfer.files[i]
+
+        process(file, dropContainer, templateNode)
+      }
+    }
+  }
+
+  function process(file, dropContainer, templateNode) {
+    var optimizationId = uniqueID()
+    var importedNode = document.importNode(templateNode.content, true)
+    var fileNode = importedNode.querySelector('.dropped-files__file')
+    var nameNode = importedNode.querySelector('.dropped-files__file__name')
+    var reader
+
+    fileNode.classList.add('dropped-files__file--' + optimizationId)
+    nameNode.innerText = file.name
+
+    if (file.type == 'text/css') {
+      reader = new FileReader()
+      reader.onload = function (event) {
+        Optimizer.process(optimizationId, event.target.result)
+      }
+      reader.readAsText(file)
+    } else {
+      fileNode.classList.add('dropped-files__file--invalid')
+    }
+
+    dropContainer.appendChild(importedNode)
+  }
+
+  function optimizationCompleted(optimizationId, output) {
+    var fileNode = document.querySelector('.dropped-files__file--' + optimizationId)
+    var downloadNode = fileNode.querySelector('.dropped-files__file__save')
+    var stylesBlob = new Blob([output.styles])
+
+    fileNode.classList.add('dropped-files__file--optimized')
+    downloadNode.href = URL.createObjectURL(stylesBlob)
+  }
+
+  window.addEventListener('DOMContentLoaded', function () {
+    var dragTarget = document.querySelector('.drag-target')
+
+    dragTarget.addEventListener('dragenter', fileDraggedIn, false)
+    dragTarget.addEventListener('dragover', fileDraggedOver, false)
+    dragTarget.addEventListener('drop', fileDropped(dragTarget), false)
+
+    Optimizer.oncomplete = optimizationCompleted
+  })
+})()
diff --git a/docs/js/optimizer-worker.js b/docs/js/optimizer-worker.js
new file mode 100644 (file)
index 0000000..251ee22
--- /dev/null
@@ -0,0 +1,18 @@
+onmessage = function(event) {
+  if (!event.data)
+    return
+
+  switch (event.data.command) {
+    case 'optimize':
+      new CleanCSS().minify(event.data.input, function (error, output) {
+        postMessage({
+          command: 'optimized',
+          id: event.data.id,
+          error: error,
+          output: output
+        })
+      })
+  }
+}
+
+importScripts('//jakubpawlowicz.github.io/clean-css-builds/v3.4.20.js')
diff --git a/docs/js/optimizer.js b/docs/js/optimizer.js
new file mode 100644 (file)
index 0000000..74cbcbd
--- /dev/null
@@ -0,0 +1,23 @@
+Optimizer = {
+  start: function () {
+    this.worker = new Worker('./js/optimizer-worker.js')
+    this.worker.onmessage = function (event) {
+      switch (event.data.command) {
+        case 'optimized':
+          Optimizer.oncomplete(event.data.id, event.data.output)
+      }
+    }
+  },
+
+  process: function (id, styles) {
+    this.worker.postMessage({
+      command: 'optimize',
+      id: id,
+      input: styles
+    })
+  },
+
+  oncomplete: function () { /* noop */ }
+}
+
+Optimizer.start()