How do I remove CSS comments use javascript?

Question

var css = `
.test {
  background-image: url(//www.google.com/image/1.png); // goole iamge
}
@font-face {
    font-display: auto;
    font-family: vant-icon;
    font-style: normal;
    font-weight: 400;
    src: url(https://at.alicdn.com/t/c/font_2553510_kfwma2yq1rs.woff2?t=1694918397022)
            format("woff2"),
        url("https://at.alicdn.com/t/c/font_2553510_kfwma2yq1rs.woff?t=1694918397022")
            format("woff");
}
/**
  I‘am commonts
*/
`

Above code that I want to remove all the commoents. but it is too hard, becasue the code hava keywrok that like https://, url(//xxx). How to resolve this problem?

This is the incorrect way

var re2 = /\/\*[\s\S]*?\*\/|(?<=[^:])\/\/.*|^\/\/.*/g; // incorrect

// this code is incorrect

Expect

CSS code

.test {
  background-image: url(//www.google.com/image/1.png);
}
@font-face {
    font-display: auto;
    font-family: vant-icon;
    font-style: normal;
    font-weight: 400;
    src: url(https://at.alicdn.com/t/c/font_2553510_kfwma2yq1rs.woff2?t=1694918397022)
            format("woff2"),
        url("https://at.alicdn.com/t/c/font_2553510_kfwma2yq1rs.woff?t=1694918397022")
            format("woff");
}

This code is correct. the clean-css is work, but how to use the simple way?

Answer 1

If you want to remove valid CSS comments and preserve formatting, you could use this regex:

const css = `.test {
  background-image: url(//www.google.com/image/1.png);
}
@font-face {
    font-display: auto;
    font-family: vant-icon; 
    font-style: normal;
    font-weight: 400;
    src: url(https://at.alicdn.com/t/c/font_2553510_kfwma2yq1rs.woff2?t=1694918397022)
            format("woff2"),
        url("https://at.alicdn.com/t/c/font_2553510_kfwma2yq1rs.woff?t=1694918397022")
            format("woff");
}
/**
  Some comment
*/ body {
  color: /* some nice
color */ gold;
}`;

console.log(css.replace(/\/\*.*?\*\//gsm, ""));

And if you want to also remove some single-line comments like // Some comment which would make it more a SCSS syntax you could use (untested):

const css = `.test {
  background-image: url(//www.google.com/image/1.png); // goole iamge
}
@font-face {
    font-display: auto;
    font-family: vant-icon; ////// blah!!!
    font-style: normal;
    font-weight: 400;
    src: url(https://at.alicdn.com/t/c/font_2553510_kfwma2yq1rs.woff2?t=1694918397022)
            format("woff2"),
        url("https://at.alicdn.com/t/c/font_2553510_kfwma2yq1rs.woff?t=1694918397022")
            format("woff");
}
/**
  Some comment
*/ body {
  color: /* some nice
color */ gold;
}`;

console.log(css.replace(/\/\*.*?\*\/|\/+[^/)]*?$/gsm, ""));

And here's an in-depth explanation and playground (in case I missed something): Demo on Regex101.com