Tapatalk

How to CSS un-minify or reformat CSS block/file to pretty formatted?

How to CSS un-minify or reformat CSS block/file to pretty formatted?

1

    May 15, 2017#1

    Hello, all.

    I just upgraded to UltraEdit version 24.00.

    Some websites which I work on have the CSS code saved in such a way that it is efficient for the servers to send and for the browsers to interpret, but painful to look at, let alone read.

    Does UltraEdit have a feature to un-minify CSS code?

    If so, how do I use it?

    6,685587
    Grand MasterGrand Master
    6,685587

      May 16, 2017#2

      There is built-in no feature to pretty format a selected CSS block or an entire CSS file.

      But it should be no problem to use an UltraEdit script to reformat a selected CSS block or an entire CSS file.

      Although I'm quite sure there is somewhere available online a JavaScript code to pretty format a CSS block being compacted which could be used in an UltraEdit script, I wrote my own version.

      The first line with definition of variable sIndentDef determines the indentation which can be 1 or more spaces or a single tab character, i.e. "\t".

      Code: Select all

      var sIndentDef = "  ";  // Tab or spaces can be used for indentation.
      
      if (UltraEdit.document.length > 0)  // Is any file opened?
      {
         // Define environment for this script.
         UltraEdit.insertMode();
         if (typeof(UltraEdit.columnModeOff) == "function") UltraEdit.columnModeOff();
         else if (typeof(UltraEdit.activeDocument.columnModeOff) == "function") UltraEdit.activeDocument.columnModeOff();
      
         // Load selection into a string variable, or if nothing is
         // selected and the active file has the file extension CSS,
         // load everything in CSS file into a string variable.
         var sBlock;
         var nColumn = 0;
         var nLineNumber = 0;
         if (UltraEdit.activeDocument.isSel())
         {
            sBlock = UltraEdit.activeDocument.selection;
         }
         else if (UltraEdit.activeDocument.isExt("css"))
         {
            nColumn = UltraEdit.activeDocument.currentColumnNum;
            nLineNumber = UltraEdit.activeDocument.currentLineNum;
            UltraEdit.activeDocument.selectAll();
            sBlock = UltraEdit.activeDocument.selection;
         }
      
         // Is there anything loaded to reformat?
         if (sBlock.length)
         {
            var nInitialLength = sBlock.length;
      
            // Determine line termination type of active file.
            var sLineTerm;
            if (typeof(UltraEdit.activeDocument.lineTerminator) == "number")
            {
               if (UltraEdit.activeDocument.lineTerminator < 1) sLineTerm = "\r\n";
               else if (UltraEdit.activeDocument.lineTerminator == 1) sLineTerm = "\n";
               else sLineTerm = "\r";
            }
            else sLineTerm = "\r\n";
      
            // Remove trailing spaces and tabs from each line in block.
            sBlock = sBlock.replace(/[\t ]+([\r\n])/g,"$1");
      
            // Remove tabs and spaces around { and } in block.
            sBlock = sBlock.replace(/[\t ]*([{}])[\t ]*/g,"$1");
      
            // Insert a single space left of each { in block.
            sBlock = sBlock.replace(/{/g," {");
      
            // Insert line termination after { and after } and after ;
            // and after */ if there is not already a line terminator.
            do
            {
               var nLength = sBlock.length;
               sBlock = sBlock.replace(/([{};]|\*\/)([^\r\n])/g,"$1"+ sLineTerm + "$2");
            }
            while(nLength < sBlock.length);
      
            // Insert line termination before each } with no line termination already present.
            sBlock = sBlock.replace(/([^\r\n])}/g,"$1" + sLineTerm + "}");
      
            // Insert an empty line above each block comment and above a line with {
            // with no empty line or a line ending with { above already present in block.
            sBlock = sBlock.replace(/([^\r\n{])((?:\r?\n|\r)[ \t]*(?:\/\*|.* \{))/g,"$1" + sLineTerm + "$2");
      
            // Split up the block into an array of strings with each string being a line.
            var asLines = sBlock.split(sLineTerm);
      
            // Re-indent the lines whereby ignoring lines within a
            // block comment starting already with a space or tab.
            var bBlockComment = false;
            var sCurrentIndent = "";
            for (var nLine = 0; nLine < asLines.length; nLine++)
            {
               if (asLines[nLine] == "}")
               {
                  if (sCurrentIndent.length)
                  {
                     sCurrentIndent = sCurrentIndent.substr(sIndentDef.length);
                  }
                  if (sCurrentIndent.length)
                  {
                     asLines[nLine] = sCurrentIndent + "}";
                  }
                  continue;
               }
      
               if (!bBlockComment)
               {
                  asLines[nLine] = sCurrentIndent + asLines[nLine].replace(/^[\t ]+/,"");
               }
               else if (asLines[nLine].search(/^[\t ]/) < 0)
               {
                  asLines[nLine] = sCurrentIndent + asLines[nLine];
               }
      
               var asCommentOnOff = asLines[nLine].match(/\/\*|\*\//g);
               if (asCommentOnOff)
               {
                  for (var nComment = 0; nComment < asCommentOnOff.length; nComment++)
                  {
                     bBlockComment = (asCommentOnOff[nComment] == "/*") ? true : false;
                  }
               }
      
               if (asLines[nLine][asLines[nLine].length-1] == "{")
               {
                  sCurrentIndent += sIndentDef;
               }
            }
      
            // Join the lines back to a block.
            sBlock = asLines.join(sLineTerm);
      
            // Was the block modified at all determined by checking only length?
            if (nInitialLength != sBlock.length)
            {
               UltraEdit.activeDocument.write(sBlock);
            }
            else
            {
               if (nLineNumber)
               {
                  UltraEdit.activeDocument.gotoLine(nLineNumber,nColumn);
               }
               UltraEdit.messageBox("Nothing modified.","CSS reformatter");
            }
         }
      }
      
      Best regards from an UC/UE/UES for Windows user from Austria

      6
      NewbieNewbie
      6

        Dec 10, 2017#3

        Thanks a lot! Even though there a lot of online tools out there to beautify a minified CSS file, this is much more faster for me.

        1
        NewbieNewbie
        1

          May 10, 2018#4

          OMG! Mofi, I love you! :-)