Javascript Project to Convert CSS Code to Inline Javascript Code in Browser Using Materialize CSS

Welcome folks today in this blog post we will be building a css to javascript source code converter in browser using materialize css. All the full source code of the application is shown below

Get Started

In order to get started you need to make an index.html file and copy paste the following code

First of all we will be including the materialize css cdn and jquery cdn and highlight.js cdn as shown below

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.0/css/materialize.min.css">
    <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/8.6/styles/default.min.css">
</head>
<body>
    <div class="container">
        <div class="section">
            <h5>Conversion between CSS -> Inline JS Style</h5>
            <p>Stuff</p>
        </div>
        <div class="divider"></div>
        <div class="row">

            <div class="input-field  col s6">
                <textarea class="materialize-textarea"></textarea>
                <label for="textarea1">put here your css</label>
            </div>
            <div class="input-field col s6">

                <pre style="margin-top: 40px" class="z-depth-1"><code class="js">...</code></pre>
                <label for="textarea1">JS here!</label>
            </div>
        </div>
    </div>
</body>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.0/js/materialize.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/8.6/highlight.min.js"></script>
</html>

<!DOCTYPE html>

<head>

<title>Document</title>

</head>

<body>

<h5>Conversion between CSS -> Inline JS Style</h5>

<p>Stuff</p>

</div>

</div>

</div>

</body>

</html>

Here in this block of html code we have the textarea where the user will write the css code and also we have the resultant textarea widget where we will be displaying the javascript code

After that we will be writing the javascript code where we will be converting the css code to inline javascript styles as shown below

script.js

hljs.initHighlightingOnLoad();
var SPACE = '    ';
function toProperty(name){
 
 	if(name.charAt(0) == "-") name = name.slice(0);

	return name.replace(/[^a-z0-9]([a-z0-9])?/gi, function(v, l){
	       if(l) return l.toUpperCase();
	       return "";
	}) ;

}

function toSelectors(name){
	var names = name.split(",");

	return names.map(function(name){
    name = name.trim();
		var newName = "";

		if(name.charAt(0) == "."){
			newName += "Class";
			name = name.slice(1);
		}else if(name.charAt(0) == "#"){
			newName += "Id";
			name = name.slice(1);
		}else{
			newName += "Element";
		}

		return name.replace(/([^a-z0-9])([a-z0-9])?/gi, function(v, c, l){
		       if(l) return (c == "," || c == " ") ?  l.toLowerCase() : l.toUpperCase();
		       return "";
		}) + newName;

	});

}

function tokenizer(code){

	var tokens = [];
	var token = '';
	var whitespc = ['\r\n', '\n\r', '\n', '\r'];
	var lastChar = '\0';
	var nextChar = '\0';
	var char = '\0';
	var specialChars = ["{","}",":",";"];
	var specialCharsPB = ["{","}",";"];
	var sc = null;
	var inBrackets = false;

	for(var i = 0; i < code.length; i++){

		if(i) lastChar = code.charAt(i-1);
		char = code.charAt(i);
		if(i+1 < code.length) nextChar = code.charAt(i+1);

		if(~whitespc.indexOf(char) && ~whitespc.indexOf(lastChar)){
			continue;
		}
 
		sc = inBrackets ? specialChars : specialCharsPB;

		

		if(~sc.indexOf(char)){
			if(char == "{") inBrackets = true;
			if(char == "}") inBrackets = false;
			tokens.push(token);
			tokens.push(char);
			token = '';			
			continue;
		}

		token += char;

	}

	if(token) tokens.push(token);


	return tokens
			.map(function(token){ return token.trim(); })
			.filter(function(token){ return token; });

}

function repeat(char, times){
	if(times) return repeat(char, times-1) + char;
	return "";
}

function convertoToJS(tokens){

	var items = [];
	var actualItem = null;
	var actualProp = null;
	debugger;
	function readSelector(token){

		 
		var selectors = toSelectors(token);

		actualItem = {
			originalValue: token,
			selectors: selectors,
			values: {}
		};

 		actualProp = null;
 		items.push(actualItem);

		return readBracketO;
	}

	function readBracketO(token){

		if(token != "{") throw new Error("Era esperado um '{' ");

		return readProperty;
	}

	function readBracketC(token){
		if(token != "}") throw new Error("Era esperado um '}' ");
		return readSelector;
	}

	function readDefinition(token){
		if(token != ":") throw new Error("Era esperado um ':' ");

		return readValue;
	}

	function readProperty(token){

		if(token == "}") return readBracketC(token);

		var property = toProperty(token);
 		actualProp = property;

		if(!actualItem.values[property]){
			actualItem.values[property] = [];
		}

		return readDefinition;
	}

	function readValue(token){

		actualItem.values[actualProp].push(token);

		return readFinal;
	}

	function readFinal(token){
		if(token == "}") return readBracketC(token);
		if(token != ";")  throw new Error("Era esperado um ';' ");
		return readProperty;
	}

 
	var nextAction = readSelector;
	var i = 0;
	tokens.forEach(function(token){
		i++;
		console.log("processing " + i);
		nextAction = nextAction(token);		

	});

	return renderJS(items);

}

function renderJS(items){

	var objects = ["var styles = {"];
	objects = objects.concat(items.map(renderItem).join(","));
	objects.push("}");
	return objects.join("\n");
}

function renderItem(item){

	var code = ["\n//" + item.originalValue];

	var properties = [];

	for(var prop in item.values){

		var propitem = {
			name: prop,
			value: item.values[prop][item.values[prop].length - 1]
		};
		var markup = '"';
		if(~propitem.value.indexOf('"')) {
      markup = "'";
      propitem.value = propitem.value.replace(/'/gi, "\\'");
    }
		properties.push(SPACE + SPACE +  propitem.name + ": " + markup + propitem.value + markup);

	}

	properties = properties.map(function(x){ return SPACE +  x; });

	item.selectors.forEach(function(i){

		code.push(SPACE + i + ": {");
		code.push(properties.join(",\n"));
		code.push(SPACE + "}");

	});

	return code.join("\n");

}

var txt = document.querySelector("textarea");
var code = document.querySelector("code");


txt.addEventListener("change", function(){

	window.tokens = tokenizer(txt.value);
	code.textContent = convertoToJS(window.tokens);
});

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

185

186

187

188

189

190

191

192

193

194

195

196

197

198

199

200

201

202

203

204

205

206

207

208

209

210

211

212

213

214

215

216

217

218

219

220

221

222

223

224

225

226

227

hljs.initHighlightingOnLoad();

var SPACE = ' ';

function toProperty(name){

if(name.charAt(0) == "-") name = name.slice(0);

return name.replace(/[^a-z0-9]([a-z0-9])?/gi, function(v, l){

if(l) return l.toUpperCase();

return "";

}) ;

}

function toSelectors(name){

var names = name.split(",");

return names.map(function(name){

name = name.trim();

var newName = "";

if(name.charAt(0) == "."){

newName += "Class";

name = name.slice(1);

}else if(name.charAt(0) == "#"){

newName += "Id";

name = name.slice(1);

}else{

newName += "Element";

}

return name.replace(/([^a-z0-9])([a-z0-9])?/gi, function(v, c, l){

if(l) return (c == "," || c == " ") ? l.toLowerCase() : l.toUpperCase();

return "";

}) + newName;

});

}

function tokenizer(code){

var tokens = [];

var token = '';

var whitespc = ['\r\n', '\n\r', '\n', '\r'];

var lastChar = '\0';

var nextChar = '\0';

var char = '\0';

var specialChars = ["{","}",":",";"];

var specialCharsPB = ["{","}",";"];

var sc = null;

var inBrackets = false;

for(var i = 0; i < code.length; i++){

if(i) lastChar = code.charAt(i-1);

char = code.charAt(i);

if(i+1 < code.length) nextChar = code.charAt(i+1);

if(~whitespc.indexOf(char) && ~whitespc.indexOf(lastChar)){

continue;

}

sc = inBrackets ? specialChars : specialCharsPB;

if(~sc.indexOf(char)){

if(char == "{") inBrackets = true;

if(char == "}") inBrackets = false;

tokens.push(token);

tokens.push(char);

token = '';

continue;

}

token += char;

}

if(token) tokens.push(token);

return tokens

.map(function(token){ return token.trim(); })

.filter(function(token){ return token; });

}

function repeat(char, times){

if(times) return repeat(char, times-1) + char;

return "";

}

function convertoToJS(tokens){

var items = [];

var actualItem = null;

var actualProp = null;

debugger;

function readSelector(token){

var selectors = toSelectors(token);

actualItem = {

originalValue: token,

selectors: selectors,

values: {}

};

actualProp = null;

items.push(actualItem);

return readBracketO;

}

function readBracketO(token){

if(token != "{") throw new Error("Era esperado um '{' ");

return readProperty;

}

function readBracketC(token){

if(token != "}") throw new Error("Era esperado um '}' ");

return readSelector;

}

function readDefinition(token){

if(token != ":") throw new Error("Era esperado um ':' ");

return readValue;

}

function readProperty(token){

if(token == "}") return readBracketC(token);

var property = toProperty(token);

actualProp = property;

if(!actualItem.values[property]){

actualItem.values[property] = [];

}

return readDefinition;

}

function readValue(token){

actualItem.values[actualProp].push(token);

return readFinal;

}

function readFinal(token){

if(token == "}") return readBracketC(token);

if(token != ";") throw new Error("Era esperado um ';' ");

return readProperty;

}

var nextAction = readSelector;

var i = 0;

tokens.forEach(function(token){

i++;

console.log("processing " + i);

nextAction = nextAction(token);

});

return renderJS(items);

}

function renderJS(items){

var objects = ["var styles = {"];

objects = objects.concat(items.map(renderItem).join(","));

objects.push("}");

return objects.join("\n");

}

function renderItem(item){

var code = ["\n//" + item.originalValue];

var properties = [];

for(var prop in item.values){

var propitem = {

name: prop,

value: item.values[prop][item.values[prop].length - 1]

};

var markup = '"';

if(~propitem.value.indexOf('"')) {

markup = "'";

propitem.value = propitem.value.replace(/'/gi, "\\'");

}

properties.push(SPACE + SPACE + propitem.name + ": " + markup + propitem.value + markup);

}

properties = properties.map(function(x){ return SPACE + x; });

item.selectors.forEach(function(i){

code.push(SPACE + i + ": {");

code.push(properties.join(",\n"));

code.push(SPACE + "}");

});

return code.join("\n");

}

var txt = document.querySelector("textarea");

var code = document.querySelector("code");

txt.addEventListener("change", function(){

window.tokens = tokenizer(txt.value);

code.textContent = convertoToJS(window.tokens);

});