Compiled css is not minified

[koljada]

I tried to configure it using
pipeline.CompileScssFiles();
or
pipeline.CompileScssFiles(new WebOptimizerScssOptions { MinifyCss = true });.

In my cshtml it is referenced as
<link rel="stylesheet" href="~/css/monitoring.scss" type="text/css" />

It's compiled and served correctly but the content is not minified.

I'm using version 3.0.91

[dustinrowland12]

I'm experiencing a similar issue with a different method.

pipeline.AddScssBundle("/all.css", "someFile.css", "anotherFile.scss", "file3.scss")

The resulting all.css file does not see to be minified. It does appear that pipeline.AddJavaScriptBundle is minifying correctly.

I'm using version 3.0.91 as well.

[jzabroski]

What's interesting is that when I do:

git clone https://github.com/ligershark/WebOptimizer.Sass.git
cd WebOptimizer.Sass
.\WebOptimizer.Sass.sln

to launch Visual Studio 2022, and change the start-up project to WebOptimizer.Sass.Sample, the scss minifier works!

I've spent the past couple of hours trying to figure out why it won't minify.

I'm using:

    <PackageReference Include="LigerShark.WebOptimizer.Core" Version="3.0.436" />
    <PackageReference Include="LigerShark.WebOptimizer.Sass" Version="3.0.123" />
    <PackageReference Include="JavaScriptEngineSwitcher.Extensions.MsDependencyInjection" Version="3.24.1" />
	<PackageReference Include="JavaScriptEngineSwitcher.Jint" Version="3.29.1" />

and:

            // Add JavaScriptEngineSwitcher services to the services container.
            services.AddJsEngineSwitcher(options =>
                {
                    options.AllowCurrentProperty = false;
                    options.DefaultEngineName = JintJsEngine.EngineName;
                })
                .AddJint();

            services.AddWebOptimizer(pipeline =>
            {
                // Scss bundling requires a JavaScript Engine to be registered.
                pipeline.AddScssBundle("css/all.css", "**/bootstrap.scss", "**/bootstrap-grid.scss", "**/bootstrap-reboot.scss", "**/bootstrap-utilities.scss");

                // This will compile any Sass file that isn't part of any bundle
                pipeline.CompileScssFiles();

                // AddScssBundle won't minify for some reason. Force it to minify!
                pipeline.MinifyCssFiles("css/all.css");
            });

and:

            // Bundling and Minification - Must come before UseStaticFiles()!
            app.UseWebOptimizer(); 

            app.UseHttpsRedirection();
            app.UseStaticFiles();

            app.UseRouting();

            app.Run();

[jzabroski]

Tried switching the JsEngine to V8 to match the sample, and it still does not minify. Strange.

[Taritsyn]

Hello, @jzabroski!

Tried switching the JsEngine to V8 to match the sample, and it still does not minify. Strange.

It seems to me that this setting does not affect to CSS minification, because minification in the WebOptimizer is implemented by using the NUglify library.

Try to replace this code:

…
// This will compile any Sass file that isn't part of any bundle
pipeline.CompileScssFiles();

// AddScssBundle won't minify for some reason. Force it to minify!
pipeline.MinifyCssFiles("css/all.css");
…

By the following code:

pipeline.CompileScssFiles().MinifyCss();

[jzabroski]

Hi @Taritsyn

Turns out the actual problem was much simpler. I have just been out of active web development for many years, and Chrome now pretty prints the Source tab files. I had to use <a href="/css/all.css">all.css</a> as in your demo to correctly see it was in fact minified. I wonder if others had the same misconception. (I still remember posting on Alan Kay's FONC mailing list in the early 2010s about how crazy it was that browsers did not do source mapping for minified code, and a few weeks later, Chrome was the first browser ever to add it.)

The other subtlety I had was that I had not included WebOptimizer's TagHelpers. It appears you are not a LigerShark team member, but I submitted two PRs to improve their docs. Hopefully they accept it.

• README: List all options in C# and JSON WebOptimizer#343
• Use GitHubMarkdown 2022-style Alerts WebOptimizer#342

I also added this one for yours:

• Clarify TagHelpers purpose #82

Perhaps I should add a section to your readme as well on "verifying everything is working".

This is an awesome tool. Probably the only thing left to get working is files that are transitively referenced via params sourceFiles but not referenced directly. cf #3 (comment) Getting those transitive updates to bust the cache correctly is tricky, as they cannot be independently compiled, since they often have references to variables defined at a top-level scope. Stated another way, a *.scss file is not guaranteed to be a lambda expression with no free variables. e.g., Bootstrap $prefix is defined at the top-level, and the _componentName.scss files refer to it.

[Taritsyn]

It appears you are not a team member, …

Yes, I am not a LigerShark team member. I'm just trying to monitor the correct usage of the Dart Sass Host library.

I had to use <a href="/css/all.css">all.css</a> as in your demo to correctly see it was in fact minified.

I admit my mistake.