Utilizing Capture Groups in CSS File for Regex Search and Replace

Question

Utilizing Capture Groups in CSS File for Regex Search and Replace

When it comes to extracting critical styles from a CSS file wrapped in a @critical rule, I run into some issues:

@critical {

    .foo {
        ...
    }

    @media bar {
        ...
    }
}

The command I'm using for extraction involves sed search and replace with the following regex (using -E flag on Mac):

sed -i '' -E 's,@critical[^{]*{\s*((.|\s)*)[^}]*},\1,g' style.css

However, while the regex itself works fine when tested on RegExr, it doesn't seem to work within the sed command. What could be the issue here?

Thank you for your help!

—————

Edit:

Upon further research, I discovered that sed does not support multiline regex, which explains my problem. While minifying the CSS allows the command to work, I am still looking for a solution that can handle non-minified multiline CSS files (perhaps perl? awk?).

css regex bash sed

Answer 1

Answer №1

If you prefer using perl, you can give this a try:

perl -0777 -i.bak -pe 's,\@important[^{]*{\s*((.|\s)*)[^}]*},$1,g' design.css

After running this command, your design.css file will be transformed into:

.header {
        ...
    }

    @media screen {
        ...
    }

The -0777 option instructs perl to read the entire file as one string, allowing the regex to match across multiple lines.
Using -i.bak will edit the file in-place while keeping a backup with a .bak extension. If you don't need a backup, simply use -i.
The regex pattern used is very similar to yours, just note the backslash before the at-sign to prevent interpretation as an array variable name. Also, replace \1 with $1 in the replacement for compatibility with perl.

Answer 2

If you prefer using perl, you can give this a try:

perl -0777 -i.bak -pe 's,\@important[^{]*{\s*((.|\s)*)[^}]*},$1,g' design.css

After running this command, your design.css file will be transformed into:

.header {
        ...
    }

    @media screen {
        ...
    }

The -0777 option instructs perl to read the entire file as one string, allowing the regex to match across multiple lines.
Using -i.bak will edit the file in-place while keeping a backup with a .bak extension. If you don't need a backup, simply use -i.
The regex pattern used is very similar to yours, just note the backslash before the at-sign to prevent interpretation as an array variable name. Also, replace \1 with $1 in the replacement for compatibility with perl.

Utilizing Capture Groups in CSS File for Regex Search and Replace

Answer №1

Similar questions

Scrolling seamlessly within a container that is fixed in position

Menu Design Inspired by Amazon Using jQuery

Unable to locate the sibling element using CSS Selector with Selenium

Condition in Bash script for verifying JSON response

To view the element when the browser is not in full screen mode, the body overflow (both horizontally and vertically) can be used instead of resizing

Creating a canvas that adjusts proportionally to different screen sizes

CSS: Indication that the Text is Extending Beyond its Container

What causes the circular progress bar to disappear when hovering over the MUI React table?

Activate the overflow feature within native-base cards

a new webpage beginning from a different location

Handling the width and borders of CSS cells that are positioned outside of a table

Incorporate Bootstrap into your Bigcommerce stencil theme for seamless design integration

Tips for positioning a div within a grid:

How come my gifs appear tiny even though I've adjusted their width to 32% each?

Animating the Bookmark Star with CSS: A Step-by-Step Guide

Tips on eliminating expansion upon button click in header within an Angular application

Align images to the left in Typora for a cleaner look

Troubleshooting problem with CSS overflow and absolute positioning on Android Browser

Unveiling the intricacies of CSS specificity

Adjust the position of a textarea on an image using a slider