Taritsyn / BundleTransformer

Bundle Transformer - a modular extension for System.Web.Optimization (also known as the Microsoft ASP.NET Web Optimization Framework).
Apache License 2.0
130 stars 19 forks source link

Message: Operation on an invalid type #48

Closed sreejithk2000 closed 3 years ago

sreejithk2000 commented 3 years ago

I am getting this error when trying to bundle the following less file. I can reproduce this in BundleTransformer.Less v 1.10.0 and v 1.12.0

@primary-grey-50: #b4bbc2;

.generate-shades(lighten(@primary-grey-50, 7%));

/*Code to generate the classes for nested section pipes using recursive approach.*/
.generate-shades(@color, @selector: ~'.nested', @index: 3) when (@index > 0) {
    @elem: @selector + ~'.nested';

    @{elem} {
        border-left: 3px solid @color;
    }

    .generate-shades(lighten(@color, 7%), @elem, @index - 1);
}

Error

During translation of LESS code, readed from the file '/Styles/Common.less', to CSS code syntax error has occurred.
See more details:

Error type: Syntax
Message: Operation on an invalid type
File: /Styles/Common.less
Line number: 14
Source error:

Line 14: .generate-shades(lighten(@primary-grey-50, 7%));

Description: An unhandled exception occurred during the execution of the current web request. Please review the stack trace for more information about the error and where it originated in the code.

Exception Details: BundleTransformer.Core.Translators.AssetTranslationException: During translation of LESS code, readed from the file '/Styles/Common.less', to CSS code syntax error has occurred.
See more details:

Error type: Syntax
Message: Operation on an invalid type
File: /Styles/Common.less
Line number: 14
Source error:

Line 14: .generate-shades(lighten(@primary-grey-50, 7%));

Stack Trace

[AssetTranslationException: During translation of LESS code, readed from the file '/Styles/Common.less', to CSS code syntax error has occurred. 
See more details:

Error type: Syntax
Message: Operation on an invalid type
File: /Styles/Common.less
Line number: 14
Source error:

Line 14: .generate-shades(lighten(@primary-grey-50, 7%));

]
   BundleTransformer.Less.Translators.LessTranslator.InnerTranslate(IAsset asset, LessCompiler lessCompiler, Boolean enableNativeMinification) +451
   BundleTransformer.Less.Translators.LessTranslator.Translate(IAsset asset) +118
   BundleTransformer.Core.HttpHandlers.AssetHandlerBase.InnerTranslateAsset(String translatorName, IAsset asset, ITransformer transformer, Boolean isDebugMode) +135
   BundleTransformer.Less.HttpHandlers.LessAssetHandler.TranslateAsset(IAsset asset, ITransformer transformer, Boolean isDebugMode) +49
   BundleTransformer.Core.HttpHandlers.AssetHandlerBase.ProcessAsset(String assetVirtualPath, String bundleVirtualPath) +271
   BundleTransformer.Core.HttpHandlers.AssetHandlerBase.GetProcessedAssetContent(String assetVirtualPath, String bundleVirtualPath) +310
   BundleTransformer.Core.HttpHandlers.AssetHandlerBase.ProcessRequest(HttpContextBase context) +312

[HttpException (0x80004005): During translation of LESS code, readed from the file '/Styles/Common.less', to CSS code syntax error has occurred. 
See more details:

Error type: Syntax
Message: Operation on an invalid type
File: /Styles/Common.less
Line number: 14
Source error:

Line 14: .generate-shades(lighten(@primary-grey-50, 7%));

]
   BundleTransformer.Core.HttpHandlers.AssetHandlerBase.ProcessRequest(HttpContextBase context) +1310
   System.Web.CallHandlerExecutionStep.System.Web.HttpApplication.IExecutionStep.Execute() +872
   System.Web.HttpApplication.ExecuteStepImpl(IExecutionStep step) +220
   System.Web.HttpApplication.ExecuteStep(IExecutionStep step, Boolean& completedSynchronously) +94
Taritsyn commented 3 years ago

Hello, Sreejith!

This is a syntax error in LESS-code itself. I tested this with the original library:

Less.js v3.9.0 (used by the BundleTransformer.Less) lessc-3 9 0-operation-on-an-invalid-type

Less.js v4.1.1 (latest available version) lessc-4 1 1-operation-on-an-invalid-type

I recommend that you contact to author of the generate-shades mixin.

sreejithk2000 commented 3 years ago

Hi Taritsyn,

I did not realize the problem was with Less parser. Thanks for showing me the path. I did a little bit of digging and found that the problem was this line. @elem: @selector + ~'.nested';

I changed it to @elem: @selector ~'.nested'; and the error went away and the CSS looks perfect. Thanks for your time.