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

Struggling to make the toggle button appear on the bootstrap navbar when shrinking the resolution

What is the best way to navigate between different areas of an image using html and javascript?

Developing a PHP foreach loop that integrates seamlessly with a W3 responsive grid

Utilizing LESS for Mixing

What is the best way to restrict the length and number of lines in a textarea based on pixel dimensions?

Struggles with CSS hover effects on text and buttons

transition effect of appearing and disappearing div

Execute a jQuery function every time the class of the parent container div changes

What's the best way to make sure my table fits perfectly within its container's width?

If the iframe's CSS source is updated, the parent's CSS source will also change

Tips for styling React Material-UI list items with fontAwesome icons and Tailwind.css

Refresh the data in a table upon clicking the menu

A button that is positioned with a low z-index may be unresponsive to

The elements within the flexbox are being truncated when viewed on smaller devices

Button for browsing weekly recipes in HTML table format

Can a local image be incorporated into an HTML or CSS project through the use of Javascript or alternative methods?

Struggling to create responsive embedded videos?

When jQuery adds new elements, their CSS may not be applied accurately

Angular's table data display feature is unfortunately lacking

What steps can I take to ensure these three images all have identical height and width?