Feature: Purgecss

[mdarrik]

Feature: PurgeCSS

History/Overview

I mentioned this on stream and you asked me to propose it as a feature. It seems especially relevant since you're using a mix of custom CSS and bootstrap. Essentially, Purgecss scans through files and removes any CSS that is not being used. Since Blazor still passes a lot of data to the client, reducing your CSS elsewhere could be useful.

Here's a link: https://www.purgecss.com/

It's designed to work with JavaScript (cue the horse sound), and HTML files, but also works with Pug, blade, and other HTML templating language, so it will probably work with CSHTML. I'm not 100% sure if it will work with anything not directly in the templates however (e.g. if you pass the CSS classes

An Alternative: PurifyCSS

There's apparently an alternative: purifycss, which scans all text in the files you specify, which can result in some false positives. I have never used purifycss, and can't vouch for it.

Both apps have a CLI, which is probably the way to go so you don't have to add webpack, grunt or gulp.

Potential Build Ideas

Whichever one you choose, I'd probably look at the csproj files from one of the SPA templates and use a modified version of their publish instructions to purge/purify your CSS when you publish. This way your development isn't slowed down by classes being purged and needing to rebuild/purge on every new BlazorStrap component you add.

You should be able to ping me here or on Twitter (@mdarrik) if you have questions in case I can't watch the stream.

[csharpfritz]

This is part of a larger solution we need to address to simplify the CSS we deliver.

We'll need a build step and update our source files that reference CSS

[mdarrik]

So one option may be to serve different index.html pages from the server based on which environment. This may be a bit hacky, and I'd have to dive into the actual asp.net middleware/routing used, but it seems feasible.

[SimonGeering]

Further to discussions about this on stream today:

If you just want SCSS to CSS transpile/build then as mentioned by others the WebCompiler tool by Mads Kristensen is a nice option, which I believe can be configured as a NuGet package to allow it to work from a CLI based build. Although that was intended for CI/CD it might work for a VSCode build task too.

Whichever solution we come to for this it is worth remembering we should ensure that the project works on a machine that does not have Visual Studio available so we don't exclude the VSCode users from the opportunity to contribute should they so wish.

[Stelzi79]

Just watching the recording of the stream.

May I ask if this "optimization"-thing (at least at this stage of the project) fits flat out into the territory of "premature optimization" or "YAGNI (You Ain't Gonna Need It)"?

As I understood such a tool like this is that it removes unused CSS classes in the CSS file.

Now my questions:

How much exactly (bytes, kilobytes, megabytes) are you expecting to save by using such a tool?

This project already uses Blazor client side which literally means that you already shove multiple MB of framework assemblies to the client. So does it, when you look at the overall picture, make sense to put effort in saving some bytes from being transmitted for the CSS files?

Why is it legitimate to assume to have a ton of unused CSS classes?

If you use something like Bootstrap there could be made a valid case that you probably won't use every obscure thing from it but for the CSS you define yourself I would suggest that there might be something wrong how you write your CSS. In my opinion the latter should be "fixed" by better processes/guidelines/code reviews in development to catch unused CSS classes.

[mdarrik]

So the site is using Bootstrap in addition to some custom CSS. A lot of what was on stream today was custom CSS to fill in some gaps with Bootstrap.

While you're right with this not doing much for the few lines of custom CSS, it can shrink Bootstrap down considerably. Especially since the site is only using a small subset of Bootstrap.

I also think that because the site is delivering such a large client payload for the Blazor stuff, it becomes important to minimize where you can, especially with blocking content.

[csharpfritz]

Agreed - at this stage of development, it is a little premature optimization. However, I think this is an interesting mashup of technologies to discuss from an education concern.

The implementation of a solution is not critical at this time, but for discussion and educational purposes is very interesting.

Jeff

On Aug 11, 2019, at 19:36, Darrik Moberg notifications@github.com wrote:

So the site is using Bootstrap in addition to some custom CSS. A lot of what was on stream today was custom CSS to fill in some gaps with Bootstrap.

While you're right with this not doing much for the few lines of custom CSS, it can shrink Bootstrap down considerably. Especially since the site is only using a small subset of Bootstrap.

I also think that because the site is delivering such a large client payload for the Blazor stuff, it becomes important to minimize where you can, especially with blocking content.

— You are receiving this because you commented. Reply to this email directly, view it on GitHub, or mute the thread.