Search code examples
javascriptregexpostcss

Regular Expression for matching breakpoints in PostCSS

I am working in a project where i need to get rid of the css code in the breakpoints higher than 600px

I have to use some regular expressions to achieve it and i am bit stuck to detect some breakpoints

I have dome most of them though.

You can check out here https://regex101.com/r/2FIadh/1/

I have put in the Test String all the breakpoints of the project, ( unfortunately some values are in px and other in em ) so i can check if i have the right match or not

At the moment i am struggling to to get rid of these

(min-width: 64.0625em) 
(min-width: 90em)
(min-width: 768px)
(min-width: 61.25em)
(min-width: 67.5em)
(min-width: 77.1875em)
(min-width: 700px)
(min-width: 850px)

and keep these

(min-width: 0px) and (max-width: 1363px)
(min-width: 0px) and (max-width: 1363px)

how can i detect those?

Solution

  • I'm not used to doing regex, so it took me a long time, but I gave it a try:

    Matching values higher than 600px

    For this, we can match:

    • A) 4+ digits without leading zeroes
    • B) 3 digits starting with 7, 8 or 9
    • C) 3 digits starting with 6 but not followed by 00
    • D) 600 followed by decimals which are not only zeroes

    which can be translated to:

        |        A         |        B        |        C          |       D        | 
/(0*([1-9]\d{3,}[\.\d]*|[7-9]\d{2}[\.\d]*|6(?!00)\d{2}[\.\d]*|600\.\d*[1-9]\d*)\s*px)/g


    var str = " 0222px | 365px | 435.765 px | 600.0000px | 600px | 600.03px | 601 px | 765px | 800.01px | 1000 px | 15562px";
var res = str.replace(/(\s0*([1-9]\d{3,}[\.\d]*|[7-9]\d{2}[\.\d]*|6(?!00)\d{2}[\.\d]*|600\.\d*[1-9]\d*)\s*px)/g,"<b>$1</b>");
document.body.innerHTML = res.split('|').join('<br>');
    b{ color: red }

    Matching values higher than 60em

    For this, we can match:

    • A) 3+ digits without leading zeroes
    • B) 2 digits starting with 7, 8 or 9
    • C) 2 digits starting with 6 but not followed by 0
    • D) 60 followed by decimals which are not only zeroes

    which can be translated to:

        |        A         |       B      |      C        |       D       | 
/(0*([1-9]\d{2,}[\.\d]*|[7-9]\d[\.\d]*|6(?!0)\d[\.\d]*|60\.\d*[1-9]\d*)\s*em)/g


    var str = " 022em | 36em | 43.765 em | 60.0000em | 60em | 60.03em | 61 em | 75em | 80.01em | 100 em | 1562em";
var res = str.replace(/(\s0*([1-9]\d{2,}[\.\d]*|[7-9]\d[\.\d]*|6(?!0)\d[\.\d]*|60\.\d*[1-9]\d*)\s*em)/g,"<b>$1</b>");
document.body.innerHTML = res.split('|').join('<br>');
    b{ color: red }

    Combining these for your use case

    /(\(min-width:\s*0*(([1-9]\d{3,}[\.\d]*|[7-9]\d{2}[\.\d]*|6(?!00)\d{2}[\.\d]*|600\.\d*[1-9]\d*)\s*px|(([1-9]\d{2,}[\.\d]*|[7-9]\d[\.\d]*|6(?!0)\d[\.\d]*|60\.\d*[1-9]\d*)\s*em))\))/g


    var str = "(min-width: 1025px) | (min-width: 0) and (max-width: 35.625em) | (min-width: 480px) | (min-width: 1025px) | (min-width: 1025px) | (min-width: 64.0625em) | (min-width: 600px) | (min-width: 768px) | (min-width: 1364px) | (max-width: 30em) | (min-width: 48.125em) and (max-width: 54.375em) | (min-width: 48.1875em) and (max-width: 85.25em) | (min-width: 54.375em) and (max-width: 85.25em) | (min-width: 63.4375em) and (max-width: 85.25em) | (min-width: 85.25em) | (min-width: 1364px) | (min-width: 0px) and (max-width: 1363px) | (min-width: 375px) | (min-width: 0px) and (max-width: 1363px) | (min-device-pixel-ratio: 2) | (min-width: 35.625em) | (min-width: 29.375em) | (min-width: 44.375em) | (min-width: 49.375em) | (min-width: 61.25em) | (min-width: 67.5em) | (min-width: 77.1875em) | (min-width: 700px) | (min-width: 850px) | (min-width: 480px) and (max-width: 1866.66667px) | (min-width: 600px) and (max-width: 767px), (min-width: 769px)  | (min-width: 37.5em) and (max-width: 63.9375em) | (min-resolution: 1.5dppx) | (min-width: 30em) | (min-width: 37.5em) | (min-width: 64.0625em) | (min-width: 90em) | (min-width: 570px)";
var res = str.replace(/(\(min-width:\s*0*(([1-9]\d{3,}[\.\d]*|[7-9]\d{2}[\.\d]*|6(?!00)\d{2}[\.\d]*|600\.\d*[1-9]\d*)\s*px|(([1-9]\d{2,}[\.\d]*|[7-9]\d[\.\d]*|6(?!0)\d[\.\d]*|60\.\d*[1-9]\d*)\s*em))\)[^|]*)/g,"<b>$1</b>");
document.body.innerHTML = res.split('|').join('<br>');
    b{ color: red }

    Edited Regex101

    Regex diagram

    (from regexper.com) enter image description here