Created
May 24, 2016 16:17
-
-
Save joelcardinal/546be3b481b03962e3bc6917ccd16d25 to your computer and use it in GitHub Desktop.
Outputs CSS file based on all child elements of and including provided parent element that have a class or id
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
(function(){ | |
var query = '.myParentClass'; // required, selector query of containing element | |
var prefix = ''; // optional, leave '' if no prefix | |
// ========= end of input params ========== // | |
var cssArr = []; | |
function addClassRule(classValue){ | |
var cssRule = '', | |
classArr = []; | |
if(/ /.test(classValue)){ | |
classArr = classValue.split(' '); | |
cssRule = '.' + prefix + classArr.join(' .'+ prefix) + ' {\n\r}\n\r'; | |
}else{ | |
cssRule = '.' + prefix + classValue + ' {\n\r}\n\r'; | |
} | |
if(cssArr.indexOf(cssRule)<1){ | |
cssArr.push(cssRule); | |
console.log(cssRule); | |
} | |
} | |
function addIdRule(idValue){ | |
var idRule = '#' + idValue + ' {\n\r}\n\r'; | |
cssArr.push(idRule); | |
console.log(idRule); | |
} | |
// Download content as file hack, file name may work depending on browser | |
// http://dtsn.me/2013/03/12/downloading-data-from-localstorage/ | |
function download() { | |
var tmpEl = document.createElement('a'); | |
tmpEl.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(cssArr.join(''))); | |
tmpEl.setAttribute('download', 'My_CSS_File'); | |
// click event | |
var event = new MouseEvent('click', { | |
'view': window, | |
'bubbles': true, | |
'cancelable': true | |
}); | |
var clicked = !tmpEl.dispatchEvent(event); | |
} | |
function cssToFile(){ | |
if(arguments.length<1){console.log('no query provided'); return} | |
var query = arguments[0], | |
prefix = arguments.length > 1 && arguments[1] !== '' ? arguments[1] : '', | |
queriedElems = document.querySelectorAll(query), | |
queriedElemsLength = queriedElems.length; | |
// abort if no elems found from query | |
if(queriedElemsLength < 1){console.log('sorry, no elements found with that query'); return;} | |
for(p=0;p<queriedElemsLength;p++){ | |
var containerElem = queriedElems[p], | |
containerElemClass = containerElem.getAttribute('class'), | |
containerElemId = containerElem.getAttribute('id'), | |
containerElemChildren = containerElem.querySelectorAll('*'), | |
containerElemChildrenLength = containerElemChildren.length; | |
if(containerElemClass){ | |
addClassRule(containerElemClass); | |
} | |
if(containerElemId){ | |
addIdRule(containerElemId); | |
} | |
// we're done if no children found | |
if(containerElemChildrenLength < 1){return} | |
for(c=0;c<containerElemChildrenLength;c++){ | |
// we only write CSS for elems that have a class or id | |
if(containerElemChildren[c].getAttribute('class')){ | |
var containerElemChildClass = containerElemChildren[c].getAttribute('class'); | |
addClassRule(containerElemChildClass); | |
} | |
if(containerElemChildren[c].getAttribute('id')){ | |
var containerElemChildId = containerElemChildren[c].getAttribute('id'); | |
addIdRule(containerElemChildId); | |
} | |
} | |
} // for | |
download(); | |
} | |
cssToFile(query,prefix); | |
}()); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment