Background image path in CSS files - Liferay 6.2

Question

I am working with Lifera migration project. Project was created in Liferay 6.1 and now I am migrating in to Liferay 6.2.

I am facing issue in image path for all CSS files. While migrating in Liferay 6.2 it's appending Theme and CSS folder path to all images.

Image path in Liferay 6.1 : background:url(../../images/xyz.jpg)
Image path in Liferay 6.2 : background:url(/myThemeName/css/../../images/xyz.jpg)

Project derectory is like this:

 _diffs
    |- CSS
       |- common
         |- module1.css
         |- module2.css
         |- module3.css
      |- library
         |- plugin1.css
         |- plugin2.css
         |- plugin3.css
      |- utility
         |- tool1.css
         |- tool2.css
         |- tool3.css
   |- images
      |- All Images
   |- js
      |- JavaScript files

This product is huge and difficult to update all background URLs.
Is it possible to get rid of "theme-name/css" from path in CSS files.

Mouthful

Answer 1

I would suggest you to simply write a code that would open css file -> read and then find a property that matches -> background:url() and simply append the url with /myThemeNames/css/ to it.

The piece of could be written in any language, php, python, java, c++. Whatever you are comfortable with. Even if you have 50 css files. You can simply pass the files names to filestream and it should do it for you.

Let me know if you require any help in writing the code.

Sheik

Yes I know that, but by manually it will become hard code, if in future theme name got updated then again have to performe same exersize. I am looking for some dynamic solution. – Mouthful

Answer 2

Check this out: https://github.com/philidem/rewrite-css-urls

rewrite-css-urls is something I've used in the past on bigger sites (4000+ pages) where I ran into a similar issue. The following should step you through the process:

Installation: npm install rewrite-css-urls --save

Usage:

Find:

require('rewrite-css-urls').find(cssCode, function(urlRef) {
    console.log('Found URL: ' + urlRef.url);
});

Find & Replace:

var transformedCssCode = require('rewrite-css-urls').findAndReplace(cssCode, {
    replaceUrl: function(urlRef) {
        return urlRef.url.replace('blah.com', 'mycompany.com');
    }
});

Should you need any additional information about its use and function, check out this post about it on NPMJS.com

I hope this can be of help in resolving your issue!

Arable

This project is in Liferay 6.2, and I am bit new for this npm. And liferay itself compile CSS file. So even I push complied version of CSS file. Liferay 6.2 will minified all CSS file and append "Theme Path" again. – Mouthful