CSS not working when I add it to multiple files using the Regular expression mode

dr ramaanand

My CSS is not working when I add it to multiple files using the Regular expression mode.
I added this:-

<style>
.container {
    display: flex;
}
.container > div {}
}
@media (max-width: 480px) {
.left {
  width: 150px;
  border-width:1px;
  border-style:solid;
  border-color:lightblue;
  padding-top:10px;
}
.right {
  width: 140px;
  border-top:1px solid lightblue;
}
}
</style>

However, I observe that if I add it to multiple files using the Regular expression mode, it doesn’t work - I have to copy and paste it manually for it to work.

Is this a bug or is there a way to do it correctly?

dr ramaanand

@dr-ramaanand Are the brackets or the @ in the @media not being recognised when added to multiple files using the Regular Expression mode? Is there a way to solve this problem without manual copying and pasting for the CSS to work?

Alan Kilborn

@dr-ramaanand said in CSS not working when I add it to multiple files using the Regular expression mode:

if I add it to multiple files using the Regular expression mode

What does that mean?

If you are getting the multiline text you show into the Replace with box (presumably by selecting the text, pressing Ctrl+h, then using the “swap” button to copy from find to replace), then changing to Find in Files and adjusting Find what to be what you need, then your problem is that the replacement is dropping the ( and ) characters and you need to manually change them to be “escaped”: \( and \).

But you’ve given us little information besides “CSS not working…it doesn’t work”, so really at this point your problem could be many things.

dr ramaanand

@Alan-Kilborn yes you are right - the brackets were missing and now I have added them by escaping them with a slash, that is \( and \). Thank you very much

Alan Kilborn

@dr-ramaanand said in CSS not working when I add it to multiple files using the Regular expression mode:

the brackets were missing

Probably if you had called them by their correct name – parentheses – I wouldn’t have been so unsure of your problem statement.

But really, providing more info up front would have been a good idea. I had to do a lot of supposition to provide my first answer – at least it was good supposition. :-)

dr ramaanand

@Alan-Kilborn I believe you were able to guess what the problem is because you have been working on these RegExes for years. Thanks again!

guy038

Hello, @dr-ramaanand, @alan-kilborn and All,

PLEASE, just skip this post, which is erroneous, and see my next one, below !

Ah…, of course, you cannot do it that way because when you try to insert a multi-line text into the Replace zone of the Replace, Find in Files or Find in Projects tab, you just get the very first line of your text

First, I verified, from this link https://www.w3schools.com/html/html_css.asp, that the internal multi-lines CSS section ( <style>...........</style> ) is generally located, right before the HTML </head> tag

So, I supposed that you want to insert the CSS part, below :

<style>
.container {
    display: flex;
}
.container > div {}
}
@media (max-width: 480px) {
.left {
  width: 150px;
  border-width:1px;
  border-style:solid;
  border-color:lightblue;
  padding-top:10px;
}
.right {
  width: 140px;
  border-top:1px solid lightblue;
}
}
</style>

Right before the </head> tag of some of your HTML files, don’t you ?

If so, here is the correct way to insert this multi-lines text !

Copy all your CSS section in a new tab
Verify that the last line </style> is followed with a line-break
Open the Replace dialog ( Ctrl + H )
- Uncheck all box options
- SEARCH \R
- REPLACE \\r\\n
- Check the Wrap around option
- Select the Regular expression search mode
- Click on the Replace All button

You should get this text :

<style>\r\n.container {\r\n    display: flex;\r\n}\r\n.container > div {}\r\n}\r\n@media (max-width: 480px) {\r\n.left {\r\n  width: 150px;\r\n  border-width:1px;\r\n  border-style:solid;\r\n  border-color:lightblue;\r\n  padding-top:10px;\r\n}\r\n.right {\r\n  width: 140px;\r\n  border-top:1px solid lightblue;\r\n}\r\n}\r\n</style>\r\n

Now, in order to test my method :

Copy this tiny HTML text, below, in an other new tab

<!DOCTYPE html>
<html>
<head>
</head>
<body>

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

</body>
</html>

Re-open the Replace dialog ( Ctrl + H )
- Uncheck all box options
- SEARCH (?=</head>)
- REPLACE <style>\r\n.container {\r\n display: flex;\r\n}\r\n.container > div {}\r\n}\r\n@media (max-width: 480px) {\r\n.left {\r\n width: 150px;\r\n border-width:1px;\r\n border-style:solid;\r\n border-color:lightblue;\r\n padding-top:10px;\r\n}\r\n.right {\r\n width: 140px;\r\n border-top:1px solid lightblue;\r\n}\r\n}\r\n</style>\r\n
- Check the Wrap around option
- Select the Regular expression search mode
- Click on the Replace All button

You should be left with your expected OUTPUT text :

<!DOCTYPE html>
<html>
<head>
<style>
.container {
    display: flex;
}
.container > div {}
}
@media max-width: 480px {
.left {
  width: 150px;
  border-width:1px;
  border-style:solid;
  border-color:lightblue;
  padding-top:10px;
}
.right {
  width: 140px;
  border-top:1px solid lightblue;
}
}
</style>
</head>
<body>

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

</body>
</html>

Voila ;-))

IMPORTANT : Note that the method to change any multi-lines text ( with search = \R and replacement = \\r\\n ) is not specific to your HTML case.

It will, indeed, allow you to fill in the resulting multi-lines text into the Replace with : zone, which will be inserted at the exact location defined in the Find what : zone !!

Best Regards,

guy038

guy038

Hi, @dr-ramaanand, @alan-kilborn and All,

I’ve just seen that I did a mistake regarding the syntax of the parentheses in the Replacement zone. Give me some minutes and I’ll post the correct solution !

BR

guy038

dr ramaanand

@guy038 I had done exactly as you typed above and the parentheses did not get replicated where it had to be reproduced. The solution given by @Alan-Kilborn has now helped me fix it. Thanks anyway!

dr ramaanand

I see that this page is showing up in the search results of the search engines like Google and msn, so for the benefit of those landing on this webpage, let me tell you that I did as @guy038 typed above, then, I replaced @media max-width: 480px with @media max-width: \(480px\) with the Regular expression mode and got this result: @media max-width: (480px) which is what I wanted.

guy038

Hello, @dr-ramaanand, @alan-kilborn and All,

Yes, @dr-ramaanand, you’re right : we have to escape the parentheses, but also to escape the escape character, too, if it occurs as a literal !!

Thus, this is an UPDATED version of my previous post !

Ah…, of course, you cannot do it that way because when you try to insert a multi-line text into the Replace zone of the Replace, Find in Files or Find in Projects tab, you just get the very first line of your text

First, I verified, from this link https://www.w3schools.com/html/html_css.asp, that the internal multi-lines CSS section ( <style>...........</style> ) is generally located, right before the HTML </head> tag

So, I supposed that you want to insert the CSS part, below :

<style>
.container {
    display: flex;
}
.container > div {}
}
@media (max-width: 480px) {
.left {
  width: 150px;
  border-width:1px;
  border-style:solid;
  border-color:lightblue;
  padding-top:10px;
}
.right {
  width: 140px;
  border-top:1px solid lightblue;
}
}
</style>

Right before the </head> tag of some of your HTML files, don’t you ?

If so, here is the correct way to insert a multi-lines text !

Copy all your CSS section in a new tab
Verify that the last line </style> is followed with a line-break
Open the Replace dialog ( Ctrl + H )
- Uncheck all box options
- SEARCH ([()\\])|\R
- REPLACE ?1\\\1:\\r\\n
- Check the Wrap around option
- Select the Regular expression search mode
- Click on the Replace All button

You should get this text :

<style>\r\n.container {\r\n    display: flex;\r\n}\r\n.container > div {}\r\n}\r\n@media \(max-width: 480px\) {\r\n.left {\r\n  width: 150px;\r\n  border-width:1px;\r\n  border-style:solid;\r\n  border-color:lightblue;\r\n  padding-top:10px;\r\n}\r\n.right {\r\n  width: 140px;\r\n  border-top:1px solid lightblue;\r\n}\r\n}\r\n</style>\r\n

Now, in order to test my method :

Copy this tiny HTML text, below, in an other new tab

<!DOCTYPE html>
<html>
<head>
</head>
<body>

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

</body>
</html>

Re-open the Replace dialog ( Ctrl + H )
- Uncheck all box options
- SEARCH (?-i)(?=</head>)
- REPLACE <style>\r\n.container {\r\n display: flex;\r\n}\r\n.container > div {}\r\n}\r\n@media \(max-width: 480px\) {\r\n.left {\r\n width: 150px;\r\n border-width:1px;\r\n border-style:solid;\r\n border-color:lightblue;\r\n padding-top:10px;\r\n}\r\n.right {\r\n width: 140px;\r\n border-top:1px solid lightblue;\r\n}\r\n}\r\n</style>\r\n
- Check the Wrap around option
- Select the Regular expression search mode
- Click on the Replace All button

You should be left with your expected OUTPUT text :

<!DOCTYPE html>
<html>
<head>
<style>
.container {
    display: flex;
}
.container > div {}
}
@media (max-width: 480px) {
.left {
  width: 150px;
  border-width:1px;
  border-style:solid;
  border-color:lightblue;
  padding-top:10px;
}
.right {
  width: 140px;
  border-top:1px solid lightblue;
}
}
</style>
</head>
<body>

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

</body>
</html>

Voila ;-))

IMPORTANT : Note that the method to change any multi-lines text ( with search = ([()\\])|\R and replacement = ?1\\\1:\\r\\n ) is not specific to your HTML case.

It will, indeed, allow you to fill in the resulting multi-lines text into the Replace with : zone, which will be inserted, identically, at the exact location defined in the Find what : zone !!

Best Regards,

guy038

dr ramaanand

@guy038 merci beaucoup!

Alan Kilborn

@guy038

It seems like your solution is a long route when the OP was looking for a short route.

Much shorter is what I guessed at and seemingly what the OP was already doing:

select the replacement text in the editor
press Ctrl+f
swap Find what and Replace with (using the button)
overwrite Find what
“escape” any ( or ) characters in Replace with
execute Replace in Files

guy038

Hello, @alan-kilborn and All,

Alan, I grant you : your idea is more direct and simpler than mine ;-))

However, let’s suppose that an OP is working on a Lisp program and that he wants to insert this Lisp module which converts any roman number into its decimal equivalent number

For instance, in Lisp, with the program below and the question (trad 'MCMXCV), it would return 1995 ( I do not know this language and I just suppose that it’s true ! )

(de trad (Z) (cond  ;                \* ROMAN number -> DECIMAL number *\
					(( eq Z 'I) 1)
					(( eq Z 'V) 5)
					(( eq Z 'X) 10)
					(( eq Z 'L) 50)
					(( eq Z 'C) 100)
					(( eq Z 'D) 500)
					(( eq Z 'M) 1000)
					((atom Z) (trad (explodech Z)))
					((null (cdr Z)) (trad (car Z)))
					((< (trad (car Z)) (trad (cadr Z)))
					(- (trad (cdr Z)) (trad (car Z))))
					(t (+ (trad (car Z)) (trad (cdr Z)) )) ))

No doubt that using my mehtod will be safer !!

Note that I included a LISP comment, which begins with a semi-colon, adding a comment with a C-like syntax in order to place anti-slashes in my example !

After aplying the regex S/R :

SEARCH ([()\\])|\R
REPLACE ?1\\\1:\\r\\n

against this List module, you would get the text below, which could be correctly inserted, as it, in a larger Lisp program !

\(de trad \(Z\) \(cond  ;                \\* ROMAN number -> DECIMAL number *\\\r\n					\(\( eq Z 'I\) 1\)\r\n					\(\( eq Z 'V\) 5\)\r\n					\(\( eq Z 'X\) 10\)\r\n					\(\( eq Z 'L\) 50\)\r\n					\(\( eq Z 'C\) 100\)\r\n					\(\( eq Z 'D\) 500\)\r\n					\(\( eq Z 'M\) 1000\)\r\n					\(\(atom Z\) \(trad \(explodech Z\)\)\)\r\n					\(\(null \(cdr Z\)\) \(trad \(car Z\)\)\)\r\n					\(\(< \(trad \(car Z\)\) \(trad \(cadr Z\)\)\)\r\n					\(- \(trad \(cdr Z\)\) \(trad \(car Z\)\)\)\)\r\n					\(t \(+ \(trad \(car Z\)\) \(trad \(cdr Z\)\) \)\) \)\)\r\n

Best Regards,

guy038

Well, this example is a bit “far-fetched”, but, as I knew that the Lisp language abuses parentheses, I couldn’t resist ! LOL

Alan Kilborn

@guy038 said in CSS not working when I add it to multiple files using the Regular expression mode:

No doubt that using my method will be safer !!

Understood.
I was just trying to help OP by sticking with his exact problem.
It’s fine to present more complicated situations in follow-on discussions, as you did.

dr ramaanand

@guy038 The gist of the matter is that parentheses, that is rounded, simple brackets have to be escaped with a backslash like \( and \) or else they will be skipped during any replacement

Alan Kilborn

@dr-ramaanand said in CSS not working when I add it to multiple files using the Regular expression mode:

The gist of the matter is that parentheses…

Perhaps equally important for possible future readers of this topic is showing a technique to get multiline text into the Replace with box! :-)

dr ramaanand

For those who’ve searched online and come here, let me tell you that I had already made the mistake of not escaping the parentheses, just as @guy038 gave as a solution first which was faulty as it skipped adding the parentheses. I had ended up with @media max-width: 480px {. However, you need not fret if you have made the same mistake, just put @media max-width: 480px in the Find field, select the Regular expression mode, put @media \(max-width: 480px\) and hit the Replace in files button and you will end up with the correct result which is @media (max-width: 480px) {

dr ramaanand

@Alan-Kilborn said in CSS not working when I add it to multiple files using the Regular expression mode:

Perhaps equally important for possible future readers of this topic is showing a technique to get multiline text into the Replace with box! :-)

Yes, for multiple lines to be added, we have to put Line1\r\nLine2\r\nLine3\r\nLine4 in the Replace in files field to get one line below the other.

Alan Kilborn

@dr-ramaanand said:

for multiple lines to be added, we have to put Line1\r\nLine2\r\nLine3\r\nLine4

OK, so now any possible benefit of the original technique is probably lost to future readers. :-(