Runtime SASS compilation

[gumbarros]

Good evening, firstly congratulations on the project!

Is there a possibility of making a public class available in which I pass the path to a sass file and the path to the output and the method performs the compilation?

My use case:
We are developers of a library that uses Bootstrap, and we want to include the possibility for a user in our system that don't know web development to choose the primary color of the theme and thus compile Bootstrap.

P.S: I forked the project and didn't find an easy way because the logic is coupled with IHostedService

[sleeuwen]

Hi @gumbarros ,

As you already found it, it's currently not possible to call the sass executable directly and compile scss to css during runtime.
I do think it should be possible to decouple executing the sass command from the SassCompilerHostedService and expose a way to do this runtime compilation.
I can try to implement this when I have some free time, but it will take a couple of days.

To make sure my idea would work in your scenario, can you confirm the following rough idea would work for you:

Create a new interface e.g. ISassCompiler that exposes a method e.g. CompileAsync with possibly multiple overloads for compiling files from the file system and writing it to the file system again (this would support compiling multiple files in one go), and maybe an overload that reads from a stream and writes back to a stream (this would support compiling only a single input at a time). These methods would also probably support passing in a string[] as arguments that would be directly passed to the sass executable.

This is my current idea and naming might change, but I would like to know if this would be workable for you so we won't create something which isn't usable.

[gumbarros]

Hello @sleeuwen the ISassCompiler ideia is exactly what I need. Compiling files from the file system (or a string from the memory) and writing it to the file system again.

In my case I just want to compile bootstrap.css with a custom primary color selected by the user.

[gumbarros]

Hey @sleeuwen any updates? If you didn't start working I will implement by myself and make a PR ok? We are in a deadline needing this tool.

[sleeuwen]

I have created the classes locally and just want to run some more tests before pushing it to the repo. I think I will be able to publish a new version with the changes this week.

[victorspinella]

+1 wanting this

[JeffreyZolaVisibilEdi]

I am interested in seeing a working example of how this is used. How is the ISassCompiler instance invoked? Which target method and what arguments are used?

I, too, need to provide custom Bootstrap color maps (although I am customizing Primary, Secondary & Tertiary). An added complexity is that I also require custom compilation of the kendo-theme-bootstrap package with the same color customizations. The wrench is that kendo is using an older version of Bootstrap (5.2.1), I want to use the most current version for the native compilation. I have been unable to find the "right" combination of "IncludePaths" and "Compilations" to make it work with the default SassCompiler. A lot of the problem might lie with how Telerik/Progress references Bootstrap internally.

An additional note is that I am using database-sourced values for the three base colors. I am reading these within a middleware, where I am then writing .scss files in the locations identified by the "Source" config items. I found a recommendation to create a duplicate sasscompiler.json file and invoke it during the build process. This won't work in my case because I will need to be able to create stylesheets in my production environment whenever client/tenants are added or updated.

Thanks in advance!

[gumbarros]

Hi @JeffreyZolaVisibilEdi,

For coincidence I opened the issue at Feb but I am going to implement this next week or at the week of day 10 (huge project).

If I have success, I will share a snippet with my service. I'm going to have a similiar user case (the user selecting a primary color)

[NicolasDionB]

@gumbarros Did you manage to try it yet? I was currently working to integrate such a solution. I have a Blazor project with a class in which I inject ISassCompiler (first calling services.AddSassCompilerCore()), then I can call CompileAsync on the compiler instance. It all seems to work at first but the execution is hanging and I can't get it to actually work. I tried running a sass compiler on my scss manually (launching dart.exe with sass.snapshot from the project's bin/runtimes folder) and it worked so I think there I might be doing something wrong. Here's a snippet of my code:

	string style = "compressed";
#if DEBUG
	style = "nested";
#endif
	string[] args = [
		$"--style {style}",
		$"\"{Path.Combine(tempPath, sourceMainFilename)}\"", // Equivalent to C:\Users\[myuser]\AppData\Local\Temp\[SomeRandomGUID]\style.scss
		$"\"{tempFilePath}\""  // Equivalent to C:\Users\[myuser]\AppData\Local\Temp\[SomeRandomGUID]\output.css
	];

	if (!_sassCompiler.CompileAsync(args).Wait(10000))
	{
		throw new Exception("Sass compiler timed out!");
	}

If I put a breakpoint on CompileAsync, I can step into and see that it gets stuck after executing await process.StandardOutput.BaseStream.CopyToAsync(Stream.Null); (source here). For reference I'm using the latest version right now, 1.77.4.

What am I missing or doing wrong?

[gumbarros]

@gumbarros Did you manage to try it yet? I was currently working to integrate such a solution. I have a Blazor project with a class in which I inject ISassCompiler (first calling services.AddSassCompilerCore()), then I can call CompileAsync on the compiler instance. It all seems to work at first but the execution is hanging and I can't get it to actually work. I tried running a sass compiler on my scss manually (launching dart.exe with sass.snapshot from the project's bin/runtimes folder) and it worked so I think there I might be doing something wrong. Here's a snippet of my code:

	string style = "compressed";
#if DEBUG
	style = "nested";
#endif
	string[] args = [
		$"--style {style}",
		$"\"{Path.Combine(tempPath, sourceMainFilename)}\"", // Equivalent to C:\Users\[myuser]\AppData\Local\Temp\[SomeRandomGUID]\style.scss
		$"\"{tempFilePath}\""  // Equivalent to C:\Users\[myuser]\AppData\Local\Temp\[SomeRandomGUID]\output.css
	];

	if (!_sassCompiler.CompileAsync(args).Wait(10000))
	{
		throw new Exception("Sass compiler timed out!");
	}

If I put a breakpoint on CompileAsync, I can step into and see that it gets stuck after executing await process.StandardOutput.BaseStream.CopyToAsync(Stream.Null); (source here). For reference I'm using the latest version right now, 1.77.4.

What am I missing or doing wrong?

I'm going to try tomorrow or next week for sure, I will keep you updated

[gumbarros]

@NicolasDionB here is my successfully working implementation:

using System.Text;
using AspNetCore.SassCompiler;
using JJConsulting.Infinity.Lib.Settings.Repository;
using JJMasterData.Commons.Util;
using Microsoft.Extensions.Caching.Memory;

namespace JJConsulting.Infinity.Web.Theme;

public class ThemeService(
    AppSettingsRepository<ThemeOptions> themeRepository,
    IMemoryCache memoryCache, 
    ISassCompiler sassCompiler)
{
    private const string CacheKey = "InfinityTheme";
    
    public async Task Save(ThemeOptions themeOptions)
    {
        await themeRepository.SetAsync(themeOptions);
        memoryCache.Remove(CacheKey);
    }
    
    public Task<string> GetCss()
    {
        return memoryCache.GetOrCreateAsync<string>(CacheKey, entry =>
        {
            var themeOptions = themeRepository.Get();
            var sass = $"""
                         $primary:{themeOptions.PrimaryColor};
                         $primary-dark:{themeOptions.PrimaryColorDarkTheme};
                         @import "theme.scss";
                         """;
            var sassStream = new MemoryStream(Encoding.UTF8.GetBytes(sass));

            var currentPath = FileIO.GetApplicationPath();
            const string cssPath = "Styles/phoenix/";

            var loadPath = Path.Combine(currentPath, cssPath);
            entry.AbsoluteExpirationRelativeToNow = TimeSpan.FromDays(1);
            return sassCompiler.CompileToStringAsync(sassStream, [$"--load-path={loadPath}"]);
        })!;
    }
}

At .csproj:

	<ItemGroup>
	  <None Update="Styles\phoenix\**\*.*">
	    <CopyToOutputDirectory>Always</CopyToOutputDirectory>
	  </None>
	</ItemGroup>

FileIO.GetApplicationPath implementation.

Phoenix is just a Bootstrap theme.

[NicolasDionB]

@gumbarros I finally got to try your sample code and still no chance. For some reason, the execution hangs when calling CompileToStringAsync and never return. Looking back to my code it seems my usecase was so simple, just calling CompileAsync with arguments for input and output file. I realized I was missing the load-path argument, which I added to test but still no success.

I'm giving up. I'll include the sass compiler directly in my project and invoke the process manually. If you ever find a solution for this, please let me know!

[gumbarros]

@gumbarros I finally got to try your sample code and still no chance. For some reason, the execution hangs when calling CompileToStringAsync and never return. Looking back to my code it seems my usecase was so simple, just calling CompileAsync with arguments for input and output file. I realized I was missing the load-path argument, which I added to test but still no success.

I'm giving up. I'll include the sass compiler directly in my project and invoke the process manually. If you ever find a solution for this, please let me know!

I'm with a issue with the SASS compiler too, on IIS simply does not work, I used SassCompilerAttribute with the path to SASS.

[NicolasDionB]

@gumbarros I run it in my IIS website too, so that might explain. I really need to have dynamic compilation, I cannot rely on static configuration to compile my css.