failwyn / webcompiler Goto Github PK

Installed product versions

• Visual Studio: 19, 22 Preview
• This extension: 1.13.4

Description

Include auto compile for .js files.

Current behavior

At the moment, i must explicity say "Re-compile file" or save the compilerconfig.json file, to compile javascript files.

Expected behavior

When i save a javascript file, that the file will be compiled.

Installed product versions

• Visual Studio: 2022 community
• This extension: 1.14.3

Description

Recompiling Sass after editing a file doesn't work

Steps to recreate

1. Create sass file
2. Re-compile - success: css file and minified file are created side by side
3. edit sass file
4. recompilation fails: style files remain old unchanged. if you delete them and click recompile again, then old style files or empty ones are created

Current behavior

files do not change

Expected behavior

compiled files must contain new code

I use a translator. sorry if something is not clear

Installed product versions

• Visual Studio: 2022
• This extension: 1.14.2

Description

Can't compile stylesheets when i try to import a scss file from the node_modules folder. In VS 2019 the setting "includePath: 'node_modules'" did the trick. In VS 2022 not anymore

Steps to recreate

1. Create base.scss in wwwroot > css >
2. import scss file from node_modules folder:
   example: @import "@progress/kendo-theme-bootstrap/dist/all.scss";
3. Try to save and compile.

Current behavior

Not compiling, gives the error:
Error: Can't find stylesheet to import. @import "@progress/kendo-theme-bootstrap/dist/all.scss"; wwwroot\css\base.scss 45:9 root stylesheet

Expected behavior

Compiling the file with node module files.

Installed product versions

Microsoft Visual Studio Community 2022 Preview (64-bit)
Version 17.0.0 Preview 3.1

Web Compiler 1.13.2

Description

Right click on "compilerconfig.json" -> Web compiler -> Enable compile on build... asks me to install NuGet package, clicking "Yes" and than got the error below. On VS2019 this feature works.

Installed product versions

• Visual Studio: 2022
• This extension: 1.12.405

Description

The dollar variables are no more replaced anywhere in a .scss file, breaking up everything in the pipeline.
(I'm using the NuGet package, at compilation time the WebCompiler is triggered.)

Steps to recreate

1. Setup the code like this in variables.scss:

$main-pc: hsl(25,84,88); //#fbe9d7;

:root {
	--background: $main-pc;
}

2. Compile with this setup, where main.scss does @import of variables.scss:

[
	{
		"outputFile": "wwwroot/css/my-style.css",
		"inputFile": "SCSS/main.scss"
	}
]

3. Check the my-style.css output to find this:

:root {
	--background: $main-pc;
}

Current behavior

It doesn't apply the dollar variables.

Expected behavior

It should apply the dollars variable value.

Installed product versions

• Visual Studio: [2022 Professional]
• This extension: [example 1.1.21]

Description

With version 1.14.6 all works fine. (Even after downgrading from 1.14.7 to 1.14.6 again.)

After updating to 1.14.7 I get the following as part of the docker log:

Output of Docker Log
#18 9.386 WebCompiler: Begin compiling compilerconfig.json
#18 9.502 WebCompiler installing updated versions of the compilers...
#18 9.523 /root/.nuget/packages/buildwebcompiler2022/1.14.7/build/BuildWebCompiler2022.targets(12,9): error : An error occurred trying to start process 'cmd.exe' with working directory '/tmp/WebCompiler1.14.7'. No such file or directory [/src/Wxxx/Identity/Server/Wxxx.Identity.Provider/Wxxx.Identity.Provider.csproj]
#18 9.533
#18 9.533 Build FAILED.

Steps to recreate

1. Try to publish project to docker

Current behavior

The build fails with error message above

Expected behavior

Build succeeds like with 1.14.6

Installed product versions

• Visual Studio: 2022 Community
• This extension: 1.14.8

Description

I'm using AdminLte as my base for styling.

I added a scss file in my project and the first line is:
@use '../../wwwroot/AdminLte/dist/css/adminlte.css';

When I compile I get the error:

Error: 0.25rem and 0 are incompatible.
?
4884 � border-top-left-radius: calc(0.25rem - 0);
� ^^^^^^^^^^^

For example in the following code:

.card-img,
.card-img-bottom {
  border-bottom-right-radius: calc(0.25rem - 0);
  border-bottom-left-radius: calc(0.25rem - 0);
}

Apart from removing - 0 (which I'd rather would not like to do), how can I solve this problem?

Installed product versions

• Visual Studio: 2022 Professional (v17.2.0)
• This extension: 1.14.7

Description

The extension is unable to compile sass files, probably because of an outdated node package caniuse-lite or browserslist.

Steps to recreate

1. Right-click on the compilerconfig.json file and choose WebCompiler > Re-compile all files

Current behavior

When trying to compile a scss file, an error pops up in the Error List pane of Visual Studio:

Browserslist: caniuse-lite is outdated. Please run:
  npx browserslist@latest --update-db
  Why you should do it regularly: https://github.com/browserslist/browserslist#browsers-data-updating

Executing the given command in Windows Terminal / Powershell tells me it cannot find package.json.
The installation path of the extensions at C:\Users\USERNAME\AppData\Local\Temp\WebCompiler1.14.7 does indeed not contain a package.json.

I don't use node and/or npm manually (and that's why I use this extension). I have no clue on how to update browserslist or caniuse-lite for this extension.

Expected behavior

Compile the sass files succesfully :)

Installed product versions

• Visual Studio: Community 2022
• This extension: version 1.14.2

Description

Dart-Sass ignores the "indentWidth" default setting for sass. When it is set to 4, the output still put 2 spaces.

Steps to recreate

1. Have "indentWidth": 4 in the "sass" node of the "compilerconfig.json.default" file
2. Compile a file using Dart-Sass (default engine it seems)

Current behavior

Outputted CSS has an indentation of 2 spaces.

Expected behavior

Outputted css should have an indentation of 4 spaces according to the default setting.

Installed product versions

• Visual Studio: Microsoft Visual Studio Professional 2022 (64-bit) Version 17.0.6
• This extension: 1.14.4

Description

Compiling site.less fails on access to the path 7z.dll

Steps to recreate

1. Standard ASP.NET .NET 6 project (Blazor server)
2. have wwwroot/css/site.less
3. run compilation

Current behavior

Fails on unhandled exception

C:\... repo> C:\USERS\... path to VS\WebCompiler.exe "C:/.../compilerconfig.json" "wwwroot/css/site.less"
	
Unhandled Exception: System.UnauthorizedAccessException: Access to the path '7z.dll' is denied.
   at System.IO.Directory.DeleteHelper(String fullPath, String userPath, Boolean recursive, Boolean throwOnTopLevelDirectoryNotFound, WIN32_FIND_DATA& data)
   at System.IO.Directory.Delete(String fullPath, String userPath, Boolean recursive, Boolean checkHost)
   at WebCompiler.CompilerService.Initialize() in W:\Git\Light Speed Solutions\WebCompiler\src\WebCompiler\Compile\CompilerService.cs:line 93
   at WebCompiler.CompilerService.GetCompiler(Config config) in W:\Git\Light Speed Solutions\WebCompiler\src\WebCompiler\Compile\CompilerService.cs:line 37
   at WebCompiler.ConfigFileProcessor.ProcessConfig(String baseFolder, Config config) in W:\Git\Light Speed Solutions\WebCompiler\src\WebCompiler\Config\ConfigFileProcessor.cs:line 190
   at WebCompiler.ConfigFileProcessor.Process(String configFile, IEnumerable`1 configs, Boolean force) in W:\Git\Light Speed Solutions\WebCompiler\src\WebCompiler\Config\ConfigFileProcessor.cs:line 44
   at WebCompiler.Program.Main(String[] args) in W:\Git\Light Speed Solutions\WebCompiler\src\WebCompiler\Program.cs:line 25
Process terminated with code -532462766.

Expected behavior

The file should be compiled/bundled with no exception or at least with meaningful information why is it trying to delete the 7z.dll.

Would it be too much work to enable compiling without Solution or Project, just by using Folder View? Folder view is used for e.g. static content..

And it should work the same if it can e.g. creating whatever is needed compilerconfig.json, ..

Installed product versions

• Visual Studio: 2022
• This extension: 1.14.4

Description

Invalid error - can't compile the project!

Steps to recreate

I have the following valid SCSS in one of my SCSS files:

.cities-columns {
    list-style-type: none;
    display: grid;

    //  ===> Error is thrown because of THIS line
    grid-template-columns: repeat(auto-fit,minmax(min(15em, 100%), 1fr));

    padding-left: 0;

    li {
        padding: .2em;
    }
}

Current behavior

Throws the following error:

Severity Code Description Project File Line Suppression State
Error 0 cannot compare numbers with incompatible units
...\scss\theme.scss

And the Error List point to the wrong file, wrong line and even wrong position within that line (points to middle of nowhere). So it was really hard to find.

Expected behavior

Shouldn't throw, it's perfectly valid CSS.

Installed product versions

• Visual Studio: 2022 Community Edition
• This extension: 1.14.1
• Windows 11

Description

Babel errors on compiling (minifying) js files. I have a VS2019 installation on the same machine, which works just fine (with Mads' extension)

Steps to recreate

1. any.js
2. set output in compilerconfig.json to any.min.js
   {
   "outputFile": "js/any.min.js",
   "inputFile": "js/any.js"
   }
3. right click and try to compile it

Current behavior

It doesn't compile, instead give me an error: (copy)

Severity Code Description Project File Line Suppression State
Error Error: Couldn't find preset "react" relative to directory "C:/website/js"
at C:\Users\el_st\AppData\Local\Temp\WebCompiler1.12.6\node_modules\babel-core\lib\transformation\file\options\option-manager.js:293:19
at Array.map ()
at OptionManager.resolvePresets (C:\Users\el_st\AppData\Local\Temp\WebCompiler1.12.6\node_modules\babel-core\lib\transformation\file\options\option-manager.js:275:20)
at OptionManager.mergePresets (C:\Users\el_st\AppData\Local\Temp\WebCompiler1.12.6\node_modules\babel-core\lib\transformation\file\options\option-manager.js:264:10)
at OptionManager.mergeOptions (C:\Users\el_st\AppData\Local\Temp\WebCompiler1.12.6\node_modules\babel-core\lib\transformation\file\options\option-manager.js:249:14)
at OptionManager.init (C:\Users\el_st\AppData\Local\Temp\WebCompiler1.12.6\node_modules\babel-core\lib\transformation\file\options\option-manager.js:368:12)
at File.initOptions (C:\Users\el_st\AppData\Local\Temp\WebCompiler1.12.6\node_modules\babel-core\lib\transformation\file\index.js:212:65)
at new File (C:\Users\el_st\AppData\Local\Temp\WebCompiler1.12.6\node_modules\babel-core\lib\transformation\file\index.js:135:24)
at Pipeline.transform (C:\Users\el_st\AppData\Local\Temp\WebCompiler1.12.6\node_modules\babel-core\lib\transformation\pipeline.js:46:16)
at transform (C:\Users\el_st\AppData\Local\Temp\WebCompiler1.12.6\node_modules\babel-cli\lib\babel\util.js:50:22)
MyProject C:\website\js\any.js 0

Expected behavior

Should compile correctly

Installed product versions

• Visual Studio: [2022 Community]
• This extension: [example 1.13.4]

Description

Compilation fails when a custom CSS properties uses a variable.

Steps to recreate

1. Create a SCSS file.
2. Create a style within a SCSS file that uses a custom CSS property with a variable.

Current behavior

The "variable name" rather than the "value" gets compiled into the CSS file.

Expected behavior

The CSS should display:
.my-class {
--mdc-theme-primary: #4caf50;
}

But instead displays:
.my-class {
--mdc-theme-primary: $medium-green;
}

When interpolating SCSS variables, unexpected outcomes seem to be occurring. I'm relatively new to this particular part of SCSS, so it might just be me getting it wrong.

Steps to recreate

I've created a mixin:

@mixin theme() {
    @each $theme, $map in $themes {
        @if $theme == "default" {
            :root {
                @each $key, $value in $map {
                    #{--#{$key}}: $value;
                }
            }
        }
        @else {
            [data-theme="#{$theme}" ] {
                @each $key, $value in $map {
                    #{--#{$key}}: $value;
                }
            }
        }
    }
}

Based upon this map:

$themes: ( 
    default:( 
        Franklin-Blue: #1d1c4d,
        Light-Blue: #4e5d94, 
        Pale-Blue: #7289da, 
        Pure-White: #ffffff, 
        VLight-Grey: #99aab5, 
        Middle-Grey: #2c2f33, 
        Dark-Grey: #23272a, 
        body-color: #ffffff, 
        text-color: #000000, 
        bold-text: #000000, 
        White-Blue: #ffffff 
    ), 
    dark: ( 
        Franklin-Blue: #000000,
        Light-Blue: #0d0d0d,
        Pale-Blue: #2c2f33, 
        Pure-White: #ffffff, 
        VLight-Grey: #99aab5,
        Middle-Grey: #2c2f33,
        Dark-Grey: #23272a, 
        body-color: #000000, 
        text-color: #ffffff, 
        bold-text: #7289da, 
        White-Blue: #7289da 
    ) 
);

Which results in this:

:root {
  --Franklin-Blue: #1d1c4d;
  --Light-Blue: #4e5d94;
  --Pale-Blue: #7289da;
  --Pure-White: #ffffff;
  --VLight-Grey: #99aab5;
  --Middle-Grey: #2c2f33;
  --Dark-Grey: #23272a;
  --body-color: #ffffff;
  --text-color: #000000;
  --bold-text: #000000;
  --White-Blue: #ffffff;
}

[data-theme=dark] {
  --Franklin-Blue: #000000;
  --Light-Blue: #0d0d0d;
  --Pale-Blue: #2c2f33;
  --Pure-White: #ffffff;
  --VLight-Grey: #99aab5;
  --Middle-Grey: #2c2f33;
  --Dark-Grey: #23272a;
  --body-color: #000000;
  --text-color: #ffffff;
  --bold-text: #7289da;
  --White-Blue: #7289da;
}

Now, in my attempts to get quotes around that theme (i.e. [data-theme="dark"]), I've had [data-theme=\"dark\"], [data-theme="'dark'"], [data-theme='"dark"'] and just about every other combination - but it just seems not to work.

Is it just me, or have I found an actual issue?

Hello,

Can you output new releases to the release feed?
That way it can be monitored with RSS :)

PS: thank you for taking up the support!!

Sc0tTy

I'm using Web Compiler 2022+ within VS 2022.

Currently, I can only set the option "useNodeSass": true within compilerconfig.json for each input/output pair. I would like to set this globally within compilerconfig.json.defaults, but it doesn't seem like it's supported. Or if it is, I must not be getting the syntax correct.

Could we add the NodeSass option within the defaults?

• Visual Studio: 2022 Professional
• This extension: 1.14.6

AFAICT: Was working in 1.14.4

When Web Compiling a scss file the compilation succeeds but the resultant css file contains:

"0" is not an allowed value for option "style".

Usage: sass <input.scss> [output.css]
       sass <input.scss>:<output.css> <input/>:<output/> <dir/>

=== Input and Output ===================
    --[no-]stdin               Read the stylesheet from stdin.
    --[no-]indented            Use the indented syntax for input from stdin.
-I, --load-path=<PATH>         A path to use when resolving imports.
                               May be passed multiple times.
-s, --style=<NAME>             Output style.
                               [expanded (default), compressed]
    --[no-]charset             Emit a @charset or BOM for CSS with non-ASCII characters.
                               (defaults to on)
    --[no-]error-css           When an error occurs, emit a stylesheet describing it.
                               Defaults to true when compiling to a file.
    --update                   Only compile out-of-date stylesheets.

=== Source Maps ========================
    --[no-]source-map          Whether to generate source maps.
                               (defaults to on)
    --source-map-urls          How to link from source maps to source files.
                               [relative (default), absolute]
    --[no-]embed-sources       Embed source file contents in source maps.
    --[no-]embed-source-map    Embed source map contents in CSS.

=== Other ==============================
-w, --watch                    Watch stylesheets and recompile when they change.
    --[no-]poll                Manually check for changes rather than using a native watcher.
                               Only valid with --watch.
    --[no-]stop-on-error       Don't compile more files once an error is encountered.
-i, --interactive              Run an interactive SassScript shell.
-c, --[no-]color               Whether to use terminal colors for messages.
    --[no-]unicode             Whether to use Unicode characters for messages.
-q, --[no-]quiet               Don't print warnings.
    --[no-]quiet-deps          Don't print compiler warnings from dependencies.
                               Stylesheets imported through load paths count as dependencies.
    --[no-]verbose             Print all deprecation warnings even when they're repetitive.
    --[no-]trace               Print full Dart stack traces for exceptions.
-h, --help                     Print this usage information.
    --version                  Print the version of Dart Sass.

Installed product versions

• Visual Studio: 2022 (17.0.6) latest
• This extension: latest (1.14.2)

Description

Can't call mixin from another scss file by using @use statement.

Steps to recreate

1. Create partial base file: _base.scss and put a mixin in there:

@mixin box($width, $height: $width) {
    width: $width;
    height: $height;
}

Call the mixin from another scss file, let's name it style.scss:

@use "base";

a {
    @include box(50px);
}

Current behavior

Severity Code Description Project File Line Suppression State
Error Error: Undefined mixin.
╷
13 │ @include box(50px);
│ ^^^^^^^^^^^^^^^^^^
╵
wwwroot\css\style.scss 13:9 root stylesheet
...\wwwroot\css\style.scss 0

Expected behavior

This is supported by @import statement, but doesn't work with @use.
Since @import is going to be deprecated and @use should be used, then this needs to be supported by web compiler as well.

Installed product versions

• Visual Studio: 2022 Community Preview 17.4 ( ARM64 Installation)
• This extension: .14.8.1

Description

Extension don't start in ARM64 of Visual Studio
in log :
CreateInstance failed for package [WebCompilerInitPackage]Source: 'mscorlib' Description: Could not load file or assembly 'file:///c:\users\pynux\appdata\local\microsoft\visualstudio\17.0_b2995c49\extensions\oucyl340.vrz\WebCompilerVsix.dll' or one of its dependencies. Tentative de chargement d’un programme de format incorrect. System.BadImageFormatException: Could not load file or assembly 'file:///c:\users\pynux\appdata\local\microsoft\visualstudio\17.0_b2995c49\extensions\oucyl340.vrz\WebCompilerVsix.dll' or one of its dependencies. Tentative de chargement d’un programme de format incorrect. File name: 'file:///c:\users\pynux\appdata\local\microsoft\visualstudio\17.0_b2995c49\extensions\oucyl340.vrz\WebCompilerVsix.dll' at System.Reflection.RuntimeAssembly._nLoad(AssemblyName fileName, String codeBase, Evidence assemblySecurity, RuntimeAssembly locationHint, StackCrawlMark& stackMark, IntPtr pPrivHostBinder, Boolean throwOnFileNotFound, Boolean forIntrospection, Boolean suppressSecurityChecks) at System.Reflection.RuntimeAssembly.InternalLoadAssemblyName(AssemblyName assemblyRef, Evidence assemblySecurity, RuntimeAssembly reqAssembly, StackCrawlMark& stackMark, IntPtr pPrivHostBinder, Boolean throwOnFileNotFound, Boolean forIntrospection, Boolean suppressSecurityChecks) at System.Reflection.RuntimeAssembly.InternalLoadFrom(String assemblyFile, Evidence securityEvidence, Byte[] hashValue, AssemblyHashAlgorithm hashAlgorithm, Boolean forIntrospection, Boolean suppressSecurityChecks, StackCrawlMark& stackMark) at System.Reflection.Assembly.LoadFrom(String assemblyFile, Evidence securityEvidence) at System.Activator.CreateInstanceFromInternal(String assemblyFile, String typeName, Boolean ignoreCase, BindingFlags bindingAttr, Binder binder, Object[] args, CultureInfo culture, Object[] activationAttributes, Evidence securityInfo) at System.AppDomain.CreateInstanceFrom(String assemblyFile, String typeName) WRN: Assembly binding logging is turned OFF. To enable assembly bind failure logging, set the registry value [HKLM\Software\Microsoft\Fusion!EnableLog] (DWORD) to 1. Note: There is some performance penalty associated with assembly bind failure logging. To turn this feature off, remove the registry value [HKLM\Software\Microsoft\Fusion!EnableLog].

Steps to recreate

1.Install pextensions
2. Restart Visual Studio
3. Extension don't start missing

Installed product versions

• Visual Studio: 2022 (v17.0.2)
• This extension: 1.14.2

Description

When i try to run the extension via Task Runner the process fails if the files to write already exists from a previous run. If I manually remove the files the extension works without a problem.

Output in the taskrunner console

C:\dev\git\[projectname]\src\app\[appname]> c:\users\[username]\appdata\local\microsoft\visualstudio\17.0_ce87f30b\extensions\m5tn5y43.4ri\WebCompiler.exe "C:/dev/git/[projectname]/src/app/[appname]/compilerconfig.json" "Sass/Core/core.main.scss"
	
Unhandled Exception: System.ArgumentNullException: Value cannot be null.
Parameter name: path1
   at System.IO.Path.Combine(String path1, String path2)
   at WebCompiler.SassDependencyResolver.UpdateFileDependencies(String path) in W:\Git\Light Speed Solutions\WebCompiler\src\WebCompiler\Dependencies\SassDependencyResolver.cs:line 71
   at WebCompiler.DependencyResolverBase.GetDependencies(String projectRootPath) in W:\Git\Light Speed Solutions\WebCompiler\src\WebCompiler\Dependencies\DependencyResolverBase.cs:line 57
   at WebCompiler.Config.HasDependenciesNewerThanOutput(FileInfo input, FileInfo output) in W:\Git\Light Speed Solutions\WebCompiler\src\WebCompiler\Config\Config.cs:line 102
   at WebCompiler.Config.CompilationRequired() in W:\Git\Light Speed Solutions\WebCompiler\src\WebCompiler\Config\Config.cs:line 95
   at WebCompiler.ConfigFileProcessor.Process(String configFile, IEnumerable1 configs, Boolean force) in W:\Git\Light Speed Solutions\WebCompiler\src\WebCompiler\Config\ConfigFileProcessor.cs:line 42
   at WebCompiler.Program.Main(String[] args) in W:\Git\Light Speed Solutions\WebCompiler\src\WebCompiler\Program.cs:line 25
Process terminated with code -532462766.

Config

{
    "outputFile": "Sass/Core/compiled/core.main.css",
    "inputFile": "Sass/Core/core.main.scss",
    "options": {
      "sourceMap": true,
      "sourceMapRoot": "/"
    }
  }

Installed product versions

• Visual Studio: 2022 Community
• This extension: 1.14.7

Description

The "Web Compiler" menu does not show up on right click of any file, including compilerconfig.json

Steps to recreate

1. Right click on compilerconfig.json or .scss file

Current behavior

Not menu showing

Expected behavior

Expecting menu like this image:
https://github.com/failwyn/WebCompiler/blob/master/art/contextmenu-compile.png

Installed product versions

• Visual Studio: 2022 Community Edition
• This extension: 2.9.3

Description

A compilerconfig.json option for using "use strict" in javascript minification is highly wanted. It has been asked in Mads' version multiple times, but never created. Now the compiled version of a javascript file always has the "use strict" statement whenever we use Webcompiler, Re-compile file. It also recompiles all files when you add a new js to the compilerconfig and thus add the "use strict" again.

Steps to recreate

1. create a simple js file, without the "use strict" statement.
2. minify it
3. confirm the minified version does not have "use strict" statement.
4. choose re-compile file
5. confirm the minified version has the "use strict" statement

Current behavior

Re-compiled minified javascript files get the "use strict" statement by default. This is unwanted, because if one would like to use strict, one should enable that in unminified javascript or have an option to enable it. In which case the minifier should use it too. There's no option to switch off this behavior in compilerconfig.

Expected behavior

Have an option in compilerconfig.json. enabled by default. When set to disabled and no statement in unminified version, the minified version shouldn't have it too. Only when enabled by default or explicitly set, we should get "use strict" in the minified javascript file.

Installed product versions

• Visual Studio: 2022 Professional
• This extension: 1.14.4

Description

Dart sass appears to have an option for line feed. Please allow the option for it in the compilerconfig.json

Hello,

Can you tell us (and possibly update the documentation) what version of the Dart Sass compiler you are using?

And can you tell us if you are using the JS or VM version ?
https://itnext.io/the-css-preprocessor-dilemma-node-sass-or-dart-sass-32a0a096572

Thank you!

Sc0tTy

Installed product versions

• Visual Studio: 2022
• This extension: 1.14.2

Description

When I have a less files in another location and "add an item as link", Webcompiler cannot find file

Steps to recreate

(P1) ASP.NET Core 6.0 Project (Microsoft.NET.Sdk.Web)
(P2) Class Library (Microsoft.NET.Sdk.Razor)

Create a "colors.less" file in P2
Create a "site.less" file in P1

In P1, add existing file and select the ""colors.less" from P2 and in the dropdown, "Add As Link"
Add @import "Colors.less"; to "site.less"

(Re)Compile "site.less"

Current behavior

FileError: 'colors.less' wasn't found.

Expected behavior

Should compile "site.less"
css.zip

Installed product versions

• Visual Studio: 2022 Enterprise
• This extension: 1.14.2

Description

One of my .scss files does not automatically recompile while the others do. My folder contains four .scss files:

• _variables.scss
• bootstrap.scss
• kendo.scss
• site.scss

bootstrap.css/bootstrap.min.css and and site.css/site.min.css are automatically generated, but kendo.css/kendo.min.css are not.

This is the contents of kendo.scss:

@import "../css/_variables.scss";
 
$kendo-picker-hover-bg: #fff;
 
@import "../lib/kendo-theme-bootstrap/dist/all";

Trying to build the solution fails with a strange error:
WebCompiler error 0: Invalid CSS after "...-header-border,": expected expression (e.g. 1px, bold), was ");"

The build succeeds without error if kendo.css already exists, even if it's an empty file. However, the build does not generate kendo.css/kendo.min.css.

If I right-click on kendo.scss and choose Web Compiler > Re-compile file or right-click on compilerconfig.json and choose Web Compiler > Re-compile all files, kendo.css/kendo.min.css are correctly generated without issue. Or if I make a change to kendo.scss and save, it gets recompiled automatically. But it's not being compiled on build like the other .scss files are. Here's the contents of compilerconfig.json:

[
  {
    "outputFile": "wwwroot/css/bootstrap.css",
    "inputFile": "wwwroot/css/bootstrap.scss"
  },
  {
    "outputFile": "wwwroot/css/kendo.css",
    "inputFile": "wwwroot/css/kendo.scss"
  },
  {
    "outputFile": "wwwroot/css/site.css",
    "inputFile": "wwwroot/css/site.scss"
  },
  {
    "outputFile": "Shared/TopNav.razor.css",
    "inputFile": "Shared/TopNav.razor.scss"
  }
]

Steps to recreate

1. Delete the *.css and *.min.css files.
2. bootstrap.scss and site.scss are automatically recompiled, while kendo.scss is not
3. Build fails
4. Recompile kendo.scss manually
5. kendo.scss is recompiled and build succeeds

Current behavior

kendo.scss is only recompiled when triggered manually.

Expected behavior

kendo.scss is automatically recompiled and compiled on build like the other .scss files in the folder.

Installed product versions

• Visual Studio: 2022 Enterprise version 17.0.5
• This extension: 1.14.2

Description

Since I upgrade VS 2022 from 17.0.2 to 17.0.5, less compilation does not work anymore. I get a message:

"This application cannot run on your PC"

Steps to recreate

1. Modify a less file
2. Save

Or

1. Right-Clic on a less file
2. Web Compiler > Re-compile file

I tried to start VS as administrator and the result is the same.

I also tried to uninstall/reinstall the extension

Installed product versions

• Visual Studio: 2022 Professional
• This extension: 1.13.4

Description

Just installed VS 2022 (released 2 hours ago) on a fresh windows installation and Installed the WebCompiler 2022 extension.
I get an error during compilation:
SomeFile.less : WebCompiler error 0: The --ie-compat option is deprecated, as it has no effect on compilation.

I know that you wrote that you fixed exactly this issue for the release, so this is a bit unexpected.

Steps to recreate

1. Install extension
2. Compile .NET 4.8 web project that includes .less files

Current behavior

Error message, see description

Expected behavior

The *.less files (and other files) should compile without error.

Installed product versions

• Visual Studio: 2020 Enterprise
• This extension: 1.13.4

Description

Incorrect/different SCSS output

Steps to recreate

Using this scss:

%tb {
	border: solid 1px #666;
	&:focus {
		border-color: #000;
	}
}
@each $type in text, search, email, number, tel, time, password {
	input[type=#{$type}] {
		@extend %tb;
	}
}

Current behavior

It's producing output:

input[type=text], input[type=search], input[type=email], input[type=number], input[type=tel], input[type=time], input[type=password], input[type^=date] {
	border: solid 1px #666;
}
  input:focus[type=text], input:focus[type=search], input:focus[type=email], input:focus[type=number], input:focus[type=tel], input:focus[type=time], input:focus[type=password], input:focus[type^=date] {
    border-color: #000; }

Expected behavior

The :focus pseudo class should be after the attribute specifier. It was this way in the VS2019 extension.

input[type=text], input[type=search], input[type=email], input[type=number], input[type=tel], input[type=time], input[type=password], input[type^=date] {
	border: solid 1px #666;
}
  input[type=text]:focus, input[type=search]:focus, input[type=email]:focus, input[type=number]:focus, input[type=tel]:focus, input[type=time]:focus, input[type=password]:focus, input[type^=date]:focus {
    border-color: #000; }

This could be related to the Dart vs Node issue - I'm not sure what the differences are.

Didn't test that but from code analysis looks like there is bug in file: LessCompiler.cs

if (options.IECompat)
  arguments += " --ie-compat";

if (options.StrictUnits)
  arguments += " --strict-units=on";

was changed to:

if (options.IECompat)
  //arguments += " --ie-compat";

if (options.StrictUnits)
   arguments += " --strict-units=on";

which translates to:

if (options.IECompat)
{
    if (options.StrictUnits)
    arguments += " --strict-units=on";
}

so line:

if (options.IECompat)

should also be commented out

Btw: Thanks for your effort to port this project to VS2022

Installed product versions

• Visual Studio: 2015 Community edition, 2017 Pro Edition, 2019 Pro Edition
• This extension: 1.14.2

Description

I tried to open your project in VS 2019 but it did not work: it builds ok, but the extension doesn't install correctly.
Then I tried opening in VS 2015 but it also did not work, because the targeted SDK was too new.
I determined that the best version to open and edit the project is VS 2017, so I tried opening it in VS 2017, but it doesn't work as I get these two errors:

The current .NET SDK does not support targeting .NET Core 3.1.  Either target .NET Core 1.1 or lower, or use a version of the .NET SDK that supports .NET Core 3.1.	C:\Program Files (x86)\Microsoft Visual Studio\2017\Professional\MSBuild\Sdks\Microsoft.NET.Sdk\build\Microsoft.NET.TargetFrameworkInference.targets

The current .NET SDK does not support targeting .NET Standard 2.1.  Either target .NET Standard 1.6 or lower, or use a version of the .NET SDK that supports .NET Standard 2.1.	WebCompiler	C:\Program Files (x86)\Microsoft Visual Studio\2017\Professional\MSBuild\Sdks\Microsoft.NET.Sdk\build\Microsoft.NET.TargetFrameworkInference.targets	

What am I doing wrong? Can you provide the correct steps to correctly open and edit your fork?

Steps to recreate

1. Clone your repo;
2. open it with VS 2015, 2017 or 2019;
3. Try to build the WebCompiler project;
4. See the errors.

Current behavior

I cannot build the project, even after opening it with visual studio 2015, 2017, 2019.

Expected behavior

The solution should open and build fine in VS 2017, and by building the WebCompilerVsix project I should be able to create and install the extension file without any problem.

Installed product versions

• Visual Studio: 19, 22 Preview
• This extension: 1.13.4

Description

Output of the compiled javascript file, that contains an exported function, does not work.

Steps to recreate

1. Create a project (doesn't matter, which type)
2. Add a javascript file with this content
   export function testFunction() { }
3. Compile the file with this extension
4. Execute the output file in the browser (doesn't matter, if it's minified or not)

Current behavior

Compile a javascript file and let the browser load the file. Browser gives an error 'Uncaught ReferenceError: exports is not defined'.

Expected behavior

Compiled file, contains statements, that aren't necessary for javascript files.
The output of the compiled file is this:

"use strict";

Object.defineProperty(exports, "__esModule", {
    value: true
});
exports.testFunction = testFunction;

function testFunction() {}

Object.defineProperty() and exports.testFunction are too much.

Or can i change/set properties, to "modify" the output, like the type of the compilation process as example es6 or es5.
I searched for those properties, but i dont found something.

This extension would be far better if I didn't have to worry about other developers (or myself) forgetting to add new JSX files to the compilerconfig.json file.

Installed product versions

• Visual Studio: 2022 Professional
• This extension: 1.14.2

Description

Assuming there is main.scss file, which imports a _variables.scss file by using @use. Now the _variables.scss file is changed and saved. The expected behaviour would be that the main.scss file is recompiled, however that is not the case. This scenario works when we use @import instead of @use to import the variables.scss file: the main.scss file is recompiled when there are changes in the _variables.scss saved.

Steps to recreate

1. Create a main.scss file and a _variables.scss file.
2. Define a variable in _variables.scss with the content $my-color: blue;
3. Import _variables.scss in main.scss

@use "variables"

.testclass {
    color: variables.$my-color;
}

4. Save the main.scss file and observe the correctly compiled main.css file.
5. Edit and save the _variables.scss file to: $my-color: black;
6. Observe that in the main.css file color is still set to blue

Current behavior

A scss file importing another scss file using @use is not recompiled when the imported file is changed.

Expected behavior

A scss file which imports another scss file using @use should be recompiled when the imported file changes.

Installed product versions

• Visual Studio: 2022
• This extension: 1.14.0

Description

I have SASS file with variables injected as CSS 4 variables values, and they're not replaced by the compilation.

Source file

$test: 1.5rem;
$test2: 2rem;

:root {
    --my-var: $test;
}

.myClass {
    --my-var: $test2;
}

Current behavior

Generated CSS from this extension:

:root {
  --my-var: $test;
}

.myClass {
  --my-var: $test2;
}

Expected behavior

Generated CSS from the original extension (VS 2019):

:root {
  --my-var: 1.5rem; }

.myClass {
  --my-var: 2rem; }

Installed product versions

• Visual Studio: Microsoft Visual Studio Professional 2022 (2) (64-bit) - Current Version 17.2.1

• This extension: 1.14.7

Description

Will not compile after installing VS 2022 pro. No issues when using Community version (now uninstalled) or when using sass compiler in vs code.

Steps to recreate

1. install Extension
2. right click on .scss main file
3. Error: "The system cannot find the file specified (file: main.scss line: 0)

Current behavior

Refuses to compile

Expected behavior

Compiles Sass without throwing an error

Installed product versions

• Visual Studio: 2022 (17.0.1)
• This extension: 1.14.1

Description

SASS compilation is including references to SASS variables in css output when using mixins that assign css variables

Steps to recreate

1. Create a SASS stylesheet that references a mixin from another file
   • Note the mixin takes in multiple parameters:

      @mixin myThemeMixin ($primary, $secondary) {
        :root {
          --my-css-variable: $primary;
          --my-second-variable: darken($secondary, 5%);
        }
      }

   • Referencing style:

      @include myThemeMixin(#181818, #323232);

2. Use WebCompiler to compile the stylesheet

Current behavior

The compiled file contains the SASS variables names instead of the passed variable values

:root {
  --my-css-variable: $primary;
  --my-second-variable: darken($secondary, 5%);
}

Expected behavior

The compiled stylesheets should not contain any references to SASS variables

After upgrading from the previous of WebCompiler,

We have a scss file with an @import path like this:
@import "../../../../../lib/bootstrap/scss/bootstrap.scss";

I had to edit all of them to include an additional ../
@import "../../../../../../lib/bootstrap/scss/bootstrap.scss";

Also I had to manually uninstall the old WebCompiler nuget package and it would be nice if this one automatically removed what is now a duplicate package and targets.

Thank you very much for getting this updated to 2022!

Installed product versions

• Visual Studio: 2022

Description

Node-sass is deprecated, we should use Dart-sass
https://itnext.io/the-css-preprocessor-dilemma-node-sass-or-dart-sass-32a0a096572

Current behavior

A deprecated SASS compiler is used.

Expected behavior

None deprecated version of SASS compiler should be used.

Installed product versions

Version 17.0.0 Preview 3.1
VisualStudio.17.Preview/17.0.0-pre.3.1+31612.314
Microsoft .NET Framework
Version 4.8.04084

Installed Version: Enterprise

Web Compiler   1.13.002
Compiler for LESS, Sass and CoffeeScript files

Description

VSIX does not install Json library.

Using Task Runner, produces the following error:

Unhandled Exception: System.IO.FileNotFoundException: Could not load file or assembly 'Newtonsoft.Json, Version=9.0.0.0, Culture=neutral, PublicKeyToken=30ad4fe6b2a6aeed' or one of its dependencies. The system cannot find the file specified.
   at WebCompiler.ConfigHandler.GetConfigs(String fileName)
   at WebCompiler.Program.GetConfigs(String configPath, String file) in W:\Git\Light Speed Solutions\WebCompiler\src\WebCompiler\Program.cs:line 55
   at WebCompiler.Program.Main(String[] args) in W:\Git\Light Speed Solutions\WebCompiler\src\WebCompiler\Program.cs:line 14

Adding this library directly to vsix install path resolves error - download

Installed product versions

• Visual Studio: 2022 Enterprise
• This extension: 1.14.4

Description

SCSS values are not compiled in css variables

Current behavior

$scss-color-value: #ffffff
--css-variable: $scss-color-value;
//After Rendering
--css-variable: $scss-color-value;

Expected behavior

$scss-color-value: #ffffff
--css-variable: $scss-color-value;
//After Rendering
--css-variable: #ffffff;

Installed product versions

• Visual Studio: Community 22
• This extension: [example 1.14.0]

Description

map-get commands in scss files are not being replaced with values for css variables.

Steps to recreate

1. put in scss file:

#test {
--mainBackground: map-get($colors, 'red');
background: map-get($colors, 'red');
}

2. Compile.

Current behavior

When compiled, the background value will be correctly replaced with the red from the $colors array, but the --mainBackground variable does not:

#test {
--mainBackground: map-get($colors, 'red');
background: #FF0000;
}

Expected behavior

The css variable should also have the value replaced.

Installed product versions

• Visual Studio: Community 17.1.1
• This extension: 2.9.3

Description

When compiling SCSS files the CSS file is not generated and this error occurs...

"Unexpected character encountered while parsing value: [. Path 'loadPaths', line 3, position 16"

This error started after upgrading VS to 17.1.1 from previous latest version.

Same error happens in another solution that was also working fine before the VS upgrade.

Any help appreciated!

Hi,

I'm currently using something like this to compile Handlebars templates:

call node node_modules\handlebars\bin\handlebars Static\Templates -f Static\Templates\templates.js.

It takes all templates in the directory and compiles them to a single script.

Can this be achieved with WebCompiler? It seems to me that it is not because only a single input file (with extension) can be specified but I wanted to check to be sure.

Thanks a lot!

Installed product versions

• Visual Studio: 2022
• This extension: 1.14.8

Description

Bootstrap SASS compiled with get-function inside CSS

Steps to recreate

1. Download "bootstrap.sass" version 5.1.3 using Nuget.
2. Compile the 'bootstrap.scss' file
3. Use the '.bg-primary' class on an element

Current behavior

"get-function" is in the CSS content

Expected behavior

"get-function" should not be in the CSS

Installed product versions

• Visual Studio: Visual Studio Enterprise 2022
• This extension: 1.14.2

Description

Less didn't compile properly on operations with parentheses.

Steps to recreate

1. Place an operation with parentheses in less file, for example : width: (100px - 50px)/2;
2. Compile file to css

Current behavior

The result in css file is width: 50px/2;

Expected behavior

The result in css should be width: 25px;

Installed product versions

• Visual Studio: 2022 Community
• This extension: 1.14.7

Description

Any attempt to compile a SCSS file generates an error message ("The system cannot find the path specified."). The error list message identifies the location of the error as the file to be compiled, at line 0.

Steps to recreate

1. Rolled a fresh .NET Framework 4.8 MVC project, which compiles and runs fine.

2. Added a test.scss file in the Content folder. It contains a single rule: a { text-decoration: underline; }.

3. Right-click on test.scss and select "Web Compiler/Re-compile file". The compilerconfig.json and compilerconfig.json.defaults files are generated by the web compiler. The compilerconfig.json appears to be correct:
   [
   {
   "outputFile": "Content/test.css",
   "inputFile": "Content/test.scss"
   }
   ]

4. The error noted above is generated on the Error List, and no test.css is created.

Expected behavior

Generate the css file from the scss file. This works fine in VS 2019.

Edit: Have quite a few extensions installed. Tried disabling all others. No change to the behavior.
Edit: When I created the solution using the VS template, I did not select the option to put the solution and project in same folder.

Installed product versions

• Visual Studio: 2022 Professional
• This extension: 1.14.2

Description

The extension is working great for development, but the nuget package that is used for enabling compilation on build systems outside of visual studio is not updated. Hence the build fails when any new features of autoprefixer are used.

Steps to recreate

1. Set "autoPrefix": ">= 0.5%, last 2 major versions, not dead, Chrome >= 60, Firefox >= 60, Firefox ESR, iOS >= 12, Safari >= 12, not Explorer <= 11" in sass section of the compilerconfig.json.defaults file.
2. Build the project using MSBuild 17.

Current behavior

Build fails with the following error,
WebCompiler error 0: Browserslist: caniuse-lite is outdated. Please run next command npm update

Expected behavior

Scss files should get compiled and build successfully with autoPrefix: ">= 0.5%, last 2 major versions, not dead, Chrome >= 60, Firefox >= 60, Firefox ESR, iOS >= 12, Safari >= 12, not Explorer <= 11".