PowerShell

Formatting and minifying resources (HTML, CSS, JavaScript) with PowerShell

When you work with HTML, CSS, and JavaScript, you often meet three versions on how those are stored in files – minified, formatted, somewhere in the middle (usually a total mess). I have all three versions in my PSWriteHTML module. Some are minified 3rd party resources, some are generated by my PowerShell commands (and are a total mess when it comes to formatting), and finally, some are formatted resources by using built-in VSCode features. In whatever form they are, they generally have no impact on how browsers display them. Browsers will read them in any kind and not care for how they look.

💡 Formatting and Optimizations

While formatting doesn't matter for browsers, it's much easier to debug, change HTML, CSS or JavaScript if it's properly formatted code. Trying to understand what happens in Minified JS script like the one below is far from optimal.

(function(){function main(){var tabButtons = [].slice.call(document.querySelectorAll("ul.tab-nav li a.buttonTab"));tabButtons.map(function(button){button.addEventListener("click",function(){document .querySelector("li a.active.buttonTab") .classList.remove("active");button.classList.add("active");document .querySelector(".tab-pane.active") .classList.remove("active");document .querySelector(button.getAttribute("href")) .classList.add("active")})})}if(document.readyState!== "loading"){main()}else{document.addEventListener("DOMContentLoaded",main)}})();

What if this could be formatted as code below?

(function() {
    function main() {
        var tabButtons = [].slice.call(document.querySelectorAll("ul.tab-nav li a.buttonTab"));
        tabButtons.map(function(button) {
            button.addEventListener("click", function() {
                document.querySelector("li a.active.buttonTab").classList.remove("active");
                button.classList.add("active");
                document.querySelector(".tab-pane.active").classList.remove("active");
                document.querySelector(button.getAttribute("href")).classList.add("active")
            })
        })
    }
    if (document.readyState !== "loading") {
        main()
    } else {
        document.addEventListener("DOMContentLoaded", main)
    }
})();

Much more beautiful, more comfortable to read and you can do some changes to it. Same goes for HTML. Often my PSWriteHTML module generates something like this:

My title
NameIdHandleCountWorkingSet
1Password22268100787146496
aesm_service253401893948544

Which is hard to understand and modify. Let's check the formatted version:

        
        
                
                
                
                
                My title
                
                
                
                
                
                
        
        
                

                        

                                
                                        

                                                Name
                                                Id
                                                HandleCount
                                                WorkingSet
                                        

                                
                                
                                        

                                                1Password
                                                22268
                                                1007
                                                87146496
                                        

                                        

                                                aesm_service
                                                25340
                                                189
                                                3948544

Of course, you can do that formatting with VSCode, or you can use some online converter to do it for you, but I thought how hard it would be to do it in PowerShell?

💡 How to Optimize (Minify) or Format HTML, CSS and JavaScript with PowerShell

Turns out with some help of NET libraries you can Format HTML, JavaScript, and CSS. You can also reverse that process and enable minification of those resources. Say hello to PSParseHTML. This little PowerShell module can do two things (for now).

  • 📝 Format HTML, JavaScript and CSS
  • 📝 Optimize (Minify) HTML, JavaScript and CSS

It can do so thru six different functions

  • 📝 Optimize-CSS
  • 📝 Optimize-HTML
  • 📝 Optimize-JavaScript
  • 📝 Format-CSS
  • 📝 Format-HTML
  • 📝 Format-JavaScript
They expect input as a string or from a file. They output to string or to file. I'm going to focus only on the input and output to string, but the idea is generally the same.

💡 Formatting HTML with PowerShell

Let's see how this works when trying to format (prettify) HTML

$HTMLContent = 'My title
NameIdHandleCountWorkingSet
1Password22268100787146496
aesm_service253401893948544
' Format-HTML -Content $HTMLContent

Output

        
        
                
                
                
                
                My title
                
                
                
                
                
                
        
        
                

                        

                                
                                        

                                                Name
                                                Id
                                                HandleCount
                                                WorkingSet
                                        

                                
                                
                                        

                                                1Password
                                                22268
                                                1007
                                                87146496
                                        

                                        

                                                aesm_service
                                                25340
                                                189
                                                3948544

💡 Formatting CSS with PowerShell

Let's see how this works when trying to format (prettify) CSS

$CSS = '.tabsWrapper{text-align:center;margin:10px auto;font-family:"Roboto", sans-serif}.tabs{margin-top:10px;font-size:15px;padding:0;list-style:none;background:rgba(255, 255, 255, 1);box-shadow:0 5px 20px rgba(0, 0, 0, 0.1);border-radius:4px;position:relative}.tabs .round{border-radius:4px}.tabs a{text-decoration:none;color:rgba(119, 119, 119, 1);text-transform:uppercase;padding:10px 20px;display:inline-block;position:relative;z-index:1;transition-duration:0.6s}.tabs a.active{color:rgba(255, 255, 255, 1)}.tabs a i{margin-right:5px}.tabs .selector{display:none;height:100%;position:absolute;left:0;top:0;right:0;bottom:0;z-index:1;border-radius:4px}.tabs-content{display:none}.tabs-content.active{display:block}'

Format-CSS -Content $CSS

Output

.tabsWrapper { text-align: center; margin: 10px auto; font-family: "Roboto", sans-serif  }
.tabs { margin-top: 10px; font-size: 15px; padding: 0; list-style: none; background: rgba(255, 255, 255, 1); box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1); border-radius: 4px; position: relative }
.tabs .round { border-radius: 4px }
.tabs a { text-decoration: none; color: rgba(119, 119, 119, 1); text-transform: uppercase; padding: 10px 20px; display: inline-block; position: relative; z-index: 1; transition-duration: 0.6s }
.tabs a.active { color: rgba(255, 255, 255, 1) }
.tabs a i { margin-right: 5px }
.tabs .selector { display: none; height: 100%; position: absolute; left: 0; top: 0; right: 0; bottom: 0; z-index: 1; border-radius: 4px }
.tabs-content { display: none }
.tabs-content.active { display: block }

💡 Formatting JavaScript with PowerShell

Let's see how this works when trying to format (prettify) JavaScript

$JSContent = '(function(){function main(){var tabButtons = [].slice.call(document.querySelectorAll("ul.tab-nav li a.buttonTab"));tabButtons.map(function(button){button.addEventListener("click",function(){document .querySelector("li a.active.buttonTab") .classList.remove("active");button.classList.add("active");document .querySelector(".tab-pane.active") .classList.remove("active");document .querySelector(button.getAttribute("href")) .classList.add("active")})})}if(document.readyState!== "loading"){main()}else{document.addEventListener("DOMContentLoaded",main)}})();'

Format-JavaScript -Content $JSContent

Output

(function() {
    function main() {
        var tabButtons = [].slice.call(document.querySelectorAll("ul.tab-nav li a.buttonTab"));
        tabButtons.map(function(button) {
            button.addEventListener("click", function() {
                document.querySelector("li a.active.buttonTab").classList.remove("active");
                button.classList.add("active");
                document.querySelector(".tab-pane.active").classList.remove("active");
                document.querySelector(button.getAttribute("href")).classList.add("active")
            })
        })
    }
    if (document.readyState !== "loading") {
        main()
    } else {
        document.addEventListener("DOMContentLoaded", main)
    }
})();

💡 Optimizing (Minification) HTML with PowerShell

Let's see how this works when trying to minify HTML

$HTMLContentFormatted = @"

        
        
                
                
                
                
                My title
                
                
                
                
                
                
        
        
                

                        

                                
                                        

                                                Name
                                                Id
                                                HandleCount
                                                WorkingSet
                                        

                                
                                
                                        

                                                1Password
                                                22268
                                                1007
                                                87146496
                                        

                                        

                                                aesm_service
                                                25340
                                                189
                                                3948544
                                        

                                
                        

                

                

                
        
        
        

"@

Optimize-HTML -Content $HTMLContentFormatted

Output

My title
NameIdHandleCountWorkingSet
1Password22268100787146496
aesm_service253401893948544

Good enough right?

💡 Optimizing (Minification) JavaScript with PowerShell

Let's see how this works when trying to minify JavaScript (JS)

$JSCode = @"
function openTab(evt, tabName) {
    // Declare all variables
    var i, tabcontent, tablinks;

    // Get all elements with class="tabcontent" and hide them
    tabcontent = document.getElementsByClassName("insideTab");
    for (i = 0; i < tabcontent.length; i++) {
        tabcontent[i].style.display = "none";
    }

    // Get all elements with class="tablinks" and remove the class "active"
    tablinks = document.getElementsByClassName("tablinks");
    for (i = 0; i < tablinks.length; i++) {
        tablinks[i].className = tablinks[i].className.replace(" is-active", "");
    }

    // Show the current tab, and add an "active" class to the link that opened the tab
    try {
        document.getElementById(tabName).style.display = "block";
    } catch {
        // This error happens when someone forgot addng new TABS with proper names
        // Therefore style wouldn't exits on it.
    }
    evt.currentTarget.className += " active";
}
"@

Optimize-JavaScript -Content $JSCode

Output

function openTab(n,t){for(var r,u=document.getElementsByClassName("insideTab"),i=0;i

💡 Optimizing (Minification) CSS with PowerShell

Let's see how this works when trying to minify CSS

$CssCode = @"
.tabsWrapper {
    text-align: center;
    margin: 10px auto;
    font-family: 'Roboto', sans-serif ;
}

.tabs {
    margin-top: 10px;
    font-size: 15px;
    padding: 0px;
    list-style: none;
    background: #fff;
    box-shadow: 0px 5px 20px rgba(0, 0, 0, 0.1);
    border-radius: 4px;
    position: relative;
}

.tabs .round {
    border-radius: 4px;
}

.tabs a {
    text-decoration: none;
    color: #777;
    text-transform: uppercase;
    padding: 10px 20px;
    display: inline-block;
    position: relative;
    z-index: 1;
    transition-duration: 0.6s;
}

.tabs a.active {
    color: #fff;
}

.tabs a i {
    margin-right: 5px;
}

.tabs .selector {
    display: none;
    height: 100%;
    position: absolute;
    left: 0px;
    top: 0px;
    right: 0px;
    bottom: 0px;
    z-index: 1;
    border-radius: 4px;
    background: ColorSelector;
}

.tabs-content {
    display: none;
}

.tabs-content.active {
    display: block;
}
"@

Optimize-CSS -Content $CssCode

Output

.tabsWrapper{text-align:center;margin:10px auto;font-family:"Roboto", sans-serif}.tabs{margin-top:10px;font-size:15px;padding:0;list-style:none;background:rgba(255, 255, 255, 1);box-shadow:0 5px 20px rgba(0, 0, 0, 0.1);border-radius:4px;position:relative}.tabs .round{border-radius:4px}.tabs a{text-decoration:none;color:rgba(119, 119, 119, 1);text-transform:uppercase;padding:10px 20px;display:inline-block;position:relative;z-index:1;transition-duration:0.6s}.tabs a.active{color:rgba(255, 255, 255, 1)}.tabs a i{margin-right:5px}.tabs .selector{display:none;height:100%;position:absolute;left:0;top:0;right:0;bottom:0;z-index:1;border-radius:4px}.tabs-content{display:none}.tabs-content.active{display:block}

💡 Extracing TEXT from HTML

As an added option there's also the seventh function called Convert-HTMLToText. It scans the whole HTML and removes all the tags.

$HTMLContentFormatted = @"

        
        
                
                
                
                
                My title
                
                
                
                
                
                
        
        
                

                        

                                
                                        

                                                Name
                                                Id
                                                HandleCount
                                                WorkingSet
                                        

                                
                                
                                        

                                                1Password
                                                22268
                                                1007
                                                87146496
                                        

                                        

                                                aesm_service
                                                25340
                                                189
                                                3948544
                                        

                                
                        

                

                

                
        
        
        

"@

Convert-HTMLToText -Content $HTMLContentFormatted

Output

Name Id HandleCount WorkingSet   1Password 22268 1007 87146496  aesm_service 25340 189 3948544

It's not super fancy, but it works. Probably could be replaced with some fancy Regex.

💡 Current Limitations

What you should know when using this module is that for now when you format HTML, it doesn't format inline CSS and JavaScript. It means while you get prettified HTML with tabs and all, but CSS and JavaScript will stay in the same state. I will try to find a way to optimize this either by using a different library or by doing a custom reading and doing some PowerShell magic. We'll see.

💡 Using PSParseHTML as PowerShell Module

For easy use of PSParseHTML, you can install it from PowerShellGallery. Installing it is as easy as it gets.

Install-Module PSParseHTML -AllowClobber -Force

Code as always is stored on GitHub and is free to use and take. After you install it, all commands become available without you having to do anything. Of course, if you prefer to get sources from GitHub be my guest!

💡 Future of PSParseHTML

I may add few more things to this module (not yet sure what) and I do intend to integrate it with PSWriteHTML to either prettify or minify output depending on users needs. Not yet sure at what stage, which features but you can expect it to find it's way in there in one way or another. For now, you can use this in your projects as per your need.

This post was last modified on June 9, 2025 10:02

Przemyslaw Klys

System Architect with over 14 years of experience in the IT field. Skilled, among others, in Active Directory, Microsoft Exchange and Office 365. Profoundly interested in PowerShell. Software geek.

Share
Published by
Przemyslaw Klys
Tags: csshtmljavascriptpowershellpsparsehtmlpswritehtml
2 weeks ago

Recent Posts

Supercharging Your Network Diagnostics with Globalping for NET

Ever wondered how to run network diagnostics like Ping, Traceroute, or DNS queries from probes…

5 days ago

Automating Network Diagnostics with Globalping PowerShell Module

Are you tired of manually running network diagnostics like Ping, Traceroute, or DNS queries? The…

5 days ago

Enhanced Dashboards with PSWriteHTML – Introducing InfoCards and Density Options

Discover new features in the PSWriteHTML PowerShell module – including New-HTMLInfoCard, improved layout controls with…

2 weeks ago

Mastering Active Directory Hygiene: Automating SIDHistory Cleanup with CleanupMonster

Security Identifier (SID) History is a useful mechanism in Active Directory (AD) migrations. It allows…

2 weeks ago

Upgrade Azure Active Directory Connect fails with unexpected error

Today, I made the decision to upgrade my test environment and update the version of…

2 weeks ago

Mastering Active Directory Hygiene: Automating Stale Computer Cleanup with CleanupMonster

Have you ever looked at your Active Directory and wondered, "Why do I still have…

2 weeks ago