REMOVE INLINE CSS FROM HTML FILES

1. The script recursively scans all html files in a directory
 2. For each html file, it
 a. scans for ‘style’ element recursively
 b. replaces each style element with a css class ‘cx — <tagName>_<count>’
 c. deletes the style element
 3. All the created css classes are written to a file ‘generatedCSS.scss’

1. Copy package.json and RemoveInlineCSS.js file to a directory
 2. In the directory, execute commands
 a. npm install → This will install all the required dependencies
 b. npm start → This will run the script
 3. The script will prompt for a directory name <dirName> having HTML files to be processed
 4. After successful script execution, existing html files will be updated and a new css file will be generated at location <dirName>/generatedCSS.scss

1. package.json

{
  "name":"remove_inline_css",
  "version":"1.0.0",
  "description":"",
  "scripts":{
  "start":"node RemoveInlineCSS.js"
  },
  "author":"madhuri4011@gmail.com",
  "license":"ISC",
  "dependencies":{
  "absurd":"⁰.3.9",
  "fs":"0.0.1-security",
  "glob":"⁷.1.4",
  "inline-style-2-json":"¹.1.0",
  "node-html-parser":"¹.1.16",
  "readline":"¹.3.0"
  }
 }

2. RemoveInlineCSS.js

var HTMLParser = require('node-html-parser'); // HTML parser
 var absurd = require("absurd"); // CSS preprocessor
 var inline_style_2_json = require("inline-style-2-json");
 //Converts CSS inline stlyes to JSON
 var fs = require('fs'); // To access file system
 var glob = require('glob');
 //Used to find all HTML files in a drectory recursivelyconst readline = require('readline');
 var count = 1;
 var dirname = "";
 var cssFile = "";
 var api = absurd(cssFile);
 var callBackCounter = 0;
 // accept directory path from user
 const rl = readline.createInterface({
  input: process.stdin,
  output: process.stdout
 });
 rl.question('Enter directory path? ', (path) => {
  dirname = path;
  cssFile = `${dirname}/generatedCSS.scss`;
  console.log("read data: " + dirname);
  readFiles(dirname, compileCSS);
  rl.close();
 });
 var compileCSS = function (err, success) {
  api.compile(function (err, css) {
  console.log("Compiled CSS: " + css);
  fs.writeFile(cssFile, css, function () {
  console.log("CSS file written successfully");
  });
  });
 };
 
 function processFile(filename, content, cb) {
  var global = HTMLParser.parse(content, {
  style: true
  });
  if (global.childNodes.length > 0) {
  extractInlineCSS(global, true, filename, function () {
  cb();
  });
  }
 }
 
 function readFiles(dirname, cb) {
  glob(dirname + "/**/*.html", null, function (er, files) {
  files.forEach(function (file) {
  console.log(file);
  fs.readFile(file, 'utf-8', function (err, content) {
  if (err) {
  return;
  }
  processFile(file, content, function () {
  callBackCounter++;
  if (callBackCounter == files.length) {
  cb();
  }
  });
  });
  });
  });
 }
 
 function extractInlineCSS(parentNode, isRoot, filename, cb) {
  for (let i = 0; i < parentNode.childNodes.length; i++) {
  var childNode = parentNode.childNodes[i];
  if (childNode.attributes != undefined && childNode.attributes.style != undefined) {
  console.log("***" + childNode.attributes.style);
  let styleJsonObj = inline_style_2_json(childNode.attributes.style);
  let htmlClassName = "cx - " + childNode.tagName + "_" + count;
  let cssClassName = ".cx - " + childNode.tagName + "_" + count++;
  let style = {
  [cssClassName]: styleJsonObj
  };
  api.add(style);
  // if a given node already has a class attribute
  if (childNode.attributes.class != undefined) {
  let newClasses = childNode.attributes.class + " " + htmlClassName;
  childNode.attributes.class = newClasses;
  childNode.rawAttributes.class = newClasses;
  }
  // A given node doesn't have a class attribute
  else {
  childNode.attributes.class = htmlClassName;
  childNode.rawAttributes.class = htmlClassName;
  }
  delete childNode.attributes.style;
  var str = '';
  let updatedAttributes = childNode.attributes;
  for (let i = 0; i < Object.keys(updatedAttributes).length; i++) {
  str += `${Object.keys(updatedAttributes)[i]}="${updatedAttributes[Object.keys(updatedAttributes)[i]]}" `;
  }
  childNode.rawAttrs = str;
  // console.log(`class ` + childNode.attributes.class);
  // console.log(`updated html: ` + parentNode.toString());
  }
  if (childNode.childNodes.length > 0) {
  extractInlineCSS(childNode, false, filename, cb);
  }
  };
  if (isRoot) {
  fs.writeFile(filename, parentNode.toString(), function (err) {
  if (!err) {
  console.log(`${filename} has been updated successfully.`);
  cb();
  }
  });
  }
 }

3. Sample Test HTML — TestFile.html

<!DOCTYPE html>
 <html>
  <body>
 
  <p style="color:red;">I am red</p>
 
  <div style="color:red;">
  I am red again
 
  <div style="color:blue;">
  I am blue
 
  <p style="color:yellow;">
  I am yellow
 
  </p>
 
  </div>
 
  <p style="font-size:50px;">I am big</p>
 
  </div>
  </body>
 </html>
 

4. Output

TestFile.html

<html>
  <body>
 
  <p class="cx - p_1" >I am red</p>
 
  <div class="cx - div_2" >
  I am red again
 
  <div class="cx - div_3" >
  I am blue
 
  <p class="cx - p_4" >
  I am yellow
 
  </p>
 
  </div>
 
  <p class="cx - p_5" >I am big</p>
 
  </div>
  </body>
 </html>

GeneratedCSS.scss

.cx - p_1, .cx - div_2 {
  color: red;
 }
 .cx - div_3 {
  color: blue;
 }
 .cx - p_4 {
  color: yellow;
 }
 .cx - p_5 {
  font-size: 50px;
 }

 The script strips-off any comments and <!DOCTYPE html> in html file

PS: The script was written around 2 years back hence we may need to upgrade the library versions and the script can be enhanced using ES6 async/await.

Source: Medium - Madhuri Pednekar

The Tech Platform

www.thetechplatform.com