Skip to content

Instantly share code, notes, and snippets.

@maxdemarzi
Last active April 30, 2020 03:17
Show Gist options
  • Save maxdemarzi/f5c0487ae01f8d3de7058cf41d09028a to your computer and use it in GitHub Desktop.
Save maxdemarzi/f5c0487ae01f8d3de7058cf41d09028a to your computer and use it in GitHub Desktop.
{
"options": {
"generate_report": true,
"verbose": true,
"report_file_location": "purged_css_report_data.json"
}
}
Step 1: Install NPM
Step 2: Install CSS Purge http://rbtech.github.io/css-purge/#getStarted
npm install css-purge -g
Step 3: Run:
css-purge -i "layer.full.css,layer.simple.css,layer.web.css" -o layer.combo.purge.css
But there is an error:
CSS Parser Error: probably have something funny in your CSS, change it then please try again.
Reason: property missing ':'
Line: 1
Column: 152921
Filename: layer.full.css,layer.simple.css,layer.web.css
Instead, prettify the CSS and then try again:
I went to http://css.github.io/csso/csso.html and ran the 3 files through it.
css-purge -i "full-css-pretty.css,web-css-pretty.css,simple-css-pretty.css" -o layer-combo-pretty-purge.css -f config.json
css-purge -i "full-css-pretty.css" -o full-purge.css
154K full-purge.css
154K layer-combo-pretty-purge.css
They are exactly the same. So the purged css for full alone and all 3 is the same as full alone.
Also 154k is much smaller than these 3 files.
516K layer.full.css
173K layer.simple.css
789K layer.web.css
Also that 154k css file is 33k gzipped.
The purged_css_report_data.json file contains the report of what was done.
{
"files": {
"input": [
"full-css-pretty.css",
"web-css-pretty.css",
"simple-css-pretty.css"
],
"output": [
null
],
"input_html": [],
"input_js": []
},
"options_used": {
"generate_report": true,
"verbose": false,
"report_file_location": "purged_css_report_data.json",
"css": "full-css-pretty.css,web-css-pretty.css,simple-css-pretty.css",
"css_output": "newcombo.css",
"reduceConfig": {
"declaration_names": [
"font",
"margin",
"padding",
"list-style",
"outline",
"border",
"border-top",
"border-right",
"border-bottom",
"border-left",
"border-radius",
"border-color",
"border-top-color",
"border-right-color",
"border-bottom-color",
"border-left-color",
"color",
"background-color",
"font-color",
"outline-color",
"box-shadow",
"text-shadow",
"float",
"font-family",
"font-size",
"font-weight",
"font-style",
"font-variant",
"font-stretch"
]
}
},
"stats": {
"files": {
"css": [
{
"filename": "full-css-pretty.css",
"filesizeKB": 598.746
},
{
"filename": "web-css-pretty.css",
"filesizeKB": 894.605
},
{
"filename": "simple-css-pretty.css",
"filesizeKB": 203.457
}
],
"html": [],
"js": []
},
"before": {
"totalFileSizeKB": 1696.808,
"noNodes": 627,
"noRules": 577,
"noDeclarations": 1734,
"noComments": 0,
"noCharset": 0,
"noCustomMedia": 0,
"noDocument": 0,
"noFontFace": 0,
"noHost": 0,
"noImport": 0,
"noKeyframes": 2,
"noKeyframe": 0,
"noMedia": 48,
"noNamespace": 0,
"noPage": 0,
"noSupports": 0
},
"after": {
"totalFileSizeKB": 172.491,
"noNodes": 591,
"noRules": 577,
"noDeclarations": 1734,
"noComments": 0,
"noCharset": 0,
"noCustomMedia": 0,
"noDocument": 0,
"noFontFace": 0,
"noHost": 0,
"noImport": 0,
"noKeyframes": 2,
"noKeyframe": 0,
"noMedia": 12,
"noNamespace": 0,
"noPage": 0,
"noSupports": 0
},
"summary": {
"savingsKB": 1524.317,
"savingsPercentage": 89.83,
"noDuplicateRules": 52,
"noDuplicateDeclarations": 21,
"noZerosShortened": 0,
"noNamedColorsShortened": 0,
"noHexColorsShortened": 0,
"noRGBColorsShortened": 0,
"noHSLColorsShortened": 0,
"noFontsShortened": 0,
"noBackgroundsShortened": 0,
"noMarginsShortened": 0,
"noPaddingsShortened": 0,
"noListStylesShortened": 0,
"noOutlinesShortened": 0,
"noBordersShortened": 0,
"noBorderTopsShortened": 0,
"noBorderRightsShortened": 0,
"noBorderBottomsShortened": 0,
"noBorderLeftsShortened": 0,
"noBorderRadiusShortened": 0,
"noLastSemiColonsTrimmed": 0,
"noInlineCommentsTrimmed": 14,
"noReductions": {
"noNodes": 36,
"noRules": 0,
"noDeclarations": 0,
"noComments": 0,
"noCharset": 0,
"noCustomMedia": 0,
"noDocument": 0,
"noFontFace": 0,
"noHost": 0,
"noImport": 0,
"noKeyframes": 0,
"noKeyframe": 0,
"noMedia": 36,
"noNamespace": 0,
"noPage": 0,
"noSupports": 0
}
}
},
"duplicate_rules": [
{
"selectors": "@media (max-width:992px)",
"position": {
"start": {
"line": 711,
"column": 1
},
"end": {
"line": 763,
"column": 2
},
"source": "full-css-pretty.css,web-css-pretty.css,simple-css-pretty.css"
}
},
{
"selectors": "@media (max-width:992px)",
"position": {
"start": {
"line": 2069,
"column": 1
},
"end": {
"line": 2075,
"column": 2
},
"source": "full-css-pretty.css,web-css-pretty.css,simple-css-pretty.css"
}
},
{
"selectors": "@media (max-width:768px)",
"position": {
"start": {
"line": 705,
"column": 1
},
"end": {
"line": 709,
"column": 2
},
"source": "full-css-pretty.css,web-css-pretty.css,simple-css-pretty.css"
}
},
{
"selectors": "@media (max-width:768px)",
"position": {
"start": {
"line": 765,
"column": 1
},
"end": {
"line": 774,
"column": 2
},
"source": "full-css-pretty.css,web-css-pretty.css,simple-css-pretty.css"
}
},
{
"selectors": "@media (max-width:768px)",
"position": {
"start": {
"line": 891,
"column": 1
},
"end": {
"line": 917,
"column": 2
},
"source": "full-css-pretty.css,web-css-pretty.css,simple-css-pretty.css"
}
},
{
"selectors": "@media (max-width:768px)",
"position": {
"start": {
"line": 950,
"column": 1
},
"end": {
"line": 956,
"column": 2
},
"source": "full-css-pretty.css,web-css-pretty.css,simple-css-pretty.css"
}
},
{
"selectors": "@media (max-width:768px)",
"position": {
"start": {
"line": 1028,
"column": 1
},
"end": {
"line": 1047,
"column": 2
},
"source": "full-css-pretty.css,web-css-pretty.css,simple-css-pretty.css"
}
},
{
"selectors": "@media (max-width:768px)",
"position": {
"start": {
"line": 1101,
"column": 1
},
"end": {
"line": 1105,
"column": 2
},
"source": "full-css-pretty.css,web-css-pretty.css,simple-css-pretty.css"
}
},
{
"selectors": "@media (max-width:768px)",
"position": {
"start": {
"line": 1431,
"column": 1
},
"end": {
"line": 1467,
"column": 2
},
"source": "full-css-pretty.css,web-css-pretty.css,simple-css-pretty.css"
}
},
{
"selectors": "@media (max-width:768px)",
"position": {
"start": {
"line": 1476,
"column": 1
},
"end": {
"line": 1702,
"column": 2
},
"source": "full-css-pretty.css,web-css-pretty.css,simple-css-pretty.css"
}
},
{
"selectors": "@media (max-width:768px)",
"position": {
"start": {
"line": 1793,
"column": 1
},
"end": {
"line": 1822,
"column": 2
},
"source": "full-css-pretty.css,web-css-pretty.css,simple-css-pretty.css"
}
},
{
"selectors": "@media (max-width:768px)",
"position": {
"start": {
"line": 1859,
"column": 1
},
"end": {
"line": 1867,
"column": 2
},
"source": "full-css-pretty.css,web-css-pretty.css,simple-css-pretty.css"
}
},
{
"selectors": "@media (max-width:768px)",
"position": {
"start": {
"line": 1918,
"column": 1
},
"end": {
"line": 1922,
"column": 2
},
"source": "full-css-pretty.css,web-css-pretty.css,simple-css-pretty.css"
}
},
{
"selectors": "@media (max-width:768px)",
"position": {
"start": {
"line": 2077,
"column": 1
},
"end": {
"line": 2083,
"column": 2
},
"source": "full-css-pretty.css,web-css-pretty.css,simple-css-pretty.css"
}
},
{
"selectors": "@media (max-width:768px)",
"position": {
"start": {
"line": 2116,
"column": 1
},
"end": {
"line": 2124,
"column": 2
},
"source": "full-css-pretty.css,web-css-pretty.css,simple-css-pretty.css"
}
},
{
"selectors": "@media (max-width:768px)",
"position": {
"start": {
"line": 2194,
"column": 1
},
"end": {
"line": 2306,
"column": 2
},
"source": "full-css-pretty.css,web-css-pretty.css,simple-css-pretty.css"
}
},
{
"selectors": "@media (max-width:768px)",
"position": {
"start": {
"line": 2386,
"column": 1
},
"end": {
"line": 2398,
"column": 2
},
"source": "full-css-pretty.css,web-css-pretty.css,simple-css-pretty.css"
}
},
{
"selectors": "@media (max-width:768px)",
"position": {
"start": {
"line": 2445,
"column": 1
},
"end": {
"line": 2460,
"column": 2
},
"source": "full-css-pretty.css,web-css-pretty.css,simple-css-pretty.css"
}
},
{
"selectors": "@media (max-width:768px)",
"position": {
"start": {
"line": 2478,
"column": 1
},
"end": {
"line": 2484,
"column": 2
},
"source": "full-css-pretty.css,web-css-pretty.css,simple-css-pretty.css"
}
},
{
"selectors": "@media (max-width:768px)",
"position": {
"start": {
"line": 2556,
"column": 1
},
"end": {
"line": 2665,
"column": 2
},
"source": "full-css-pretty.css,web-css-pretty.css,simple-css-pretty.css"
}
},
{
"selectors": "@media (max-width:768px)",
"position": {
"start": {
"line": 2753,
"column": 1
},
"end": {
"line": 2759,
"column": 2
},
"source": "full-css-pretty.css,web-css-pretty.css,simple-css-pretty.css"
}
},
{
"selectors": "@media (max-width:768px)",
"position": {
"start": {
"line": 2781,
"column": 1
},
"end": {
"line": 2876,
"column": 2
},
"source": "full-css-pretty.css,web-css-pretty.css,simple-css-pretty.css"
}
},
{
"selectors": "@media (max-width:768px)",
"position": {
"start": {
"line": 2908,
"column": 1
},
"end": {
"line": 2920,
"column": 2
},
"source": "full-css-pretty.css,web-css-pretty.css,simple-css-pretty.css"
}
},
{
"selectors": "@media (max-width:768px)",
"position": {
"start": {
"line": 4315,
"column": 1
},
"end": {
"line": 4327,
"column": 2
},
"source": "full-css-pretty.css,web-css-pretty.css,simple-css-pretty.css"
}
},
{
"selectors": "@media (max-width:768px)",
"position": {
"start": {
"line": 4337,
"column": 1
},
"end": {
"line": 4385,
"column": 2
},
"source": "full-css-pretty.css,web-css-pretty.css,simple-css-pretty.css"
}
},
{
"selectors": "@media (max-width:768px)",
"position": {
"start": {
"line": 4515,
"column": 1
},
"end": {
"line": 4520,
"column": 2
},
"source": "full-css-pretty.css,web-css-pretty.css,simple-css-pretty.css"
}
},
{
"selectors": "@media (max-width:768px)",
"position": {
"start": {
"line": 4575,
"column": 1
},
"end": {
"line": 4583,
"column": 2
},
"source": "full-css-pretty.css,web-css-pretty.css,simple-css-pretty.css"
}
},
{
"selectors": "@media (max-width:480px)",
"position": {
"start": {
"line": 699,
"column": 1
},
"end": {
"line": 703,
"column": 2
},
"source": "full-css-pretty.css,web-css-pretty.css,simple-css-pretty.css"
}
},
{
"selectors": "@media (max-width:480px)",
"position": {
"start": {
"line": 2667,
"column": 1
},
"end": {
"line": 2671,
"column": 2
},
"source": "full-css-pretty.css,web-css-pretty.css,simple-css-pretty.css"
}
},
{
"selectors": "@media (max-width:480px)",
"position": {
"start": {
"line": 2878,
"column": 1
},
"end": {
"line": 2882,
"column": 2
},
"source": "full-css-pretty.css,web-css-pretty.css,simple-css-pretty.css"
}
},
{
"selectors": "@media (min-width:768px)",
"position": {
"start": {
"line": 943,
"column": 1
},
"end": {
"line": 948,
"column": 2
},
"source": "full-css-pretty.css,web-css-pretty.css,simple-css-pretty.css"
}
},
{
"selectors": "@media (min-width:768px)",
"position": {
"start": {
"line": 999,
"column": 1
},
"end": {
"line": 1003,
"column": 2
},
"source": "full-css-pretty.css,web-css-pretty.css,simple-css-pretty.css"
}
},
{
"selectors": "@media (min-width:768px)",
"position": {
"start": {
"line": 1013,
"column": 1
},
"end": {
"line": 1017,
"column": 2
},
"source": "full-css-pretty.css,web-css-pretty.css,simple-css-pretty.css"
}
},
{
"selectors": "@media (min-width:768px)",
"position": {
"start": {
"line": 1056,
"column": 1
},
"end": {
"line": 1060,
"column": 2
},
"source": "full-css-pretty.css,web-css-pretty.css,simple-css-pretty.css"
}
},
{
"selectors": "@media (min-width:992px)",
"position": {
"start": {
"line": 4298,
"column": 1
},
"end": {
"line": 4302,
"column": 2
},
"source": "full-css-pretty.css,web-css-pretty.css,simple-css-pretty.css"
}
},
{
"selectors": "@media (min-width:320px)",
"position": {
"start": {
"line": 4304,
"column": 1
},
"end": {
"line": 4313,
"column": 2
},
"source": "full-css-pretty.css,web-css-pretty.css,simple-css-pretty.css"
}
},
{
"selectors": [
".snl-large-only"
],
"position": {
"start": {
"line": 1815,
"column": 5
},
"end": {
"line": 1817,
"column": 6
},
"source": "full-css-pretty.css,web-css-pretty.css,simple-css-pretty.css"
}
},
{
"selectors": [
".snl-large-only"
],
"position": {
"start": {
"line": 2117,
"column": 5
},
"end": {
"line": 2119,
"column": 6
},
"source": "full-css-pretty.css,web-css-pretty.css,simple-css-pretty.css"
}
},
{
"selectors": [
".snl-large-only"
],
"position": {
"start": {
"line": 2299,
"column": 5
},
"end": {
"line": 2301,
"column": 6
},
"source": "full-css-pretty.css,web-css-pretty.css,simple-css-pretty.css"
}
},
{
"selectors": [
".snl-large-only"
],
"position": {
"start": {
"line": 2453,
"column": 5
},
"end": {
"line": 2455,
"column": 6
},
"source": "full-css-pretty.css,web-css-pretty.css,simple-css-pretty.css"
}
},
{
"selectors": [
".snl-large-only"
],
"position": {
"start": {
"line": 2913,
"column": 5
},
"end": {
"line": 2915,
"column": 6
},
"source": "full-css-pretty.css,web-css-pretty.css,simple-css-pretty.css"
}
},
{
"selectors": [
".snl-small-only"
],
"position": {
"start": {
"line": 1819,
"column": 5
},
"end": {
"line": 1821,
"column": 6
},
"source": "full-css-pretty.css,web-css-pretty.css,simple-css-pretty.css"
}
},
{
"selectors": [
".snl-small-only"
],
"position": {
"start": {
"line": 2121,
"column": 5
},
"end": {
"line": 2123,
"column": 6
},
"source": "full-css-pretty.css,web-css-pretty.css,simple-css-pretty.css"
}
},
{
"selectors": [
".snl-small-only"
],
"position": {
"start": {
"line": 2303,
"column": 5
},
"end": {
"line": 2305,
"column": 6
},
"source": "full-css-pretty.css,web-css-pretty.css,simple-css-pretty.css"
}
},
{
"selectors": [
".snl-small-only"
],
"position": {
"start": {
"line": 2457,
"column": 5
},
"end": {
"line": 2459,
"column": 6
},
"source": "full-css-pretty.css,web-css-pretty.css,simple-css-pretty.css"
}
},
{
"selectors": [
".snl-small-only"
],
"position": {
"start": {
"line": 2917,
"column": 5
},
"end": {
"line": 2919,
"column": 6
},
"source": "full-css-pretty.css,web-css-pretty.css,simple-css-pretty.css"
}
},
{
"selectors": [
"html.touch select"
],
"position": {
"start": {
"line": 4316,
"column": 5
},
"end": {
"line": 4318,
"column": 6
},
"source": "full-css-pretty.css,web-css-pretty.css,simple-css-pretty.css"
}
},
{
"selectors": [
"html.touch .snl-widgets-web-grid-period .ui-widget select",
"html.touch input",
"html.touch textarea"
],
"position": {
"start": {
"line": 4320,
"column": 5
},
"end": {
"line": 4322,
"column": 6
},
"source": "full-css-pretty.css,web-css-pretty.css,simple-css-pretty.css"
}
},
{
"selectors": [
"html.touch input[type=button]",
"html.touch input[type=reset]",
"html.touch input[type=submit]"
],
"position": {
"start": {
"line": 4324,
"column": 5
},
"end": {
"line": 4326,
"column": 6
},
"source": "full-css-pretty.css,web-css-pretty.css,simple-css-pretty.css"
}
},
{
"selectors": [
".control-label",
".control-label a",
".form-horizontal .control-label"
],
"position": {
"start": {
"line": 1057,
"column": 5
},
"end": {
"line": 1059,
"column": 6
},
"source": "full-css-pretty.css,web-css-pretty.css,simple-css-pretty.css"
}
},
{
"selectors": [
".link-more"
],
"position": {
"start": {
"line": 4299,
"column": 5
},
"end": {
"line": 4301,
"column": 6
},
"source": "full-css-pretty.css,web-css-pretty.css,simple-css-pretty.css"
}
},
{
"selectors": [
".link-more"
],
"position": {
"start": {
"line": 4305,
"column": 5
},
"end": {
"line": 4312,
"column": 6
},
"source": "full-css-pretty.css,web-css-pretty.css,simple-css-pretty.css"
}
}
],
"duplicate_declarations": [
{
"type": "declaration",
"property": "display",
"value": "none",
"position": {
"start": {
"line": 1041,
"column": 9
},
"end": {
"line": 1042,
"column": 5
},
"source": "full-css-pretty.css,web-css-pretty.css,simple-css-pretty.css"
}
},
{
"type": "declaration",
"property": "display",
"value": "none",
"position": {
"start": {
"line": 1816,
"column": 9
},
"end": {
"line": 1817,
"column": 5
},
"source": "full-css-pretty.css,web-css-pretty.css,simple-css-pretty.css"
}
},
{
"type": "declaration",
"property": "display",
"value": "none",
"position": {
"start": {
"line": 2118,
"column": 9
},
"end": {
"line": 2119,
"column": 5
},
"source": "full-css-pretty.css,web-css-pretty.css,simple-css-pretty.css"
}
},
{
"type": "declaration",
"property": "display",
"value": "none",
"position": {
"start": {
"line": 2300,
"column": 9
},
"end": {
"line": 2301,
"column": 5
},
"source": "full-css-pretty.css,web-css-pretty.css,simple-css-pretty.css"
}
},
{
"type": "declaration",
"property": "display",
"value": "none",
"position": {
"start": {
"line": 2454,
"column": 9
},
"end": {
"line": 2455,
"column": 5
},
"source": "full-css-pretty.css,web-css-pretty.css,simple-css-pretty.css"
}
},
{
"type": "declaration",
"property": "display",
"value": "block",
"position": {
"start": {
"line": 1045,
"column": 9
},
"end": {
"line": 1046,
"column": 5
},
"source": "full-css-pretty.css,web-css-pretty.css,simple-css-pretty.css"
}
},
{
"type": "declaration",
"property": "display",
"value": "block",
"position": {
"start": {
"line": 1820,
"column": 9
},
"end": {
"line": 1821,
"column": 5
},
"source": "full-css-pretty.css,web-css-pretty.css,simple-css-pretty.css"
}
},
{
"type": "declaration",
"property": "display",
"value": "block",
"position": {
"start": {
"line": 2122,
"column": 9
},
"end": {
"line": 2123,
"column": 5
},
"source": "full-css-pretty.css,web-css-pretty.css,simple-css-pretty.css"
}
},
{
"type": "declaration",
"property": "display",
"value": "block",
"position": {
"start": {
"line": 2304,
"column": 9
},
"end": {
"line": 2305,
"column": 5
},
"source": "full-css-pretty.css,web-css-pretty.css,simple-css-pretty.css"
}
},
{
"type": "declaration",
"property": "display",
"value": "block",
"position": {
"start": {
"line": 2458,
"column": 9
},
"end": {
"line": 2459,
"column": 5
},
"source": "full-css-pretty.css,web-css-pretty.css,simple-css-pretty.css"
}
},
{
"type": "declaration",
"property": "font-size",
"value": "14px!important",
"position": {
"start": {
"line": 4317,
"column": 9
},
"end": {
"line": 4318,
"column": 5
},
"source": "full-css-pretty.css,web-css-pretty.css,simple-css-pretty.css"
}
},
{
"type": "declaration",
"property": "font-size",
"value": "16px!important",
"position": {
"start": {
"line": 4321,
"column": 9
},
"end": {
"line": 4322,
"column": 5
},
"source": "full-css-pretty.css,web-css-pretty.css,simple-css-pretty.css"
}
},
{
"type": "declaration",
"property": "font-size",
"value": "inherit!important",
"position": {
"start": {
"line": 4325,
"column": 9
},
"end": {
"line": 4326,
"column": 5
},
"source": "full-css-pretty.css,web-css-pretty.css,simple-css-pretty.css"
}
},
{
"type": "declaration",
"property": "text-align",
"value": "right",
"position": {
"start": {
"line": 921,
"column": 9
},
"end": {
"line": 922,
"column": 5
},
"source": "full-css-pretty.css,web-css-pretty.css,simple-css-pretty.css"
}
},
{
"type": "declaration",
"property": "margin-top",
"value": "-60px!important",
"position": {
"start": {
"line": 2371,
"column": 9
},
"end": {
"line": 2372,
"column": 5
},
"source": "full-css-pretty.css,web-css-pretty.css,simple-css-pretty.css"
}
},
{
"type": "declaration",
"property": "position",
"value": "relative",
"position": {
"start": {
"line": 2378,
"column": 9
},
"end": {
"line": 2378,
"column": 27
},
"source": "full-css-pretty.css,web-css-pretty.css,simple-css-pretty.css"
}
},
{
"type": "declaration",
"property": "padding-top",
"value": "22px",
"position": {
"start": {
"line": 2379,
"column": 9
},
"end": {
"line": 2379,
"column": 26
},
"source": "full-css-pretty.css,web-css-pretty.css,simple-css-pretty.css"
}
},
{
"type": "declaration",
"property": "margin-right",
"value": "-15px",
"position": {
"start": {
"line": 2381,
"column": 9
},
"end": {
"line": 2381,
"column": 28
},
"source": "full-css-pretty.css,web-css-pretty.css,simple-css-pretty.css"
}
},
{
"type": "declaration",
"property": "text-align",
"value": "justify",
"position": {
"start": {
"line": 2382,
"column": 9
},
"end": {
"line": 2383,
"column": 5
},
"source": "full-css-pretty.css,web-css-pretty.css,simple-css-pretty.css"
}
},
{
"type": "declaration",
"property": "float",
"value": "right",
"position": {
"start": {
"line": 2377,
"column": 9
},
"end": {
"line": 2377,
"column": 21
},
"source": "full-css-pretty.css,web-css-pretty.css,simple-css-pretty.css"
}
},
{
"type": "declaration",
"property": "font-size",
"value": "13px",
"position": {
"start": {
"line": 2380,
"column": 9
},
"end": {
"line": 2380,
"column": 24
},
"source": "full-css-pretty.css,web-css-pretty.css,simple-css-pretty.css"
}
}
],
"empty_declarations": [],
"selectors_removed": []
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment