visual-studioconfigurationright-to-leftweb-essentialsrtlcss

Customise RTLCSS config for VS Web Essentials 2013

Visual Studio Web Essentials has the ability to auto-generate a Right-To-Left variant for CSS files.

enter image description here

This will automatically change CSS properties such as padding-left to padding-right.

However it also does other things such as changing file names from "right.png" to "left.png".

Web Essentials uses RTLCSS to do this which I know can be configured to turn some of these features off.

enter image description here

There is no obvious option in Visual Studio to be able to config RTLCSS through Web Essentials.

I know that Web Essentials is consuming RTLCSS via NodeJS using the following file:

C:\Users{username}\AppData\Local\Microsoft\VisualStudio\12.0\Extensions{webessentials}\Resources\nodejs\tools\server\services\srv-rtlcss.js

I could update the following line in this file to add custom options, however this would be specific to my machine and not the MVC solution I'm using:

var config = configLoader.load(null, path.dirname(sourceFileName), { options: { minify: false } });

Is there a way I can configure RTLCSS for Web Essentials specifically for my MVC Solution?

For example I know Web Essentials allows Solution specific settings via a WebEssentials-Settings.json file. Can I customise this file to use a version of the srv-rtlcss.js file which I could include in my MVC solution?

Solution

  • Configuration can be set using one of the following methods:

    To edit the global RTLCSS settings, open web essentials menu then select "Edit global RTLCSS settings (.rtlcssrc)"

    enter image description here

    This will create the default configuration for you and place it in C:\Users\{username}, To make these settings local, create a copy of .rtlcssrc and place it in your project.