Request to update sass compiler to use dart sass instead of NodeScass/Ruby Scass #837

vmanthena · 2021-07-14T20:24:34Z

Koala 2.3.0

feature request?
Could you please update sass compiler to use dart sass instead of NodeScass/Ruby Scass?

zybersup · 2021-09-29T12:39:19Z

Koala supports using other compiler instead of the default one with the Advanced Setting for Sass compiler. Try these steps:

Download the standalone Dart Sass from https://github.com/sass/dart-sass/releases/tag/1.42.1, then extract and put it in your computer anywhere you want.
Go to Koala > Settings > Sass.
See Advanced Settings.
Check Use the System Sass compiler
Put the full path to Dart Sass compiler in the box below. (In my case, it is "C:\path\to\dart-sass\sass.bat".) Must not add any arguments after the file location because Koala will enclose all of this with double quote to support directory name with spaces.
Modify the sass.bat to remove unsupported options which Koala will pass out (for its default Ruby Sass) and modify some options supported by Dart Sass. I put the following lines into sass.bat just before the real execution line.

!!! The BAT script here has error with space in scss file path. Please instead use the fixed one below.

set check_style=%arguments: nested=%
if not "%check_nested%"=="%arguments%" set style=expanded
set check_style=%arguments: expanded=%
if not "%check_style%"=="%arguments%" set style=expanded
set check_style=%arguments: compact=%
if not "%check_style%"=="%arguments%" set style=compressed
set check_style=%arguments: compressed=%
if not "%check_style%"=="%arguments%" set style=compressed

set sourcemap=
set check_sourcemap=%arguments:--sourcemap=%
if not "%check_sourcemap%"=="%arguments%" set sourcemap=--no-source-map

set arguments=%1 %2 %3 %4 --style=%style% %sourcemap%

Then enjoy conveniences from Koala.

Remark: Dart Sass supports only 2 options, source mapping [yes/no] and output style [expanded/compressed]. So we got only these 2 options usable in Koala.

There is a discussion about this issue at twbs/bootstrap#34693 (comment). You might follow the topic. There might be other better solution in the future.

morrow95 · 2021-09-29T23:34:00Z

Koala supports using other compiler instead of the default one with the Advanced Setting for Sass compiler. Try these steps:

Download the standalone Dart Sass from https://github.com/sass/dart-sass/releases/tag/1.42.1, then extract and put it in your computer anywhere you want.

Go to Koala > Settings > Sass.

See Advanced Settings.

Check Use the System Sass compiler

Put the full path to Dart Sass compiler in the box below. (In my case, it is "C:\path\to\dart-sass\sass.bat")

Modify the sass.bat to remove unsupported options which Koala will pass out (for its default Ruby Sass) and modify some options supported by Dart Sass. I put the following lines into sass.bat just before the real execution line.
set check_style=%arguments: nested=%
if not "%check_nested%"=="%arguments%" set style=expanded
set check_style=%arguments: expanded=%
if not "%check_style%"=="%arguments%" set style=expanded
set check_style=%arguments: compact=%
if not "%check_style%"=="%arguments%" set style=compressed
set check_style=%arguments: compressed=%
if not "%check_style%"=="%arguments%" set style=compressed

set sourcemap=
set check_sourcemap=%arguments:--sourcemap=%
if not "%check_sourcemap%"=="%arguments%" set sourcemap=--no-source-map

set arguments=%1 %2 %3 %4 --style=%style% %sourcemap%
Then enjoy conveniences from Koala.

Remark: Dart Sass will support only 2 options, source mapping [yes/no] and output style [expanded/compressed].

There is a discussion about this issue at twbs/bootstrap#34693 (comment). You might follow the topic. There might be other better solution in the future.

@zybersup Just tried your suggestion for Dart with Koala... whenever I try to compile it errors on every file. For example :

C:\Users\Support\Documents\My Web Sites\BS5\example.com\_config\scss\bootstrap.scss

'Web' is not recognized as an internal or external command, operable program or batch file.  Web was unexpected at this time.

Any ideas? Does it not like the spaces in the file location or something? That is the only place I can think of that the word 'Web' is referenced.

morrow95 · 2021-09-29T23:46:23Z

Would appear either Koala or Dart doesn't like spaces in the file locations. I copied my folder to another location which doesn't have spaces in the location to the folder and it worked perfectly fine. Question is which one has the issue with that - Koala or Dart?

zybersup · 2021-09-30T03:42:34Z

Any ideas? Does it not like the spaces in the file location or something? That is the only place I can think of that the word 'Web' is referenced.

I forgot to remark that we must not add any parameter after the file name. Only executable file location is allowed. (As far as I tried and saw the code and error message.)

Would appear either Koala or Dart doesn't like spaces in the file locations. I copied my folder to another location which doesn't have spaces in the location to the folder and it worked perfectly fine. Question is which one has the issue with that - Koala or Dart?

As far as I see the Koala script (referred here below), any space in the file locations will be enclosed with double quote before use. So it should not cause a problem.

koala/src/app/scripts/compilers/SassCompiler.js

Lines 65 to 70 in bbd142d

    
           if (globalSettings.advanced.useSassCommand) { 
        
               // retrun Sass executable file 
        
               command = globalSettings.advanced.sassCommandPath || 'sass'; 
        
               if (command.match(/ /)) { 
        
                   command = '"' + command + '"'; 
        
               }

Anyway, your workaround can solve the problem. So it might be the case really.

zybersup · 2021-09-30T04:05:44Z

Would appear either Koala or Dart doesn't like spaces in the file locations. I copied my folder to another location which doesn't have spaces in the location to the folder and it worked perfectly fine. Question is which one has the issue with that - Koala or Dart?

I tried searching the message and found that it came from Windows command line execution. So the problem is surely not with Dart. May be with Koala or child_process.exec() in Node.js which Koala called to execute the compiler.

This link might help. https://helpdeskgeek.com/how-to/fix-not-recognized-as-an-internal-or-external-command/

morrow95 · 2021-09-30T14:29:20Z

@zybersup

I changed my file path from C:\Users\Support\Documents\My Web Sites\BS5\example.com\_config\scss\bootstrap.scss to C:\Users\Support\Documents\MyWebSites\BS5\example.com\_config\scss\bootstrap.scss and everything compiled fine. So it was indeed the spaces in my file path that something doesn't like.

I never had that problem with Koala until I configured it to use Dart as per the guide you posted.

morrow95 · 2021-09-30T14:40:31Z

I forgot to remark that we must not add any parameter after the file name. Only executable file location is allowed. (As far as I tried and saw the code and error message.)

@zybersup I followed exactly what was shown in your post. Koala's executable path is set to "C:\Users\Support\Documents\~Compilers~\dart-sass\sass.bat" and the sass.bat currently contains the following :

@echo off
REM This script drives the standalone dart-sass package, which bundles together a
REM Dart executable and a snapshot of dart-sass.

set SCRIPTPATH=%~dp0
set arguments=%*

set check_style=%arguments: nested=%
if not "%check_nested%"=="%arguments%" set style=expanded
set check_style=%arguments: expanded=%
if not "%check_style%"=="%arguments%" set style=expanded
set check_style=%arguments: compact=%
if not "%check_style%"=="%arguments%" set style=compressed
set check_style=%arguments: compressed=%
if not "%check_style%"=="%arguments%" set style=compressed

set sourcemap=
set check_sourcemap=%arguments:--sourcemap=%
if not "%check_sourcemap%"=="%arguments%" set sourcemap=--no-source-map

set arguments=%1 %2 %3 %4 --style=%style% %sourcemap%

"%SCRIPTPATH%\src\dart.exe" "%SCRIPTPATH%\src\sass.snapshot" %arguments%

perhaps I misunderstood the sass.bat part of your guide? I inserted the lines above the exec line that was currently there.

zybersup · 2021-10-01T05:11:06Z

@morrow95

You did it correctly as I said above. Previously I thought you mean the compiler path, which I checked it already that can get space in it. Now I got it right. The problem is about having spaces in the path to SCSS file.

Finally after hours of debugging the BAT script, which I am not an expert about, I found the cause and the way to fix it.

Please use the code below instead of the previous one. Put it right before the execution line.

call :strlen lenArg arguments

set check_style=%arguments: nested=%
call :strlen lenChk check_style
if not %lenChk%==%lenArg% set style=expanded
set check_style=%arguments: expanded=%
call :strlen lenChk check_style
if not %lenChk%==%lenArg% set style=expanded
set check_style=%arguments: compact=%
call :strlen lenChk check_style
if not %lenChk%==%lenArg% set style=compressed
set check_style=%arguments: compressed=%
call :strlen lenChk check_style
if not %lenChk%==%lenArg% set style=compressed
set sourcemap=
set check_sourcemap=%arguments:--sourcemap=%
call :strlen lenChk check_sourcemap
if not %lenChk%==%lenArg% set sourcemap=--no-source-map

set arguments=%1 %2 %3 %4 --style=%style% %sourcemap%

goto :run_sass
goto :eof

:strlen <resultVar> <stringVar>
(   
    setlocal EnableDelayedExpansion
    (set^ tmp=!%~2!)
    if defined tmp (
        set "len=1"
        for %%P in (4096 2048 1024 512 256 128 64 32 16 8 4 2 1) do (
            if "!tmp:~%%P,1!" NEQ "" ( 
                set /a "len+=%%P"
                set "tmp=!tmp:~%%P!"
            )
        )
    ) ELSE (
        set len=0
    )
)
( 
    endlocal
    set "%~1=%len%"
    exit /b
)
rem This .BAT script to find length of variable is from jeb at https://stackoverflow.com/a/5841587.

:run_sass

I hope this time it will work as you expect.

morrow95 · 2021-10-04T02:35:00Z

@zybersup

Seems to be working with this method. Really appreciate it. Thank you!

zybersup · 2021-10-04T03:52:48Z

@morrow95

Glad to know that. :)

However, there is a limitation using this script:

the SCSS path must not have these words ' nested', ' expand', 'compact', ' compressed', and '--sourcemap', because these words will be removed out of the command so we will not get the result CSS.

cuccagna · 2022-02-12T11:10:25Z

@morrow95

You did it correctly as I said above. Previously I thought you mean the compiler path, which I checked it already that can get space in it. Now I got it right. The problem is about having spaces in the path to SCSS file.

Finally after hours of debugging the BAT script, which I am not an expert about, I found the cause and the way to fix it.

Please use the code below instead of the previous one. Put it right before the execution line.

call :strlen lenArg arguments

set check_style=%arguments: nested=%
call :strlen lenChk check_style
if not %lenChk%==%lenArg% set style=expanded
set check_style=%arguments: expanded=%
call :strlen lenChk check_style
if not %lenChk%==%lenArg% set style=expanded
set check_style=%arguments: compact=%
call :strlen lenChk check_style
if not %lenChk%==%lenArg% set style=compressed
set check_style=%arguments: compressed=%
call :strlen lenChk check_style
if not %lenChk%==%lenArg% set style=compressed
set sourcemap=
set check_sourcemap=%arguments:--sourcemap=%
call :strlen lenChk check_sourcemap
if not %lenChk%==%lenArg% set sourcemap=--no-source-map

set arguments=%1 %2 %3 %4 --style=%style% %sourcemap%

goto :run_sass
goto :eof

:strlen <resultVar> <stringVar>
(   
    setlocal EnableDelayedExpansion
    (set^ tmp=!%~2!)
    if defined tmp (
        set "len=1"
        for %%P in (4096 2048 1024 512 256 128 64 32 16 8 4 2 1) do (
            if "!tmp:~%%P,1!" NEQ "" ( 
                set /a "len+=%%P"
                set "tmp=!tmp:~%%P!"
            )
        )
    ) ELSE (
        set len=0
    )
)
( 
    endlocal
    set "%~1=%len%"
    exit /b
)
rem This .BAT script to find length of variable is from jeb at https://stackoverflow.com/a/5841587.

:run_sass

I hope this time it will work as you expect.

I followed your suggest and it works however in this way command line flag options like --style=expanded and --no--source-map doesn't work anymore. Is it possible modify the .bat to have working either dart sass in koala and dart sass from command line?

zybersup · 2022-02-13T15:15:35Z

I followed your suggest and it works however in this way command line flag options like --style=expanded and --no--source-map doesn't work anymore. Is it possible modify the .bat to have working either dart sass in koala and dart sass from command line?

Those 2 options [--style=expanded and --no--source-map] should still work. But the others do not and it because of incompatible options between the old bundled compiler and the dart one.

Even for the compatible options, it is very difficult to make the .bat script to detect parameters sent out from Koala and modify them into new ones if you are not an expert on .bat script. Surely I am not.

cuccagna · 2022-02-13T15:37:24Z

I followed your suggest and it works however in this way command line flag options like --style=expanded and --no--source-map doesn't work anymore. Is it possible modify the .bat to have working either dart sass in koala and dart sass from command line?

Those 2 options [--style=expanded and --no--source-map] should still work. But the others do not and it because of incompatible options between the old bundled compiler and the dart one.

Even for the compatible options, it is very difficult to make the .bat script to detect parameters sent out from Koala and modify them into new ones if you are not an expert on .bat script. Surely I am not.

Those two options don't work anymore from command-line. Like workaround I copied the dart-sass folder and renaming it in dart-sass-koala, restored the original sass.bat in default dart-sass for command line dart-sass compile. I modified the sass.bat in dart-sass-koala like pointed out here and after I linked koala with this new sass.bat file. In this way It work either with Koala and with command line

vmanthena changed the title ~~update sass compiler to use dart sass instead of NodeScass/Ruby Scass~~ Request to update sass compiler to use dart sass instead of NodeScass/Ruby Scass Jul 14, 2021

zybersup mentioned this issue Sep 29, 2021

Can't use css variable in scss variable #816

Open

zybersup mentioned this issue Sep 30, 2021

Error: $color: "var(--bs-primary-rgb)" is not a color for `rgba' in v5.1.0 twbs/bootstrap#34693

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Request to update sass compiler to use dart sass instead of NodeScass/Ruby Scass #837

Request to update sass compiler to use dart sass instead of NodeScass/Ruby Scass #837

vmanthena commented Jul 14, 2021

zybersup commented Sep 29, 2021 •

edited

morrow95 commented Sep 29, 2021

morrow95 commented Sep 29, 2021

zybersup commented Sep 30, 2021

zybersup commented Sep 30, 2021 •

edited

morrow95 commented Sep 30, 2021

morrow95 commented Sep 30, 2021 •

edited

zybersup commented Oct 1, 2021 •

edited

morrow95 commented Oct 4, 2021

zybersup commented Oct 4, 2021

cuccagna commented Feb 12, 2022 •

edited

zybersup commented Feb 13, 2022

cuccagna commented Feb 13, 2022

Request to update sass compiler to use dart sass instead of NodeScass/Ruby Scass #837

Request to update sass compiler to use dart sass instead of NodeScass/Ruby Scass #837

Comments

vmanthena commented Jul 14, 2021

zybersup commented Sep 29, 2021 • edited

morrow95 commented Sep 29, 2021

morrow95 commented Sep 29, 2021

zybersup commented Sep 30, 2021

zybersup commented Sep 30, 2021 • edited

morrow95 commented Sep 30, 2021

morrow95 commented Sep 30, 2021 • edited

zybersup commented Oct 1, 2021 • edited

morrow95 commented Oct 4, 2021

zybersup commented Oct 4, 2021

cuccagna commented Feb 12, 2022 • edited

zybersup commented Feb 13, 2022

cuccagna commented Feb 13, 2022

zybersup commented Sep 29, 2021 •

edited

zybersup commented Sep 30, 2021 •

edited

morrow95 commented Sep 30, 2021 •

edited

zybersup commented Oct 1, 2021 •

edited

cuccagna commented Feb 12, 2022 •

edited