regex101: JavaScript Match Workspace

Explanation

Pro

1st Alternative((\s*?(?:\/\*[\s\S]*?\*\/)?\s*?@media[\s\S]*?){([\s\S]*?)(?!.*}})}\s*?(?:}))

Group 1((\s*?(?:\/\*[\s\S]*?\*\/)?\s*?@media[\s\S]*?){([\s\S]*?)(?!.*}})}\s*?(?:}))

Group 2(\s*?(?:\/\*[\s\S]*?\*\/)?\s*?@media[\s\S]*?)

\s*?any whitespace character, repeated any number of times

Non-Capturing Group(?:\/\*[\s\S]*?\*\/)?

?repeats the group contents below at most once:

\/the literal / (47₁₀ / 57₈ / 2F₁₆)

\*the literal * (42₁₀ / 52₈ / 2A₁₆)

Character Class[\s\S]*?

*?matches any number of characters from the set below:

\sany whitespace character

\Sany non-whitespace character

\*the literal * (42₁₀ / 52₈ / 2A₁₆)

\/the literal / (47₁₀ / 57₈ / 2F₁₆)

\s*?any whitespace character, repeated any number of times

@mediathe literal text @media (case insensitive)

Character Class[\s\S]*?

*?matches any number of characters from the set below:

\sany whitespace character

\Sany non-whitespace character

{the literal { (123₁₀ / 173₈ / 7B₁₆)

Group 3([\s\S]*?)

Character Class[\s\S]*?

*?matches any number of characters from the set below:

\sany whitespace character

\Sany non-whitespace character

Negative Lookahead(?!.*}})

.*any character (except for line terminators), repeated any number of times

}}the literal text }}

}the literal } (125₁₀ / 175₈ / 7D₁₆)

\s*?any whitespace character, repeated any number of times

Non-Capturing Group(?:})

}the literal } (125₁₀ / 175₈ / 7D₁₆)

2nd Alternative(([\s\S]*?){([\s\S]*?)(?![\s\S]?}})[\s\S]})

Group 4(([\s\S]*?){([\s\S]*?)(?![\s\S]?}})[\s\S]})

Group 5([\s\S]*?)

Character Class[\s\S]*?

*?matches any number of characters from the set below:

\sany whitespace character

\Sany non-whitespace character

{the literal { (123₁₀ / 173₈ / 7B₁₆)

Group 6([\s\S]*?)

Character Class[\s\S]*?

*?matches any number of characters from the set below:

\sany whitespace character

\Sany non-whitespace character

Negative Lookahead(?![\s\S]?}})

Character Class[\s\S]?

?matches at most one character from the set below:

\sany whitespace character

\Sany non-whitespace character

}}the literal text }}

Character Class[\s\S]

\sany whitespace character

\Sany non-whitespace character

}the literal } (125₁₀ / 175₈ / 7D₁₆)

Global pattern flags

g modifier: global. Finds all matches instead of stopping after the first

i modifier: insensitive. Matches without distinguishing uppercase and lowercase letters

Quick Reference

26 tokens

Regular Expression

((\s*?(?:\/\*[\s\S]*?\*\/)?\s*?@media[\s\S]*?){([\s\S]*?)(?!.*}})}\s*?(?:}))|(([\s\S]*?){([\s\S]*?)(?![\s\S]?}})[\s\S]})

New

.someClass{margin:0;}.someClass{margin : {{ test}};}

@media -ro-pdfreactor {

    .top-logo {background-image: url({{ test }}) !important;}
   
    .header-background {
        background-color: cmyk(54%,27%,36%,82%) !important;
    }
   
    .headline {
        color: cmyk(54%,0%,100%,0%) !important;
    }
   
    .body-text-container {
        color: cmyk(54%,27%,36%,82%) !important;
    }
   
    .cta {
        color: cmyk(54%,27%,36%,82%) !important;
    }
}


                .brand-user-logo {
    background-image: url("https://example.com/image.png");
}

.brand-company-logo {
    background-image: url("");
}

.brand-primary-color {
    color: rgb(19, 44, 69);
}

.brand-secondary-color {
    color: rgb(236, 194, 117);
}

.brand-primary-bg-color {
    background-color: rgb(19, 44, 69);
}

.brand-secondary-bg-color {
    background-color: rgb(236, 194, 117);
}

.brand-primary-brdr-color {
    border-color: rgb(19,44,69)gb(19, 44, 69);
    border-left-color: rgb(19, 44, 69);
}

.bra

Extraction

.someClass{margin:0;}.someClass{margin : {{ test}};}

@media -ro-pdfreactor {

    .top-logo {background-image: url({{ test }}) !important;}
   
    .header-background {
        background-color: cmyk(54%,27%,36%,82%) !important;
    }
   
    .headline {
        color: cmyk(54%,0%,100%,0%) !important;
    }
   
    .body-text-container {
        color: cmyk(54%,27%,36%,82%) !important;
    }
   
    .cta {
        color: cmyk(54%,27%,36%,82%) !important;
    }
}


                .brand-user-logo {
    background-image: url("https://example.com/image.png");
}

.brand-company-logo {
    background-image: url("");
}

.brand-primary-color {
    color: rgb(19, 44, 69);
}

.brand-secondary-color {
    color: rgb(236, 194, 117);
}

.brand-primary-bg-color {
    background-color: rgb(19, 44, 69);
}

.brand-secondary-bg-color {
    background-color: rgb(236, 194, 117);
}

.brand-primary-brdr-color {
    border-color: rgb(19,44,69)gb(19, 44, 69);
    border-left-color: rgb(19, 44, 69);
}

.bra