Refactoring CSS Using PHPStorm

Question

I have the following CSS div / class mark-up

.myclass #myid{
    width: ;
    height: ;
}

This is in about a dozen CSS files. Each CSS file has different widths and heights defined. I'd like to replace all of the markup in each file with a single consistent mark-up. Something like this

.myclass #myid{
    width: 20px;
    height: 30px;
}

Is this possible with PHPStorm?

LazyOne · Accepted Answer · 2013-09-19 11:29:23Z

Yes -- it's possible to find such exact matches (specific selector that has "width" and "height" properties defined in that order). You just need some rather basic knowledge of regular expressions.

Use "Replace In Path" dialog (Edit | Find | Replace in Path Ctrl+Shift+R)
Activate "Regular Expression" option
Set correct scope (Whole Project or specific scope/folder/etc)
Type your regular expressions:
- Text to find: (\.myclass \#myid\s*\{\n\s*width:\s*)\d+(px;\n\s*height:\s*)\d+(px;)
- Replace with: $122$233$3
Hit the button

NOTES:

The regex for "replace with" will set "width" to 22 and "height" to 33 -- edit them as required.
Same with "text to find" regex -- the one which I write will not find if you write something like width: 0; ("px" unit is omitted). I've built it based on your example, so if it differs you will have to adjust it yourself.
That regex will not work if you have any other property before "width" .. or in different order.

enter image description here

Collectives™ on Stack Overflow

Refactoring CSS Using PHPStorm

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related