Built style sheets are duplicating a lot of information including comments.

[BE-Webdesign]

Our include path in webpack is being included multiple times over, which causes

/* Hugo's new WordPress shades of gray, from http://codepen.io/hugobaeta/pen/grJjVp */
/* Extra colors, some from https://make.wordpress.org/design/handbook/foundations/colors/ */
/* Other */
/* Editor */
/* Blocks */
/* Media Queries */
/* All media queries currently in WordPress:

min-width: 2000px
min-width: 1680px
min-width: 1250px
max-width: 1120px *
max-width: 1000px
min-width: 769px and max-width: 1000px
max-width: 960px *
max-width: 900px
max-width: 850px
min-width: 800px and max-width: 1499px
max-width: 800px
max-width: 799px
max-width: 782px *
max-width: 768px
max-width: 640px *
max-width: 600px *
max-width: 520px
max-width: 500px
max-width: 480px *
max-width: 400px *
max-width: 380px
max-width: 320px *

Those marked * seem to be more commonly used than the others.

Let's try and use as few of these as possible, and be mindful about adding new ones, so we don't make the situation worse

*/
/**
 * Long content fade mixin
 *
 * Creates a fading overlay to signify that the content is longer
 * than the space allows.
 */
/**
 * Editor Width mixin
 *
 * This mixin seeks to take the vinegar out of the responsive alignments in the editor.
 */
@-webkit-keyframes animate_fade {
  from {
    opacity: 0;
    -webkit-transform: translateY(4px);
            transform: translateY(4px); }
  to {
    opacity: 1;
    -webkit-transform: translateY(0px);
            transform: translateY(0px); } }
@keyframes animate_fade {
  from {
    opacity: 0;
    -webkit-transform: translateY(4px);
            transform: translateY(4px); }
  to {
    opacity: 1;
    -webkit-transform: translateY(0px);
            transform: translateY(0px); } }

@-webkit-keyframes move_background {
  from {
    background-position: 0 0; }
  to {
    background-position: 28px 0; } }

@keyframes move_background {
  from {
    background-position: 0 0; }
  to {
    background-position: 28px 0; } }

To be loaded for every rule. We could shrink our css files by A LOT, if we fix this. The commented part is stripped out on npm run build, but the animation styles are loaded over and over still.

[youknowriad]

This has improved with #3804. I think we should just close this issue as we improved here.

It's not perfect but unless there's tree-shaking in Sass :) we can't fix this issue while keeping some generic mixins. Maybe we could move some of these styles to the WP common styles but we'll still need a generic mixin.

[BE-Webdesign]

Closing see #3804.