How can I strip out properties from a CSS file that don't relate to color with regex?-CodePudding

I find myself with a CSS file where I need to strip out all properties that don't relate to color but maintain any custom classes, ids, and standard HTML elements. I initially tried to do this by combining a reverse regex selection in vscode with an entire line selection based on the beginning string, but I'm terrible at regex.

This ^.((?!(color|background-color)).)*$ was as far as I was able to progress, which does eliminate the lines that don't begin with color or background-color from the selection. However, I couldn't determine how to address classes (.), ids(#), and regular HTML elements.

Or, if there is a simpler solution to the problem, please advise.

Thanks, in advance.

Example:

    p {
      line-height: 1.5;
      padding: 10px;
      color: #f4f4f4;
      background-color: #444;
    }

    .my-class {
      line-height: 1.5;
      width: 20%;
      color: #f4f4f4;
      background-color: #444;
    }

    #my-id {
      line-height: 1.5;
      margin: auto;
      color: #f4f4f4;
      background-color: #444;
    }

Should resolve to below with the non-color properties removed

    p {
      color: #f4f4f4;
      background-color: #444;
    }

    .my-class {
      color: #f4f4f4;
      background-color: #444;
    }

    #my-id {
      color: #f4f4f4;
      background-color: #444;
    }

CodePudding user response：

If we assuming the file is more or less formatted, instead of advanced parsing, we can just filter the lines and remove those with : that don't contain the word color and has ';' in them.

EDIT: This might still not be enough, because different files might be formatted differently. I have a better algorithm by checking only the parts between { and } and then splitting by ; and then checking each part for existence of word color...

But for now this might be good enough? For best results, format the css file. Size of css shouldn't be a limit.

var css = `p,
.another,
#id_new_line {
  line-height: 1.5;
  padding: 10px;
  color: #f4f4f4;
  background-color: #444;
}

.my-class,
.my-class::after {
  line-height: 1.5;
  width: 20%;
  color: #f4f4f4;
  background-color: #444;
}

#my-id {
  line-height: 1.5;
  margin: auto;
  color: #f4f4f4;
  background-color: #444;
}`;


var arr = css.split("\n");
var brr = arr.filter(function(line) {
  if (line.indexOf(':') > -1 && line.toLowerCase().indexOf('color') == -1 && line.indexOf(';') > -1) {
    return false
  }
  return true;
});
var new_css = brr.join("\n")
console.log(new_css)

CodePudding user response：

You could try this regex, see regex101 demo

Find: (^\s*(color|background-color).*$)|(^\s*.*{$)|(^\s*}$)|^\s*.*$\n

It is just a big alternation, order is important - the lines you don't want should be last so that more specific groups with { or } or the color properties are matched first.

Note that the last group also includes the trailing \n so that the line is removed in the replace.

Replace: $1$3$4