SASS SCSS translator combined with url transformation

Mar 27, 2014 at 12:26 PM
Edited Mar 27, 2014 at 12:46 PM
Hey guys,

Is there any way I can combine the SASS, SCSS translator with an url transformation? I need to apply an url transformation on all urls included in the style sheet.
The thing I need the SASS translator to go first and then to do the url transformation. The reason for this order is because the .scss is only referencing other .scss files, therefore if the url transformation goes first, it won't find any url in the inclusion lines.

The SASS translation is like below:
var translator = new SassAndScssTranslator();
var transformer = new CssTransformer(new List<ITranslator> { translator });
var bundle = new Bundle("~/bundles/sassbundle/");
bundle.Transforms.Add(transformer);
The url transformation is done using a custom ItemTransform
var urlTransformer = new ProperUrlRewrite();
bundle.Include("~/scss/style.scss", urlTransformer);

public class ProperUrlRewrite : IItemTransform
{
    private static readonly Regex UrlPattern = new Regex("url\\s*\\(['\"]?(?<url>[^)]+?)['\"]?\\)");

    public string Process(string includedVirtualPath, string input)
    {
          //do transformation
    }
}
Any ideas?

Thanks!
Ovidiu
Coordinator
Mar 27, 2014 at 1:01 PM
Hello, Ovidiuolaru!

The following code should work:
var translator = new SassAndScssTranslator();
var transformer = new CssTransformer(new List<ITranslator> { translator });
var urlTransformer = new ProperUrlRewrite();

var bundle = new Bundle("~/bundles/sassbundle/");
bundle.Include("~/scss/style1.scss", urlTransformer);
bundle.Include("~/scss/style2.scss", urlTransformer);
...
bundle.Transforms.Add(transformer);
bundles.Add(bundle);
I want to note, that a custom ItemTransform is running before Sass- and SCSS-translation.

What URL transformation you want to make? BundleTransformer.Less, BundleTransformer.LessLite and BundleTransformer.SassAndScss by default correctly resolve relative paths without custom ItemTransform. Relative paths in static CSS-files resolves a BundleTransformer.Core.

Also recommend you to read the «Using with CssRewriteUrlTransform» discussion.
Mar 27, 2014 at 1:55 PM
Hello Taristyn,

Thanks for the quick response.

I need a custom url transformation and this is for sure. I need to load images from a cdn server.

If ItemTransform is running before SASS - SCSS translation, and the scss files I include in my bundle are containing only @import clauses of other .scss files, is it ItemTransform capable to do the transformation for the urls?

If the order would be adjustable, I could run first the SCSS translation, get the css and with it apply the url transformation. But with this order, I am not able to achieve what I need.

At this point, it is still not working.

Thanks,
Ovidiu
Coordinator
Mar 27, 2014 at 2:17 PM
I understood the essence of problem.

Try to write a custom bundle transformation:
public sealed class ProperUrlRewrite : IBundleTransform
{
        public void Process(BundleContext context, BundleResponse response)
        {
            string content = response.Content;
            string newContent;

            //do transformation

            response.Content = newContent;
        }
}
Then add an instance of the ProperUrlRewrite class after instance of the CssTransformer class in the list of bundle transformations.
var translator = new SassAndScssTranslator();
var cssTransformer = new CssTransformer(new List<ITranslator> { translator });
var urlTransformer = new ProperUrlRewrite();

var bundle = new Bundle("~/bundles/sassbundle/");
bundle.Include("~/scss/style1.scss");
bundle.Include("~/scss/style2.scss");
...
bundle.Transforms.Add(cssTransformer);
bundle.Transforms.Add(urlTransformer);
bundles.Add(bundle);
Mar 27, 2014 at 2:24 PM
Thanks a lot! I will try this approach.

Ovidiu
Mar 27, 2014 at 2:42 PM
It works! Thanks again Taritsyn!
Coordinator
Mar 27, 2014 at 2:48 PM
Excellent!