@media queries not retain

[proyb6]

Using the example config, how do you retain CSS with @media ... which is being strip away after CSS purge.

For responsive CSS, if I have mb2 classes in global scope and the same classes name is in @media... scope, now do you retain 2 duplicates classes for responsive website?

{
  "options": {
    "css_output": "purged.min.css",
    "css": "dist/r.css",
    
    "html": "dist",
    
    "trim": true,
    "trim_keep_non_standard_inline_comments": false,
    "trim_removed_rules_previous_comment": true,
    "trim_comments": false,
    "trim_whitespace": false,
    "trim_breaklines": false,
    "trim_last_semicolon": false,
    
    "shorten": true,
    "shorten_zero": false,
    "shorten_hexcolor": false,
    "shorten_hexcolor_extended_names": false,
    "shorten_hexcolor_UPPERCASE": false,
    "shorten_font": false,
    "shorten_background": true,
    "shorten_background_min": 2,
    "shorten_margin": false,
    "shorten_padding": false,
    "shorten_list_style": false,
    "shorten_outline": false,
    "shorten_border": false,
    "shorten_border_top": false,
    "shorten_border_right": false,
    "shorten_border_bottom": false,
    "shorten_border_left": false,
    "shorten_border_radius": false,
    
    "format": true,
    "format_4095_rules_legacy_limit": false,
    "format_font_family": true,
    
    "special_convert_rem": false,
    "special_convert_rem_browser_default_px": "16",
    "special_convert_rem_desired_html_px": "10",
    "special_convert_rem_font_size": true,
    
    "special_reduce_with_html" : false,
    "special_reduce_with_html_ignore_selectors" : [
      "@-ms-",
      ":-ms-",
      "::",
      ":valid",
      ":invalid",
      "+.",
      ":-"
    ],
    
    "generate_report": false,
    "verbose": true,
    
    "bypass_media_rules": true,
    "bypass_document_rules": false,
    "bypass_supports_rules": true,
    "bypass_page_rules": false,
    "bypass_charset": false,
    
    "zero_units": "em, ex, %, px, cm, mm, in, pt, pc, ch, rem, vh, vw, vmin, vmax",
    "zero_ignore_declaration": []
    
  }
}

[AndrewEQ]

Hi there, since in the global scope, the duplicate rules will be reduced, within @media queries, the rules will also be reduced. The actual media queries themselves will not be reduced by default because the "bypass_media_rules" option is true.

Removing duplicates is at the core of CSS-Purge, so its a bit strange to want it to not reduce duplicates, if you can provide a small example of CSS to motivate your scenario to disable reduction, I may consider creating an option for it.

Here's an example of what I'm talking about...

.panel {
	background-color: blue;
}

.panel {
	background-color: red;
}


@media (max-width: 320px) {
	
	.panel {
		background-color: green;
	}

	.panel {
		background-color: red;
	}
}

@media (max-width: 320px) {
	
	.panel {
		background-color: green;
	}

	.panel {
		background-color: red;
	}
}

Will become...

.panel {
    background-color: red;
}

@media (max-width:320px) {
    .panel {
        background-color: red;
    }
}

@media (max-width:320px) {
    .panel {
        background-color: red;
    }
}