Combres and DotLessCssFilter

Question

Well in short term I can't get it to work. The filter doesn't seem to apply it self.

I'm trying to get combres to work with my MVC 3 razor application. And I've got everything to work except the DotLessCssFilter.

In the documentation it says In order to apply a filter to your resource sets, you need to modify your Combres config file

I've modified the combres.config like this:

<combres xmlns='urn:combres'>
    <filters>
        <filter type="Combres.Filters.DotLessCssFilter, Combres" acceptedResourceSets="dotLessCss" />
    </filters>
    <resourceSets url="~/combres.axd" defaultDuration="30" defaultVersion="1" defaultVersionGenerator="Combres.VersionGenerators.Sha512VersionGenerator">
        <resourceSet name="siteCss" type="css">
            <resource path="~/UI/Styles/1140.css" />
            <resource path="~/UI/Styles/typeimg.css" />
            <resource path="~/UI/Styles/layout.css" />
        </resourceSet>
        <resourceSet name="siteJs" type="js">
            <resource path="~/UI/Scripts/opt/util.js" />
            <resource path="~/UI/Scripts/opt/core.js" />
        </resourceSet>
    </resourceSets>
</combres>

And it combines the files and minifies as it should.

In one of my files I have a simple less-syntax:

@sprite: url(/ui/styles/sprite.png);

.foo {
  background-image: @sprite;
}

But it seems that it's never put through the filter.

Don't know if this is a MVC problem or a general one.

Anyone used this filter successfully?

Never mind! (EDIT)

See answer

Answer 1

Missed the acceptedResourceSets="dotLessCss" it need to have the proper resourceSet name so in my case:

acceptedResourceSets="siteCss"

Answer 2

You don't actually need to have an acceptedResourceSets unless you want to.

Here is a sample Combres.xml file from a test project I did as a POC (see comments):

<?xml version="1.0" encoding="utf-8"?>
<combres xmlns="urn:combres">
  <filters>
    <!-- This filter allows relative urls to be used in Css files like in .NET; e.g. "~/MyFolder/MyPic.png"-->
    <filter type="Combres.Filters.FixUrlsInCssFilter, Combres" />
    <!-- This filter allows you to define variables in a CSS file and reuse them throughout the file. -->
    <filter type="Combres.Filters.HandleCssVariablesFilter, Combres" />
    <!-- This filter changes Combres order of ops so that common css variables can be defined in a single
         file and used throughout multiple css files, instead of having to define them in each file. -->    
    <filter type="Combres.Filters.DotLessCssCombineFilter, Combres" />
  </filters>
  <resourceSets defaultDebugEnabled="false" 
                defaultDuration="30" 
                defaultIgnorePipelineWhenDebug="true" 
                defaultVersion="auto" 
                localChangeMonitorInterval="30" 
                remoteChangeMonitorInterval="60" 
                url="~/combres.axd">
    <resourceSet name="siteCss" type="css">
      <resource path="~/content/Variables.css" />
      <resource path="~/content/Test1.css" />
      <resource path="~/content/Test2.css" />
      <resource path="~/content/Site.css" />
    </resourceSet>
    <resourceSet name="siteJs" type="js">
      <resource path="~/scripts/jquery-1.7.1.min.js" />
      <resource path="~/scripts/jquery-ui-1.8.17.min.js" />
      <resource path="~/scripts/jquery.unobtrusive-ajax.min.js" />
      <resource path="~/scripts/modernizr-1.7.min.js" />      
    </resourceSet>
  </resourceSets>
</combres>

Variables.css:

@sprite: url('~/Content/ui/styles/sprite.png');

Test1.css:

.fooTest1 {background-image: @sprite;}

Test2.css:

.fooTest2 {background-image: @sprite;}

Output (via Firebug .NET tab):

.fooTest1{background-image:url("/Content/ui/styles/sprite.png")}.fooTest2{background-image:url("/Content/ui/styles/sprite.png")}

I would argue that in your sample app, you don't even need to register the DotLessCssFilter and instead should just register the HandleCssVariablesFilter.

You could then define css variables in each of your css files (no reuse).

But if you want to define and share css variables among multiple files, set up the filter registration as I did above, works like a charm.

Buu Nguyen has done a great job on the Combres project.