Remove Duplicate CSS Declarations Across Multiple Files

boostrap theming -- How to remove duplicate styles?

It depends on what you @import. Looking at mytheme.scss, the entire Bootstrap SASS is imported, creating full duplicate code in the final CSS.

Instead you can pick specific SASS files to import and look at the option variables which also effects what CSS is generated. For example, setting $enable-grid-classes: false will prevent duplication of the entire grid system in the generated CSS.

How to remove duplicate CSS styles from a string using JavaScript?

The OP asked if it could be done and specified (as I read it) the removal of duplicate rules. A simplistic approach:

• Split by rule end }
• Trim off white space and re-attach delimiter
• Filter out duplicates
• Join into string

var style = ".button:hover {background: #fff} p.test {font-size: 11px} .button:hover {background: #fff} .button:hover {background: #fff} #one .button {color: #000} #two .button {color: #000}";

var uniqueRules = style

  .split('}')

  .map(function(rule) {

    return rule ? rule.trim() + '}' : '';

  })

  .filter(function(rule, index, self) {

    return self.indexOf(rule) === index;

  })

  .join(' ');

console.log(uniqueRules);

Related Topics