├── .gitignore ├── LICENSE ├── README.md └── lib └── extractcss.js /.gitignore: -------------------------------------------------------------------------------- 1 | .idea -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2013-2016 Adnan Topal 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # extractCSS 2 | 3 | extractCSS is a JavaScript library and an online tool that lets you extract element ID, class and inline styles from HTML document and output them as CSS stylesheet. 4 | 5 | A hosted online version of extract css is available at [extractcss.com](http://extractcss.com). All you have to do is to type or paste your HTML document and let the tool to do the rest for you! -------------------------------------------------------------------------------- /lib/extractcss.js: -------------------------------------------------------------------------------- 1 | /** 2 | * extractcss.js 3 | * https://github.com/adnantopal/extractcss 4 | * http://extractcss.com/ 5 | * Author: @adnantopal 6 | * Copyright 2013-2016, Adnan Topal (adnan.co) 7 | * Licensed under the MIT license. 8 | */ 9 | (function( root, factory ) { 10 | if ( typeof define === 'function' && define.amd ) { 11 | define( [], factory ); 12 | } else if ( typeof module === 'object' && module.exports ) { 13 | module.exports = factory(); 14 | } else { 15 | root.extractCSS = factory(); 16 | } 17 | }( this, function() { 18 | "use strict"; 19 | 20 | var outputArr = [], 21 | outputStr = ''; 22 | 23 | function getInlineStyle( element ) { 24 | if ( element.hasAttribute( 'style' ) ) { 25 | return element.getAttribute( 'style' ); 26 | } 27 | 28 | return null; 29 | } 30 | 31 | function buildClassString( classes ) { 32 | if ( classes === null ) { 33 | return; 34 | } 35 | 36 | var classString = classes.trim().replace( /(\s{2,})/g, ' ' ).split( ' ' ).join( '.' ); 37 | 38 | return '.' + classString; 39 | } 40 | 41 | function extractIds( input ) { 42 | var elements = input.querySelectorAll( '*[id]' ); 43 | 44 | Array.prototype.forEach.call( elements, function( element ) { 45 | var elementId = element.getAttribute( 'id' ); 46 | 47 | if ( elementId === null || elementId === '' ) { 48 | return; 49 | } 50 | 51 | outputArr.push( { 52 | selector: '#' + elementId, 53 | style: getInlineStyle( element ) 54 | } ); 55 | } ); 56 | 57 | return outputArr; 58 | } 59 | 60 | function extractClasses( input ) { 61 | var elements = input.querySelectorAll( '*[class]' ), 62 | tmpArr = []; 63 | 64 | Array.prototype.forEach.call( elements, function( element ) { 65 | var elementClasses = element.getAttribute( 'class' ), 66 | elementClassString = buildClassString( elementClasses ); 67 | 68 | if ( element.getAttribute( 'id' ) || tmpArr.indexOf( elementClassString ) !== -1 || elementClasses === null ) { 69 | return; 70 | } 71 | 72 | tmpArr.push( elementClassString ); 73 | 74 | outputArr.push( { 75 | selector: elementClassString, 76 | style: getInlineStyle( element ) 77 | } ); 78 | } ); 79 | 80 | return outputArr; 81 | } 82 | 83 | function extractStyles( input ) { 84 | var elements = input.querySelectorAll( '*[style]:not([id]):not([class])' ); 85 | 86 | Array.prototype.forEach.call( elements, function( element ) { 87 | var parent = element.parentNode; 88 | 89 | if ( parent.hasAttribute( 'id' ) ) { 90 | outputArr.push( { 91 | selector: '#' + parent.getAttribute( 'id' ) + ' > ' + element.tagName.toLowerCase(), 92 | style: getInlineStyle( element ) 93 | } ); 94 | } else if ( parent.hasAttribute( 'class' ) ) { 95 | outputArr.push( { 96 | selector: buildClassString( parent.getAttribute( 'class' ) ) + ' > ' + element.tagName.toLowerCase(), 97 | style: getInlineStyle( element ) 98 | } ); 99 | } 100 | } ); 101 | 102 | return outputArr; 103 | } 104 | 105 | function outputCSS( extractStyle ) { 106 | outputArr.forEach( function( elem ) { 107 | outputStr += elem.selector + '{' + (elem.style && extractStyle ? elem.style : '') + '}'; 108 | } ); 109 | 110 | return outputStr; 111 | } 112 | 113 | function extract( input, options ) { 114 | var inputEl = document.createElement( 'div' ); 115 | inputEl.innerHTML = input; 116 | 117 | options.extractAnonStyle && extractStyles( inputEl ); 118 | options.extractIds && extractIds( inputEl ); 119 | options.extractClasses && extractClasses( inputEl ); 120 | 121 | return outputCSS( options.extractStyle ); 122 | } 123 | 124 | return { 125 | extract: extract, 126 | extractId: extractIds, 127 | extractClass: extractClasses, 128 | extractStyle: extractStyles 129 | }; 130 | } )); --------------------------------------------------------------------------------