API tools faq
paste
kidroca

Cookie Super Styles Minifier

kidroca
Jun 17th, 2015
346
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
JavaScript 9.91 KB | None | 0 0
raw download clone embed print report
  1. function solve(args) {
  2.     var cookieSS = args.join(' '),
  3.         reWhiteSpace = /\s/g,
  4.         reSemiCol = /;(})/g,
  5.         reGeneral = /(.+?)({([^}]+)})/g,
  6.         selectors = {},
  7.         result = '',
  8.         obj,
  9.         p,
  10.         formatedObj = {};
  11.  
  12.     function extractSelectors(match, p1, p2, p3) {
  13.  
  14.         //console.log(p1);
  15.         //console.log(p3);
  16.         p1 = p1.trim();
  17.         if(selectors.hasOwnProperty(p1)){
  18.  
  19.             selectors[p1] += p3;
  20.  
  21.         } else {
  22.  
  23.             selectors[p1] = p3;
  24.         }
  25.  
  26.         return match;
  27.     }
  28.  
  29.     function formatObject(obj) {
  30.  
  31.         var finalObj = {};
  32.  
  33.         function propValToObj(selector, prop , val){
  34.  
  35.             if(finalObj.hasOwnProperty(selector)) {
  36.  
  37.                 delete finalObj[selector][prop];
  38.  
  39.             } else {
  40.                
  41.                 finalObj[selector] = {};
  42.             }
  43.  
  44.             finalObj[selector][prop] = val;
  45.         }
  46.  
  47.         function trimSelectors(str){
  48.  
  49.             var reAllSpace = /\s+/g,
  50.                 reFixNesting = /\s*(\W)\s*/g,
  51.                 reDot = /([^\W])\./g; //Aperently it also needs space between dots, but not all
  52.  
  53.             str = str.replace(reAllSpace, ' ');
  54.             str = str.replace(reFixNesting , '$1');
  55.             str = str.replace(reDot , '$1 .');
  56.             str = str.trim();
  57.  
  58.             return str;
  59.         }
  60.  
  61.         function trimPropVal(obj) {
  62.  
  63.             var p,
  64.                 reTrimWhite = /\s+/g,
  65.                 reNecessaryWhiteSpace = /([(),])\s+([\w\W])/g,
  66.                 reCssAndValue =  /\s*(\S+)\s*\:\s*(.+?)\s*\;/,
  67.                 cycle = true,
  68.                 selector,
  69.                 str,
  70.                 css,
  71.                 value;
  72.  
  73.             function splitCssValue(match, p1 , p2) {
  74.                 css = p1.trim();
  75.                 // css = css.replace(reTrimWhite, ' ');
  76.                 value = p2.trim();
  77.                 value = value.replace(reTrimWhite, ' ');
  78.                 value = value.replace(reNecessaryWhiteSpace , '$1$2');
  79.                 return '';
  80.             }
  81.  
  82.             //console.log(obj);
  83.  
  84.             for(p in obj) {
  85.  
  86.                 selector = trimSelectors(p);
  87.                 str = obj[p].replace(reTrimWhite , ' '); // Trim all whitespace to single space
  88.  
  89.                 //console.log(selector);
  90.  
  91.                 while(cycle){
  92.  
  93.                     //console.log(str);
  94.  
  95.                     str = str.replace(reCssAndValue , splitCssValue);
  96.  
  97.                     cycle = reCssAndValue.test(str);
  98.  
  99.                     propValToObj(selector, css, value);
  100.                 }
  101.                 cycle = true;
  102.             }
  103.         }
  104.  
  105.         trimPropVal(obj);
  106.  
  107.         return finalObj;
  108.     }
  109.  
  110.     cookieSS.replace(reGeneral , extractSelectors);
  111.     //console.log(selectors);
  112.     formatedObj = formatObject(selectors);
  113.     //console.log(formatedObj);
  114.  
  115.     for (obj in formatedObj){
  116.  
  117.         result += obj + '{';
  118.  
  119.             for(p in formatedObj[obj]) {
  120.  
  121.                 result += p + ':' + formatedObj[obj][p] + ';';
  122.             }
  123.  
  124.         result += '}';
  125.     }
  126.  
  127.     result = result.replace(reSemiCol , '$1' );
  128.     console.log(result);
  129. }
  130.  
  131. console.log('test1');
  132. solve([
  133.     ' #the-big-b{',
  134. 'color: yellow;',
  135. 'size: big;',
  136. '}',
  137. '.muppet{',
  138. 'powers: all;',
  139. 'skin: fluffy;',
  140. '}',
  141. '.water-spirit{powers: water;',
  142. 'alignment : not-good;',
  143. '}',
  144. 'all{',
  145. 'meant-for: nerdy-children;',
  146. '}',
  147. '.muppet {',
  148. 'powers: everything;',
  149. '}',
  150. 'all .muppet {',
  151. 'alignment : good ;',
  152. '}',
  153. '.muppet+ .water-spirit{',
  154. 'power: everything-a-muppet-can-do-and-water;',
  155. '}'
  156.     ]);
  157.  
  158. console.log('test2');
  159. solve([
  160.     '            the-big-b .apk',          
  161.     ' {',
  162.     'color: yellow;',
  163.     'size: big;',
  164.     //'color: crazi',
  165.     'color:crazi;name:petio;            sur-name:dido;',
  166.     '}',
  167.     ]);
  168.  
  169. console.log('test3');
  170. solve([
  171.     '   main {',
  172.     '  width: 50%;',
  173.     '  margin: 0 auto;',
  174.     '}',
  175.     'main h1 {',
  176.     '  color: #fff;',
  177.     '}',
  178.     'main p {',
  179.     '  color: #FFE85F;',
  180.     '}',
  181.     'main p  :hover {',
  182.     '  cursor: pointer;',
  183.     '  color: #7374CA;',
  184.     '}'
  185.     ]);
  186.  
  187. console.log('test4');
  188. solve([
  189. '   #Navigation ul {',
  190. '  border: 1px solid #000;',
  191. '  padding: 10px 0;',
  192. '}'
  193.     ]);
  194.  
  195. console.log('test5 Real CSS');
  196.  
  197. var x = [
  198. '       body {',
  199.   'padding: 10px 0;',
  200.   'font-size: 16px;',
  201.   'font-family: Palatino Linotype;',
  202. '  background: -moz-linear-gradient(45deg,      #2b0808      0%, #a86c54                        59%, rgba(202, 135, 105, 0.7) 75%, rgba(255, 178, 137, 0) 100%);',
  203. '  background: -webkit-gradient(linear, left bottom, right top, color-stop(0%, #2b0808), color-stop(59%, #a86c54), color-stop(75%, rgba(202, 135, 105, 0.7)), color-stop(100%, rgba(255, 178, 137, 0)));',
  204. ' background    : -webkit-linear-gradient(45deg, #2b0808 0%, #a86c54 59%, rgba(202, 135, 105, 0.7) 75%, rgba(255, 178, 137, 0) 100%);',
  205. '  background: -o-linear-gradient(45deg, #2b0808 0%, #a86c54 59%, rgba(202, 135, 105, 0.7) 75%, rgba(255, 178, 137, 0) 100%);',
  206. '  background:  -ms-linear-gradient(45deg, #2b0808 0%, #a86c54               59%, rgba(202, 135, 105, 0.7) 75%, rgba(255, 178, 137, 0) 100%);',
  207. '  background:      linear-gradient(45deg, #2b0808 0%, #a86c54 59%, rgba(202, 135, 105, 0.7) 75%, rgba(255, 178, 137, 0) 100%);',
  208. "  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#2b0808', endColorstr='#00ffb289', GradientType=1);",
  209. '  background-attachment: fixed;',
  210. '  height: \n 100%;',
  211. '}',
  212. 'header {',
  213. '  width: 800px;',
  214. '  margin: 0 auto;',
  215. '}',
  216. 'header h1 {',
  217. '  text-align: center;',
  218. '  margin: 10px 0;',
  219. '\n  text-decoration: underline;',
  220. '  color        : transparent;',
  221. '  text-shadow: -9px 5px 1px #67382d,   -10px 5px 2px #000000;',
  222. '  cursor: default;',
  223. '}',
  224. '#Navigation {',
  225. '  text-align: center;',
  226. '}',
  227. '#Navigation ul {',
  228. '  border: 1px solid #000;',
  229. '  padding: 10px 0;',
  230. '}',
  231. '#Navigation ul li {',
  232. '  display: inline-block;',
  233. '  margin: 0 10px;',
  234. '}',
  235. '#Navigation ul li a {',
  236. '  padding: 2px 5px;',
  237. '  color: #fff;',
  238. '  border: 1px outset #fff;',
  239. '  background: #b67d66;',
  240. '}',
  241. '#Navigation ul li a:active {',
  242. '  border-style: inset;',
  243. '}',
  244. '#MainContent {',
  245. '  width: 960px;',
  246. '  height: 435px;',
  247. '  margin: 5px auto;',
  248. '}',
  249. '#MainContent .Content {',
  250. '  display: none;',
  251. '  position: relative;',
  252. '  width: 90%;',
  253. '  height: 100%;',
  254. '  box-sizing: border-box;',
  255. '  margin: 5px auto;',
  256. '  border: 1px solid #000;',
  257. '  padding: 10px;',
  258. '  background: #DFC9B2;',
  259. '}',
  260. '#MainContent .Content:target {',
  261. '  display: block;',
  262. '}',
  263. '#MainContent .Content h2,',
  264. '#MainContent .Content p,',
  265. '#MainContent .Content form {',
  266. '  margin: 0 5px 5px 5px;',
  267. '}',
  268. '#MainContent .Content .example {',
  269. '  background: #ddd;',
  270. '}',
  271. '#MainContent .Content .hint {',
  272. '  font-style: italic;',
  273. '  margin-bottom: 5px;',
  274. '}',
  275. '#MainContent .Content form {',
  276. '  display: inline-block;',
  277. '  vertical-align: top;',
  278. '  width: 46%;',
  279. '  height: 100%;',
  280. '  color: #955d49;',
  281. '}',
  282. '#MainContent .Content form > p {',
  283. '  margin: 10px 0;',
  284. '}',
  285. '#MainContent .Content form > p em {',
  286. '  background: #ddd;',
  287. '}',
  288. '#MainContent .Content form a {',
  289. '  color: #7A8AE2;',
  290. '}',
  291. '#MainContent .Content form > ul li {',
  292. '  list-style: circle;',
  293. '  margin: 5px 0 0 40px;',
  294. '}',
  295. '#MainContent .Content form table {',
  296. '  border-collapse: collapse;',
  297. '}',
  298. '#MainContent .Content form th,',
  299. '#MainContent .Content form td {',
  300. '  text-align: center;',
  301. '}',
  302. '#MainContent .Content form th {',
  303. '  font-weight: bold;',
  304. '  padding: 5px;',
  305. '}',
  306. '#MainContent .Content form td {',
  307. '  color: #000;',
  308. '}',
  309. '#MainContent .Content form .interface {',
  310. '  position: relative;',
  311. '  width: 100%;',
  312. '}',
  313. '#MainContent .Content form .interface span {',
  314. '  font-size: 18px;',
  315. '  display: block;',
  316. '}',
  317. '#MainContent .Content form .interface div {',
  318. '  width: 100%;',
  319. '  padding: 2px 0;',
  320. '}',
  321. '#MainContent .Content form .interface input {',
  322. '  color: #fff;',
  323. '  background: #b67d66;',
  324. '  font-size: 20px;',
  325. '}',
  326. '#MainContent .Content form .interface table {',
  327. '  width: 75%;',
  328. '}',
  329. '#MainContent .Content form .interface table input[type="text"] {',
  330. '  width: 80px;',
  331. '}',
  332. '#MainContent .Content form .interface input[type="number"] {',
  333. '  width: 100px;',
  334. '}',
  335. '#MainContent .Content form .interface input[type="number"]::-webkit-inner-spin-button,',
  336. '#MainContent .Content form .interface input[type="number"] -webkit-outer-spin-button {',
  337. '  -webkit-appearance: none;',
  338. '}',
  339. '#MainContent .Content form .interface input[type="text"] {',
  340. '  width: 200px;',
  341. '}',
  342. '#MainContent .Content form .interface input[type="text"],',
  343. '#MainContent .Content form .interface input[type="number"] {',
  344.   'background: #fff;',
  345. '  color: #955d49;',
  346.   'font-style: italic;',
  347.   'text-align: inherit;',
  348. '}',
  349. '#MainContent .Content form .interface input[type="text"]:focus,',
  350. '#MainContent .Content form .interface input[type="number"]:focus {',
  351.   'background: #FFFFBE;',
  352. '}',
  353. '#MainContent .Content form .interface input[type="text"]:focus + .tooltip,',
  354. '#MainContent .Content form .interface input[type="number"]:focus + .tooltip {',
  355. '  display: block;',
  356. '  opacity: 1;',
  357. '  cursor: default;',
  358. '  animation: FadeIn linear 0.2s;',
  359. '}',
  360. '#MainContent .Content form .interface .tooltip {',
  361. '  display: none;',
  362. '  opacity: 0;',
  363. '  position: absolute;',
  364. '  left: -5px;',
  365. '  bottom: -36px;',
  366. '  vertical-align: bottom;',
  367. '  height: 26px;',
  368. '  width: auto;',
  369. '  padding: 2px 5px 0 5px;',
  370. '  text-align: center;',
  371. '  font-style: italic;',
  372. '  color: #fff;',
  373. '  background: #b67d66;',
  374. '  box-shadow: -2px 4px 15px #67382d, -2px 5px 12px #000000;',
  375. '}',
  376. '#MainContent .Content form .interface .tooltip em {',
  377. '  color: #3a6deb;',
  378. '}',
  379. '#MainContent .Content form .interface .tooltip2 {',
  380. '  position: relative;',
  381. '  left: 0;',
  382. '  top: 0;',
  383. '  width: 90%;',
  384. '}',
  385. '#MainContent .Content .Result {',
  386. '  font-family: Consolas;',
  387. '  font-style: italic;',
  388. '  border: 1px solid #000;',
  389. '  display: inline-block;',
  390. '  vertical-align: top;',
  391. '  width: 51%;',
  392. '  height: 100%;',
  393. '  overflow: auto;',
  394. '  background: #000;',
  395. '  color: #eee;',
  396. '  box-sizing: border-box;',
  397. '  padding: 0px 5px;',
  398. '}',
  399. '#MainContent .Content .Result em {',
  400. '  color: #C57F06;',
  401. '}',
  402. '#MainContent .Content .Result strong {',
  403. '  background: #3a6deb;',
  404. '}',
  405. '#MainContent .Content .Result ul {',
  406. '  position: relative;',
  407. '  top: -5px;',
  408. '  margin-left: 35px;',
  409. '}',
  410. '#MainContent .Content .Result h3 {',
  411.   'font-style: normal;',
  412.   'text-align: center;',
  413. '  margin: 2px;',
  414. '}',
  415. '#MainContent .Content .Result h4 {',
  416.   'margin-bottom: 0;',
  417. '}',
  418. '#MainContent .Content .Result p {',
  419.   'margin-left: 10px;',
  420. '}',
  421. '#Navigation ul,',
  422. '.Content {',
  423. '  box-shadow: -9px 11px 20px #67382d, -10px 11px 15px #000000;',
  424. '}'
  425. ];
  426. solve(x);
Advertisement
Add Comment
Please, Sign In to add comment
Public Pastes
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!