def styles_in_shared_media_queries(style_blocks)
      style_blocks.group_by(&:media).map do |media_types, blocks|
        css_rules = blocks.map(&:to_s).join("\n")

        if media_types == ['all']
          css_rules
        else
          "@media #{media_types.join(', ')} {\n#{css_rules}\n}"
        end
      end
    end
def styles_in_shared_media_queries(style_blocks)
      style_blocks.group_by(&:media).map do |media_types, blocks|
        css_rules = blocks.map(&:to_s).join("\n")

        if media_types == ['all']
          css_rules
        else
          "@media #{media_types.join(', ')} {\n#{css_rules}\n}"
        end
      end
    end
For performance reasons, we should group styles with the same media types within
 one media query instead of creating thousands of media queries.
 https://github.com/artifex404/media-queries-benchmark
 Example result: ["@media(max-width: 600px) { .col-12 { display: block; } }"]
 @param {Array<StyleBlock>} style_blocks  Style blocks that could not be inlined
 @return {Array<String>}