Cache Busting with CSS Isolation and a component library - Blazor Webasm

[LaughingJohn]

Hi,

Firstly apologies, this may be more of a question/feature request than a bug, but I wasn't quite sure where to put it.

I have a ASP.Net hosted Blazor web assembly application. I'm trying to cache bust the JS and CSS files in my project because I'm struggling to get the browser to refresh them when I redeploy. In desktop I can refresh with CTRL-F5, but this is not so easy in mobile browsers and my application can go screwy if it doesn't have the latest files and obviously end users will struggle to clear the cache.

I have read the two similar issues: #27047 and #27966 and have implemented my own cache busting on the ASP.Net side by adding a version in the URL as a query parameter. I did this by hosting Blazor in razor page and using a function to add a version where required.

This seems to work OK, but I have a component library project in my solution and I'm not sure how I can do the same for the CSS generated by CSS isolation in the component library ("_content/ClassLib/ClassLib.bundle.scp.css"),

Currently this is included "automatically" by using an @import statement at the top of the main project;s 'bundled' CSS which I don't seem to have any control of. I believe my 2 options are:

1. Include a version on the @import, however this is created by the Blazor tooling so as far as I know I have no way of doing it.
2. Stop Blazor generating the @import statement and include it myself in the hosting razor page as per all the other CSS.

Can you advise if either option is possible or you have any other suggestion? In regard to option 2 I've found the DisableScopedCssBundling property, but I presume this stops the CSS being generated at all?

Thanks in advance!
LJ

[javiercn]

@LaughingJohn thanks for contacting us.

There are two things you can do here:

• Disable our built-in bundling and use a more advance bundler like webpack or rollup.
• Edit the file right after it has been generated to add a version to the imports we include.

[LaughingJohn]

Hi @javiercn

Thanks for coming back to me, much appreciated.

I presume that disabling built-in bundling will disable the whole process, including putting the isolated CSS together into one file, as well as the adding of the import statement? Is there's no way of continuing to bundle the CSS but not insert the import statement? If not, can I request it, or some way of post-processing the bundle files.

I've had a quick look at webpack & it looks complex, we don't really come from the Javascript world so it would be a big learning curve for us (we're rewriting and old Silverlight app) . Also ideally I'd like to avoid dependencies on external tools like node, npm etc if at all possible. That said, if you can point me to any examples of webpack replacing the Blazor bundler I will take a look.

The other option you suggest is to edit the file. I'm trying to automate this so that I don't have to manually edit every time a file changes. My solution for the other files is to use a file hash as a query parameter, and I could do the same here if I can run a build step to edit the file for me. So I guess I could write some code and run it as a post-build to add the version, but would that work given the files are bundled into the obj folder?

Thanks again,
LJ

[javiercn]

I presume that disabling built-in bundling will disable the whole process, including putting the isolated CSS together into one file, as well as the adding of the import statement? Is there's no way of continuing to bundle the CSS but not insert the import statement? If not, can I request it, or some way of post-processing the bundle files.

That is correct, we either produce a bundle or not.

The extensibility that we offer is that you can disable or built-in bundling an create your own MSBuild task to handle the bundling process yourself, we don't plan to offer any sort of "partial" bundling, since it complicates the implementation a lot and we haven't heard a significant demand for it.

The other option you suggest is to edit the file. I'm trying to automate this so that I don't have to manually edit every time a file changes. My solution for the other files is to use a file hash as a query parameter, and I could do the same here if I can run a build step to edit the file for me. So I guess I could write some code and run it as a post-build to add the version, but would that work given the files are bundled into the obj folder?

There's no problem as long as you do it right after the file has been bundled. You can use MSBuild structured log viewer to see where the file is generated and hook your own target to run after that.

[LaughingJohn]

Thanks again @javiercn, I'll take a look at that if you're sure I definitely can't tempt you into an incy wincy flag to prevent the import statement being added? 😉😁

I'm not the only one, as evidenced in the two other issues about cache busting and I would think they will have the same problem..

[LaughingJohn]

Just in case it helps anyone, I ended up creating an MSBuild task to remove the import statement and then just referenced the library css bundle via a link in the host file:

MSBuild Task:

    public class DeleteCssImportsTask : Task
    {
        [Required]
        public string FilePath { get; set; }

        public override bool Execute()
        {
            Log.LogMessage("DeleteCssImportsTask - Started");

            try
            {
                return DoExecute();
            }
            catch (Exception ex)
            {
                Log.LogErrorFromException(ex, true);
                return false;
            }

        }

        private bool DoExecute()
        {
            if (!File.Exists(FilePath))
            {
                Log.LogError($"DeleteCssImportsTask - File not found: '{FilePath}'");
                return false;
            }

            var filecContent = File.ReadAllText(FilePath);
            var newContents = Regex.Replace(filecContent, "@import '.*?bundle.scp.css';", "");
            File.WriteAllText(FilePath, newContents);
            Log.LogMessage($"DeleteCssImportsTask - File replaced: {FilePath}");

            return true;
        }
    }

Run the task in the csproj file of the webasm client project:

  <!-- Custom task to remove @imports of library css from scoped client css (it's included in the host page) -->
  <UsingTask TaskName="DeleteCssImportsTask" AssemblyFile="BuildTasks\BuildTask.dll" />
  <Target Name="DeleteCssImportsTask" AfterTargets="BundleScopedCssFiles"
          Condition="'@(_ScopedCss)' != ''">
    <DeleteCssImportsTask FilePath="$(_ScopedCssOutputFullPath)" />
  </Target>

And finally add the link to the library css bundle to my host razor page:

<link rel="stylesheet" type="text/css" href=@Model.AppendVersion("_content/MyCompany.Library/MyCompany.Library.bundle.scp.css") />

It seems to work. @javiercn, does that look OK?

See here for information on writing an MSBuild task (hint: make the class library .netstandard2.0): https://docs.microsoft.com/en-us/visualstudio/msbuild/task-writing?view=vs-2019

This issue has been resolved and has not had any activity for 1 day. It will be closed for housekeeping purposes.

See our Issue Management Policies for more information.