madskristensen / webcompiler Goto Github PK

Compiling file.scss files gives a dialog error saying something like "compilerconfig.json is wrong format". A unchecked-out file.css under source control (readonly file) seems to cause it.

Work around: setting all "includeInProjects" to "false" in compilerconfig.json, and removing all file.css from source control (TFS in my case). Or manually checking out all *.css and *.min.css in compilerconfig.json.

The extension was working fine. I made some minor changes to some of the files (moved some content around, removed a file, renamed another file) and added @import (reference) ... lines to the top of some of the files and now the extension crashes every time it tries to compile. It turns out, I missed updating an import statement in my main .less file, so the compiler was failing with a file not found error, but that was causing the extension to crash Visual Studio.

It feels like this should support file globs. I have about 12 LESS files in a pages directory that all need their own individual compiled files. Right now I think I need to manually add a JSON entry for each one. I'd rather do something like:

  {
    "files": "Content/pages/*.less",
    "minify": {
      "enabled": false
    },
    "includeInProject": true,
    "sourceMap": false,
    "options": {}
  },

It was great to jump to less file just by pressing F12 inside the cshtml file against class name, please add that to Web Compiler.

Hi, I have come across a bug in the compilation of a mixin. I am using a loop like this:

.height-loop(@height, @divider) when (@divider > 0) {
    &.h-@{divider} {
        height: @height * @divider;
    }
    .height-loop(@height, (@divider - 1));
}

and it seems to be ignoring the & on the second line so when it creates the css it produces code like

.class .h-1 { 

and not

.class.h-1 {

Note: This worked correctly in VS2013 and the old version of web essentials.

Thanks!

Hi,
Would it be possible to update the LESS compiler ? It seems it's still in LESS version 1.5.0.
That would be great because it introduces a lot of new enhancements!
Thx,
Nico.

PS: I would also thank you for your amazing work on web essentials & compiler. I do understand your choices. Bravo!

Create a less file in a directory that has a space in the name causes failure in compilation.
create a path ~/styles/with spaces/myStyles.less
Right click and select Compile file.
the urls are added to the compilerconfig.json, however it doesnt handle the spaces correctly.

{
    "outputFile": "styles/with%20spaces/myStyles.css",
    "inputFile": "styles/with%20spaces/myStyles.less",
    ....
}

Simply replacing the %20 with a space allows compilation to continue.

Not sure why, but when you right-click a file and choose "Compile file...", it opens up a dialog with the Project root folder selected, not the actual file's folder...

That ain't right, right?

Right! 👍 😄

Thanks!

Webcompiler always got error on compile less hat less file but Web Essentials doesn't!

https://github.com/madebysource/lesshat

I'm using the following configuration:

{
  "outputFile": "Content/licenses/Demo/styles.css",
  "inputFile": "Content/licenses/Demo/styles.scss",
  "minify": {
    "enabled": false
  },
  "includeInProject": true,
  "sourceMap": true,
  "options": {}
}

The generated .css file contains the following at the end:

/*# sourceMappingURL=styles.scss.map */

However, the generated source map has the filename styles.css.map. (Note the different extension.)

Why is that? I would like to use the CoffeeScript compiler also in Windows Store JavaScript projects.

This makes it easy to see in an open file if it has been generated or not

It would be nice to be able to right click on the compilerconfig.json file and have it generate an equivalent (gulp|grunt)file.js file.

I can't get this mixin to compile using WebCompiler:

.pxToRem(@property, @px) {
    @{property}: unit(@px, px);
    @{property}: unit(@px / 10, rem);
}

body {
    color: aliceblue;
    .pxToRem(font-size; 16);
} 

It should be perfectly valid LESS, but I'm receiving this error:

(WebCompiler) Expected '}' but found '{' on line 3 in file '...'

Web Essentials 2013 had a preview window that would show the compiled output side-by-side with the source file. However, the implementation in WE wasn't good enough, so new logic has to be invented for this.

Here are the features it needs:

1. Shortcut key to show/hide
2. Keyboard input support
3. Line numbers
4. Maintain scroll position after source file save

Moving to dotless means a step back in functionality compared to what was offered with Web Essentials and its integration with NodeJS:

• No support for detached rulesets
• No support for canon JS-based plugin architecture
• No support for inline JS expressions
• No support for inline JS plugin references (2.5.0 @plugin keyword)
• Incomplete, buggy support for the :extend feature
• Partial implementation of the default function library
• On functions that are implemented; output that is not compliant with the official Less compiler
• etc.

The dotless compiler is (on some fronts quite literally) years behind the curve on language features compared to the official Less compiler and switching the WebCompiler package to it is a BAD IDEA.

This will lead to headaches with third-party frameworks like Bootstrap, which base themselves on the state of the official compiler. This will lead to user confusion between usage of dotless by the WebCompiler package and usage of lessc with the grunt/gulp/etc. asset pipeline in VS2015 proper.

It is also a kick to the groin for those that have used and become accustomed to the features of the real compiler with WebEssentials 2013; have written nice and clean Less files making use of new language constructs and that now have to either give up on their compilation and preview tooling with VS 2015 or have to face stripping down their code to work with the subpar dotless implementation.

To display some warnings about the quality, see https://github.com/twitter/recess

Less file:

.WhiteBackgroundColor
{
    background-color: #FFF;
}

Output (.css file):

.WhiteBackgroundColor {
  background-color: white;
}

Expected output (.css file):

.WhiteBackgroundColor {
  background-color: #FFF;
}

Clicked on a .less file.

It would be very good if the suggested file name could have the required extension (.css) added by default. Currently it shows the name of the HTML file, and offers to overwrite it if I don't add the extension.

In Web Essentials 2013 it was possible to Change the Less File while Debugging.

Now when you want to make a Change to less file you have to stop Debugging and start Debugging again.

Right clicking on a .less file and selecting "Compile file..." will add it to the compilerconfig.json file. Repeating that process allows me to compile the file again, which results in a second entry in the compilerconfig.json file. It seems like I should only be able to add the file once.

Hi Mads,

First of all, I love this extension!

But there seems to be a problem when I try to compile the following Sass,

I have a list looking somthing like this:

$mdi-list-icons: ('navigation-menu': '\e8a1', ...);

And my loop through the list looks like this:

@each $mdi-icon-name, $mdi-icon-value in $mdi-list-icons {
  .#{$mdi-prefix}#{$mdi-icon-name}:before {
    content: $mdi-icon-value;
  }
}

the problem is, that the result looks like this: (which the font can't interpret)

.mdi-navigation-menu:before {
  content: ''; }

Where it should look like this:

.mdi-navigation-menu:before {
  content: '\e8a1'; }

The sass file is from: http://materializecss.com/

And they write that this bug should have been fixed in Sass v. 3.3.x. is it possible to update it?
Because their fix gives the same error

It would be nice if autoprefixing was an option like it was in WE 2013.

Some people are never satisfied :-)

Hi, I'm getting the following error "Expected '}' but found 'n' on line 272 in file ...\tables.less". The thing is, if I compile that file alone (by modifying it of by selecting "Recompile all files" over the compilerconfig.json) I don't get any errors and the file gets correctly compiled.

That line (272 of table.less) has this code:

animation-name: bounce_loadingProgress;

I'm not sure what other information might be useful for you...

Add support for Autoprefixer to deal with CSS vendor prefixes (or give us a way we can hook it into the compilation process ourselves.)

I am using Bootstrap 3 and I noticed that Hex Color code gets replaced by color name.
For example: normalize.less file has below class

mark {
  background: #ff0;
  color: #000;
}

and in CSS it gets compiled to

mark {
  background: yellow;
  color: black;
}

I have gone thru existing issues but wasn't able to find any existing issue. Also this doesn't happen for all the cases for example:

pre,
  blockquote {
    border: 1px solid #999;
    page-break-inside: avoid;
  } 

gets compiled to

pre,
 blockquote {
    border: 1px solid #999999;
    page-break-inside: avoid;
}

Why files are not grouped anymore, like they were on WE 2013? Is there some configuration we can do to achieve it?

Before:

Now:

Having a strong set of unit tests are important. Right now only basic unit tests exist, so more is needed

The compilers should be internally async to allow for parallel execution of the various compiler configs

I don't see this problem with my Grunt task that runs at build-time (also using StrictMath), only with compile-on-save via Web Compiler (which I use to enable BrowserLink to do its thing when I CTRL+S).

Problem is that this in my .less file:
top: -100px
becomes this in the CSS:
top: - 100px

This is invalid CSS and isn't accepted by browsers.

I have Visual Studio 2015 Enterprise (rtm), and a web application started in VS 2013 (so it's not using new ASP.NET 5 features). I just started trying to use LESS, so I installed Web Essentials 2015 and Web Compiler.

I renamed Site.css to Site.less and added it for compilation (right-click, chose Compile File, told it to save back to the same folder as the .less file).

Now when I save it, I get an error dialog:

The odd thing is that it does re-generate the css file. Also, right-clicking the .less file in solution explorer and choosing "recompile file" works without any error dialog.

Here's my compilerconfig.json file, which I have not modified myself:

    [
      {
        "outputFile": "Content/Site.css",
        "inputFile": "Content/Site.less",
        "minify": {
          "enabled": true
        },
        "includeInProject": true,
        "sourceMap": false,
        "options": {}
      }
    ]

If the css file is not checked out prior to building, the build will fail with access denied to the file. I am on version 1.0.85

When saving an individual file, I am seeing all my of my less files in the compilerconfig.json being compiled. I have quite a few less files and having it go through all my files seems like an unnecessary waste.

I know this works with VS2015 RC so when I saw it was available for 2013 Update 4 I immediately downloaded it. However there are no right-menus or or sign of functionality.

So what does this mean? Did you or Microsoft accidentally flag it as available for 2013 or is 2013 now supported (then how do I get it to work)?

As the title says, the extension is unable to compile lesshat. I know that this might be a dotless issue but right now I'm unable to get a binary compiled version of it. Please close the issue if that's the case.

This looks like an excellent extension. Is there any chance it can be enabled for Visual Studio 2013?

These will show up in the JSON editor when the mouse hovers over each property

This may be out of scope for this extension, but what would be really nice is if it could detect file renames and automatically update import statements (or the equivalent include type statement) with the new name.

For example, I have a main.less which looks like:

@import "file`.less";
@import "file1.less";
@import "file2.less";

If I rename file1.less to buttons.less, it would be great if the extension could detect that and automatically update the @import "file1.less" line to @import "buttons.less".

When doing a build in VSO I receive the following error:

d:\a\src\packages\BuildWebCompiler.1.0.73\build\BuildWebCompiler.targets (7): Syntax error in d:\a\src\Dashboard.Web\compilerconfig.json

Here is what is in my complerconfig.json

[
{
"outputFile": "Content/Dashboard.css",
"inputFile": "Content/Dashboard.less",
"minify": {
"enabled": true
},
"includeInProject": true,
"sourceMap": false,
"options": {}
}
]

I'm using version 1.0.73 of WebCompiler

Thanks,
Matt

In Web Essentials 2013, this wasn't an issue, but when I use the new Web Compiler in VS2015, I'm trying to use this code to copy styles from one element to another (using Bootstrap 3.x).

My Site.less file

@import (reference) "Bootstrap/mixins/alerts.less";
@import (reference) "Bootstrap/alerts.less";
.validation-summary-errors {
  .alert; .alert-danger;
}

Bootstrap/alerts.less

.alert {
  padding: @alert-padding;
  margin-bottom: @line-height-computed;
  border: 1px solid transparent;
  border-radius: @alert-border-radius;

  // Headings for larger alerts
  h4 {
    margin-top: 0;
    // Specified for the h4 to prevent conflicts of changing @headings-color
    color: inherit;
  }

  // Provide class for links that match alerts
  .alert-link {
    font-weight: @alert-link-font-weight;
  }

  // Improve alignment and spacing of inner content
  > p,
  > ul {
    margin-bottom: 0;
  }

  > p + p {
    margin-top: 5px;
  }
}
// ... skipping
.alert-danger {
  .alert-variant(@alert-danger-bg; @alert-danger-border; @alert-danger-text);
}

Bootstrap/mixins/alert.less:

.alert-variant(@background; @border; @text-color) {
  background-color: @background;
  border-color: @border;
  color: @text-color;

  hr {
    border-top-color: darken(@border, 5%);
  }
  .alert-link {
    color: darken(@text-color, 10%);
  }
}

Site.css Output

This invalid CSS gets put at the very top of the generated file.

 {
  margin-top: 0;
  color: inherit;
}
 {
  font-weight: bold;
}
 {
  margin-bottom: 0;
}
 {
  margin-top: 5px;
}
 {
  border-top-color: #e4b9c0;
}
 {
  color: #843534;
}

I've also run into an issue where the file doesn't compile, but I don't get any sort of message, and nothing in the Output window I can see.

Add a way to configure an executable that will run after the compilation has ran. In this way, I can add autoprefixer again (running from node, of course).
Maybe you can add this option to the bundler too (to run between bundling and minification).

Hi!
I installed the extension. Right clicked and chose "Compile file" on all my less-files.
They were all added to the compilerconfig.json in project root, as described.
But nothing gets compiled.

• Editiing and saving one of the less files does nothing.
• Right-clicking compilerconfig.json and choosing "Re-compile all files" does nothing.

css-files are not updated and no error messages pop up anywhere.

Is there some pre-requisite not mentioned in the "Getting started"-section?

I have the strictMath option set to true, but my css is still coming out wrong. Using 1.0.64 and i don't get any errors when saving either the less or the config files.

compilerconfig.json

[
    {
        "includeInProject": true,
        "inputFile": "file.less",
        "minify": {
            "enabled": true
        },
        "options": {
            "strictMath": true
        },
        "outputFile": "file.css"
    }
]

file.less

...
.class-name {
    height: calc(85% - 60px);
}
...

file.css - actual

...
.class-name {
    height: calc(25%);
}
...

file.css - expected

...
.class-name {
    height: calc(85% - 60px);
}
...